/* C Kitchen — estilos (v5, 2026-10-16).
 *
 * La estructura sigue siendo la de dabbadrop (hero con el mural de sus fotos,
 * el menú del día, los servicios, el cierre), pero en limpio: Sofía lo quiere
 * CLEAN y Diego vio el v4 "muy playful". Fuera el grano, los bordes gruesos,
 * las sombras duras, las rotaciones, el patrón de tenedores, la franja y los
 * platos flotando. Queda: blanco, piedra, el amarillo como acento y mucho aire.
 *
 * Light Kitchen tiene su propio registro (body.light), calcado de wholesome.do,
 * que es lo que ellas mostraron: Playfair 400 en minúscula, cuerpo fino gris,
 * todo centrado, botones de contorno pequeños. El dorado de Wholesome es aquí
 * el verde de Light Kitchen.
 *
 * Espaciado: una sola escala (--e1…--e7). Ninguna sección se inventa el suyo.
 */

/* ---------- 1. Tokens ---------- */
:root {
  --amarillo: #FFCC00;
  --amarillo-hondo: #F2BD00;
  --tinta: #1A1714;
  --gris: #6B655C;
  --gris-claro: #9A948A;
  --linea: #E8E3DA;
  --blanco: #FFFFFF;
  --piedra: #F6F4F0;
  --verde: #568623;
  --verde-hondo: #3B6418;
  --verde-suave: #F1F5EA;
  --rojo: #B3261E;

  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --fina: 'Roboto Condensed', 'Archivo', sans-serif;

  /* Escala de espacio: 8 · 12 · 16 · 24 · 40 · 64 · 104 */
  --e1: 8px; --e2: 12px; --e3: 16px; --e4: 24px;
  --e5: clamp(32px, 4vw, 40px);
  --e6: clamp(40px, 5vw, 56px);
  --e7: clamp(64px, 7vw, 96px);

  --marco: clamp(20px, 4vw, 40px);
  --ancho: 1240px;
  --barra-alto: 68px;
  --aviso-alto: 36px;
  --radio: 14px;
  --curva: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 1000px) { :root { --barra-alto: 80px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body { overflow-x: clip; overscroll-behavior-x: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6;
  color: var(--tinta); background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
/* Sólo en <html>: si también se le pone al body, el body pasa a ser su propio
   contenedor de scroll y la barra deja de quedarse fija arriba. */
html.sin-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ol, ul, fieldset, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { top: 12px; }

.contenedor { max-width: calc(var(--ancho) + 2 * var(--marco)); margin: 0 auto; padding: 0 var(--marco); }
.seccion { position: relative; padding: var(--e7) 0; }

/* ---------- 3. Tipografía ----------
   Archivo a ancho normal y peso 600, en minúscula: una grotesca limpia. */
.t1, .t2, .t3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.t1 { font-size: clamp(2.5rem, min(6.4vw, 11vh), 5rem); line-height: 1.02; }
.t2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.06; }
.t3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--gris); max-width: 52ch; }
.lead strong { color: var(--tinta); font-weight: 600; }
.texto { max-width: 62ch; }
.texto p + p { margin-top: 1em; }
.nota { font-size: .95rem; color: var(--gris); }

/* Encabezado de sección: título + bajada, siempre con el mismo aire debajo. */
.cab { display: grid; gap: var(--e3); margin-bottom: var(--e6); }
.cab--partida { gap: var(--e4); }
@media (min-width: 900px) { .cab--partida { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--e6); } }
.cab--centro { text-align: center; justify-items: center; }

