/* =====================================================================
   PEDALiCAFÉ · hoja de estilos única (todas las páginas)
   Índice: 1 fuentes · 2 tokens · 3 base · 4 utilidades · 5 cabecera
   6 botones · 7 secciones · 8 hero · 9 momento estrella · 10 selector
   11 carta · 12 bici interactiva · 13 rutas y rodadas · 14 eventos
   15 prueba social · 16 FAQ · 17 visítanos/mapa · 18 formularios
   19 pie · 20 barra móvil · 21 medios ilustrativos · 22 movimiento
   ===================================================================== */

/* 1 · Fuentes locales (subconjunto latino: tildes, ñ, ¿, ¡) ----------- */
/* Titulares: Montserrat (OFL), geométrica libre cercana a Coyote, la tipografía del logo.
   Si el cliente licencia Coyote como webfont, basta con cambiar esta @font-face y --f-titulo. */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Respaldo con métricas parecidas para reducir el salto al cargar la fuente */
@font-face {
  font-family: "Inter Respaldo";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Respaldo";
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 112%; ascent-override: 86%; descent-override: 22%; line-gap-override: 0%;
}

/* 2 · Tokens ------------------------------------------------------- */
:root {
  --rojo: #CE1417;          /* rojo corporativo (manual de marca). Blanco sobre rojo 5,6:1 */
  --rojo-hover: #A50F12;
  --rojo-tx: #A80F12;       /* rojo para texto pequeño sobre crema y crema 2 (≥ 5,7:1) */
  --rojo-claro: #FF6B6F;    /* rojo para texto pequeño sobre café (5,5:1) */
  --esperanza: #56230F;     /* marrón de Café Esperanza (11:1 sobre crema) */
  --esperanza-hover: #3E180A;
  --cafe: #2A1A12;
  --cafe-2: #3B271C;
  --cafe-3: #1C110B;
  --crema: #F5EDE2;
  --crema-2: #EADFCF;
  --crema-3: #DCCBB4;
  --verde: #8C9A5B;         /* solo decorativo */
  --blanco: #FFFFFF;
  --tx: var(--cafe);
  --tx-suave: #5A4334;      /* 8,4:1 sobre crema */
  --fondo: var(--crema);
  --foco: var(--cafe);
  --linea: rgba(42, 26, 18, .16);

  --f-titulo: "Montserrat", "Montserrat Respaldo", "Segoe UI", Arial, sans-serif;
  --f-texto: "Inter", "Inter Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.125rem, 1rem + .55vw, 1.4rem);
  --t-h3: clamp(1.15rem, .98rem + .7vw, 1.6rem);
  --t-h2: clamp(1.55rem, .9rem + 3vw, 3.4rem);
  --seccion-y: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* ritmo vertical común de las secciones */
  --t-h1: clamp(2.05rem, 1.05rem + 4.6vw, 5.4rem);

  --margen: clamp(16px, 4vw, 48px);
  --ancho: 1320px;
  --radio: 14px;
  --radio-g: 28px;
  --cabecera: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-entrada: 560ms;
  --sombra: 0 18px 40px -18px rgba(28, 17, 11, .45);
}

/* 3 · Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecera) + 16px);
  background: var(--cafe);
}
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--tx);
  background: var(--fondo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rojo); color: var(--blanco); }
[hidden] { display: none !important; }

/* Lenis (copiado de lenis-1.3.27.css para no cargar otro archivo) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* 4 · Utilidades --------------------------------------------------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--crema); color: var(--cafe); padding: .75rem 1rem; border-radius: 10px; font-weight: 700;
}
.saltar:focus { top: 12px; }
.antetitulo {
  font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: var(--t-xs); margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.antetitulo::before { /* la «i» de PEDALiCAFÉ como viñeta */
  content: ""; width: .42em; height: 1.05em; flex: none;
  background:
    radial-gradient(circle at 50% .21em, currentColor .2em, transparent .21em) top / 100% .42em no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 62% calc(100% - .52em) no-repeat;
  color: var(--rojo);
}
/* Pictogramas de marca como marcadores de sección: señal de café (círculo) y señal ciclista (triángulo) */
.antetitulo--cafe, .antetitulo--bici { flex-wrap: nowrap; }
.antetitulo--cafe::before, .antetitulo--bici::before {
  width: 1.9em; height: 1.9em; background: center / contain no-repeat;
}
.antetitulo--cafe::before { background-image: url("/assets/marca/senal-cafe.svg"); }
.antetitulo--bici::before { background-image: url("/assets/marca/senal-ciclista.svg"); }
.senal { display: inline-block; width: 2.6rem; height: 2.6rem; flex: none; }
.senales { display: inline-flex; gap: .6rem; align-items: center; }
/* Separador con señales (reemplaza la franja de meta) */
.separador {
  position: relative; height: 0; display: flex; justify-content: center; align-items: center; z-index: 2;
  border-top: 6px solid var(--rojo);
}
.separador .senales { position: absolute; top: 50%; transform: translateY(-50%); background: var(--crema); padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 0 0 6px var(--rojo); }
.separador .senal { width: 2.4rem; height: 2.4rem; }
.entradilla { font-size: var(--t-l); line-height: 1.5; max-width: 38ch; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px; line-height: 1.2;
  background: var(--cafe); color: var(--crema);
}
.etiqueta--propuesta { background: var(--rojo-tx); color: var(--blanco); }

.lista-i { list-style: none; display: grid; gap: .55rem; }
.lista-i li { position: relative; padding-left: 1.4rem; }
.lista-i li::before {
  content: ""; position: absolute; left: .2rem; top: .32em; width: .42em; height: 1em;
  background:
    radial-gradient(circle at 50% .2em, var(--rojo) .19em, transparent .2em) top / 100% .4em no-repeat,
    linear-gradient(var(--rojo), var(--rojo)) bottom / 62% calc(100% - .5em) no-repeat;
}

