/* ============================================================================
   RAÚL CASTAÑO — Restaurante y Cafetería
   Hoja de estilos del sitio.

   Colores, tipografía y botones según el Brand Book 2026. Donde el brandbook
   no define un valor (tonos de apoyo, bordes, sombras) se derivan del verde
   institucional en vez de inventar color nuevo, que es justo lo que el
   capítulo 02 pide evitar.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Alto real de la barra fija; sitio.js lo ajusta al cargar. */
  --alto-barra: 68px;

  /* ---- Paleta oficial (Brand Book · 02 Color) ---- */
  --verde:        #005C57;   /* Verde Raúl · identidad · 60% */
  --naturaleza:   #0A6013;   /* Verde oscuro · naturaleza · 25% */
  --crema:        #F2ECD4;   /* Crema · calidez · 10% */
  --lima:         #DAE863;   /* Verde lima · energía · 5% */
  --magenta:      #9B1260;   /* Magenta · promoción */
  --cian:         #66FCF1;   /* Cian · digital */

  /* ---- Estados de interfaz (Brand Book · 05 Color web) ---- */
  --exito:        #148611;
  --programado:   #EEBF02;
  --alerta:       #F74600;

  /* ---- Tonos derivados del verde institucional ---- */
  --verde-profundo: #00423E;   /* hover y profundidad */
  --verde-medio:    #04716A;   /* segundo plano de secciones */
  --verde-tenue:    rgba(0, 92, 87, .10);

  /* ---- Superficies cálidas, derivadas de la crema ---- */
  --hueso:      #FAF6E8;
  --crema-2:    #EFE8CC;
  --crema-3:    #E9E1C1;
  --crema-4:    #E0D7B3;
  --crema-5:    #D6CCA4;
  --crema-dim:  #E8E2CC;   /* texto suave sobre verde · AA sobre el verde medio */

  /* ---- Tinta ---- */
  --tinta:          #17241F;
  --tinta-var:      #44544D;
  --contorno:       #6E7E77;
  --contorno-suave: rgba(242, 236, 212, .34);

  /* ---- Tipografía (Brand Book · 04 Tipografía) ----
     Lemon Milk comunica, Montserrat informa. Para web el brandbook pide
     Montserrat en navegación y cuerpo, y Lemon Milk sólo en encabezados
     especiales. Lemon Milk es de licencia comercial y no se incluye: en
     cuanto el archivo esté en assets/fuentes/ se activa sola. */
  --f-titular: "Lemon Milk", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-cuerpo:  "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-display:     clamp(2rem, 1.15rem + 4.2vw, 3.75rem);
  --t-titular:     clamp(1.75rem, 1.3rem + 2.3vw, 2.75rem);
  --t-titular-md:  clamp(1.3rem, 1.1rem + 1vw, 1.875rem);
  --t-cuerpo-lg:   1.125rem;
  --t-cuerpo:      1rem;
  --t-etiqueta:    0.875rem;
  --t-etiqueta-sm: 0.75rem;

  /* ---- Ritmo ---- */
  --margen:     clamp(20px, 5vw, 64px);
  --gutter:     24px;
  --unidad:     8px;
  --contenedor: 1280px;
  --seccion:    clamp(3.5rem, 7vw, 6rem);

  /* ---- Forma ----
     El brandbook pide esquinas redondeadas en los botones, no la estética
     angular de la propuesta anterior. */
  --r:      6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-full: 20px;
  --r-pill: 999px;

  --sombra:    0 1px 2px rgba(23, 36, 31, .05), 0 6px 20px rgba(23, 36, 31, .08);
  --sombra-lg: 0 4px 10px rgba(23, 36, 31, .07), 0 24px 56px rgba(23, 36, 31, .14);

  --transicion: 300ms cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------- 2. Cimientos */
*, *::before, *::after { box-sizing: border-box; }

/* El «hidden» del HTML sólo vale display:block en la hoja del navegador, así
   que cualquier regla con flex o grid lo pisa en silencio. Se refuerza una
   vez acá en lugar de parchearlo elemento por elemento. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-barra) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 81, 71, .12);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--verde); color: #fff; }

/* Brand Book 04: «Lemon Milk comunica, Montserrat informa». Los titulares
   grandes llevan la tipografía de marca; de h3 hacia abajo manda Montserrat,
   porque el brandbook pide evitar textos largos en Lemon Milk. */
h1, h2 {
  font-family: var(--f-titular);
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  letter-spacing: .005em;
}

