/* =====================================================================
   PokeBarna · estilo.css
   REFERENCIA A (composición, escala, superficies): recursos/referencias/moderno-fastcasual/sweetgreen
     · la foto es la tarjeta (radio 20 px, sin borde ni sombra)
     · titulares grandes a peso 400 con interlineado corto
     · bandas alternas con 80-120 px de aire
     · un color de acción y uno de marca; el resto lo hace la fotografía
     · botones píldora; enlaces secundarios con flecha, sin fondo
   REFERENCIA B (movimiento): recursos/referencias/street-energia/hungry-tiger → js/animacion.js
   Lo que NO se copia de sweetgreen (es marca, no estilo): su crema y su lima, su verde bosque exacto,
   el wordmark en minúsculas, el carrusel del hero y los macros nutricionales.
   Paleta propia: turquesa de marca + coral de acción sobre blanco roto. Joan pidió "que llame":
   la estructura es tranquila y el color es el que pone la energía.
   ===================================================================== */

:root {
  --fondo:      #F7F7F4;   /* blanco roto, el lienzo */
  --superficie: #FFFFFF;
  --banda:      #D9EDE9;   /* aguamarina, las bandas alternas */
  --tinta:      #17191C;
  --secundario: #5A6168;
  --mar:        #0E7C7B;   /* marca */
  --mar-hondo:  #0A5F5E;
  --coral:      #FF5A3C;   /* acción */
  --coral-vivo: #FF7358;
  --linea:      #E2E2DD;

  --radio:      20px;      /* el de la referencia A, en fotos y tarjetas */
  --radio-peq:  12px;
  --pildora:    999px;

  --aire:       clamp(64px, 9vw, 120px);   /* padding vertical de sección */
  --gutter:     clamp(20px, 5vw, 56px);
  --ancho:      1320px;
  --ancho-estrecho: 760px;

  --display: "Manrope", "Manrope reserva", system-ui, sans-serif;
  --cuerpo:  "Inter", "Inter reserva", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; border-radius: 4px; }

.vo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.salto { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radio-peq) 0; }
.salto:focus { left: 0; }