/* ---------- 4. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton--amarillo { background: var(--amarillo); color: var(--tinta); }
.boton--amarillo:hover { background: var(--amarillo-hondo); }
.boton--negro { background: var(--tinta); color: #fff; }
.boton--negro:hover { background: #3a342d; }
.boton--linea, .boton--blanco { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--linea:hover { border-color: var(--tinta); }
.boton--acento { background: var(--verde-hondo); color: #fff; }
.boton--acento:hover { background: #2e4f12; }
.sobre-oscuro .boton--linea { color: #fff; border-color: rgba(255,255,255,.4); }
.sobre-oscuro .boton--linea:hover { border-color: #fff; }
.boton--chico { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.boton--bloque { width: 100%; }
.boton[hidden], .lk-boton[hidden] { display: none; }
.boton .icono { width: 1.1em; height: 1.1em; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.enlace {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--gris-claro); transition: text-decoration-color .2s;
}
.enlace:hover { text-decoration-color: var(--tinta); }

/* ---------- 5. Aviso + barra ---------- */
.aviso {
  position: relative; z-index: 95; /* queda visible encima del cajón abierto */
  min-height: var(--aviso-alto); display: flex; align-items: center; justify-content: center;
  padding: 8px var(--marco); line-height: 1.3; background: var(--tinta); color: #fff;
  font-size: .9rem; text-align: center;
}
.barra {
  position: sticky; top: 0; z-index: 100; height: var(--barra-alto);
  display: flex; align-items: center; gap: var(--e4); padding: 0 var(--marco);
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--linea);
}
.barra__logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
.barra__logo img { height: 52px; width: auto; }
@media (min-width: 1000px) { .barra__logo img { height: 66px; } }
.barra__nav { display: none; }
.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.barra__acciones .boton { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.barra__cotizar { display: none; }
@media (min-width: 640px) { .barra__cotizar { display: inline-flex; } }
.barra__menu { position: relative; width: 44px; height: 44px; margin-right: -8px; display: grid; place-content: center; gap: 6px; border: 0; background: none; cursor: pointer; }
.barra__menu span { display: block; width: 22px; height: 2px; background: var(--tinta); transition: transform .3s var(--curva); }
.barra__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.barra__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1100px) {
  .barra__nav { display: block; margin: 0 auto; }
  .barra__menu { display: none; }
  .barra__acciones { margin-left: 0; }
  .barra__lista { display: flex; align-items: center; gap: 4px; }
  .barra__enlace {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px;
    border: 0; background: none; cursor: pointer; font-weight: 500; font-size: 1rem; color: var(--tinta);
  }
  .barra__enlace:hover, .desp__boton[aria-expanded="true"], .barra__enlace[aria-current="page"] { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--amarillo); }
}
.desp { position: relative; }
.desp__flecha { width: 14px; height: 14px; transition: transform .25s var(--curva); }
.desp__boton[aria-expanded="true"] .desp__flecha { transform: rotate(180deg); }
.desp__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  min-width: 260px; padding: var(--e2); background: #fff;
  border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 18px 40px -18px rgba(26,23,20,.25);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s, transform .3s var(--curva), visibility 0s .2s;
}
.desp__panel--ancho { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: var(--e1) var(--e4); min-width: 680px; padding: var(--e4); }
.desp--abierto .desp__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--curva); }
.desp__grupo { display: grid; align-content: start; }
.desp__titulo { font-size: .9rem; color: var(--gris-claro); padding: 4px 10px 6px; }
.desp__grupo a { padding: 9px 10px; border-radius: 8px; font-weight: 500; }
.desp__grupo a:hover, .desp__grupo a[aria-current="page"] { background: var(--piedra); }