h3, h4 {
  font-family: var(--f-cuerpo);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

/* Lemon Milk es de licencia comercial y no viaja en el repositorio. En cuanto
   el archivo esté en assets/fuentes/ la marca aparece sola; mientras tanto
   Montserrat toma su lugar sin romper nada. */
@font-face {
  font-family: "Lemon Milk";
  src: url("../fuentes/LemonMilk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fuentes/LemonMilk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

/* El aro de foco se cuelga del tono del tema: lima sobre fondo verde, verde
   sobre fondo crema. En lima fijo era casi invisible en las páginas claras. */
:focus-visible {
  outline: 2px solid var(--tono-etiqueta, var(--lima));
  outline-offset: 3px;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--crema); color: var(--verde);
  padding: 12px 20px; border-radius: 0 0 var(--r-xl) 0;
  font-size: var(--t-etiqueta); font-weight: 600;
}
.saltar-al-contenido:focus { left: 0; }

/* Textura de grano — presente en toda la propuesta de Stitch */
.textura {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- 3. Utilitarios */
.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--seccion); }

/* Cada tema publica sus tonos secundarios como variables propias.
   Antes esto se resolvía con selectores de descendencia («.tema-claro .apagado»),
   y eso se rompe en cuanto un bloque oscuro vive dentro de una página clara:
   body.tema-claro seguía ganando y el texto quedaba gris oscuro sobre verde
   oscuro, ilegible. Las variables heredan del ancestro MÁS CERCANO, así que
   anidar temas ahora funciona en cualquier combinación. */
.tema-oscuro {
  background: var(--verde); color: var(--crema);
  --tono-apagado: var(--crema-dim); --tono-filete: var(--lima); --tono-etiqueta: var(--lima);
}
.tema-medio {
  background: var(--verde-medio); color: var(--crema);
  --tono-apagado: var(--crema-dim); --tono-filete: var(--lima);
  /* El lima sobre el verde medio se queda en 4.39, apenas por debajo del
     mínimo para 12 px. Sobre el verde oscuro sí pasa (5.88), por eso aquí
     —y sólo aquí— la etiqueta va en crema (4.96). El filete sigue en lima. */
  --tono-etiqueta: var(--crema);
}
.tema-claro {
  background: var(--crema); color: var(--tinta);
  --tono-apagado: var(--tinta-var); --tono-filete: var(--naturaleza); --tono-etiqueta: var(--verde);
}
.tema-hueso {
  background: var(--crema-2); color: var(--tinta);
  --tono-apagado: var(--tinta-var); --tono-filete: var(--naturaleza); --tono-etiqueta: var(--verde);
}

.etiqueta {
  font-size: var(--t-etiqueta-sm);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.titular    { font-size: var(--t-titular); font-weight: 600; }
.titular-xl { font-size: var(--t-display); letter-spacing: -.02em; }
.titular-md { font-size: var(--t-titular-md); font-weight: 500; line-height: 1.3; }
.cuerpo-lg  { font-size: var(--t-cuerpo-lg); }

.filete {
  width: 64px; height: 2px; border: 0; margin: 20px auto 0;
  background: var(--tono-filete, var(--lima));
}

.encabezado-seccion { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado-seccion .etiqueta {
  display: block; color: var(--tono-etiqueta, var(--verde)); margin-bottom: 12px;
}

.apagado { color: var(--tono-apagado, var(--crema-dim)); }

/* ------------------------------------------------------------- 4. Botones */
/* Brand Book 08: alto 48-52 px, padding lateral 24-32 px, semibold,
   esquinas redondeadas. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  padding: 12px 28px;   /* 12+12+22.4+4 = 50.4 px de alto */
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: .06em;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:active { transform: translateY(1px); }

/* Primary / Filled */
.boton--verde { background: var(--verde); color: #fff; border-color: var(--verde); }
.boton--verde:hover { background: var(--verde-profundo); border-color: var(--verde-profundo); }

/* Warm / Accent — el lima es «energía», reservado a acciones clave */
.boton--acento { background: var(--lima); color: var(--verde); border-color: var(--lima); }
.boton--acento:hover { background: #cdda52; border-color: #cdda52; }

/* Sobre fondo verde */
.boton--claro { background: var(--crema); color: var(--verde); border-color: var(--crema); }
.boton--claro:hover { background: #fff; border-color: #fff; }

/* Secondary / Outline */
.boton--linea { background: transparent; color: currentColor; border-color: currentColor; }
.boton--linea:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.tema-oscuro .boton--linea:hover, .tema-medio .boton--linea:hover {
  background: var(--crema); color: var(--verde); border-color: var(--crema);
}

.boton--bloque { width: 100%; }

.enlace-subrayado {
  font-size: var(--t-etiqueta); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--lima);
  padding-bottom: 4px;
  transition: color var(--transicion);
}
.enlace-subrayado:hover { color: var(--lima); }

.icono {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Logotipos de terceros (WhatsApp, Instagram…): son glifos rellenos. */
.icono--marca { fill: currentColor; stroke: none; }

/* ----------------------------------------------------- 5. Barra de navegación */
.barra {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  background: var(--verde);
  color: var(--crema);
  border-bottom: 1px solid var(--verde-medio);
}
.barra--clara {
  background: rgba(252, 249, 245, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  border-bottom-color: var(--crema-5);
}

.barra__interior {
  max-width: var(--contenedor); margin-inline: auto;
  padding: 14px var(--margen);
  padding-top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.marca { display: flex; align-items: center; gap: 11px; }

/* La firma es el logo partido en dos: el óvalo a la izquierda y las palabras
   a la derecha. El nombre ya no se escribe en texto; sale con la tipografía
   del propio logo. Las dos piezas van enmascaradas para que tomen el color de
   la barra (crema sobre verde, verde sobre crema). */
.marca__sello,
.marca__nombre {
  display: block; flex: none;
  background-color: currentColor;
}
.marca__sello {                      /* isotipo.png, 132x182 */
  width: 32px; height: 44px;
  -webkit-mask: url("../img/isotipo.png") center / contain no-repeat;
  mask: url("../img/isotipo.png") center / contain no-repeat;
}
.marca__nombre {                     /* logotipo-texto.png, 230x117 */
  width: 67px; height: 34px;
  -webkit-mask: url("../img/logotipo-texto.png") left center / contain no-repeat;
  mask: url("../img/logotipo-texto.png") left center / contain no-repeat;
}
.barra--clara .marca__sello,
.barra--clara .marca__nombre { background-color: var(--verde); }
.marca__pie {
  display: block; margin-top: 3px;
  font-family: var(--f-cuerpo); font-size: 9px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--crema-dim);
}
.barra--clara .marca__pie { color: var(--tinta-var); }

.menu { display: none; align-items: center; gap: var(--gutter); }
.menu a {
  font-size: var(--t-etiqueta);
  letter-spacing: .16em; text-transform: uppercase;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.menu a:hover { color: var(--lima); }
.barra--clara .menu a:hover { color: var(--verde); }
.menu a[aria-current="page"] { border-bottom-color: currentColor; font-weight: 600; }

.barra__acciones { display: flex; align-items: center; gap: 6px; }
.barra__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  font-size: 22px;
  transition: background-color var(--transicion), color var(--transicion);
}
.barra__icono:hover { color: var(--lima); background: rgba(255, 255, 255, .08); }
.barra--clara .barra__icono:hover { color: var(--verde); background: var(--crema-3); }

.barra__hamburguesa { display: inline-flex; }

.panel-movil {
  display: none;
  border-top: 1px solid var(--verde-medio);
  padding: 8px var(--margen) 24px;
}
.barra--clara .panel-movil { border-top-color: var(--crema-5); }
.panel-movil.abierto { display: block; }
.panel-movil a {
  display: block; padding: 15px 0; min-height: 44px;
  font-size: var(--t-etiqueta);
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.barra--clara .panel-movil a { border-bottom-color: var(--crema-4); }

@media (min-width: 900px) {
  .menu { display: flex; }
  .barra__hamburguesa { display: none; }
  .panel-movil, .panel-movil.abierto { display: none; }
}

/* ------------------------------------------------------------- 6. Pie de página */
/* El pie viene en dos versiones y cada una fija sus propios tonos, igual que
   los temas de sección: así el legal y el marcador del boletín se leen en las
   dos sin repetir una regla por variante. */
.pie {
  border-top: 1px solid var(--verde); background: var(--verde-medio); color: var(--crema);
  --tono-apagado: var(--crema-dim);
}
.pie--claro {
  background: var(--crema-3); color: var(--tinta); border-top-color: var(--crema-5);
  --tono-apagado: var(--tinta-var);
}

.pie__cuerpo {
  max-width: var(--contenedor); margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--margen);
  display: grid; gap: var(--gutter) 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .pie__cuerpo { grid-template-columns: 1.4fr 1fr 1.2fr; } }

/* El pie lleva la misma firma que la barra, más grande. Las dos piezas van
   como pseudoelementos para que el span quede vacío en el HTML. */
.pie__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pie__marca::before,
.pie__marca::after { content: ""; display: block; flex: none; background-color: currentColor; }
.pie__marca::before {
  width: 33px; height: 46px;
  -webkit-mask: url("../img/isotipo.png") center / contain no-repeat;
  mask: url("../img/isotipo.png") center / contain no-repeat;
}
.pie__marca::after {
  width: 89px; height: 45px;
  -webkit-mask: url("../img/logotipo-texto.png") left center / contain no-repeat;
  mask: url("../img/logotipo-texto.png") left center / contain no-repeat;
}
.pie__lista { display: flex; flex-direction: column; gap: 12px; }
/* El lima sobre el verde del pie se queda en 4.39, apenas por debajo del
   mínimo. El acento pasa al subrayado y el texto se mantiene legible. */
.pie__lista a { transition: color var(--transicion), border-color var(--transicion);
                border-bottom: 1px solid transparent; align-self: flex-start; }
.pie__lista a:hover { color: #fff; border-bottom-color: var(--lima); }
.pie--claro .pie__lista a:hover { color: var(--verde); }
.pie__titulo { font-family: var(--f-titular); font-size: var(--t-titular-md); display: block; margin-bottom: 16px; }

.boletin { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.boletin input {
  flex: 1; min-width: 0; background: transparent; border: 0; padding: 4px 0;
  color: inherit;
}
.boletin input::placeholder { color: var(--tono-apagado, var(--crema-dim)); opacity: 1; }
.boletin input:focus { outline: none; }
.boletin button { color: var(--lima); font-size: 22px; display: inline-flex; transition: opacity var(--transicion); }
.pie--claro .boletin button { color: var(--verde); }
.boletin button:hover { opacity: .7; }

/* Es un mensaje de estado («correo inválido» / «listo»): sin transparencia. */
.boletin__aviso { margin-top: 10px; font-size: var(--t-etiqueta-sm); min-height: 1.2em; }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding: 22px var(--margen);
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--t-etiqueta); color: var(--tono-apagado, var(--crema-dim));
}
.pie--claro .pie__legal { border-top-color: var(--crema-5); }

/* El número de SINPE hereda el color del pie (crema sobre verde, tinta sobre
   crema), así se lee en las dos variantes sin una regla por cada una. */
.pie__sinpe { margin-top: 18px; font-size: var(--t-etiqueta); }
.pie__sinpe b { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.redes { display: flex; gap: 8px; margin-top: 20px; }
.redes a {
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; font-size: 18px; opacity: .8;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), opacity var(--transicion);
}
.redes a:hover { background: var(--lima); border-color: var(--lima); color: var(--verde); opacity: 1; }

/* ================================================================ INICIO === */
.heroe {
  position: relative; min-height: min(80svh, 720px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.heroe__fondo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.heroe__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .72) 100%);
}
.heroe__contenido {
  position: relative; z-index: 1;
  max-width: 56rem; margin-inline: auto;
  padding: clamp(4rem, 10vw, 7rem) var(--margen);
  color: #fff;
}
.heroe__sello {
  width: clamp(150px, 20vw, 240px); margin: 0 auto 32px;
  opacity: .92; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45));
}
.heroe__titulo {
  font-size: var(--t-display); letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  margin-bottom: 24px;
}
.heroe__bajada { max-width: 34rem; margin: 0 auto; opacity: .9; }
.heroe .boton { margin-top: 32px; }

/* Paneles de la portada ------------------------------------------------------
   Cuatro maquetas: «mitad» se empareja de dos en dos (es como nació la
   portada), «izquierda» y «derecha» ponen la foto a un lado y el texto al
   otro, y «centro» ocupa el ancho completo con el texto encima. */
.paneles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border: 1px solid var(--verde-medio);
}
@media (min-width: 840px) { .paneles { grid-template-columns: 1fr 1fr; } }

.panel {
  position: relative; overflow: hidden;
  min-height: 384px; display: flex;
  grid-column: 1 / -1;          /* por defecto, ancho completo */
}
@media (min-width: 840px) {
  .panel { min-height: 600px; }
  .panel--mitad { grid-column: span 1; }
}

.panel__imagen {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.panel:hover .panel__imagen, .panel:focus-within .panel__imagen { transform: scale(1.05); }

.panel__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); transition: background-color 500ms; }
.panel:hover .panel__velo, .panel:focus-within .panel__velo { background: rgba(0, 0, 0, .48); }

.panel__texto {
  position: relative; z-index: 1;
  margin: auto; padding: 32px; color: #fff; max-width: 30rem;
  display: flex; flex-direction: column; gap: 14px;
}
.panel__titulo {
  font-size: var(--t-titular-md); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 1px solid #fff; padding-bottom: 10px;
  align-self: flex-start;
}
.panel__descripcion { opacity: 0; transition: opacity 500ms 100ms; }
.panel:hover .panel__descripcion, .panel:focus-within .panel__descripcion { opacity: 1; }
@media (max-width: 839px) { .panel__descripcion { opacity: 1; } }

/* Centro: el texto manda y va centrado */
.panel--centro { min-height: 420px; }
.panel--centro .panel__texto { text-align: center; align-items: center; max-width: 42rem; }
.panel--centro .panel__titulo { align-self: center; }

/* Izquierda y derecha: foto a un lado, texto al otro, sin velo oscuro */
@media (min-width: 840px) {
  .panel--izquierda, .panel--derecha { min-height: 460px; }
  .panel--izquierda .panel__imagen { right: 50%; }
  .panel--derecha   .panel__imagen { left: 50%; }
  .panel--izquierda .panel__velo, .panel--derecha .panel__velo { display: none; }

  .panel--izquierda, .panel--derecha { background: var(--verde); }
  .panel--izquierda .panel__texto { margin-right: 0; margin-left: 50%; text-align: left; }
  .panel--derecha   .panel__texto { margin-left: 0;  margin-right: 50%; text-align: left; }
  .panel--izquierda .panel__descripcion,
  .panel--derecha   .panel__descripcion { opacity: 1; }
}

.paneles__vacio { padding: 48px; text-align: center; color: var(--crema-dim); grid-column: 1 / -1; }

/* Pilares */
.pilares { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pilares { grid-template-columns: repeat(3, 1fr); } }

.pilar {
  background: var(--verde); border: 1px solid var(--contorno-suave);
  padding: 40px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color var(--transicion), transform var(--transicion);
}
.pilar:hover { border-color: var(--lima); transform: translateY(-4px); }
@media (min-width: 900px) { .pilar--elevado { margin-top: -32px; } }

.pilar__icono {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  background: #fff; color: var(--verde);
  display: grid; place-items: center; margin-bottom: 24px; font-size: 30px;
}
.pilar h3 { font-size: var(--t-titular-md); font-weight: 500; margin-bottom: 14px; }

/* Vida cafetera */
.galeria__encabezado {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
}
/* ------------------------------------------------- Diario: historias ----
   Fila de tarjetas verticales, como las historias de Instagram. En pantalla
   angosta se desliza de lado con anclaje, en vez de apretarse. */
.historias {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.historias::-webkit-scrollbar { height: 6px; }
.historias::-webkit-scrollbar-thumb { background: var(--contorno-suave); border-radius: var(--r-pill); }

/* El texto va ARRIBA y fuera de la foto: encima se perdía contra las imágenes
   cargadas y había que recortarlo. Las tarjetas se alinean por abajo, así las
   fotos quedan a la misma altura aunque unos textos sean más largos que otros. */
.historia {
  flex: none; width: clamp(132px, 16vw, 178px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  scroll-snap-align: start;
  transition: transform var(--transicion);
}
.historia:hover, .historia:focus-visible { transform: translateY(-4px); }

.historia__foto {
  display: block; aspect-ratio: 9 / 16;
  padding: 3px;                       /* el aro */
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--lima), var(--crema) 70%);
  transition: box-shadow var(--transicion);
}
.historia:hover .historia__foto, .historia:focus-visible .historia__foto { box-shadow: var(--sombra-lg); }

.historia img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: calc(var(--r-xl) - 3px);
  background: var(--verde-medio);
}

.historia__leyenda {
  font-size: var(--t-etiqueta-sm); line-height: 1.35;
  text-align: left; text-wrap: pretty;
  color: var(--tono-apagado, var(--crema-dim));
}

/* En el visor el texto va debajo de la foto, sobre el fondo oscuro: arriba
   están las barras de avance. Fuera de la imagen, se lee siempre. */
.visor__marco {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: min(92vw, 520px);
}
.visor__leyenda {
  color: #fff; font-size: var(--t-cuerpo); line-height: 1.45;
  text-align: center; text-wrap: pretty; max-width: 42ch;
}

/* ------------------------------------------------------ Visor de historias */
.visor {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 18, 15, .96);
  display: grid; place-items: center;
}
.visor__foto {
  max-width: min(92vw, 520px); max-height: 68vh;
  object-fit: contain; border-radius: var(--r-xl);
}