/* ---------- Escala tipográfica (referencia A: grande y a peso 400) ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}
.eyebrow {
  font-family: var(--cuerpo);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mar);
  margin: 0 0 14px;
}
.precio { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Estructura ---------- */
.contenedor { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - var(--gutter) * 2, var(--ancho-estrecho)); }
.seccion { padding-block: var(--aire); }
.banda { background: var(--banda); padding-block: var(--aire); }
.banda--mar { background: var(--mar); color: #fff; }

/* ---------- Botones (píldora siempre, referencia A) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 500; text-decoration: none;
  padding: 15px 30px; border-radius: var(--pildora); border: 2px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--accion { background: var(--coral); color: var(--tinta); }        /* coral con tinta: contraste AA */
.btn--accion:hover { background: var(--tinta); color: #fff; }           /* B ficha 9: el primario se invierte */
.btn--linea { border-color: var(--tinta); color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: #fff; }
.btn--claro { background: #fff; color: var(--mar-hondo); }
.btn--claro:hover { background: var(--coral); color: var(--tinta); }
.btn--peq { padding: 10px 22px; font-size: 0.94rem; }

.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; text-decoration: none; color: var(--tinta);
  border-bottom: 2px solid var(--coral); padding-bottom: 2px;
  transition: gap .25s ease, color .25s ease;
}
.enlace::after { content: "→"; transition: transform .25s ease; }
.enlace:hover { color: var(--mar); }
.enlace:hover::after { transform: translateX(4px); }

.acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }

/* ---------- Cabecera: enlaces · LOGO CENTRADO · acciones (referencia A) ---------- */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 247, 244, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
  will-change: transform;
}
.cab__int {
  width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: 74px;
}
.cab__nav ul { display: flex; gap: 26px; align-items: center; }
.cab__nav a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cab__nav a:hover, .cab__nav a[aria-current="page"] { color: var(--mar); border-bottom-color: var(--coral); }
.cab__logo {
  grid-column: 2; justify-self: center;
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--tinta);
}
.cab__der { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.cab__idioma { display: flex; gap: 8px; font-size: 0.85rem; }
.cab__idioma a { text-decoration: none; opacity: .6; }
.cab__idioma a[aria-current="true"] { opacity: 1; font-weight: 500; }

.cab__burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.cab__burger span { display: block; width: 24px; height: 2px; background: var(--tinta); margin: 5px 0; transition: transform .25s ease, opacity .25s ease; }
.cab__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cab__movil { display: none; border-top: 1px solid var(--linea); background: var(--fondo); }
.cab__movil ul { padding: 12px var(--gutter) 22px; }
.cab__movil a { display: block; padding: 13px 0; text-decoration: none; font-size: 1.15rem; border-bottom: 1px solid var(--linea); }

@media (max-width: 999px) {
  .cab__nav { display: none; }
  .cab__int { grid-template-columns: 1fr auto 1fr; }
  .cab__logo { font-size: 1.2rem; }
  .cab__burger { display: block; order: 2; }
  .cab__movil:not([hidden]) { display: block; }
  .cab__int > .cab__nav--izq { display: none; }
}
@media (max-width: 560px) {
  .cab__der .btn { display: none; }   /* en móvil el botón vive en la barra fija de abajo */
}

/* ---------- Hero: foto a sangre, texto abajo a la izquierda ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(86vh, 780px); color: #fff; }
.hero__foto { position: absolute; inset: 0; margin: 0; z-index: -2; }
/* El <picture> envuelve al <img>: si se queda en alto automático, el `height:100%` de la imagen no tiene contra qué
   resolverse y el navegador cae en la proporción del archivo (1600×1000 → 900 px). La foto se salía 126 px por
   debajo del hero, fuera del velo, y dejaba una raya oscura cortándola con el color de la foto asomando abajo.
   Por eso el picture también va a inset:0, y el hero recorta por si acaso. */
.hero__foto picture { position: absolute; inset: 0; display: block; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Tinte hacia el turquesa oscuro de la marca, no gris neutro: así el borde inferior parece decidido y no una
     sombra pegada encima de la foto. */
  background: linear-gradient(to top, rgba(6, 34, 33, 0.80) 0%, rgba(6, 34, 33, 0.34) 44%, rgba(6, 34, 33, 0) 74%);
}
.hero__int { padding-block: clamp(40px, 7vw, 80px); }
.hero .eyebrow { color: #fff; opacity: .9; }
.hero__titulo { max-width: 16ch; }
.hero__sub { max-width: 46ch; font-size: 1.12rem; margin-top: 18px; color: rgba(255, 255, 255, .92); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.hero__acciones .enlace { color: #fff; }
.hero__acciones .enlace:hover { color: var(--coral); }
.hero__hoy { margin: 22px 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, .8); }

/* ---------- La carta en portada: la foto ES la tarjeta ---------- */
.carta__cab { max-width: 46ch; margin-bottom: clamp(32px, 4vw, 54px); }
.carta__intro { color: var(--secundario); margin: 0; }
.bowls { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.bowl__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio); }
.bowl__cuerpo { padding-top: 18px; }
.bowl__nombre { font-family: var(--display); font-size: 1.22rem; font-weight: 500; letter-spacing: 0.01em; }
.bowl__desc { margin: 8px 0 12px; color: var(--secundario); font-size: 0.97rem; }
.bowl__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.bowl__pie .precio { font-size: 1.1rem; }

/* El "Monta el tuyo" rompe la rejilla a propósito: color en vez de foto (es el corazón del negocio) */
.bowl--montar .bowl__marca {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; margin: 0; border-radius: var(--radio);
  background: var(--mar); color: var(--banda);
  font-family: var(--display); font-weight: 400; font-size: clamp(5rem, 10vw, 8rem); line-height: 1;
  transition: background-color .3s ease;
}
.bowl--montar:hover .bowl__marca { background: var(--coral); color: var(--tinta); }

.al { font-size: 0.82rem; color: var(--secundario); line-height: 1.45; }
.al b { font-weight: 500; color: var(--tinta); }
.al--ninguno { color: var(--secundario); }
.carta__mas { margin: clamp(32px, 4vw, 48px) 0 0; }

/* ---------- Monta el tuyo: cuatro pasos sobre la banda aguamarina ---------- */
.montar__cab { max-width: 48ch; margin-bottom: clamp(32px, 4vw, 52px); }
.montar__texto { color: var(--mar-hondo); margin: 0; }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.paso { border-top: 2px solid var(--mar); padding-top: 18px; }
.paso__num { font-family: var(--display); font-size: 0.9rem; font-weight: 500; letter-spacing: .1em; color: var(--mar); margin: 0 0 10px; }
.paso__tit { font-family: var(--display); font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; }
.paso__txt { margin: 0; font-size: 0.97rem; color: #2C3A38; }
.montar__accion { margin: clamp(34px, 4vw, 50px) 0 0; }
.pasos--carta { margin-top: 28px; }

/* Sello circular que gira (referencia B, ficha 4) */
.sello { position: absolute; right: clamp(12px, 4vw, 72px); top: clamp(24px, 4vw, 56px); width: clamp(104px, 12vw, 156px); height: auto; }
/* El texto da UNA vuelta justa: si se repite, se solapa consigo mismo al cerrar el círculo. */
.sello__texto { font-family: var(--cuerpo); font-size: 14.5px; font-weight: 500; letter-spacing: .175em; text-transform: uppercase; fill: var(--mar); }
.sello__centro { fill: var(--coral); }
.montar { position: relative; overflow: hidden; }

/* ---------- Quiénes somos ---------- */
.somos__int { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.somos__lead { font-family: var(--display); font-size: clamp(1.22rem, 1.9vw, 1.55rem); line-height: 1.35; letter-spacing: -0.01em; }
.somos__p { color: var(--secundario); max-width: 52ch; }
.somos__p:last-child { margin-bottom: 0; }
.somos__foto { margin: 0; }
.somos__foto img { width: 100%; border-radius: var(--radio); aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Cómo pedir ---------- */
.pedir__int { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pedir__texto p { color: var(--secundario); max-width: 48ch; }
.pedir__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.pedir__politica > div { display: grid; grid-template-columns: 12ch 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--linea); }
.pedir__politica > div:last-child { border-bottom: 1px solid var(--linea); }
.pedir__politica dt { font-weight: 500; }
.pedir__politica dd { margin: 0; color: var(--secundario); }

/* ---------- Dónde estamos ---------- */
.llegar { background: var(--banda); padding-block: var(--aire); }
.llegar__int { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 80px); }
.llegar .eyebrow { color: var(--mar-hondo); }
.llegar__direccion { font-family: var(--display); font-size: 1.25rem; }
.llegar__nota { color: #2C3A38; max-width: 46ch; }
.llegar__h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 500; margin-bottom: 14px; }
.horario > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid rgba(14, 124, 123, .28); }
.horario > div:last-child { border-bottom: 1px solid rgba(14, 124, 123, .28); }
.horario dt { font-weight: 500; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Preguntas ---------- */
.faq__item { border-top: 1px solid var(--linea); padding: 6px 0; }
.faq__item:last-of-type { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--display); font-size: 1.1rem; font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.6rem; font-weight: 400; color: var(--mar); transition: transform .25s ease;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { color: var(--secundario); max-width: 62ch; padding-bottom: 6px; }

/* ---------- Cierre ---------- */
.cta__int { text-align: center; }
.cta__titulo { max-width: 14ch; margin-inline: auto; }
.cta__p { color: rgba(255, 255, 255, .88); margin-top: 18px; }
.cta__horario { margin: 20px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .72); }
.cta .btn { margin-top: 10px; }

/* ---------- Páginas internas (carta, legales) ---------- */
.pagcab { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.pagcab__titulo { margin-bottom: 18px; }
.pagcab__intro { font-size: 1.1rem; max-width: 52ch; }
.pagcab__nota { color: var(--secundario); font-size: .95rem; max-width: 60ch; }
.pagcab__indice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pagcab__indice a {
  text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: 8px 18px; border-radius: var(--pildora); border: 1px solid var(--linea); background: var(--superficie);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pagcab__indice a:hover { background: var(--mar); border-color: var(--mar); color: #fff; }  /* B ficha 8: la píldora se rellena */

.menu { padding-block: clamp(40px, 5vw, 72px); }
.menu__item { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-top: 1px solid var(--linea); }
.menu__lista li:last-child { border-bottom: 1px solid var(--linea); }
.menu__nombre { font-family: var(--display); font-size: 1.12rem; font-weight: 500; }
.menu__desc { margin: 6px 0 6px; color: var(--secundario); font-size: .97rem; max-width: 54ch; }
.menu__precio { font-size: 1.05rem; }
.menu.banda .menu__item { border-color: rgba(14, 124, 123, .28); }

.grupo { padding-block: clamp(40px, 5vw, 64px); }
.grupo__p { color: var(--secundario); max-width: 58ch; }
.leyenda__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 28px; margin-bottom: 24px; }
.leyenda__lista li { font-size: .95rem; }
.leyenda__lista b { display: inline-block; min-width: 2.2em; color: var(--mar); font-weight: 500; }
.leyenda__nota { color: var(--secundario); font-size: .95rem; }

.legal { padding-block: clamp(48px, 7vw, 96px); }
.legal__demo { background: var(--banda); border-radius: var(--radio); padding: 20px 24px; color: #2C3A38; }
.legal__p { max-width: 68ch; color: var(--secundario); }
.legal__p strong { color: var(--tinta); font-weight: 500; }
.legal__fecha { font-size: .9rem; color: var(--secundario); }
.acciones--izq { justify-content: flex-start; }

/* ---------- Barra fija de móvil ---------- */
.barra { display: none; }
@media (max-width: 560px) {
  .barra {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(247, 247, 244, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--linea);
  }
  .barra .btn { width: 100%; }
  .pie { padding-bottom: 96px; }
}

/* ---------- Pie: banda aguamarina, columnas y el nombre enorme abajo ---------- */
.pie { background: var(--banda); color: #1B2B29; padding-block: clamp(56px, 7vw, 88px) 28px; overflow: hidden; }
.pie__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.pie__h3 { font-family: var(--display); font-size: 1rem; font-weight: 500; letter-spacing: .02em; margin-bottom: 12px; }
.pie__texto { font-size: .95rem; margin-bottom: .5em; }
.pie__lista li { margin-bottom: 8px; }
.pie a { text-decoration: none; border-bottom: 1px solid rgba(27, 43, 41, .3); transition: border-color .2s ease, color .2s ease; }
.pie a:hover { color: var(--mar-hondo); border-bottom-color: var(--mar-hondo); }
.pie__alergenos { font-size: .85rem; margin-top: 14px; }
.pie__idioma { display: flex; gap: 12px; margin-top: 14px; font-size: .9rem; }
.pie__marca {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.03em; line-height: .8;
  font-size: clamp(3.6rem, 15vw, 13rem); color: var(--mar); opacity: .28;
  margin: clamp(40px, 6vw, 80px) 0 0;
}
.pie__final { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding-top: 22px; border-top: 1px solid rgba(14, 124, 123, .3); margin-top: 18px; font-size: .88rem; }
.pie__final p { margin: 0; }
.pie__nota { flex-basis: 100%; color: #3B4A48; font-size: .82rem; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .bowls { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .somos__int, .pedir__int, .llegar__int { grid-template-columns: 1fr; }
  .somos__foto { order: -1; }
  .somos__foto img { aspect-ratio: 3 / 2; }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .bowls { grid-template-columns: 1fr; gap: 32px; }
  .pasos { grid-template-columns: 1fr; }
  .leyenda__lista { grid-template-columns: 1fr; }
  .pedir__politica > div { grid-template-columns: 1fr; gap: 4px; }
  /* Hero en móvil: foto ARRIBA y texto DEBAJO sobre el lienzo, no superpuesto.
     Con el texto encima, el velo oscuro sobre una foto de fondo pálido deja un gris lavado que se come la foto
     (comprobado en captura el 2026-09-22). La referencia A superpone en móvil porque su titular son cuatro
     palabras; el nuestro es más largo, así que se separa. La foto sigue mandando y el texto pasa a 16,4:1. */
  .hero { display: block; min-height: 0; color: var(--tinta); }
  .hero::after { display: none; }
  /* La altura va en la IMAGEN, no en el <figure>: con `height:100%` dentro de un figure de alto en vh queda un
     hueco blanco bajo la foto (visto en captura). Aquí la imagen manda y el figure la sigue. */
  .hero__foto, .hero__foto picture { position: static; height: auto; }
  .hero__foto img { height: 46vh; min-height: 260px; max-height: 420px; object-position: 50% 45%; }
  .hero__int { padding-block: 30px 38px; }
  .hero .eyebrow { color: var(--mar); opacity: 1; }
  .hero__sub { font-size: 1rem; margin-top: 14px; color: var(--secundario); }
  .hero__acciones { margin-top: 22px; }
  .hero__acciones .enlace { color: var(--tinta); }
  .hero__hoy { margin-top: 18px; font-size: .88rem; color: var(--secundario); }
  .sello { display: none; }
}

/* ---------- Movimiento ----------
   Nada se oculta desde el CSS: los estados de partida los pone gsap.from() en js/animacion.js, así que si el JS
   falla o tarda, el contenido se ve igual. Aquí solo se frena todo cuando el sistema pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}