.cajon {
  position: fixed; z-index: 90; inset: 0;
  display: flex; flex-direction: column; background: #fff;
  padding: calc(var(--cajon-arriba, var(--barra-alto)) + var(--e1)) var(--marco) max(var(--e4), env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
}
.cajon[hidden] { display: none; }
.cajon__nav { flex: 1; }
.cajon__enlace {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px;
  border-bottom: 1px solid var(--linea); cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em;
}
.cajon__enlace::-webkit-details-marker { display: none; }
summary.cajon__enlace::after { content: '+'; font-weight: 400; color: var(--gris); transition: transform .25s var(--curva); }
details[open] > summary.cajon__enlace::after { transform: rotate(45deg); }
.cajon__grupo { border-bottom: 1px solid var(--linea); }
.cajon__grupo summary { border-bottom: 0; }
.cajon__grupo a { display: flex; align-items: center; min-height: 44px; font-size: 1.05rem; color: var(--gris); }
.cajon__grupo > :last-child { margin-bottom: var(--e3); }
.cajon__subtitulo { font-size: .9rem; margin-top: var(--e2); color: var(--gris-claro); }
.cajon__acciones { display: grid; gap: var(--e2); padding-top: var(--e4); }
@media (min-width: 1100px) { .cajon { display: none !important; } }

/* ---------- 6. Hero: titular + mural de sus fotos reales ---------- */
.hero { position: relative; background: #fff; display: grid; overflow: hidden; border-bottom: 1px solid var(--linea); }
.hero__fijo { display: contents; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: min(calc(100svh - var(--barra-alto) - var(--aviso-alto)), 720px); min-height: 540px; }
}
.hero__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e6) var(--marco);
  padding-left: max(var(--marco), calc((100vw - var(--ancho)) / 2));
}
@media (min-width: 900px) { .hero__texto { padding-right: var(--e6); } .hero__texto .lead { font-size: clamp(1.1rem, 1.4vw, 1.35rem); } }
.hero__titulo .linea-t { white-space: nowrap; }
.hero__texto .lead { margin-top: var(--e4); }
.hero__texto .acciones { margin-top: var(--e5); }