/* Una barra por foto; la de la foto actual se llena sola. */
.visor__barras {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; gap: 5px; z-index: 2;
}
.visor__barra {
  flex: 1; height: 3px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .3); overflow: hidden;
}
.visor__barra span { display: block; height: 100%; width: 0; background: #fff; }
.visor__barra--vista span { width: 100%; }
.visor__barra--activa span { animation: visorAvance var(--visor-duracion, 5s) linear forwards; }
@keyframes visorAvance { from { width: 0; } to { width: 100%; } }

.visor__cerrar {
  position: absolute; top: 28px; right: 16px; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: #fff;
  background: rgba(255, 255, 255, .14);
}
.visor__cerrar:hover { background: rgba(255, 255, 255, .26); }
.visor__cerrar svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}

/* Mitades invisibles para avanzar y retroceder, como en el teléfono. */
.visor__lado { position: absolute; top: 0; bottom: 0; width: 38%; z-index: 1; background: transparent; }
.visor__lado--izq { left: 0; }
.visor__lado--der { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .visor__barra--activa span { animation: none; width: 100%; }
}

/* Ubicaciones — fila de paneles que se despliegan, como en raulcastano.com */
/* ------------------------------------------- Elegir sucursal (carta) ---
   La carta es distinta en cada casa, así que la página pide elegir una antes
   de mostrar nada. La elección queda guardada en el navegador. */