/* 5 · Cabecera ----------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--cafe); color: var(--crema);
  --foco: var(--crema);
  border-bottom: 1px solid rgba(245, 237, 226, .1);
}
.cabecera__fila {
  height: var(--cabecera); display: flex; align-items: center; gap: 1rem;
}
/* Logo real (imagen). Horizontal: 400×55 px (proporción 7,27:1) */
.marca { display: inline-flex; align-items: center; text-decoration: none; flex: none; padding-block: 8px; }
.marca img { height: 24px; width: auto; }
@media (min-width: 900px) { .marca img { height: 28px; } }
.marca-txt { text-transform: none; } /* conserva la «i» minúscula de la marca en titulares en mayúsculas */
.nav { margin-left: auto; }
.nav__lista { list-style: none; display: flex; gap: .25rem; align-items: center; }
.nav__lista a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  text-decoration: none; font-weight: 600; font-size: var(--t-s); border-radius: 999px;
}
.nav__lista a:hover { background: rgba(245, 237, 226, .1); }
.nav__lista a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--rojo); border-radius: 0; }
.estado {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(245, 237, 226, .1); color: var(--crema); min-height: 32px;
}
.estado__punto { width: .55rem; height: .55rem; border-radius: 50%; background: #9aa0a6; flex: none; }
.estado[data-estado="abierto"] .estado__punto { background: #7BD88F; box-shadow: 0 0 0 3px rgba(123, 216, 143, .25); }
.estado[data-estado="cerrado"] .estado__punto { background: var(--rojo-claro); }
.cabecera .cabecera__wa { display: none; }
@media (max-width: 599.98px) { .estado__texto-largo { display: none; } }
.menu-boton {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 2px solid rgba(245, 237, 226, .4);
  background: transparent; color: var(--crema); font-weight: 700; font-size: var(--t-s);
}
.menu-boton__icono { width: 18px; height: 12px; position: relative; }
.menu-boton__icono::before, .menu-boton__icono::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s var(--ease);
}
.menu-boton__icono::before { top: 1px; }
.menu-boton__icono::after { bottom: 1px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: translateY(4px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1199.98px) { /* menú desplegable hasta 1199 px: el menú de 5 enlaces necesita ancho */
  .nav {
    position: absolute; left: 0; right: 0; top: var(--cabecera);
    background: var(--cafe); border-bottom: 4px solid var(--rojo);
    padding: .5rem var(--margen) 1.25rem;
  }
  .nav:not(.nav--abierta) { display: none; }
  .nav__lista { flex-direction: column; align-items: stretch; }
  .nav__lista a { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 .25rem; min-height: 52px; }
  .nav__logo { display: block; padding: .75rem .25rem 0; }
  .nav__logo img { width: 150px; height: auto; }
  .nav__lista a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--rojo); padding-left: .9rem; }
  .cabecera .estado { margin-left: auto; }
  .menu-boton { margin-left: .5rem; }
}
@media (max-width: 479.98px) {
  .menu-boton__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-boton { padding: 0 .8rem; min-width: 44px; justify-content: center; }
}
@media (max-width: 479.98px) {
  .marca img { height: 20px; }
  .cabecera__fila { gap: .5rem; }
  .estado { padding: .3rem .55rem; gap: .35rem; }
}
@media (max-width: 380px) {
  .marca img { height: 18px; }
  .estado { font-size: .72rem; }
  .menu-boton { padding: 0 .7rem; }
}
@media (min-width: 1200px) {
  .menu-boton { display: none; }
  .cabecera .cabecera__wa { display: inline-flex; order: 4; }
  .nav { order: 2; }
  .cabecera .estado { order: 3; }
}

/* 6 · Botones ------------------------------------------------------ */
.botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-texto); font-weight: 700; font-size: 1rem; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform 120ms var(--ease), border-color .18s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--rojo { background: var(--rojo); color: var(--blanco); }
.btn--rojo:hover { background: var(--rojo-hover); }
.btn--cafe { background: var(--cafe); color: var(--crema); }
.btn--cafe:hover { background: var(--cafe-2); }
.btn--crema { background: var(--crema); color: var(--cafe); }
.btn--crema:hover { background: var(--blanco); }
.btn--borde { border-color: currentColor; background: transparent; }
.btn--borde:hover { background: rgba(127, 127, 127, .12); }
.btn--chico { min-height: 44px; padding: .55rem 1rem; font-size: var(--t-s); }
.btn--bloque { width: 100%; }
.enlace-flecha { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; }
.enlace-flecha::after { content: "→"; transition: transform .2s var(--ease); }
.enlace-flecha:hover::after { transform: translateX(4px); }
.aviso-wa { font-size: var(--t-xs); margin: .6rem 0 0; opacity: .9; }