.hero__mural {
  --gap: 12px;
  position: relative; overflow: hidden; background: var(--amarillo);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--gap);
}
.mural__col { overflow: visible; min-width: 0; }
.mural__pista { display: flex; flex-direction: column; gap: var(--gap); will-change: transform; animation: mural-sube 52s linear infinite; }
.mural__col--baja .mural__pista { animation-name: mural-baja; animation-duration: 60s; }
.mural__col[data-col="2"] .mural__pista { animation-duration: 46s; }
.mural__eco { display: contents; }
.foto-hero { border-radius: 10px; overflow: hidden; background: var(--piedra); aspect-ratio: 4 / 5; }
.foto-hero img { width: 100%; height: 100%; object-fit: cover; }
@keyframes mural-sube { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
@keyframes mural-baja { from { transform: translateY(calc(-50% - var(--gap) / 2)); } to { transform: translateY(0); } }

@media (max-width: 899px) {
  .hero__texto { padding-top: var(--e5); padding-bottom: var(--e5); }
  .hero__mural { grid-template-columns: 1fr; padding: var(--gap) 0; }
  .mural__col[data-col="2"] { display: none; }
  .mural__pista { flex-direction: row; width: max-content; animation-name: mural-izq; animation-duration: 44s; }
  .mural__col--baja .mural__pista { animation-name: mural-der; animation-duration: 50s; }
  .foto-hero { width: 140px; }
  @keyframes mural-izq { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
  @keyframes mural-der { from { transform: translateX(calc(-50% - var(--gap) / 2)); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) { .mural__pista { animation: none; } }

/* ---------- 7. Fila de clientes ---------- */
.clientes { padding: var(--e6) 0; text-align: center; overflow: hidden; border-bottom: 1px solid var(--linea); }
.clientes__titulo { font-size: 1rem; font-weight: 500; color: var(--gris); padding: 0 var(--marco); }
.clientes__franja { display: flex; width: max-content; margin-top: var(--e4); animation: franja 60s linear infinite; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clientes__pista { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); }
.clientes__pista img { height: 30px; width: auto; filter: grayscale(1); opacity: .7; }
.clientes__pista img[src*="universal"] { height: 40px; }
.clientes__pista img[src*="banreservas"] { height: 36px; }
/* Los logos cuadrados o con texto debajo necesitan más alto para leerse. */
.clientes__pista img[src*="ballet-anna-pavlova"] { height: 52px; }
.clientes__pista img[src*="patio-sports-club"] { height: 60px; filter: grayscale(1) contrast(1.8) brightness(1.15); opacity: .8; }
.clientes__pista img[src*="ridesgur"] { height: 56px; filter: grayscale(1) contrast(1.4); }
.clientes__pista img[src*="fripick"] { height: 44px; }
.clientes__pista img[src*="inversiones-caobo"] { height: 54px; filter: grayscale(1) contrast(1.5) brightness(.8); }
.clientes__pista img[src*="seguros-pepin"] { height: 48px; filter: grayscale(1) brightness(.35) contrast(1.4); }
.clientes__pista img[src*="ballet-alina-abreu"] { height: 40px; }
.clientes__pista li { white-space: nowrap; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.02em; color: var(--tinta); opacity: .7; }
@keyframes franja { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clientes__franja { animation: none; flex-wrap: wrap; width: auto; justify-content: center; mask-image: none; } .clientes__pista[aria-hidden] { display: none; } .clientes__pista { flex-wrap: wrap; justify-content: center; } }

.clientes-lista { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.clientes-lista p { font-weight: 600; }
.clientes-lista ul { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }
.clientes-lista li { padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: .95rem; }

/* ---------- 8. El menú del día ---------- */
.menu-dia { background: var(--amarillo); }
.menu-dia__cab { text-align: center; max-width: 760px; margin: 0 auto var(--e5); }
.menu-dia__cab .lead { margin: var(--e3) auto 0; color: var(--tinta); opacity: .75; }
.dias { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e1); margin: 0 auto var(--e5); }
.dia {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(26,23,20,.18); border-radius: 999px; background: transparent;
  font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.dia:hover { border-color: var(--tinta); }
.dia[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dia__largo { display: none; }
/* En móvil los cinco días en una sola fila, centrados. */
@media (max-width: 599px) { .dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 360px; } .dia { padding: 0; } }
@media (min-width: 600px) { .dia__corto { display: none; } .dia__largo { display: inline; } }
.dias__ficha { display: none; }
.hoja__opciones { display: grid; gap: var(--e3); max-width: 1000px; margin: 0 auto; }
@media (min-width: 760px) { .hoja__opciones { grid-template-columns: 1fr 1fr; gap: var(--e4); } }
.opcion { display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: var(--e4); }
@media (min-width: 760px) { .opcion { padding: var(--e5); } }
.opcion__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); }
.opcion__nombre { font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; }
.opcion__dia { color: var(--gris); font-size: 1rem; }
.opcion__platos { flex: 1; padding: var(--e1) 0 var(--e4); }
.opcion__platos li { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); font-size: 1.06rem; line-height: 1.4; }
.opcion__platos li:last-child { border-bottom: 0; }
.opcion .boton { margin: 0; }
.hoja__nota { max-width: 680px; margin: var(--e5) auto 0; text-align: center; font-size: 1rem; }
.hoja__nota strong { display: block; font-weight: 600; margin-bottom: 4px; }
.hoja__hoy { display: none; }

/* ---------- 9. Servicios ---------- */
.servicios__cab { display: grid; gap: var(--e4); margin-bottom: var(--e6); }
@media (min-width: 900px) { .servicios__cab { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: var(--e6); } }
.servicios__cab .lead + .lead { margin-top: var(--e2); }
.servicios { display: grid; gap: var(--e5) var(--e4); }
@media (min-width: 640px) { .servicios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicio { position: relative; display: flex; flex-direction: column; }
.servicio__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--piedra); }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.servicio:hover .servicio__foto img { transform: scale(1.03); }
.servicio__cuerpo { display: flex; flex-direction: column; gap: var(--e1); padding-top: var(--e3); flex: 1; }
.servicio__cuerpo p { color: var(--gris); }
.servicio__cuerpo .enlace { margin-top: auto; padding-top: var(--e1); align-self: flex-start; }
.servicio__cuerpo .enlace::after { content: ''; position: absolute; inset: 0; }
.servicio--light .t3 { color: var(--verde-hondo); }

/* ---------- 10. Somos green: una franja, no una sección ---------- */
.green { background: var(--verde-suave); border-block: 1px solid #e3ead6; }
.green__franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e1) var(--e4); padding-block: var(--e5); text-align: center; }
.green__titulo { font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.025em; color: var(--verde-hondo); }
.green__franja p { color: var(--gris); font-size: 1.08rem; }
.green__franja .enlace { color: var(--verde-hondo); text-decoration-color: var(--verde); }