.elegir-sucursal { text-align: center; max-width: 54rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }

.elegir-sucursal__titulo {
  font-family: var(--f-titular);
  font-size: var(--t-titular-md); color: var(--verde); margin-bottom: 8px;
}
.elegir-sucursal__ayuda {
  font-size: var(--t-etiqueta); color: var(--tono-apagado, var(--tinta-var));
  margin-bottom: 28px;
}
.elegir-sucursal__opciones {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.opcion-sucursal {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; text-align: left;
  border: 1px solid var(--crema-5); border-radius: var(--r-xl);
  background: var(--crema-2); color: var(--tinta);
  transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}
.opcion-sucursal:hover, .opcion-sucursal:focus-visible {
  border-color: var(--verde); background: var(--crema-3); transform: translateY(-2px);
}
.opcion-sucursal__nombre { font-family: var(--f-titular); font-size: 1.0625rem; color: var(--verde); }
.opcion-sucursal__sitio { font-size: var(--t-etiqueta-sm); color: var(--tinta-var); }

.sucursal-elegida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--t-etiqueta); color: var(--tinta-var);
}
.sucursal-elegida b { font-family: var(--f-titular); color: var(--verde); }
.sucursal-elegida__cambiar {
  font-size: var(--t-etiqueta-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde); padding-bottom: 2px;
  border-bottom: 1px solid var(--crema-5);
  transition: border-color var(--transicion);
}
.sucursal-elegida__cambiar:hover { border-bottom-color: var(--verde); }