/* 7 · Secciones ---------------------------------------------------- */
.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--corta { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.seccion--oscura { background: var(--cafe); color: var(--crema); --foco: var(--crema); --tx-suave: #D9C9B6; --linea: rgba(245, 237, 226, .18); }
.seccion--crema2 { background: var(--crema-2); --tx-suave: #54402F; }
.seccion--roja { background: var(--rojo); color: var(--blanco); --foco: var(--blanco); }
.seccion__cabeza { max-width: 56rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.seccion__cabeza .entradilla:last-child { margin-bottom: 0; }
.seccion__cabeza p { max-width: 46ch; }

/* 8 · Hero --------------------------------------------------------- */
.hero {
  position: relative; background: var(--cafe); color: var(--crema); --foco: var(--crema);
  overflow: hidden; isolation: isolate;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
  min-height: calc(100svh - var(--cabecera));
  display: flex; align-items: center;
}
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo picture, .estrella__foto picture { display: block; width: 100%; height: 100%; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; }
.hero__fondo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(28, 17, 11, .94) 0%, rgba(28, 17, 11, .78) 42%, rgba(28, 17, 11, .2) 75%, rgba(28, 17, 11, .1) 100%),
    linear-gradient(0deg, rgba(28, 17, 11, .85), transparent 35%);
}
@media (max-width: 899.98px) {
  .hero__fondo::before { background: linear-gradient(180deg, rgba(28, 17, 11, .9) 0%, rgba(28, 17, 11, .74) 48%, rgba(28, 17, 11, .32) 78%, rgba(28, 17, 11, .12) 100%); }
}
.hero__reticula { display: grid; gap: 2rem; align-items: center; }
.hero__texto { position: relative; z-index: 2; }
.hero h1 { margin-bottom: .45em; max-width: 13ch; }
.hero h1 .rojo { color: var(--rojo-claro); }
.hero__sub { font-size: var(--t-l); max-width: 34ch; margin-bottom: 1.6rem; color: #EFE4D6; }
.rueda {
  position: relative; width: min(78vw, 560px); aspect-ratio: 1; justify-self: center;
  margin-top: -1rem;
}
.rueda__svg { width: 100%; height: 100%; color: var(--crema); transition: opacity .6s var(--ease); }
.rueda__svg .rueda__giro { transform-origin: 0 0; transform: rotate(var(--giro, 0deg)); }
.rueda canvas { position: absolute; inset: -6%; width: 112% !important; height: 112% !important; opacity: 0; transition: opacity .8s var(--ease); }
.rueda--3d canvas { opacity: 1; }
.rueda--3d .rueda__svg { opacity: 0; }
.hero__granos { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.grano-flota { position: absolute; width: 22px; color: var(--verde); opacity: .55; will-change: transform; }
.grano-flota--tostado { color: #7A4A2A; opacity: .8; }
@media (min-width: 900px) {
  .hero__reticula { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* La rueda asoma por la esquina para no tapar la foto real */
  .rueda { position: absolute; right: -7vw; bottom: -17vw; width: min(40vw, 640px); margin: 0; z-index: 1; }
}
@media (max-width: 899.98px) {
  .hero { min-height: 0; }
  .rueda { width: min(70vw, 360px); margin-top: -.5rem; }
}

/* Cuentakilómetros fijo (decorativo) */
/* Cuentakilómetros en la cabecera (decorativo, solo escritorio ancho) */
.odometro {
  display: none; align-items: center; gap: .45rem; margin-left: 1rem; color: var(--crema);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  opacity: .45; transition: opacity .3s;
}
.odometro svg { width: 26px; height: 26px; transform-origin: 50% 50%; }
.odometro__cifra { font-variant-numeric: tabular-nums; min-width: 4.4ch; }
.odometro--visible { opacity: 1; }
@media (min-width: 1400px) { .odometro { display: inline-flex; order: 1; } }
@media (min-width: 1200px) and (max-width: 1339.98px) { .estado__texto-largo { display: none; } }

/* 9 · Momento estrella «Todo tiene su tiempo» ---------------------- */
.estrella { position: relative; background: var(--cafe-3); color: var(--crema); --foco: var(--crema); }
.estrella__intro { padding-block: clamp(3rem, 2rem + 4vw, 6rem) 1rem; }
.estrella__intro h2 { margin: 0; }
/* Modo por defecto (sin JS o movimiento reducido): tres cuadros fijos */
.estrella__escena { position: relative; }
.estrella__fotos {
  display: grid; gap: 1rem; padding: 0 var(--margen) 3rem;
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto;
}

.estrella--viva .estrella__fotos { max-width: none; }
.estrella__foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--cafe-2); }
.estrella__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.estrella__foto figcaption {
  position: absolute; left: 1rem; bottom: .8rem; right: 1rem;
  font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.estrella__canvas, .estrella__franja, .estrella__cortina, .estrella__frases, .estrella__barra { display: none; }
.estrella__intro .senales { margin-bottom: 1rem; }
@media (min-width: 700px) { .estrella__fotos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .estrella__fotos { grid-template-columns: repeat(4, 1fr); } .estrella__foto img { aspect-ratio: 3 / 4; } }
/* Modo animado (lo activa estrella.js con .estrella--viva) */
.estrella--viva { height: 360vh; }
.estrella--viva .estrella__intro {
  position: sticky; top: calc(var(--cabecera) + 1.25rem); height: 0; padding: 0; z-index: 4; pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.estrella--viva .estrella__intro h2 { font-size: var(--t-s); letter-spacing: .14em; font-weight: 700; opacity: .9; }
.estrella--viva .estrella__escena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: paint;
}
.estrella--viva .estrella__fotos { display: block; position: absolute; inset: 0; padding: 0; }
.estrella--viva .estrella__foto {
  position: absolute; inset: 0; border-radius: 0; opacity: 0; will-change: opacity, transform;
}
.estrella--viva .estrella__foto img { width: 100%; height: 100%; aspect-ratio: auto; }
.estrella--viva .estrella__foto figcaption { display: none; }
.estrella--viva .estrella__intro .senales { margin-bottom: .5rem; } .estrella--viva .estrella__intro .senal { width: 2rem; height: 2rem; }
.estrella--viva .estrella__foto:first-child { opacity: 1; }
.estrella--viva .estrella__escena::after { /* viñeta para que las frases siempre se lean */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(20, 12, 8, .78) 0%, rgba(20, 12, 8, 0) 55%), linear-gradient(90deg, rgba(20, 12, 8, .45), transparent 60%);
}
.estrella--secuencia .estrella__canvas { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.estrella--viva .estrella__franja {
  display: block; position: absolute; z-index: 3; top: -20%; bottom: -20%; left: 0; width: 70vw;
  background: var(--rojo); transform: translateX(-130vw) skewX(-18deg); will-change: transform;
}
.estrella--viva .estrella__franja::before, .estrella--viva .estrella__franja::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--crema);
}
.estrella--viva .estrella__franja::before { left: 14%; }
.estrella--viva .estrella__franja::after { right: 18%; width: 3px; }
.estrella--viva .estrella__frases {
  display: block; list-style: none; position: absolute; z-index: 2; left: var(--margen); right: var(--margen); bottom: clamp(5rem, 12vh, 9rem);
}
.estrella__frases li {
  position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(30px);
  font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -.015em;
  font-size: clamp(2.4rem, 1rem + 6.2vw, 7.2rem); color: var(--crema); max-width: 13ch;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.estrella__frases .senal { width: clamp(3rem, 2rem + 3vw, 5rem); height: clamp(3rem, 2rem + 3vw, 5rem); display: block; margin-bottom: .8rem; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4)); }
.estrella__frases li .marca-txt { color: var(--crema); }
.estrella__frases li span { color: var(--rojo-claro); }
.estrella__frases small {
  display: block; font-family: var(--f-texto); text-transform: none; font-weight: 500; font-size: var(--t-l);
  line-height: 1.4; max-width: 30ch; margin-top: .8rem; letter-spacing: 0;
}
.estrella--viva .estrella__barra {
  display: block; position: absolute; z-index: 4; left: var(--margen); right: var(--margen); bottom: 2rem; height: 4px;
  background: rgba(245, 237, 226, .2); border-radius: 4px; overflow: hidden;
}
.estrella__barra i { display: block; height: 100%; width: 100%; background: var(--rojo); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.estrella--viva .estrella__cortina {
  display: block; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 120%;
  transform: translateY(100%); will-change: transform; color: var(--crema);
}
.estrella__cortina-ola {
  position: absolute; left: 0; top: 0; width: 200%; height: 80px; transform: translateY(-79px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C50 0 100 0 150 30 S250 80 300 40 S370 10 400 40 V80 H0Z' fill='%23F5EDE2'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 100%;
  animation: ola 6s linear infinite;
}
.estrella__cortina-ola--2 {
  opacity: .45; height: 110px; transform: translateY(-100px);
  animation-duration: 9s; animation-direction: reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C60 10 120 20 180 45 S300 70 400 50 V80 H0Z' fill='%23DCCBB4'/%3E%3C/svg%3E");
}
.estrella__cortina-cuerpo { position: absolute; inset: 0; background: var(--crema); }
.estrella__cortina-cuerpo::before { /* textura de crema por código (sin imagen) */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(201, 162, 122, .35), transparent 70%),
    radial-gradient(50% 35% at 75% 55%, rgba(201, 162, 122, .25), transparent 70%);
}
@keyframes ola { to { background-position: 50% 0; } }
/* Puente sobre la cortina: logo de Café Esperanza + frase, para que la crema nunca quede vacía */
.estrella__puente { display: none; }
.estrella--viva .estrella__puente {
  display: flex; position: absolute; inset: 0; z-index: 6; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.9rem, .6rem + 1vw, 1.4rem); padding: var(--cabecera) var(--margen) 0; text-align: center; color: var(--esperanza);
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
.estrella__puente .senal { width: clamp(2.6rem, 2rem + 2vw, 3.6rem); height: auto; }
.estrella__puente-logo { width: min(340px, 72vw); height: auto; }
.estrella__puente p {
  margin: 0; font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1.05rem, .9rem + 1.1vw, 1.7rem); line-height: 1.3; max-width: 34ch; text-wrap: balance;
}
.estrella__puente-flecha { font-size: 1.6rem; line-height: 1; color: var(--rojo); }
/* La sección siguiente empieza más arriba: el puente ya presentó el logo */
.estrella--viva + .esperanza { padding-top: clamp(1rem, .5rem + 2vw, 2.5rem); }
.estrella--viva + .esperanza .esperanza__logo { display: none; }
@media (max-width: 699.98px) { .estrella--viva { height: 320vh; } }

/* 10 · Selector de tueste ----------------------------------------- */
.selector {
  --sel-fondo: var(--crema); --sel-tx: var(--cafe); --sel-suave: #5A4334; --sel-panel: rgba(255, 255, 255, .55);
  background: var(--sel-fondo); color: var(--sel-tx);
  transition: background-color .7s var(--ease), color .7s var(--ease);
  border-radius: var(--radio-g); padding: clamp(1.25rem, .5rem + 3vw, 3.5rem);
  box-shadow: inset 0 0 0 1px var(--linea);
}

.selector__reticula { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 900px) { .selector__reticula { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.selector__visual { position: relative; }
.selector__plato {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--crema-3);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); max-width: 520px; margin-inline: auto;
}
/* Foto real del grano tostado; claro/oscuro se simulan con filtros (nota «tonos ilustrativos» visible) */
.selector__plato img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter .7s var(--ease), transform .9s var(--ease);
}

/* Café Esperanza: acento marrón #56230F */
.esperanza .antetitulo::before { color: var(--esperanza); }
.esperanza .pastilla input:checked + span { background: var(--esperanza); border-color: var(--esperanza); color: var(--blanco); }

.btn--esperanza { background: var(--esperanza); color: var(--blanco); }
.btn--esperanza:hover { background: var(--esperanza-hover); }

.esperanza__logo { display: block; margin-bottom: 1.25rem; }
.esperanza__logo img { width: min(320px, 80%); height: auto; }
.selector__panel { background: var(--sel-panel); border-radius: var(--radio-g); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.grupo-opciones { border: 0; margin: 0 0 1.5rem; padding: 0; }
.grupo-opciones legend, .campo > label{
  font-weight: 700; font-size: var(--t-s); margin-bottom: .55rem; padding: 0; display: block;
}
.pastillas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilla { position: relative; }
.pastilla input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastilla span {
  display: inline-block; min-height: 44px; padding: .62rem 1rem; border-radius: 22px; line-height: 1.25;
  border: 2px solid currentColor; font-weight: 600; font-size: var(--t-s); transition: background-color .15s, color .15s;
}
.pastilla span small { font-weight: 500; opacity: .9; margin-left: .2rem; }
@media (max-width: 599.98px) {
  .selector { padding: .75rem; }
  .selector__panel { padding: 1.1rem; }
  .selector__visual { padding: .5rem .5rem 1.5rem; }
}
.pastilla input:checked + span { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.pastilla input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 3px; }

.resumen-pedido {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  border-top: 2px solid currentColor; padding-top: 1rem; margin-bottom: 1rem;
}
.resumen-pedido__texto { font-weight: 600; }
.resumen-pedido__precio { font-family: var(--f-titulo); font-weight: 700; font-size: 2.1rem; line-height: 1; }

/* 11 · Carta ------------------------------------------------------- */
.carta__reticula { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 700px) { .carta__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .carta__reticula { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carta__grupo h3 { color: var(--rojo-claro); border-bottom: 2px solid var(--rojo); padding-bottom: .5rem; margin-bottom: 1rem; }
.carta__lista { list-style: none; display: grid; gap: .8rem; }
.carta__item { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; align-items: baseline; }
.carta__nombre { font-weight: 700; }
.carta__precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carta__desc { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tx-suave); }

/* 12 · Bici interactiva -------------------------------------------- */
.bici { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1000px) { .bici { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem; } }
.bici__figura {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radio-g);
  background: var(--crema-2); overflow: visible;
  transition: transform .4s var(--ease);
  transform-style: preserve-3d;
}
.seccion--crema2 .bici__figura { background: var(--blanco); }
/* Bici de línea propia, en el estilo de los pictogramas de marca (trazo negro y rojo) */
.bici__trazo { position: absolute; inset: 0; width: 100%; height: 100%; color: #1C1C1C; }
.bici__trazo .rojo { color: var(--rojo); }
.punto {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: transparent;
  display: grid; place-items: center; z-index: 2;
}
.punto::before { /* pulso */
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--rojo); opacity: .35;
  animation: pulso 2.2s var(--ease) infinite;
}
.punto__nucleo {
  position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--rojo); color: var(--blanco);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; line-height: 1;
  box-shadow: 0 0 0 3px var(--blanco), 0 6px 14px rgba(0, 0, 0, .3); transition: transform .2s var(--ease), background-color .2s;
}
.punto:hover .punto__nucleo, .punto[aria-expanded="true"] .punto__nucleo { transform: scale(1.18); background: var(--cafe); }
.punto[aria-expanded="true"]::before { animation: none; opacity: 0; }
@keyframes pulso { 0% { transform: scale(.7); opacity: .5; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
.bici__leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bici__ficha {
  background: var(--cafe); color: var(--crema); --foco: var(--crema); border-radius: var(--radio-g); padding: 1.5rem;
  min-height: 15rem; display: flex; flex-direction: column; gap: .5rem;
}
.bici__ficha h3 { color: var(--crema); margin: 0; }
.bici__ficha .precio { font-family: var(--f-titulo); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--rojo-claro); }
.bici__ficha p { margin: 0; }
.bici__ficha .botones { margin-top: auto; padding-top: .75rem; }
.bici__ficha--entra { animation: ficha-entra .45s var(--ease); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.servicios { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 700px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.servicio {
  background: var(--blanco); border-radius: var(--radio); padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .35rem;
  border: 1px solid var(--linea);
}
.seccion--oscura .servicio { background: var(--cafe-2); }
.servicio h3 { font-size: 1.15rem; margin: 0; }
.servicio__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--t-s); font-weight: 600; }
.servicio__precio { color: var(--rojo-tx); font-weight: 700; }
.seccion--oscura .servicio__precio { color: var(--rojo-claro); }
.servicio p { margin: 0; font-size: var(--t-s); color: var(--tx-suave); }
.servicio .enlace-flecha { margin-top: auto; font-size: var(--t-s); }

/* 13 · Rutas y rodadas --------------------------------------------- */
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filtro {
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid currentColor; background: transparent; font-weight: 700;
}
.filtro[aria-pressed="true"] { background: var(--cafe); color: var(--crema); border-color: var(--cafe); }
.seccion--oscura .filtro[aria-pressed="true"] { background: var(--crema); color: var(--cafe); border-color: var(--crema); }
.rutas { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .rutas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ruta {
  background: var(--blanco); color: var(--cafe); border-radius: var(--radio-g); padding: 1.4rem; display: flex; flex-direction: column; gap: .75rem;
  border: 1px solid var(--linea); --foco: var(--cafe);
}
.ruta__cabeza { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ruta h3 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); }
.ruta__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
@media (min-width: 480px) { .ruta__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ruta__datos div { display: flex; flex-direction: column; }
.ruta__datos dt { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5A4334; }
.ruta__datos dd { margin: 0; font-family: var(--f-titulo); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.perfil { width: 100%; height: auto; aspect-ratio: 600 / 150; background: var(--crema); border-radius: 10px; }
.perfil__area { fill: rgba(206, 20, 23, .12); opacity: 0; transition: opacity .8s var(--ease) .6s; }
.perfil__linea { fill: none; stroke: var(--rojo); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: var(--largo, 2000); stroke-dashoffset: var(--largo, 2000); transition: stroke-dashoffset 1.2s var(--ease); }
.perfil--dibujado .perfil__linea { stroke-dashoffset: 0; }
.perfil--dibujado .perfil__area { opacity: 1; }
.perfil__texto { font: 600 11px var(--f-texto); fill: #5A4334; }
.ruta__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.ruta__estado { font-size: var(--t-xs); font-weight: 600; min-height: 1.2em; margin: 0; }
.ruta__desc { margin: 0; font-size: var(--t-s); color: #5A4334; }
.rodadas { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 760px) { .rodadas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rodada {
  border: 2px solid currentColor; border-radius: var(--radio-g); padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
}
.rodada__cuando { font-family: var(--f-titulo); font-weight: 700; font-size: 1.3rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.rodada__cuando small { display: block; font-size: .85rem; font-weight: 700; opacity: .85; margin-top: .2rem; }
.rodada h3 { font-size: 1.2rem; margin: .35rem 0 0; }
.rodada p { margin: 0; font-size: var(--t-s); }
.rodada .btn { margin-top: auto; align-self: flex-start; }

/* Hero de Rutas con parallax de 3 planos */
.hero-rutas { position: relative; min-height: min(92svh, 860px); overflow: hidden; color: var(--crema); --foco: var(--crema); display: flex; align-items: flex-end; isolation: isolate; background: #8FB0C9; }
.hero-rutas__plano { position: absolute; left: 0; right: 0; will-change: transform; pointer-events: none; }
.hero-rutas__cielo { inset: 0; background: linear-gradient(180deg, #F2C9A0 0%, #E8A57A 30%, #8FB0C9 75%); z-index: -4; }
.hero-rutas__foto { inset: -10% 0 0; z-index: -3; }
.hero-rutas__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-rutas__foto[data-placeholder] { display: none; } /* img-12 aún es un placeholder: el hero se ve con las capas por código */
.hero-rutas__montes { bottom: 0; height: 70%; z-index: -2; }
.hero-rutas__carretera { bottom: -2px; height: 38%; z-index: -1; }
.hero-rutas__montes svg, .hero-rutas__carretera svg { width: 100%; height: 100%; }
.hero-rutas__texto { padding-block: 6rem 3.5rem; position: relative; }
.hero-rutas__texto::before { content: ""; position: absolute; inset: -40% -20vw 0; background: linear-gradient(0deg, rgba(28, 17, 11, .85), transparent); z-index: -1; }
.hero-rutas h1 { max-width: 12ch; }

/* Encabezado de páginas interiores */
.hero-interior { position: relative; background: var(--cafe); color: var(--crema); --foco: var(--crema); overflow: hidden; isolation: isolate; }
.hero-interior__reticula { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
@media (min-width: 900px) { .hero-interior__reticula { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.hero-interior h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem); max-width: 15ch; }
.hero-interior__media { margin: 0; border-radius: var(--radio-g); overflow: hidden; position: relative; }
.hero-interior__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* 14 · Eventos ------------------------------------------------------ */
.eventos__reticula { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .eventos__reticula { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem; } }
.media-tarjeta { margin: 0; position: relative; border-radius: var(--radio-g); overflow: hidden; }
.media-tarjeta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.agenda { list-style: none; display: grid; gap: .75rem; }
.agenda__item {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start;
  padding: 1rem; border-radius: var(--radio); background: rgba(255, 255, 255, .6); border: 1px solid var(--linea);
}
.seccion--oscura .agenda__item { background: var(--cafe-2); }
.agenda__fecha {
  grid-row: span 2; font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; text-align: center; line-height: .95;
  background: var(--rojo); color: var(--blanco); border-radius: 10px; padding: .45rem .6rem; min-width: 4.2rem;
}
.agenda__fecha b { display: block; font-size: 1.6rem; }
.agenda__titulo { font-weight: 700; }
.agenda__desc { font-size: var(--t-s); color: var(--tx-suave); margin: 0; }

/* 15 · Prueba social ------------------------------------------------ */
.prueba { display: grid; gap: 1.5rem; align-items: center; text-align: left; }
@media (min-width: 900px) { .prueba { grid-template-columns: auto 1fr auto; gap: 3rem; } }
.prueba .prueba__nota { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(4rem, 2.5rem + 6vw, 8rem); line-height: .85; margin: 0; letter-spacing: -.03em; }
.prueba .prueba__estrellas { font-size: 1.6rem; letter-spacing: .15em; }
.prueba p { margin: 0; font-size: var(--t-l); max-width: 34ch; }

/* 16 · FAQ ---------------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 60rem; }
.faq details { border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.25rem; font-weight: 700; font-size: var(--t-m); position: relative; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--rojo); color: var(--blanco); display: grid; place-items: center; font-weight: 700; line-height: 1; transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__respuesta { padding: 0 1.25rem 1.25rem; max-width: 65ch; }
.faq__respuesta p:last-child { margin-bottom: 0; }

/* 17 · Visítanos y mapa -------------------------------------------- */
.visita { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .visita { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } }
.mapa { margin: 0; border-radius: var(--radio-g); overflow: hidden; background: #3B271C; }
.mapa svg { width: 100%; height: auto; }
.mapa figcaption { font-size: var(--t-xs); padding: .6rem 1rem; color: #D9C9B6; }
.direccion { font-style: normal; font-size: var(--t-l); line-height: 1.45; margin-bottom: 1.25rem; }
.horario { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.horario th, .horario td { text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-weight: 500; }
.horario th { font-weight: 700; text-transform: capitalize; }
.horario td { text-align: right; }
.horario[data-compacto] th { text-transform: none; }
.horario tr.hoy th, .horario tr.hoy td { color: var(--rojo-claro); font-weight: 700; }
.visita__enlaces { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1rem 0 0; font-size: var(--t-s); }
.visita__enlaces a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.visita__enlaces svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* 18 · Formularios ------------------------------------------------- */
.formulario { display: grid; gap: 1.1rem; background: var(--blanco); color: var(--cafe); --foco: var(--cafe); border-radius: var(--radio-g); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: var(--sombra); }
.formulario__fila { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; }
.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: .7rem .9rem; border-radius: 10px; border: 2px solid #8C7A6A; background: var(--blanco); color: var(--cafe); width: 100%;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--cafe); outline-offset: 2px; border-color: var(--cafe); }
.campo [aria-invalid="true"] { border-color: var(--rojo-tx); background: #FFF6F6; }
.campo__ayuda { font-size: var(--t-xs); color: #5A4334; margin-top: .3rem; }
.campo__error { font-size: var(--t-s); color: var(--rojo-tx); font-weight: 600; margin-top: .3rem; }
.campo__error:empty { display: none; }
.opcional { font-weight: 500; color: #5A4334; }
.formulario__estado { font-weight: 600; margin: 0; }
.formulario__estado:empty { display: none; }
.formulario__estado a { font-weight: 700; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.radios legend { font-weight: 700; font-size: var(--t-s); margin-bottom: .55rem; padding: 0; }

/* 19 · Pie ---------------------------------------------------------- */
.pie { background: var(--cafe-3); color: var(--crema); --foco: var(--crema); padding-block: 4rem 6.5rem; font-size: var(--t-s); }
@media (min-width: 900px) { .pie { padding-bottom: 3rem; } }
.pie__reticula { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie__reticula { grid-template-columns: 2fr 1fr 1fr; } }
.pie__logo { margin: 0 0 1rem; } .pie__logo img { width: 220px; height: auto; }
.pie h3 { font-size: .85rem; letter-spacing: .14em; margin-bottom: .75rem; color: var(--rojo-claro); }
.pie ul { list-style: none; display: grid; gap: .25rem; }
.pie a { display: inline-flex; min-height: 32px; align-items: center; }
.pie address { font-style: normal; }
.pie__legal { border-top: 1px solid rgba(245, 237, 226, .15); margin-top: 2.5rem; padding-top: 1.25rem; display: grid; gap: .4rem; color: #CDBCA8; font-size: var(--t-xs); }
.pie__legal p { margin: 0; }
.instalar { margin-top: .75rem; }

/* 20 · Barra de acciones en móvil ---------------------------------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: rgba(28, 17, 11, .96); --foco: var(--crema);
  border-top: 1px solid rgba(245, 237, 226, .12);
}
.barra-movil .btn { min-height: 48px; padding-inline: .5rem; font-size: var(--t-s); }
@media (min-width: 900px) { .barra-movil { display: none; } }

/* 21 · Medios ilustrativos ----------------------------------------- */
/* Toda imagen generada con IA lleva data-ilustrativa y una etiqueta visible */
:where(figure[data-ilustrativa]) { position: relative; }
figure[data-ilustrativa]::after {
  content: "Imagen ilustrativa"; position: absolute; right: .6rem; top: .6rem; z-index: 3;
  font: 600 11px/1 var(--f-texto); letter-spacing: .02em; padding: .35rem .5rem; border-radius: 999px;
  background: rgba(28, 17, 11, .72); color: var(--crema); pointer-events: none;
  white-space: nowrap; max-width: calc(100% - 1.2rem); overflow: hidden; text-overflow: ellipsis;
}
figure[data-ilustrativa][data-placeholder]::after { content: "Imagen pendiente · ilustrativa"; }
figure[data-placeholder] { background-color: var(--crema-3); }
figure[data-placeholder] img { image-rendering: auto; filter: blur(0); }
.estrella--viva figure[data-ilustrativa]::after { display: none; }

/* 23 · Identidad real: galería, comunidad, fachada, cargador -------- */
@media (min-width: 1200px) { .nav__logo { display: none; } }
.foto-apoyo { max-width: 360px; }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 3rem; list-style: none; }
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.galeria figure { border-radius: var(--radio); overflow: hidden; position: relative; background: var(--cafe-2); }
.galeria img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.galeria figure:hover img { transform: scale(1.04); }
.galeria figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .75rem .65rem; font-size: var(--t-xs); font-weight: 600; color: var(--blanco); background: linear-gradient(0deg, rgba(20, 12, 8, .8), transparent); }
.carta__pie { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: 2rem; }
.carta__pie p { margin: 0; max-width: 52ch; }

.comunidad { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) { .comunidad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.comunidad__frase {
  margin: 0; font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.3rem); line-height: 1.1; text-wrap: balance;
}
.comunidad__frase::before { content: "«"; color: var(--blanco); opacity: .7; margin-right: .1em; }
.comunidad__frase::after { content: "»"; color: var(--blanco); opacity: .7; margin-left: .1em; }

.comunidad__foto { border-radius: var(--radio-g); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.comunidad__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.visita__media { display: grid; gap: 1rem; }
.visita__foto { border-radius: var(--radio-g); overflow: hidden; }
.visita__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.pie__esperanza { display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem; }
.pie__esperanza img { width: 150px; height: auto; }
.pie__esperanza p { margin: 0; font-size: var(--t-xs); max-width: 28ch; }

/* Cargador: la señal de café gira mientras llegan los datos */

@keyframes girar { to { transform: rotate(360deg); } }

.foto-apoyo { border-radius: var(--radio-g); overflow: hidden; margin-top: 1.5rem; }
.foto-apoyo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* 24 · Datos reales: carta por categorías, ficha de cata, rodadas «muy pronto» */
.carta__filtros {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
@media (max-width: 699.98px) {
  /* En móvil los filtros se desplazan en horizontal dentro de su propia franja (sin desbordar la página) */
  .carta__filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margen)); padding: 0 var(--margen) .25rem; }
  .carta__filtros::-webkit-scrollbar { display: none; }
  .carta__filtros .filtro { flex: none; }
}
.seccion--oscura .filtro { color: var(--crema); }
.carta__reticula { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .carta__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .carta__reticula { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carta__item { padding-bottom: .55rem; border-bottom: 1px dashed rgba(245, 237, 226, .18); }
.carta__nombre { font-weight: 600; }

.cata { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--blanco); color: var(--cafe); --foco: var(--cafe); border-radius: var(--radio-g); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 2px solid var(--esperanza); }
.cata__titulo { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; color: var(--esperanza); }
.cata__titulo .senal { width: 2.4rem; height: 2.4rem; }
.cata__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 0; }
@media (min-width: 900px) { .cata__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cata__item { display: flex; flex-direction: column; gap: .3rem; }
.cata__item dt { display: flex; align-items: center; gap: .5rem; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #5A4334; }
.cata__item dd { margin: 0; font-family: var(--f-titulo); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--esperanza); }
.cata__icono {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 3px solid var(--rojo); background: var(--blanco) center / 62% no-repeat;
}
.cata__icono--notas { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3c4.5 3 4.5 15 0 18-4.5-3-4.5-15 0-18z'/%3E%3Cpath d='M12 6c-1.5 3 1.5 9 0 12'/%3E%3C/svg%3E"); }
.cata__icono--tueste { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 4 5.5 5.5 5.5 10.5a5.5 5.5 0 0 1-11 0c0-3 2-4.5 2.5-7 1.5 1 2.5 3 2.5 5'/%3E%3C/svg%3E"); }
.cata__icono--proceso { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E"); }
.cata__icono--origen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.cata__icono--finca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 14c-4 0-6-3-6-6 4 0 6 3 6 6zM12 11c0-4 3-6 6-6 0 4-3 6-6 6z'/%3E%3C/svg%3E"); }
.cata__icono--altitud { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2.5 19 9 8l4 6 2.5-3.5L21.5 19z'/%3E%3C/svg%3E"); }
.selector__panel .pastilla span small { display: block; margin: .1rem 0 0; font-weight: 700; }
.selector__panel .pastilla span { text-align: center; min-width: 5.5rem; }

.pronto { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 900px) { .pronto { grid-template-columns: auto minmax(0, 1fr); } }
.pronto__senal { width: clamp(6rem, 4rem + 8vw, 11rem); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }
.pronto .entradilla { max-width: 52ch; }

/* 25 · Menos texto, más armonía: tarjetas-enlace, chips, taller corto, reseñas, carta móvil */
.lo-que-hacemos { background: var(--crema-2); padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.lo-que-hacemos__titulo { margin-bottom: 1rem; color: var(--tx); }
.lqh { list-style: none; display: grid; gap: .6rem; }
@media (min-width: 760px) { .lqh { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.lqh__tarjeta { /* toda la tarjeta es el enlace */
  display: flex; gap: .9rem; align-items: center; min-height: 72px; height: 100%;
  background: var(--blanco); border-radius: var(--radio); padding: .8rem 1rem; border: 1px solid var(--linea);
  text-decoration: none; color: var(--tx); transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.lqh__tarjeta:hover { border-color: var(--rojo); transform: translateY(-2px); }
.lqh__icono { width: 2.6rem; height: 2.6rem; flex: none; }
.lqh__icono.cata__icono { border-width: 4px; background-size: 58%; }
.lqh__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.lqh__nombre { font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; line-height: 1.15; }
.lqh__desc { font-size: var(--t-s); color: var(--tx-suave); line-height: 1.35; }
.lqh__flecha { margin-left: auto; font-weight: 700; color: var(--rojo-tx); transition: transform .2s var(--ease); }
.lqh__tarjeta:hover .lqh__flecha { transform: translateX(4px); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; }
.chips li {
  padding: .4rem .85rem; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea);
  font-weight: 600; font-size: var(--t-s); line-height: 1.3;
}

.taller-corto { display: grid; gap: 1.25rem; }
.taller-corto .entradilla { margin-bottom: 0; }
@media (min-width: 900px) { .taller-corto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; align-items: center; } }
.precio-taller { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--rojo); background: var(--blanco); color: var(--cafe); border-radius: 0 var(--radio) var(--radio) 0; max-width: 46ch; }
.precio-taller strong { display: block; font-family: var(--f-titulo); font-size: 1.1rem; line-height: 1.25; }
.precio-taller span { font-size: var(--t-xs); color: #5A4334; }
.precio-taller--oscuro { margin-top: 1rem; }

.comunidad__linea { margin: 1.25rem 0 0; font-size: var(--t-l); line-height: 1.45; max-width: 34ch; }
.comunidad .antetitulo { color: var(--blanco); }
.comunidad .antetitulo::before { color: var(--blanco); }

.prueba { grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.5rem; }
.prueba .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .prueba { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; } .prueba .btn { grid-column: auto; } }
.prueba .prueba__titulo { font-size: var(--t-h3); margin: 0; }
.prueba__titulo .prueba__estrellas { display: block; font-size: 1.5rem; letter-spacing: .14em; margin-bottom: .3rem; }

/* Ficha de cata compacta: 6 datos en 2 columnas (3 en tableta, 6 en escritorio) */
.cata { padding: clamp(1rem, .8rem + 1vw, 1.5rem); border-width: 1px; }
.cata__titulo { font-size: var(--t-xs); letter-spacing: .14em; margin-bottom: .85rem; }
.cata__lista { gap: .75rem 1rem; }
@media (min-width: 700px) and (max-width: 1099.98px) { .cata__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cata__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cata__item { gap: .15rem; }
.cata__item dt { font-size: .72rem; gap: .4rem; }
.cata__item dd { font-size: .98rem; }
.cata__icono { width: 1.6rem; height: 1.6rem; border-width: 2px; }
.lqh__icono.cata__icono { width: 2.6rem; height: 2.6rem; border-width: 4px; }

/* Carta compacta; en móvil una categoría a la vez y fotos en una tira deslizable */
.carta__lista { gap: .5rem; }
.carta__item { padding-bottom: .45rem; }
.carta__grupo h3 { margin-bottom: .75rem; }
@media (max-width: 699.98px) {
  .carta__filtros { margin-bottom: 1.25rem; }
  .carta__filtros .filtro--todo { display: none; }
  .galeria {
    display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 2rem calc(-1 * var(--margen)) 0; padding: 0 var(--margen) .25rem;
  }
  .galeria::-webkit-scrollbar { display: none; }
  .galeria li { flex: 0 0 42%; scroll-snap-align: start; }
}

/* Café Esperanza en móvil: foto más chica para que el selector quepa sin tanto scroll */
@media (max-width: 599.98px) {
  .selector__reticula { gap: 1rem; }
  .selector__plato { max-width: 200px; }
  .selector__visual { padding: .75rem 0 0; }
  .pronto__senal { width: 4.5rem; }
}
.esperanza .seccion__cabeza { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
@media (max-width: 899.98px) { .foto-apoyo img { aspect-ratio: 16 / 9; } } /* foto de apoyo más baja en móvil: el formulario queda más cerca */

/* 22 · Movimiento -------------------------------------------------- */
.revelar { transition: opacity var(--t-entrada) var(--ease), transform var(--t-entrada) var(--ease); }
.revelar--oculto { opacity: 0; transform: translateY(24px); }
.trazo-dibuja path, .trazo-dibuja circle, .trazo-dibuja line { stroke-dasharray: var(--l, 1200); stroke-dashoffset: var(--l, 1200); transition: stroke-dashoffset 1.4s var(--ease); }
.trazo-dibuja.dibujado path, .trazo-dibuja.dibujado circle, .trazo-dibuja.dibujado line { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) {
  .bici__figura[data-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .punto::before { display: none; }
  .revelar--oculto { opacity: 1; transform: none; }
  .grano-flota { display: none; }
  .trazo-dibuja path, .trazo-dibuja circle, .trazo-dibuja line { stroke-dashoffset: 0; }
}
@media print {
  .cabecera, .barra-movil, .odometro, .rueda, .estrella__canvas { display: none !important; }
  body { background: #fff; color: #000; }
}

.seccion--roja .antetitulo::before { color: var(--blanco); }
.seccion--roja a:not(.btn) { color: inherit; }
.hero-rutas .antetitulo { color: var(--crema); }