/* ---------- 11. Bandas (historia, formularios) ---------- */
.banda { display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 900px) {
  .banda { grid-template-columns: 1fr 1fr; gap: var(--e6); }
  .banda--invertida .banda__foto { order: 2; }
}
.banda__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; background: var(--piedra); }
.banda__foto img { width: 100%; height: 100%; object-fit: cover; }
.banda .t2 + .lead, .banda .t2 + .texto { margin-top: var(--e4); }
.banda .acciones, .banda > div > .enlace { margin-top: var(--e4); }

/* Una banda con formulario NO va partida en dos columnas: el texto arriba y
   el formulario debajo, centrados, a un ancho que se lee. Así no queda media
   pantalla vacía al lado de un formulario largo. */
.banda:has(> form) { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; gap: var(--e5); text-align: center; }
.banda:has(> form) .lead { margin-inline: auto; }
.banda:has(> form) > form { text-align: left; }
.seccion--panel { background: var(--piedra); }

/* ---------- 12. Cierre ---------- */
.cierre { text-align: center; background: var(--piedra); }
.cierre .contenedor { padding-block: var(--e7); }
.cierre .lead { margin: var(--e3) auto 0; }
.cierre .acciones { justify-content: center; margin-top: var(--e5); }
.cierre__wa { margin-top: var(--e4); color: var(--gris); }
.cierre__wa a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- 13. Páginas internas: portada ---------- */
.portada { padding: var(--e6) 0; border-bottom: 1px solid var(--linea); }
.portada__rejilla { display: grid; gap: var(--e5); }
@media (min-width: 960px) { .portada__rejilla--foto { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--e6); } }
.portada__lema { margin-top: var(--e3); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.3; }
.portada .lead { margin-top: var(--e3); }
.portada .acciones { margin-top: var(--e5); }
.portada__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--piedra); }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
.datos { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e4); }
.datos li { padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: .95rem; }
.vacio { padding: var(--e5) var(--e4); border: 1px dashed var(--linea); border-radius: var(--radio); text-align: center; color: var(--gris); }
.vacio strong { display: block; color: var(--tinta); font-weight: 600; font-size: 1.15rem; margin-bottom: 4px; }
.vacio .enlace { margin-top: var(--e1); }

/* ---------- 14. Formularios: una pregunta a la vez ----------
   app.js parte cada formulario en pasos (.paso). Sin JS se ve completo. */
.formulario { display: grid; gap: var(--e4); padding: var(--e5); border: 1px solid var(--linea); border-radius: 20px; background: #fff; color: var(--tinta); }
@media (max-width: 520px) { .formulario { padding: var(--e4) var(--e3); } }
.formulario__titulo { font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }
.campo { display: grid; gap: var(--e1); align-content: start; }
.campo[hidden] { display: none; }
.campo > label, .pregunta { font-weight: 600; }
.opcional { font-weight: 400; color: var(--gris-claro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: #fff;
  font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1714' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(255,204,0,.45); }
.campo .mal { border-color: var(--rojo); }
.fichas.mal .ficha span { border-color: var(--rojo); }
.campo input[type="file"] { padding: 12px; }
.fichas { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }
.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; pointer-events: none; }
.ficha span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-weight: 500; cursor: pointer; user-select: none; transition: background-color .15s, color .15s, border-color .15s; }
.ficha span:hover { border-color: var(--tinta); }
.ficha input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
body.light .ficha input:checked + span { background: var(--verde-hondo); border-color: var(--verde-hondo); }
.ficha input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.formulario__error { color: var(--rojo); font-weight: 500; }
.formulario__aviso { font-size: .92rem; color: var(--gris); text-align: center; }

/* Los pasos */
.formulario--pasos { gap: 0; }
.pasos__barra { height: 3px; border-radius: 3px; background: var(--linea); overflow: hidden; margin-bottom: var(--e5); }
.pasos__barra span { display: block; height: 100%; width: 0; background: var(--amarillo); transition: width .4s var(--curva); }
body.light .pasos__barra span { background: var(--verde); }
.formulario--pasos .formulario__titulo { margin-bottom: var(--e4); }
.paso { display: grid; gap: var(--e3); }
.paso[hidden] { display: none; }
.paso .campo > label, .paso .pregunta { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin-bottom: var(--e1); }
.paso .fichas { margin-top: 0; }
.paso .ficha span { min-height: 50px; padding: 0 20px; font-size: 1.02rem; }
.pasos__cuenta { font-size: .92rem; color: var(--gris-claro); margin-bottom: var(--e2); }
.pasos__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e5); }
.pasos__nav .boton { min-width: 140px; }
.pasos__atras { border: 0; background: none; padding: 0 4px; min-height: 44px; color: var(--gris); font-weight: 500; cursor: pointer; }
.pasos__atras:hover { color: var(--tinta); }
.pasos__atras[hidden] { display: inline-flex; visibility: hidden; }
.formulario--pasos .formulario__error { margin-top: var(--e3); }
.formulario--pasos .formulario__aviso { margin-top: var(--e3); }
@media (max-width: 520px) { .pasos__nav .boton { flex: 1; } }