/* ------------------------------------------------- Mapa de sucursales ---
   El mapa es Leaflet sobre OpenStreetMap: sin llave de API y sin tarjeta.
   Arranca oculto y el JS le quita el «hidden» sólo si la librería cargó y hay
   al menos una sucursal con coordenadas; si el CDN falla, la sección sigue
   funcionando con la rejilla de tarjetas de siempre. */
.mapa-sucursales { margin-bottom: 30px; }

.mapa-sucursales__lienzo {
  height: clamp(300px, 46vh, 460px);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--verde-profundo);
  box-shadow: var(--sombra-lg);
}

.mapa-sucursales__pie {
  margin-top: 12px;
  text-align: center;
  font-size: var(--t-etiqueta-sm);
  color: var(--tono-apagado, var(--crema-dim));
}

/* El pin se dibuja en CSS en vez de usar las imágenes de Leaflet: así no
   dependemos de una segunda ruta del CDN y toma los colores de la marca.
   La gota se rota 45°, por eso el punto de adentro va contrarrotado. */
.pin-sucursal {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--crema);
  border: 2px solid var(--verde);
  box-shadow: 0 3px 8px rgba(23, 36, 31, .45);
  display: grid; place-items: center;
  transition: background-color var(--transicion), transform var(--transicion);
}
.pin-sucursal::after {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--verde);
  transform: rotate(45deg);
}
.pin-sucursal--activo {
  background: var(--lima);
  transform: rotate(-45deg) scale(1.22);
}
.pin-sucursal--activo::after { background: var(--verde-profundo); }

/* Leaflet trae su propio globo: lo acercamos a la tipografía del sitio. */
.leaflet-container { font-family: var(--f-cuerpo); }
.leaflet-popup-content-wrapper {
  border-radius: var(--r-lg);
  background: var(--crema);
  color: var(--tinta);
}
.leaflet-popup-content { margin: 12px 14px; font-family: var(--f-cuerpo); }
.leaflet-popup-content b { font-family: var(--f-titular); color: var(--verde); }
.leaflet-popup-tip { background: var(--crema); }

/* La tarjeta elegida desde el mapa, o con «Ver en el mapa». */
.sucursal--activa { outline: 3px solid var(--lima); outline-offset: -3px; }

.sucursales {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 8px;
}

.sucursal {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  isolation: isolate;
}

.sucursal > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.sucursal:hover > img, .sucursal:focus-within > img { transform: scale(1.06); }

.sucursal__velo {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 81, 71, .74);
  transition: background-color 500ms;
}
.sucursal:hover .sucursal__velo, .sucursal:focus-within .sucursal__velo { background: rgba(0, 81, 71, .52); }

