/* ==========================================================================
   Tarqueta Catering — hoja de estilos principal
   --------------------------------------------------------------------------
   Paleta de marca:
     CREMA   #F2EBE2
     VERD    #6A644E
     ROIG    #9D523F
     GRANATE #692E28
     MARRÓ   #3B2A15

   Enfoque: "mobile first". Los tamaños base son los del móvil y a partir de
   ahí se adaptan con medidas fluidas (clamp) y puntos de ruptura para
   tablet (≥768px) y escritorio (≥1024px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Colores de marca */
  --crema: #f2ebe2;
  --verd: #6a644e;
  --roig: #9d523f;
  --granate: #692e28;
  --marro: #3b2a15;

  /* Roles */
  --color-fondo: var(--verd);
  --color-texto: var(--crema);
  --color-boton-fondo: var(--crema);
  --color-boton-texto: var(--marro);

  /* Medidas (fluidas) */
  --ancho-contenido: 540px;
  --radio-boton: 6px;
  --alto-boton: clamp(54px, 13vw, 62px);
  --tamano-logo: clamp(92px, 26vw, 128px);
  --hueco-botones: clamp(14px, 3.5vw, 20px);
  --margen-lateral: clamp(20px, 5vw, 32px);

  /* Tipografía */
  --fuente-titulo: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-texto: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tamano-nombre: clamp(1.35rem, 6vw, 2rem);
  --tamano-boton: clamp(0.95rem, 3.6vw, 1.0625rem);

  /* Transición común */
  --transicion: 160ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset básico
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Estructura de la página
   -------------------------------------------------------------------------- */
.pagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(40px, 11vh, 72px) var(--margen-lateral)
    clamp(32px, 7vh, 56px);
}

.contenido {
  width: 100%;
  max-width: var(--ancho-contenido);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Cabecera: logo + nombre de usuario
   -------------------------------------------------------------------------- */
.perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.perfil__logo {
  width: var(--tamano-logo);
  height: var(--tamano-logo);
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--crema);
}

.perfil__nombre {
  margin: clamp(14px, 3vh, 22px) 0 0;
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-nombre);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--crema);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   5. Lista de botones
   -------------------------------------------------------------------------- */
.enlaces {
  width: 100%;
  margin-top: clamp(26px, 5vh, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--hueco-botones);
}

.boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-boton);
  padding: 12px 58px;
  border: 0;
  border-radius: var(--radio-boton);
  background-color: var(--color-boton-fondo);
  color: var(--color-boton-texto);
  font-family: inherit;
  font-size: var(--tamano-boton);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion);
}

/* El icono va absoluto para que el texto quede centrado con el resto */
.boton__icono {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--roig);
}

.boton__icono svg {
  width: 100%;
  height: 100%;
}

.boton__texto {
  display: block;
}

/* Interacción */
@media (hover: hover) {
  .boton:hover {
    transform: scale(1.015);
    box-shadow: 0 6px 18px rgba(59, 42, 21, 0.28);
  }
}

.boton:active {
  transform: scale(0.985);
}

.boton:focus-visible {
  outline: 3px solid var(--crema);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Aviso flotante ("Enlace copiado")
   -------------------------------------------------------------------------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 5vh, 40px);
  transform: translate(-50%, 16px);
  z-index: 50;
  max-width: calc(100% - 40px);
  padding: 12px 22px;
  border-radius: 999px;
  background-color: var(--marro);
  color: var(--crema);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion),
    visibility var(--transicion);
}

.aviso.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   7. Utilidades
   -------------------------------------------------------------------------- */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   8. Puntos de ruptura
   -------------------------------------------------------------------------- */

/* Tablet ---------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --ancho-contenido: 520px;
    --alto-boton: 62px;
  }

  /* A partir de aquí sobra altura: centramos el bloque verticalmente */
  .pagina {
    justify-content: center;
    padding-top: clamp(48px, 8vh, 80px);
  }
}

/* Escritorio ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root {
    --ancho-contenido: 480px;
    --tamano-logo: 128px;
    --tamano-nombre: 2rem;
    --tamano-boton: 1.0625rem;
    --hueco-botones: 20px;
  }
}

/* Móvil en horizontal o ventanas muy bajas ------------------------------ */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --tamano-logo: 76px;
    --tamano-nombre: 1.35rem;
    --alto-boton: 50px;
    --hueco-botones: 12px;
  }

  .pagina {
    justify-content: flex-start;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .enlaces {
    margin-top: 22px;
  }
}

/* Pantallas muy estrechas (≤340px) -------------------------------------- */
@media (max-width: 340px) {
  .boton {
    padding-left: 50px;
    padding-right: 50px;
  }

  .boton__icono {
    left: 14px;
  }
}

/* Preferencia de movimiento reducido ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}