/* ---------- 15. Cotizador ---------- */
.catalogo { display: grid; gap: var(--e6); }
.catalogo__bloque h2 { margin-bottom: var(--e1); }
.catalogo__regla { color: var(--gris); margin-bottom: var(--e4); }
.renglon { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linea); }
.renglon:last-child { border-bottom: 1px solid var(--linea); }
.renglon__nombre { flex: 1; min-width: 0; font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
.renglon__precio { display: block; font-weight: 400; font-size: .92rem; color: var(--gris); margin-top: 2px; }
.contador { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.contador button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1; display: grid; place-items: center; transition: border-color .15s, background-color .15s; }
.contador button:hover:not(:disabled) { border-color: var(--tinta); }
.contador button:disabled { opacity: .35; cursor: default; }
.contador output { min-width: 4.4em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.renglon--activo .renglon__nombre { font-weight: 600; }
.renglon--activo .contador output { color: var(--tinta); background: var(--amarillo); border-radius: 999px; padding: 2px 0; }
@media (max-width: 420px) { .contador { gap: 0; } .contador output { min-width: 4em; font-size: .92rem; } }
.resumen { position: sticky; bottom: 0; z-index: 30; margin: var(--e5) calc(-1 * var(--marco)) 0; padding: var(--e2) var(--marco) max(var(--e2), env(safe-area-inset-bottom)); background: var(--tinta); color: #fff; display: flex; align-items: center; gap: var(--e3); }
@media (min-width: 800px) { .resumen { margin-inline: 0; border-radius: 18px; padding: var(--e3) var(--e4); bottom: var(--e3); } }
.resumen__texto { flex: 1; min-width: 0; line-height: 1.35; }
.resumen__texto strong { display: block; font-weight: 600; }
.resumen__texto span { color: rgba(255,255,255,.7); font-size: .92rem; }
.resumen .boton { flex: 0 0 auto; }

/* ---------- 16. Historia, cifras, contacto, cotizar ---------- */
.historia { display: grid; gap: var(--e5); }
@media (min-width: 900px) { .historia { grid-template-columns: .9fr 1.1fr; gap: var(--e6); align-items: start; } .historia__foto { position: sticky; top: calc(var(--barra-alto) + var(--e4)); } }
.historia__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; }
.historia .texto { font-size: clamp(1.06rem, 1.3vw, 1.15rem); color: var(--gris); }
.historia .texto strong { color: var(--tinta); font-weight: 600; }
.historia .texto a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cifras { display: grid; gap: var(--e3); margin-top: var(--e5); }
@media (min-width: 640px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifras div { padding: var(--e4); border-radius: var(--radio); background: var(--piedra); }
.cifras strong { display: block; font-weight: 600; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; }
.cifras span { color: var(--gris); }
.opciones-cotizar { display: grid; gap: var(--e3); }
@media (min-width: 700px) { .opciones-cotizar { grid-template-columns: 1fr 1fr; } }
.opcion-cotizar { display: grid; gap: var(--e1); padding: var(--e5) var(--e4); border: 1px solid var(--linea); border-radius: 18px; background: #fff; transition: border-color .2s, background-color .2s; }
.opcion-cotizar:hover { border-color: var(--tinta); }
.opcion-cotizar p { color: var(--gris); }
.opcion-cotizar svg { display: none; }
.contacto-lista div { display: grid; gap: 4px; padding: var(--e4) 0; border-top: 1px solid var(--linea); }
.contacto-lista div:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 700px) { .contacto-lista div { grid-template-columns: 12em 1fr; } }
.contacto-lista dt { color: var(--gris); }
.contacto-lista dd { font-size: 1.1rem; font-weight: 500; }
.contacto-lista a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- 17. Pie ---------- */
.pie { background: var(--tinta); color: #fff; padding: var(--e7) var(--marco) 110px; }
@media (min-width: 900px) { .pie { padding-bottom: var(--e5); } }
.pie__arriba { max-width: var(--ancho); margin: 0 auto; display: grid; gap: var(--e5); }
@media (min-width: 860px) { .pie__arriba { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.pie__marca img { height: 80px; width: auto; }
.pie__marca p { margin-top: var(--e3); max-width: 24ch; font-size: 1.15rem; line-height: 1.4; color: rgba(255,255,255,.75); }
.pie__col { display: grid; align-content: start; }
.pie__col a { display: flex; align-items: center; gap: .3em; min-height: 40px; color: rgba(255,255,255,.75); }
.pie__col a:hover { color: #fff; }
.pie__titulo { font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: var(--e1); }
.pie__horario { margin-top: var(--e2); color: rgba(255,255,255,.6); font-size: .95rem; }
.pie__abajo { max-width: var(--ancho); margin: var(--e6) auto 0; padding-top: var(--e4); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); font-size: .92rem; color: rgba(255,255,255,.6); }
.pie__equipo { color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.pie__equipo:hover { color: #fff; }
.pie__ancla { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.pie__ancla img { height: 22px; width: auto; }

/* ---------- 18. WhatsApp flotante ---------- */
.wa-flota { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .4s var(--curva); }
.wa-flota svg { width: 28px; height: 28px; }
.wa-flota--visible { opacity: 1; transform: none; pointer-events: auto; }
.pagina-cotizador .wa-flota { display: none; }
@media (min-width: 1000px) { .wa-flota { display: none; } }

/* ---------- 19. Light Kitchen: el registro de Wholesome ----------
   Playfair 400 + Roboto Condensed 300, gris #5E5E5E, centrado, botones de
   contorno con mayúsculas espaciadas, y el verde donde Wholesome usa dorado. */
.lk, body.light { --lk-gris: #5E5E5E; }
.lk { text-align: center; }
.lk-titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4vw, 2.75rem); line-height: 1.2; letter-spacing: 0; color: #191919; }
.lk-sub { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.25; color: #191919; }
.lk-texto { max-width: 640px; margin: 0 auto; font-family: var(--fina); font-weight: 300; font-size: 18px; line-height: 1.75; color: var(--lk-gris); }
.lk-texto p + p { margin-top: 1.4em; }
.lk-texto strong { font-weight: 500; color: #3a3a3a; }
.lk-texto em { font-style: italic; }
.lk-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 26px;
  border: 1px solid var(--verde); border-radius: 0; background: transparent; color: var(--verde-hondo);
  font-family: var(--fina); font-weight: 400; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.lk-boton:hover, .lk-boton--lleno { background: var(--verde); color: #fff; }
.lk-boton--lleno:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); }
.lk-boton .icono { width: 1.1em; height: 1.1em; }
.lk-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); margin-top: var(--e5); }

.lk-intro { padding: var(--e6) 0 var(--e7); }
.lk-intro .lk-titulo, .lk-nos .lk-titulo { margin-bottom: var(--e4); }
/* Hero de Light Kitchen: el texto centrado y su plato sobre blanco. */
.lk-hero { display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 900px) { .lk-hero { grid-template-columns: 1fr 1fr; gap: var(--e6); min-height: min(calc(100svh - var(--barra-alto) - var(--aviso-alto) - 2 * var(--e6)), 620px); } }
.lk-hero__foto { max-width: 520px; width: 100%; justify-self: center; }
.lk-hero__foto img { width: 100%; height: auto; }
@media (max-width: 899px) { .lk-hero__foto { max-width: 340px; } }
.lk-nos { padding: var(--e7) 0; border-top: 1px solid #ececec; }

.lk-platos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e4); padding-bottom: var(--e7); }
@media (min-width: 900px) { .lk-platos { grid-template-columns: repeat(4, 1fr); } }
.lk-plato figure { aspect-ratio: 3 / 2; overflow: hidden; background: #f4f4f4; }
.lk-plato img { width: 100%; height: 100%; object-fit: cover; }
.lk-plato h3 { margin-top: var(--e3); font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35; color: #191919; }
.lk-plato p { margin-top: 2px; font-family: var(--fina); font-size: 15px; color: var(--verde-hondo); text-transform: uppercase; letter-spacing: .04em; }

.lk-semana { padding: var(--e7) 0; border-top: 1px solid #ececec; }
.lk-semana .lk-texto { margin-top: var(--e3); }
.lk-precio { margin-top: var(--e3); font-family: var(--fina); font-size: 18px; color: var(--verde-hondo); text-transform: uppercase; letter-spacing: .04em; }
.lk-semana .semana { margin-top: var(--e5); text-align: left; }

/* El cuadro del meal plan: un día por columna en escritorio. */
.semana { display: grid; gap: var(--e3); }
@media (min-width: 900px) { .semana:has(.semana__dia) { grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid #ececec; } }
.semana__dia { padding: var(--e4); border: 1px solid #ececec; }
@media (min-width: 900px) { .semana__dia { border: 0; border-left: 1px solid #ececec; } .semana__dia:first-child { border-left: 0; } }
.semana__dia h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: #191919; text-align: center; padding-bottom: var(--e2); border-bottom: 1px solid #ececec; }
.semana__comidas { display: grid; gap: 2px; margin-top: var(--e3); }
.semana__comidas dt { font-family: var(--fina); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-hondo); }
.semana__comidas dd { margin: 0 0 var(--e3); font-family: var(--fina); font-weight: 300; font-size: 16px; line-height: 1.45; color: var(--lk-gris); }
body.light .vacio { border-radius: 0; border-color: #e2e2e2; font-family: var(--fina); font-weight: 300; font-size: 17px; }
body.light .vacio strong { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin-bottom: var(--e1); }
body.light .vacio .enlace { font-family: var(--fina); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; color: var(--verde-hondo); text-decoration-color: var(--verde); }

/* #LightLovers: la banda de color de Wholesome ("Suscríbete"), en verde. */
.lk-lovers { padding: var(--e7) 0; background: var(--verde); color: #fff; }
.lk-lovers .lk-titulo { color: #fff; }
.lk-lovers .lk-texto { margin-top: var(--e3); color: rgba(255,255,255,.88); }
.lk-lovers .lk-texto a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lk-lovers .formulario { max-width: 680px; margin: var(--e5) auto 0; text-align: left; border: 0; border-radius: 0; }
body.light .formulario__titulo { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
body.light .paso .campo > label, body.light .paso .pregunta { font-family: var(--serif); font-weight: 400; letter-spacing: 0; color: #191919; }
body.light .ficha span { border-radius: 0; font-family: var(--fina); font-weight: 400; font-size: 1rem; }
body.light .campo input, body.light .campo select, body.light .campo textarea { border-radius: 0; font-family: var(--fina); }
body.light .formulario .boton { border-radius: 0; font-family: var(--fina); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
body.light .formulario__aviso { font-family: var(--fina); font-weight: 300; }

/* ---------- 20. Movimiento ---------- */
.js-entrada .entra { opacity: 0; }
.linea-t { display: block; overflow: hidden; padding: .08em 0 .06em; margin: -.08em 0 -.06em; }
.linea-t > span { display: inline-block; }