.sucursal__cuerpo {
  margin: auto;
  padding: 32px 24px;
  text-align: center;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.sucursal__nombre {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.sucursal__acciones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
}
.sucursal__acciones a,
.sucursal__acciones button {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-etiqueta-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: color var(--transicion), border-color var(--transicion);
}
/* El acento lima va al subrayado, no al texto: encima de la foto el lima
   sobre el velo aclarado caía a 4.03. */
.sucursal__acciones a:hover,
.sucursal__acciones button:hover { color: #fff; border-bottom-color: var(--lima); }
.sucursal__acciones .icono { width: 15px; height: 15px; }

@media (min-width: 900px) {
  .sucursales {
    display: flex;
    min-height: 460px;
  }
  .sucursal {
    flex: 1 1 0; min-width: 0;
    transition: flex-grow 550ms cubic-bezier(.2, .7, .3, 1);
  }
  .sucursal:hover, .sucursal:focus-within { flex-grow: 2.6; }

  /* En reposo sólo se ve el nombre; al desplegar aparecen las acciones. */
  .sucursal__acciones {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms 120ms, transform 400ms 120ms;
  }
  .sucursal:hover .sucursal__acciones,
  .sucursal:focus-within .sucursal__acciones { opacity: 1; transform: none; }
}

.nota-horarios {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin-top: 40px; text-align: center;
  font-size: var(--t-etiqueta); color: var(--crema-dim);
}
.nota-horarios .icono { width: 18px; height: 18px; flex: none; color: var(--lima); }

/* ================================================================ CARTA === */
.menu-cabecera { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

/* Índice de categorías, pegajoso bajo la barra */
.indice-carta {
  position: sticky; top: var(--alto-barra); z-index: 30;
  background: rgba(252, 249, 245, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--crema-5);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.indice-carta__pista {
  display: flex; gap: 8px;
  overscroll-behavior-x: contain;
  max-width: var(--contenedor); margin-inline: auto;
  padding: 12px var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--margen);
}
.indice-carta__pista::-webkit-scrollbar { display: none; }

.indice-carta__chip {
  flex: none;
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--crema-5);
  border-radius: var(--r-pill);
  font-size: var(--t-etiqueta-sm);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-var);
  white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.indice-carta__chip:hover { border-color: var(--contorno-suave); color: var(--verde); }
.indice-carta__chip.activo { background: var(--verde); border-color: var(--verde); color: #fff; }

/* Bloques por categoría */
.grupo-carta { scroll-margin-top: calc(var(--alto-barra) + 12px); padding-block: clamp(2rem, 5vw, 3.25rem) 0; }
.grupo-carta:first-child { padding-top: 0; }

.grupo-carta__cabecera { border-bottom: 2px solid var(--verde); padding-bottom: 14px; margin-bottom: 8px; }
.grupo-carta__titulo {
  font-size: var(--t-titular-md); color: var(--verde);
  text-transform: uppercase; letter-spacing: .06em;
}
.grupo-carta__descripcion { margin-top: 8px; font-size: var(--t-etiqueta); color: var(--tinta-var); }
.grupo-carta__nota {
  margin-top: 16px; font-size: var(--t-etiqueta-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--naturaleza);
}

.lista-carta { display: grid; gap: 0; }
@media (min-width: 900px) { .lista-carta { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

.plato {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--crema-4);
}
.plato__cuerpo { flex: 1; min-width: 0; }
.plato__nombre {
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde);
}
.plato__etiqueta {
  display: inline-block; vertical-align: middle;
  margin-left: 4px; padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--lima); color: var(--verde);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
}
.plato__descripcion { margin-top: 6px; font-size: var(--t-etiqueta); color: var(--tinta-var); }

.plato__precio {
  flex: none;
  font-family: var(--f-titular);
  font-size: var(--t-cuerpo-lg); color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.plato__precio--texto {
  font-family: var(--f-cuerpo); font-size: var(--t-etiqueta-sm);
  font-weight: 600; text-align: right; max-width: 11rem;
}
.plato__precio--consultar {
  font-family: var(--f-cuerpo); font-size: var(--t-etiqueta-sm);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--naturaleza);
}

.carta-estado { padding: 48px 0; text-align: center; color: var(--tinta-var); }

.aviso-menu {
  margin-top: 48px; padding: 20px 24px;
  border: 1px dashed var(--contorno-suave); border-radius: var(--r-xl);
  color: var(--tinta-var); font-size: var(--t-etiqueta);
  background: var(--crema-2);
}

/* ========================================================= FIDELIZACIÓN === */
.recordatorio {
  max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
  border: 1px solid var(--lima);
  border-radius: var(--r-xl);
  background: rgba(255, 219, 199, .07);
}
.recordatorio__marca {
  display: block; width: 40px; height: 55px; margin: 0 auto 18px;
  background-color: var(--lima);
  -webkit-mask: url("../img/isotipo.png") center / contain no-repeat;
  mask: url("../img/isotipo.png") center / contain no-repeat;
}
.recordatorio__texto {
  font-family: var(--f-titular);
  font-size: var(--t-titular-md);
  line-height: 1.3;
  color: var(--lima);
}
.recordatorio__apoyo { margin-top: 14px; color: var(--crema-dim); font-size: var(--t-cuerpo); }

.beneficios { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 860px) { .beneficios { grid-template-columns: repeat(3, 1fr); } }

.beneficio {
  border: 1px solid var(--contorno-suave);
  padding: 32px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: border-color var(--transicion), transform var(--transicion);
}
.beneficio:hover { border-color: var(--lima); transform: translateY(-3px); }
.beneficio__icono {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--naturaleza); color: #fff;
  display: grid; place-items: center; margin-bottom: 20px; font-size: 26px;
}
.beneficio__titulo {
  font-size: var(--t-titular-md); font-weight: 500; margin-bottom: 12px;
}

/* Niveles y premios, leídos del programa de fidelidad */
.fidelidad-datos {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) { .fidelidad-datos { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.fidelidad-datos[hidden] { display: none; }

.fidelidad-bloque__titulo {
  font-size: var(--t-etiqueta); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--f-cuerpo);
  color: var(--lima);
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.niveles { display: flex; flex-direction: column; gap: 2px; }
.nivel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nivel__nombre {
  font-family: var(--f-titular); font-size: var(--t-cuerpo-lg);
}
.nivel__puntos {
  font-size: var(--t-etiqueta-sm); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema-dim); font-variant-numeric: tabular-nums;
}

.premios { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .premios { grid-template-columns: 1fr 1fr; } }

.premio {
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  border: 1px solid var(--contorno-suave);
  border-radius: var(--r-lg);
}
.premio img {
  width: 56px; height: 56px; flex: none;
  object-fit: cover; border-radius: var(--r);
  background: var(--verde-medio);
}
.premio__cuerpo { min-width: 0; }
.premio__nombre { font-size: var(--t-etiqueta); font-weight: 600; }
.premio__puntos {
  display: inline-block; margin-top: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--lima); color: var(--verde);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* Cómo funciona y qué trae la app */
.pasos, .pantallas { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.pasos__titulo {
  font-family: var(--f-cuerpo);
  font-size: var(--t-etiqueta); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--lima);
  padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(242, 236, 212, .22);
}

.pasos__lista {
  list-style: none; margin: 0; padding: 0;   /* <ol> trae sangría por defecto */
  display: grid; gap: var(--gutter); grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .pasos__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pasos__lista { grid-template-columns: repeat(4, 1fr); } }

.paso { position: relative; padding-top: 52px; }
.paso__numero {
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--lima); color: var(--verde);
  display: grid; place-items: center;
  font-size: var(--t-etiqueta); font-weight: 700;
}
.paso h3 { font-size: var(--t-cuerpo-lg); margin-bottom: 8px; }
.paso p { font-size: var(--t-etiqueta); }

.pantallas__lista { display: grid; gap: 2px; }
.pantallas__lista li {
  display: grid; gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(242, 236, 212, .14);
}
@media (min-width: 720px) {
  .pantallas__lista li { grid-template-columns: 14rem 1fr; align-items: baseline; }
}
.pantallas__lista strong { font-weight: 600; }
.pantallas__lista span { font-size: var(--t-etiqueta); }

/* Dos botones: registrarse o entrar */
.registro .boton + .boton { margin-left: 12px; }
@media (max-width: 560px) {
  .registro .boton { display: flex; width: 100%; }
  .registro .boton + .boton { margin-left: 0; margin-top: 12px; }
}

.registro { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.registro__nota { max-width: 34rem; margin: 18px auto 0; font-size: var(--t-etiqueta); }

/* ========================================================== SUSCRIPCIÓN === */
.heroe-suave {
  position: relative; overflow: hidden;
  text-align: center; padding-block: clamp(4rem, 10vw, 7rem);
}
.heroe-suave__fondo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .16;
}
.heroe-suave__contenido { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.heroe-suave h1 { font-size: var(--t-display); color: var(--verde); margin-bottom: 20px; }
.heroe-suave h1 em { display: block; font-style: italic; color: var(--naturaleza); font-weight: 400; }

.planes { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .planes { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  background: var(--crema); border: 1px solid var(--crema-5);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  display: flex; flex-direction: column; text-align: center;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.plan:hover { border-color: var(--verde); box-shadow: var(--sombra); }
.plan--destacado { border-color: var(--verde); box-shadow: var(--sombra-lg); }
@media (min-width: 920px) { .plan--destacado { margin-top: -24px; padding-block: 48px; } }

.plan__insignia {
  align-self: center;
  background: var(--crema); color: var(--naturaleza);
  border-radius: var(--r-pill);
  padding: 5px 14px; margin-bottom: 18px;
  font-size: var(--t-etiqueta-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.plan--destacado .plan__insignia {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--verde); color: #fff; margin: 0;
}
.plan__nombre { font-size: var(--t-titular-md); font-weight: 400; color: var(--verde); margin-bottom: 10px; }
.plan__resumen { color: var(--tinta-var); font-size: var(--t-etiqueta); }
.plan__precio { margin: 22px 0 4px; font-family: var(--f-titular); font-size: 2rem; color: var(--verde); }
.plan__periodo { font-size: var(--t-etiqueta-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-var); }

.plan__lista { margin: 28px 0; border-top: 1px solid var(--crema-5); padding-top: 24px; text-align: left; flex: 1; }
.plan__lista li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: var(--t-etiqueta); }
.plan__lista .icono { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--verde); }
.plan__lista li.no { color: var(--tinta-var); }
.plan__lista li.no .icono { color: var(--contorno); }

.sello-calidad { text-align: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.sello-calidad__marca {
  width: 130px; height: 170px; margin-inline: auto;
  background-color: var(--tinta); opacity: .13;
  -webkit-mask: url("../img/logo-sello.png") center / contain no-repeat;
  mask: url("../img/logo-sello.png") center / contain no-repeat;
}
.sello-calidad p { margin-top: 18px; font-size: var(--t-etiqueta-sm); letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-var); }

.formulario { max-width: 46rem; }
.formulario h2 { font-size: var(--t-titular); color: var(--verde); padding-bottom: 20px; border-bottom: 1px solid var(--crema-5); }
.campos { display: grid; gap: 8px 24px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; padding-block: 18px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--t-etiqueta-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-var); }
.campo input, .campo select, .campo textarea {
  margin-top: 8px; padding: 8px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--contorno);
  border-radius: 0;
  transition: border-color var(--transicion);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-bottom-color: var(--verde);
}
.campo__error { margin-top: 6px; font-size: var(--t-etiqueta-sm); color: #ba1a1a; min-height: 1.1em; }

.acepto { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; font-size: var(--t-etiqueta); color: var(--tinta-var); }
.acepto input { margin-top: 4px; accent-color: var(--verde); }

.formulario__pie { display: flex; justify-content: flex-end; margin-top: 36px; }
.mensaje-exito {
  margin-top: 24px; padding: 18px 22px;
  border: 1px solid var(--verde); border-radius: var(--r-xl);
  background: rgba(0, 107, 94, .07); color: var(--verde);
  font-size: var(--t-etiqueta);
}
.mensaje-exito[hidden] { display: none; }

/* ============================================================= HISTORIA === */
.historia-heroe { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .historia-heroe { grid-template-columns: 5fr 7fr; gap: 56px; } }
.historia-heroe h1 { font-size: var(--t-display); color: var(--verde); margin-bottom: 24px; }
.historia-heroe p { color: var(--tinta-var); font-size: var(--t-cuerpo-lg); max-width: 30rem; margin-bottom: 36px; }

.historia-figura { position: relative; }
.historia-figura__principal {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--contorno-suave); border-radius: var(--r-full);
}
.historia-figura__principal img {
  width: 100%; height: 100%; object-fit: cover;
}
.historia-figura__inserto {
  display: none;
  position: absolute; bottom: -40px; left: -40px;
  width: 192px; height: 192px; padding: 8px;
  background: var(--crema-2); border: 1px solid var(--contorno-suave);
  border-radius: var(--r-full); box-shadow: var(--sombra-lg);
}
.historia-figura__inserto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 900px) { .historia-figura__inserto { display: block; } }

.bento { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 900px) { .bento { grid-template-columns: 4fr 8fr; align-items: center; } }
.bento__texto .etiqueta { display: block; color: var(--verde); margin-bottom: 16px; }
.bento__texto h2 { font-size: var(--t-titular); color: var(--verde); margin-bottom: 24px; }
.bento__texto p { color: var(--tinta-var); }

/* Las filas van en minmax(0, 1fr) y la foto en posición absoluta. Con «1fr»
   a secas y una imagen en el flujo, el alto natural de la foto manda sobre la
   fila: al subir una foto vertical de teléfono, el mosaico se estiraba en una
   columna larguísima. Así la pieza decide su alto y la foto se recorta. */
.bento__mosaico { display: grid; gap: var(--unidad); grid-template-columns: 1fr; min-height: 500px; }
@media (min-width: 640px) {
  .bento__mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
.bento__alto { grid-row: span 2; }
.bento__pieza {
  position: relative; overflow: hidden;
  border: 1px solid var(--contorno-suave); border-radius: var(--r-full);
  min-height: 220px;
}
@media (max-width: 639px) { .bento__pieza { aspect-ratio: 4 / 3; } }
.bento__pieza img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; transition: transform 700ms;
}
.bento__pieza:hover img { transform: scale(1.05); }
.bento__nota {
  border: 1px solid var(--contorno-suave); border-radius: var(--r-full);
  background: var(--crema); padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.bento__nota .icono { width: 34px; height: 34px; color: var(--verde); }
.bento__nota h3 { font-size: var(--t-titular-md); font-weight: 400; color: var(--verde); margin-bottom: 8px; }
.bento__nota p { color: var(--tinta-var); font-size: var(--t-etiqueta); }

.mapa {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 340px;
  border: 1px solid var(--contorno-suave); border-radius: var(--r-full);
  background: var(--crema-2); overflow: hidden;
}
.mapa > img { width: 100%; height: 100%; object-fit: cover; opacity: .85; mix-blend-mode: multiply; }
@media (max-width: 700px) { .mapa { aspect-ratio: 4 / 3; min-height: 0; } }

.chincheta { position: absolute; transform: translate(-50%, -50%); }
.chincheta__punto {
  position: relative; z-index: 2;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  background: var(--verde); border: 2px solid var(--crema);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.chincheta--secundaria .chincheta__punto { width: 13px; height: 13px; background: var(--naturaleza); }
.chincheta__pulso {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: var(--r-pill); background: rgba(0, 81, 71, .22);
  animation: pulso 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pulso { 75%, 100% { transform: scale(2); opacity: 0; } }

.chincheta__globo {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--crema); border: 1px solid var(--contorno-suave); border-radius: var(--r-lg);
  padding: 10px 16px; white-space: nowrap; z-index: 3;
  opacity: 0; pointer-events: none; transition: opacity var(--transicion);
  box-shadow: var(--sombra);
}
.chincheta:hover .chincheta__globo, .chincheta:focus-within .chincheta__globo { opacity: 1; }
.chincheta__globo strong { display: block; font-size: var(--t-etiqueta); color: var(--verde); letter-spacing: .06em; }
.chincheta__globo span { font-size: var(--t-etiqueta-sm); color: var(--tinta-var); }

.llamada { text-align: center; }
.llamada .icono { width: 38px; height: 38px; color: var(--crema); margin: 0 auto 24px; }
.llamada h2 { font-size: var(--t-titular); margin-bottom: 32px; max-width: 36rem; margin-inline: auto; }

/* --------------------------------------------------- 7. Aparición al hacer scroll */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; } }


/* ------------------------------------- 8. Pantallas táctiles (iOS/Android) */
@media (hover: none) {
  /* Lo que en escritorio se revela al pasar el cursor, aquí va siempre visible. */
  .panel__descripcion { opacity: 1; }
  .panel__velo { background: rgba(0, 0, 0, .44); }

  .sucursal__acciones { opacity: 1; transform: none; }
  .sucursal__velo { background: rgba(0, 81, 71, .58); }
  .sucursal:hover, .sucursal:focus-within { flex-grow: 1; }

  .chincheta__globo { opacity: 1; }

  /* El zoom por hover sólo marea si no hay cursor. */
  .galeria__pieza:hover img,
  .producto:hover img,
  .bento__pieza:hover img,
  .sucursal:hover > img { transform: none; }
}

/* Pantallas muy angostas: que el índice y los platos respiren. */
@media (max-width: 380px) {
  .plato { flex-direction: column; align-items: flex-start; gap: 6px; }
  .plato__precio { align-self: flex-start; }
}

/* Impresión: la carta en papel. */
@media print {
  .barra, .indice-carta, .pie, .textura, .saltar-al-contenido { display: none !important; }
  body { background: #fff; }
  .grupo-carta { break-inside: avoid; }
  .plato { break-inside: avoid; }
}