/* Café Conexión · estilos
   Mobile first. Los valores de marca salen de tokens.css: acá solo se usan por nombre.
   Breakpoints: 640px, 768px (dos columnas de la carta), 1024px. */

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--cuerpo)/var(--cuerpo-alto) var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol.capitulos { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Utilidades ---------- */

.contenedor { width: min(100% - 2 * var(--margen), var(--contenedor)); margin-inline: auto; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* La capa de la intro solo se ve si el script del head la pidió (clase .intro en <html>). */
.capa-intro { display: none; }

.icono, .flecha {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.flecha { width: 1em; height: 1em; stroke-width: 1.8; }

/* ---------- Tipografía ---------- */

h1, h2, h3,
.marca, .intro__marca, .plato__nombre, .favorito__nombre, .pie__marca,
.menu-movil__lista a, .mapa__texto, .carta__pregunta p, .cita {
  font-family: var(--fuente-display);
  font-variation-settings: var(--display-ajustes);
  font-optical-sizing: auto;
}

h1 { font-size: var(--h1); line-height: var(--h1-alto); letter-spacing: var(--h1-tracking); font-weight: var(--h1-peso); }
h2 { font-size: var(--h2); line-height: var(--h2-alto); letter-spacing: var(--h2-tracking); font-weight: var(--h2-peso); color: var(--primario); text-wrap: balance; }
h3 { font-size: var(--h3); line-height: var(--h3-alto); font-weight: var(--h3-peso); color: var(--primario); }

.sobretitulo {
  margin-bottom: 14px;
  font: var(--sobre-peso) var(--sobre)/1.4 var(--fuente-texto);
  letter-spacing: var(--sobre-tracking);
  text-transform: uppercase;
  color: var(--acento);
}

.seccion__intro { margin-top: 16px; max-width: 52ch; color: var(--texto-2); font-size: 1.125rem; }
.seccion__nota { margin-top: 12px; color: var(--texto-2); font-size: var(--pequeno); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.35em;
  border: 1px solid transparent; border-radius: var(--radio-sm);
  font: var(--boton-peso) var(--boton)/1.2 var(--fuente-texto);
  letter-spacing: var(--boton-tracking);
  text-align: center; text-decoration: none;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.boton--primario { background: var(--primario); color: var(--primario-texto); }
.boton--primario:hover { background: var(--primario-hover); }
.boton--secundario { border-color: currentColor; color: var(--primario); }
.boton--secundario:hover { background: var(--hover); }
.boton--chico { min-height: 44px; padding: .55em 1.05em; font-size: .9rem; }
.boton--grande { min-height: 56px; padding: .9em 1.8em; font-size: 1.05rem; }
.boton--ancho { width: 100%; }
.boton .flecha { transition: transform var(--t-ui) var(--ease-out); }
.boton:hover .flecha { transform: translateX(3px); }

/* ---------- Salto y foco ---------- */

.saltar {
  position: absolute; left: 16px; top: -120px; z-index: 300;
  padding: 12px 18px; border-radius: var(--radio-sm);
  background: var(--primario); color: var(--primario-texto);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--enlace); outline-offset: 2px; }
.hero :focus-visible,
.pie :focus-visible,
.cabecera--transparente :focus-visible { outline-color: var(--crema); }
main:focus { outline: none; }

/* ---------- Header ---------- */

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--alto-cabecera);
  background: var(--fondo); color: var(--texto);
  box-shadow: var(--sombra-suave);
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out),
              box-shadow var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
/* Sobre la foto del inicio: transparente, con un velo arriba para que el texto claro se lea. */
.cabecera--transparente { background: transparent; color: var(--crema); box-shadow: none; }
.cabecera--transparente::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(var(--tinta-rgb) / .4), transparent);
}
.cabecera-oculta .cabecera { transform: translateY(-100%); }
.cabecera:focus-within { transform: none; }

.cabecera__inner { display: flex; align-items: center; gap: 12px; height: 100%; }

.marca {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-right: auto;
  font-size: clamp(1.12rem, .9rem + 1.2vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; line-height: 1;
  text-decoration: none; white-space: nowrap;
}

.nav { display: none; }

/* «Ver menú»: siempre a la vista, arriba a la derecha. Abre la carta en otra pestaña. */
.cabecera__menu { min-height: 44px; padding: .5em .95em; font-size: .92rem; gap: .4em; white-space: nowrap; }
.cabecera--transparente .cabecera__menu { background: var(--crema); color: var(--tinta); }
.cabecera--transparente .cabecera__menu:hover { background: var(--fondo-alterno); }
.flecha-ext {
  width: .95em; height: .95em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.hamburguesa {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border-radius: var(--radio-sm);
}
.hamburguesa__lineas,
.hamburguesa__lineas::before,
.hamburguesa__lineas::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-micro);
}
.hamburguesa__lineas { position: relative; }
.hamburguesa__lineas::before, .hamburguesa__lineas::after { content: ""; position: absolute; left: 0; }
.hamburguesa__lineas::before { top: -7px; }
.hamburguesa__lineas::after { top: 7px; }
.menu-abierto .hamburguesa__lineas { background-color: transparent; }
.menu-abierto .hamburguesa__lineas::before { transform: translateY(7px) rotate(45deg); }
.menu-abierto .hamburguesa__lineas::after { transform: translateY(-7px) rotate(-45deg); }

/* El colibrí de la marca junto al nombre, en un medallón como el de los afiches. */
.marca { gap: 10px; }
.marca__colibri {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(var(--tinta-rgb) / .12);
  transition: transform var(--t-ui) var(--ease-out);
}
.marca:hover .marca__colibri { transform: rotate(-6deg); }
.cabecera--transparente .marca__colibri { box-shadow: 0 0 0 1px rgb(255 255 255 / .4); }
@media (min-width: 1024px) { .marca__colibri { width: 40px; height: 40px; } }

/* Pantallas angostas (hasta 379 px): el header se compacta para que el botón ☰ nunca se salga.
   Si aun así no cabe, el nombre baja a dos líneas. */
.marca { min-width: 0; }
@media (max-width: 379px) {
  .cabecera__inner { gap: 8px; }
  .marca { gap: 8px; font-size: 1.05rem; white-space: normal; }
  .marca__colibri { width: 30px; height: 30px; }
  .cabecera__menu { padding: .45em .75em; font-size: .85rem; gap: .3em; }
}
@media (max-width: 339px) {
  .cabecera__menu { padding: .45em .6em; font-size: .8rem; }
  .cabecera__menu .flecha-ext { display: none; }
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .nav__lista { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
  .nav__lista a {
    display: inline-block; padding: 12px 0;
    font-weight: 500; font-size: .98rem; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
    transition: background-size var(--t-ui) var(--ease-out);
  }
  .nav__lista a:hover, .nav__lista a[aria-current="page"] { background-size: 100% 1px; }
  .nav__lista a[aria-current="page"] { font-weight: 600; }
  .cabecera__inner { gap: 24px; }
  .cabecera__menu { min-height: 48px; padding: .7em 1.35em; font-size: 1rem; }
  .hamburguesa { display: none; }
}

/* ---------- Menú del celular ---------- */

.menu-movil {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  padding: calc(var(--alto-cabecera) + 28px) var(--margen) calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--superficie); color: var(--texto);
}
.menu-movil nav { display: flex; flex-direction: column; gap: 32px; width: min(100%, 520px); margin-inline: auto; }
.menu-movil__lista { margin: 0; padding: 0; list-style: none; }
.menu-movil__lista a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--linea);
  font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.1; font-weight: 520;
  color: var(--primario); text-decoration: none;
}
.menu-movil__lista a[aria-current="page"] { color: var(--acento); }
.menu-movil__botones { display: grid; gap: 12px; }
.menu-abierto { overflow: hidden; }
.menu-abierto .cabecera { background: var(--superficie); color: var(--texto); box-shadow: none; transform: none; }
.menu-abierto .cabecera::before { display: none; }
.menu-abierto .cabecera :focus-visible { outline-color: var(--enlace); }
@media (min-width: 1024px) { .menu-movil { display: none !important; } }

/* ---------- 1 · Inicio ---------- */

.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  overflow: hidden;
  background: var(--hero-fondo); color: var(--crema);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media > *, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(var(--tinta-rgb) / .35), rgb(var(--tinta-rgb) / .45) 45%, rgb(var(--tinta-rgb) / .78));
}
.hero__contenido {
  display: flex; flex-direction: column; align-items: center;
  padding-block: calc(var(--alto-cabecera) + 56px) clamp(56px, 9vh, 104px);
  text-align: center;
}
.hero__seq { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 920px; }
.hero .sobretitulo { margin: 0; color: rgb(var(--crema-rgb) / .9); }
.hero__titulo { color: var(--crema); text-wrap: balance; }
.hero__sub { max-width: 46ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: rgb(var(--crema-rgb) / .92); }
.hero__ctas { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 10px; }
.hero .boton--primario { background: var(--crema); color: var(--tinta); }
.hero .boton--primario:hover { background: var(--fondo-alterno); }
.hero .boton--secundario { color: var(--crema); }
.hero .boton--secundario:hover { background: rgb(var(--crema-rgb) / .12); }

@media (min-width: 640px) {
  .hero__ctas { flex-direction: row; justify-content: center; width: auto; }
}
@media (min-width: 1024px) {
  .hero__contenido { align-items: flex-start; text-align: left; }
  .hero__seq { align-items: flex-start; }
  .hero__ctas { justify-content: flex-start; }
}

/* Aviso «Abierto ahora / Cerrado» */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--pequeno); font-weight: 600; line-height: 1.3;
}
.estado__punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.estado--cerrado .estado__punto { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.estado--hero {
  margin-bottom: 20px; padding: 7px 14px;
  border-radius: var(--pildora);
  background: rgb(var(--tinta-rgb) / .38); color: var(--crema);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.estado--hero:empty:not(.pendiente) { display: none; }

/* ---------- Secciones ---------- */

.seccion { padding-block: var(--pad-seccion); }
.seccion--superficie { background: var(--superficie); }
.seccion--alterna { background: var(--fondo-alterno); }
.seccion__cabeza { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }

/* Carrusel en el celular: se desliza de lado, con la tarjeta siguiente asomada.
   position: relative contiene los textos ocultos para lectores de pantalla: sin eso,
   se salen del carrusel y el celular ensancha la página. */
.carrusel {
  position: relative;
  display: flex; gap: 16px;
  margin: 0 calc(-1 * var(--margen)); padding: 4px var(--margen) 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: none; list-style: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > li { flex: 0 0 min(80%, 320px); scroll-snap-align: start; }

/* ---------- 3 · Favoritos ---------- */

.favorito {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: var(--tarjeta-fondo);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.favorito:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.favorito__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.favorito__foto.ph { border-radius: 0; }
.favorito__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
.favorito__nombre { font-size: 1.35rem; line-height: 1.2; font-weight: 520; color: var(--primario); }
.favorito__desc {
  color: var(--texto-2); font-size: .95rem; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.favorito__precio { margin-top: auto; padding-top: 6px; font-weight: var(--precio-peso); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .favoritos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 0; padding: 0; overflow: visible; }
}

.seccion__pie { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: 20px;
  color: var(--enlace); font-weight: 600; text-underline-offset: 4px;
}
.enlace-flecha .flecha { transition: transform var(--t-ui) var(--ease-out); }
.enlace-flecha:hover .flecha { transform: translateX(3px); }

/* ---------- El café: los cinco métodos ---------- */

.metodos { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .metodos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .metodos { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.metodo { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio-md); background: var(--tarjeta-fondo); border: 1px solid var(--borde); }
.metodo__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.metodo__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; }
.metodo__nombre { font-size: 1.3rem; }
.metodo__desc { color: var(--texto-2); font-size: .93rem; line-height: 1.5; }
.metodo__precio { margin-top: auto; padding-top: 8px; font-weight: var(--precio-peso); font-variant-numeric: tabular-nums; font-size: .93rem; }

/* ---------- La barra (y las listas de precios) ---------- */

.barra-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .barra-grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 64px; } }
.barra__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.barra__fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio-md); }
.barra__fotos img:nth-child(2) { margin-top: 40px; }
@media (min-width: 1024px) { .barra__fotos { position: sticky; top: calc(var(--alto-cabecera) + 24px); } }
.barra__texto .seccion__cabeza { margin-bottom: 24px; }
.barra__texto > .boton { margin-top: 28px; }
.barra__listas { display: grid; gap: 28px; }
@media (min-width: 768px) { .barra__listas { grid-template-columns: 1fr 1fr; gap: 40px; } }
.barra__titulo { font-size: 1.35rem; }

.platos { margin: 8px 0 0; padding: 0; list-style: none; }
.plato { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.plato__cab { display: flex; align-items: baseline; gap: 16px; }
.plato__nombre { flex: 1; font-size: 1.1rem; line-height: 1.3; font-weight: 520; color: var(--texto); }
.plato__precio { font-weight: var(--precio-peso); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plato__desc { margin-top: 4px; color: var(--texto-2); font-size: .93rem; line-height: 1.5; }
.legal { display: grid; gap: 4px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: .82rem; }

/* ---------- Lo que te prometemos y cómo trabajamos ---------- */

.promesas-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .promesas-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 72px; } }
.promesas__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-lg); }
.promesas { display: grid; gap: 0; margin: 8px 0 28px; padding: 0; list-style: none; counter-reset: promesa; }
.promesas li {
  counter-increment: promesa;
  display: flex; gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.3; color: var(--primario);
}
.promesas li::before {
  content: counter(promesa, decimal-leading-zero);
  flex: none; font: 600 var(--pequeno)/1 var(--fuente-texto); letter-spacing: .08em; color: var(--acento);
}

.valores { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .valores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .valores { grid-template-columns: repeat(4, 1fr); } }
.valor { padding: 26px 24px; border-radius: var(--radio-lg); background: var(--tarjeta-fondo); border: 1px solid var(--borde); }
.valor h3 { margin-bottom: 10px; }
.valor p { color: var(--texto-2); }

/* ---------- Cabecera de las páginas internas ---------- */

.pagina-cabeza { padding: calc(var(--alto-cabecera) + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); background: var(--superficie); }
.pagina-cabeza__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .pagina-cabeza__grid { grid-template-columns: 6fr 5fr; gap: 72px; } }
.pagina-cabeza h1 { color: var(--primario); font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem); text-wrap: balance; }
.pagina-cabeza__intro { margin-top: 18px; max-width: 46ch; color: var(--texto-2); font-size: 1.15rem; }
.pagina-cabeza__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-lg); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 14px; border: 1px solid var(--linea); border-radius: var(--pildora); background: var(--tarjeta-fondo); font-size: var(--pequeno); font-weight: 600; }

/* ---------- Galería (El espacio) ---------- */

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.galeria img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-md); }
.galeria__item--grande { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; }
  .galeria img { aspect-ratio: auto; }
  .galeria__item--grande { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Formularios ---------- */

.formulario { display: grid; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radio-lg); background: var(--tarjeta-fondo); border: 1px solid var(--borde); }
.formulario__campos { display: grid; gap: 16px; }
@media (min-width: 640px) { .formulario__campos { grid-template-columns: repeat(3, 1fr); } .campo--ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; }
.campo__etiqueta { font-size: var(--pequeno); font-weight: 600; }
.campo__opcional { font-weight: 400; color: var(--texto-2); }
.campo__control {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--fondo); color: var(--texto);
  font: inherit; font-size: 1rem;
}
textarea.campo__control { resize: vertical; min-height: 96px; }
.campo__control:focus-visible { outline: 2px solid var(--enlace); outline-offset: 1px; border-color: var(--enlace); }
.formulario .boton { justify-self: start; }
.formulario__nota { color: var(--texto-2); font-size: var(--pequeno); }

/* ---------- Contacto y preguntas frecuentes ---------- */

.contacto-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contacto-grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.contacto__titulo { font-size: var(--h3); margin-bottom: 16px; }
.contacto__datos .visitanos__direccion { margin-top: 0; }

.preguntas { display: grid; gap: 12px; max-width: 820px; }
.pregunta { border-radius: var(--radio-md); background: var(--tarjeta-fondo); border: 1px solid var(--borde); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none;
  font-weight: 600;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; font: 400 1.5rem/1 var(--fuente-texto); color: var(--acento); transition: transform var(--t-ui) var(--ease-out); }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta > p { padding: 0 20px 18px; color: var(--texto-2); }

/* ---------- Botones sobre fondos claros de marca ---------- */

.boton--claro { background: transparent; color: var(--primario); border-color: currentColor; }
.boton--claro:hover { background: var(--hover); }
.cta-final__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cta-final__botones .boton { margin-top: 0; }

/* ---------- 5 · Nosotros ---------- */

.nosotros__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .nosotros__grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 64px; }
}
.nosotros__foto, .ph--retrato { aspect-ratio: 4 / 5; border-radius: var(--radio-lg); overflow: hidden; }
.nosotros__foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__titulo {
  margin-bottom: 28px;
  font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes);
  font-size: var(--h2); line-height: var(--h2-alto); letter-spacing: var(--h2-tracking); font-weight: var(--h2-peso);
  color: var(--primario); text-wrap: balance;
}
.capitulos { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.capitulo { min-height: 96px; padding: 22px 24px; border-radius: var(--radio-md); background: var(--tarjeta-fondo); }
.capitulo h3 { margin-bottom: 8px; }
.capitulo p { color: var(--texto-2); }
.cita {
  margin-top: 28px; min-height: 80px; padding: 8px 0 8px 24px;
  border-left: 2px solid var(--acento);
  font-size: 1.45rem; line-height: 1.35; color: var(--primario);
}
.cita footer { margin-top: 10px; font: 500 var(--pequeno)/1.4 var(--fuente-texto); color: var(--texto-2); }

/* ---------- 6 · Reseñas ---------- */

.resenas__lista { display: grid; gap: 20px; margin: 0 0 32px; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .resenas__lista { grid-template-columns: repeat(3, 1fr); }
}
.resena { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--radio-lg); background: var(--tarjeta-fondo); }
.resena__texto { font-size: 1.02rem; }
.resena__autor { color: var(--texto-2); font-size: var(--pequeno); }

/* ---------- 7 · Visítanos ---------- */

.visitanos { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .visitanos { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
}
.visitanos__direccion { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 1.15rem; }
.visitanos__direccion .icono { margin-top: .28em; color: var(--primario); }
.visitanos .estado { margin-top: 20px; }
.estado--abierto .estado__punto { background: var(--primario); }
.horario { margin-top: 16px; max-width: 420px; }
.horario__titulo { margin-bottom: 8px; font: 600 var(--pequeno)/1.4 var(--fuente-texto); letter-spacing: .04em; color: var(--texto-2); }
.horario__lista { margin: 0; }
.horario__lista div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.horario__lista dt { text-transform: capitalize; }
.horario__lista .es-hoy { font-weight: 600; }
.horario__nota { margin-top: 10px; color: var(--texto-2); font-size: var(--pequeno); }
.visitanos__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.practicos { display: grid; gap: 6px; margin-top: 24px; padding: 0; list-style: none; color: var(--texto-2); }
.practicos strong { color: var(--texto); font-weight: 600; }

.mapa {
  position: relative; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--radio-lg);
  background: var(--fondo-alterno);
}
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa__fachada {
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 24px; text-align: center; color: var(--primario);
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 36px 36px;
  transition: background-color var(--t-ui) var(--ease-out);
}
.mapa__fachada:hover { background-color: var(--hover); }
.mapa__pin { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mapa__texto { font-size: 1.5rem; line-height: 1.2; }
.mapa__nota { color: var(--texto-2); font-size: var(--pequeno); }

/* ---------- 8 · Contacto ---------- */

.cta-final { text-align: center; }
.cta-final .contenedor { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-final h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); }
.cta-final__texto { color: var(--texto-2); font-size: 1.15rem; }
.cta-final .boton { margin-top: 8px; }

/* ---------- Footer ---------- */

/* Centrado y sobrio: el colibrí y el nombre en versalitas espaciadas, la frase en cursiva, las
   páginas separadas por puntos y abajo © con la dirección. Dos luces muy suaves de fondo. */
.pie {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px, 9vw, 104px) 0 calc(36px + var(--alto-barra-movil) + env(safe-area-inset-bottom));
  background: var(--pie-fondo); color: var(--pie-texto); text-align: center;
}
.pie::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 60% at 72% 64%, rgb(var(--pie-luz-calida) / .26), transparent 70%),
    radial-gradient(32% 55% at 26% 36%, rgb(var(--pie-luz-fria) / .2), transparent 70%);
}
.pie__centro { display: flex; flex-direction: column; align-items: center; }
.pie__marca { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
.pie__colibri {
  width: 76px; height: 76px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 14px 30px -12px rgb(0 0 0 / .55);
  transition: transform var(--t-ui) var(--ease-out);
}
.pie__marca:hover .pie__colibri { transform: translateY(-2px) rotate(-4deg); }
.pie__nombre {
  padding-left: .34em; /* compensa el espacio que deja la última letra */
  font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height: 1.2; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
}
.pie__frase {
  margin-top: 12px; font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes);
  font-style: italic; font-size: 1.1rem; opacity: .85;
}
.pie__nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  max-width: 760px; margin: 30px 0 0; padding: 0; list-style: none;
}
.pie__nav li { display: inline-flex; align-items: center; }
.pie__nav li:not(:last-child)::after { content: "·"; content: "·" / ""; margin-inline: 12px; opacity: .45; }
.pie__nav a, .pie__enlace {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  text-decoration-color: rgb(255 255 255 / .3); transition: text-decoration-color var(--t-micro);
}
.pie__nav a:hover, .pie__enlace:hover { text-decoration-color: currentColor; }
.pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; margin-top: 6px; font-size: .92rem; opacity: .9; }
.pie__contacto a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.pie__contacto a:hover { text-decoration: underline; text-underline-offset: 5px; }
.pie__punto { opacity: .45; }
.pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.pie__legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px;
  width: min(100%, 900px); margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .85rem; opacity: .85;
}

/* Créditos de las imágenes: un enlace al lado del ©; al abrirlo, la lista ocupa todo el ancho. */
.creditos { font-size: .85rem; }
.creditos summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: 6px;
}
.creditos summary::-webkit-details-marker { display: none; }
.creditos[open] { flex-basis: 100%; }
.creditos__cuerpo { margin: 6px auto 0; text-align: left; font-size: .8rem; }
.creditos__nota { margin: 0 0 10px; max-width: 70ch; }
.creditos__lista { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; line-height: 1.45; }
.creditos__lista a { color: inherit; }
@media (min-width: 1024px) { .creditos__lista { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---------- Barra inferior del celular ---------- */

.barra-movil {
  position: fixed; inset: auto 0 0; z-index: 40;
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
  background: var(--barra-fondo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  transform: translateY(110%);
  transition: transform var(--t-ui) var(--ease-out);
}
.pasado-hero .barra-movil, html:not(.js) .barra-movil { transform: none; }
.barra-movil__accion {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 6px;
  border-radius: var(--radio-sm);
  color: var(--primario); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.barra-movil__accion--wa { background: var(--primario); color: var(--primario-texto); }
/* Pantallas muy angostas (menos de 340 px): la barra se compacta para que quepan las tres acciones. */
@media (max-width: 339px) {
  .barra-movil { gap: 4px; padding-inline: 8px; }
  .barra-movil__accion { gap: 4px; padding: 0 4px; font-size: .8rem; }
  .barra-movil__accion:not(.barra-movil__accion--wa) .icono { display: none; }
}
@media (min-width: 1024px) {
  .barra-movil { display: none; }
}

/* ---------- WhatsApp flotante (escritorio) ---------- */

.wa-flotante { display: none; }
@media (min-width: 1024px) {
  .wa-flotante {
    position: fixed; right: 28px; bottom: 28px; z-index: 40;
    display: grid; place-items: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--primario); color: var(--primario-texto);
    box-shadow: 0 12px 30px -10px rgb(var(--musgo-rgb) / .6);
    transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
  }
  .wa-flotante:hover { transform: translateY(-3px); background: var(--primario-hover); }
  .wa-flotante .icono { width: 28px; height: 28px; stroke-width: 1.5; }
}

/* ---------- Volver arriba: un colibrí que sube ----------
   Lo agrega js/main.js en todas las páginas y aparece cuando ya se bajó más de una pantalla.
   En el celular va sobre la barra de abajo; en escritorio, encima del WhatsApp flotante. */

.subir {
  position: fixed; z-index: 39;
  right: var(--margen);
  bottom: calc(var(--alto-barra-movil) + 14px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--tarjeta-fondo); color: var(--primario);
  box-shadow: 0 12px 30px -12px rgb(var(--tinta-rgb) / .45);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out),
              background-color var(--t-micro), visibility 0s linear var(--t-ui);
}
.subir--visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.subir:hover { background: var(--fondo-alterno); }
.subir__colibri { width: 30px; height: 30px; fill: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.subir:hover .subir__colibri { transform: translateY(-3px); }
.menu-abierto .subir { visibility: hidden; }
@media (min-width: 1024px) {
  .subir { right: 34px; bottom: 102px; }
}
@media (prefers-reduced-motion: reduce) {
  .subir { transform: none; }
  .subir:hover .subir__colibri { transform: none; }
}

/* ---------- Página del café (cafe.html) ----------
   Usa el tema oscuro de tokens.css ([data-tema="cafe"]): tostado, crema de leche y caramelo. */

[data-tema="cafe"] { scroll-padding-top: calc(var(--alto-cabecera) + 84px); }

/* Grano fino sobre toda la página, como papel de bolsa de café. Solo en escritorio. */
@media (min-width: 1024px) and (hover: hover) {
  [data-tema="cafe"] body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    opacity: .08; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  }
}

/* «Café» en el menú de todas las páginas: con un grano y, en escritorio, como botón de borde. */
.icono--grano { width: 1em; height: 1em; }
/* «Fit» lleva una mancuerna, el símbolo más conocido del fitness, y «Talleres», una pizarra. */
.icono--pesa { width: 1.2em; height: 1.2em; }
.icono--taller { width: 1.15em; height: 1.15em; }
.nav__cafe a, .nav__fit a, .nav__talleres a { display: inline-flex; align-items: center; gap: 7px; }
.menu-movil__cafe a, .menu-movil__fit a, .menu-movil__talleres a { display: flex; align-items: center; gap: 12px; }
.menu-movil__cafe .icono--grano, .menu-movil__fit .icono--pesa, .menu-movil__talleres .icono--taller { width: .8em; height: .8em; color: var(--acento); }
@media (min-width: 1024px) {
  .nav__lista { align-items: center; }
  .nav__lista .nav__cafe a {
    padding: 8px 16px; border: 1px solid currentColor; border-radius: var(--pildora); background: none;
    transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
  }
  .nav__lista .nav__cafe a:hover { background: var(--hover); }
  .nav__lista .nav__cafe a[aria-current="page"] { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
}

.video-ranura { position: absolute; inset: 0; }
.video-ranura video { width: 100%; height: 100%; object-fit: cover; }

/* Portada */
.hero--cafe .hero__velo { background: linear-gradient(to bottom, rgb(var(--cafe-rgb) / .45), rgb(var(--cafe-rgb) / .55) 45%, rgb(var(--cafe-rgb) / .96)); }
.hero--cafe .hero__titulo { font-size: min(clamp(3rem, 1.4rem + 6.4vw, 6.6rem), 11vh); line-height: .96; letter-spacing: -.03em; }
/* Los textos van más abajo (y el título se ajusta a la altura) para que arriba se vea el video. */
.hero--cafe .hero__contenido { padding-bottom: clamp(24px, 4.5vh, 48px); }
.hero--cafe .sobretitulo { color: var(--caramelo); }
.hero--cafe .boton--primario { background: var(--caramelo); color: var(--espresso); }
.hero--cafe .boton--primario:hover { background: var(--caramelo-claro); }
.cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; margin: 30px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgb(var(--leche-rgb) / .2); }
.cifras li { display: grid; gap: 4px; text-align: left; }
.cifra__numero { font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1; color: var(--caramelo); }
.cifra__texto { font-size: var(--pequeno); color: var(--texto-2); }
@media (min-width: 1024px) { .cifras { justify-content: flex-start; } }

/* Navegación dentro de la página */
.cafe-nav {
  position: sticky; top: var(--alto-cabecera); z-index: 30;
  background: rgb(var(--cafe-rgb) / .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: top var(--t-ui) var(--ease-out);
}
.cabecera-oculta .cafe-nav { top: 0; }
.cafe-nav ul { position: relative; display: flex; gap: 8px; margin: 0; padding: 12px 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.cafe-nav ul::-webkit-scrollbar { display: none; }
.cafe-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linea); border-radius: var(--pildora);
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-micro), color var(--t-micro);
}
.cafe-nav a:hover { border-color: var(--caramelo); color: var(--caramelo); }
.cafe-nav a[aria-current] { background: var(--caramelo); border-color: var(--caramelo); color: var(--espresso); }
.js .hero__seq > :nth-child(5) { --d: 480ms; }

.consejo {
  margin-top: 28px; padding: 18px 22px; max-width: 70ch;
  border-left: 3px solid var(--caramelo); border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  background: rgb(var(--caramelo-rgb) / .08); color: var(--texto-2);
}
.consejo strong { color: var(--texto); }

/* Bandas de foto a todo el ancho: el filtrado (con video si hay) y el cierre. */
.banda {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(480px, 80vh, 780px);
  padding-block: var(--pad-seccion);
  background: var(--hero-fondo); color: var(--texto);
}
.banda__media { position: absolute; inset: 0; z-index: -2; }
.banda__media img { width: 100%; height: 100%; object-fit: cover; }
.banda::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(var(--cafe-rgb) / .94), rgb(var(--cafe-rgb) / .45) 62%, rgb(var(--cafe-rgb) / .2));
}
.banda__contenido { display: grid; gap: 16px; justify-items: start; }
.banda .sobretitulo { margin: 0; color: var(--caramelo); }
.banda__titulo { max-width: 17ch; color: var(--texto); font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); }
.banda__texto { color: var(--texto-2); font-size: 1.15rem; }
.banda__pasos { display: grid; gap: 12px; max-width: 580px; margin: 8px 0 0; padding: 0; }
.banda__pasos li { display: flex; gap: 14px; align-items: baseline; color: var(--texto); }
.banda__pasos span {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--caramelo); border-radius: 50%; color: var(--caramelo); font-size: .85rem; font-weight: 700;
}
.banda--cierre { align-items: center; text-align: center; }
.banda--cierre::after { background: rgb(var(--cafe-rgb) / .74); }
.banda--cierre .banda__contenido { justify-items: center; }
.banda--cierre .banda__titulo { max-width: 14ch; }

/* Encabezado de sección con foto al lado */
.seccion__cabeza--foto { display: grid; gap: 28px; max-width: none; }
@media (min-width: 1024px) { .seccion__cabeza--foto { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; } }
.cabeza-foto { position: relative; overflow: hidden; border-radius: var(--radio-lg); aspect-ratio: 16 / 10; }
.cabeza-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Los dos cafés, como etiquetas de bolsa */
.cafes-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .cafes-grid { grid-template-columns: 1fr 1fr; } }
.etiqueta-cafe {
  position: relative; display: grid; gap: 20px; align-content: start; overflow: hidden;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: linear-gradient(160deg, rgb(var(--caramelo-rgb) / .12), transparent 45%), var(--tarjeta-fondo);
}
.etiqueta-cafe::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; pointer-events: none;
  border-radius: 50%; border: 1px solid rgb(var(--caramelo-rgb) / .28);
  box-shadow: 0 0 0 20px rgb(var(--caramelo-rgb) / .05), 0 0 0 44px rgb(var(--caramelo-rgb) / .03);
}
.etiqueta-cafe__cabeza { display: flex; align-items: flex-start; gap: 16px; }
.etiqueta-cafe__numero { font-family: var(--fuente-display); font-size: 2.6rem; line-height: 1; color: var(--caramelo); }
.etiqueta-cafe__uso { font-size: var(--pequeno); color: var(--texto-2); }
.etiqueta-cafe__nombre { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); color: var(--texto); }
.etiqueta-cafe__desc { font-size: 1.05rem; color: var(--texto-2); }
.etiqueta-cafe__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.etiqueta-cafe__datos div { padding-top: 10px; border-top: 1px solid var(--linea); }
.etiqueta-cafe__datos dt, .ficha dt, .perfil dt, .etiqueta-cafe__subtitulo {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
}
.etiqueta-cafe__datos dd, .ficha dd { margin: 3px 0 0; font-weight: 600; }
.etiqueta-cafe__subtitulo { margin-bottom: -8px; }
.ejemplo { display: none; }
/* Solo en la vista previa: etiqueta colgada del borde de arriba de la tarjeta. */
[data-mode="preview"] .ejemplo {
  display: block; position: absolute; top: 0; right: 24px; padding: 3px 10px; border-radius: 0 0 6px 6px; white-space: nowrap;
  background: var(--marca-pendiente); color: #fff; font: 600 .72rem/1.3 var(--fuente-texto);
}

.tueste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--radio-sm); background: rgb(var(--leche-rgb) / .05); }
.tueste__escala { display: flex; gap: 6px; }
.tueste__escala span { width: 24px; height: 10px; border-radius: var(--pildora); background: rgb(var(--leche-rgb) / .14); }
.tueste__escala .lleno:nth-child(1) { background: #E8C58C; }
.tueste__escala .lleno:nth-child(2) { background: #D39B5A; }
.tueste__escala .lleno:nth-child(3) { background: #B06F38; }
.tueste__escala .lleno:nth-child(4) { background: #7F4A26; }
.tueste__escala .lleno:nth-child(5) { background: #4F2B16; }

.notas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.notas li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--borde); border-radius: var(--pildora); font-size: .9rem; font-weight: 600; }
.notas__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.perfil { display: grid; gap: 10px; margin: 0; }
.perfil div { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
.perfil dd { margin: 0; }
.medidor { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--pildora); background: rgb(var(--leche-rgb) / .12); }
.medidor::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) / 5 * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--cobre), var(--caramelo)); }

/* Métodos con su guía y el mapa de sabor */
.metodos-cafe { display: grid; gap: 20px; }
@media (min-width: 700px) { .metodos-cafe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .metodos-cafe { grid-template-columns: repeat(3, 1fr); } }
.contenidos { display: contents; }
.metodo-cafe {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--tarjeta-fondo);
  transition: transform var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.metodo-cafe:hover { transform: translateY(-4px); border-color: rgb(var(--caramelo-rgb) / .5); }
.metodo-cafe__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.metodo-cafe__cuerpo { display: grid; gap: 12px; padding: 22px; }
.metodo-cafe__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.metodo-cafe__cab h3 { color: var(--texto); }
.metodo-cafe__precio { color: var(--caramelo); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metodo-cafe__desc { color: var(--texto-2); }
.metodo-cafe__para { font-family: var(--fuente-display); font-size: 1.12rem; line-height: 1.35; color: var(--caramelo-claro); }
.ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 12px 0; border-block: 1px solid var(--linea); }

.mapa-card {
  display: grid; gap: 12px; align-content: start; margin: 0; padding: 24px;
  border: 1px dashed rgb(var(--caramelo-rgb) / .45); border-radius: var(--radio-lg);
  background: rgb(var(--caramelo-rgb) / .05);
}
.mapa-card h3 { color: var(--texto); }
.mapa-card > p { color: var(--texto-2); }
.mapa-sabor__marco { position: relative; padding: 8px 8px 30px 30px; }
.mapa-sabor {
  position: relative; aspect-ratio: 1; margin: 0; padding: 0; list-style: none;
  border-left: 1px solid rgb(var(--leche-rgb) / .35); border-bottom: 1px solid rgb(var(--leche-rgb) / .35);
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 25% 25%;
}
.mapa-sabor__punto {
  position: absolute; left: calc(var(--x) * 76% + 12%); bottom: calc(var(--y) * 76% + 12%);
  display: grid; justify-items: center; gap: 4px; transform: translate(-50%, 50%);
  font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.mapa-sabor__punto::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--caramelo); box-shadow: 0 0 0 5px rgb(var(--caramelo-rgb) / .22); }
.mapa-sabor__eje { position: absolute; margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.mapa-sabor__eje--x { right: 8px; bottom: 4px; }
.mapa-sabor__eje--y { left: 0; top: 8px; writing-mode: vertical-rl; transform: rotate(180deg); }

/* Espresso y con leche: tazas dibujadas */
.bebidas { display: grid; gap: 16px; }
@media (min-width: 700px) { .bebidas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bebidas { grid-template-columns: repeat(3, 1fr); } }
.bebida { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; padding: 22px; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--tarjeta-fondo); }
.bebida__cuerpo { display: grid; gap: 8px; }
.bebida__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bebida__cab h3 { font-size: 1.3rem; color: var(--texto); }
.bebida__precio { color: var(--caramelo); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bebida__desc { color: var(--texto-2); font-size: .95rem; }
.taza { position: relative; width: 88px; height: 104px; margin-top: 4px; }
.taza__vaso {
  position: absolute; left: 0; top: 0; width: 70px; height: 84px;
  display: flex; flex-direction: column-reverse; overflow: hidden;
  border: 2px solid rgb(var(--leche-rgb) / .6); border-top: 0; border-radius: 4px 4px 30px 30px;
  background: rgb(var(--leche-rgb) / .04);
}
.capa { display: block; flex: none; height: var(--h); }
.taza__asa { position: absolute; left: 66px; top: 16px; width: 20px; height: 32px; border: 2px solid rgb(var(--leche-rgb) / .6); border-left: 0; border-radius: 0 16px 16px 0; }
.taza__plato { position: absolute; left: -9px; top: 90px; width: 88px; height: 6px; border-radius: var(--pildora); background: rgb(var(--leche-rgb) / .35); }
.capa--espresso { background: var(--capa-espresso); }
.capa--agua { background: var(--capa-agua); }
.capa--leche { background: var(--capa-leche); }
.capa--espuma { background: var(--capa-espuma); }
.capa--chocolate { background: var(--capa-chocolate); }
.capa--almendras { background: var(--capa-almendras); }
/* En el celular la taza se achica y el precio puede bajar debajo del nombre. */
@media (max-width: 699px) {
  .bebidas { grid-template-columns: minmax(0, 1fr); }
  .bebida { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .bebida__cab { flex-wrap: wrap; row-gap: 2px; }
  .taza { width: 70px; height: 84px; }
  .taza__vaso { width: 56px; height: 68px; border-radius: 4px 4px 24px 24px; }
  .taza__asa { left: 53px; top: 13px; width: 16px; height: 26px; border-radius: 0 13px 13px 0; }
  .taza__plato { left: -7px; top: 73px; width: 70px; height: 5px; }
}
.js .taza .capa { transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease-out); }
.js .taza .capa:nth-child(2) { transition-delay: .15s; }
.js .taza .capa:nth-child(3) { transition-delay: .3s; }
.js .taza .capa:nth-child(4) { transition-delay: .45s; }
.js .taza.llena .capa { transform: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--texto-2); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__muestra { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(var(--leche-rgb) / .25); }

/* Café con licor: las fotos a la derecha en escritorio */
@media (min-width: 1024px) {
  .barra-grid--inversa { grid-template-columns: 7fr 5fr; }
  .barra-grid--inversa .barra__fotos { order: 2; }
}

/* Del grano a la taza */
.recorrido-grid { display: grid; gap: 40px; }
.recorrido__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recorrido__fotos img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-md); }
.recorrido__fotos img:first-child { grid-row: span 2; aspect-ratio: auto; }
@media (min-width: 1024px) {
  .recorrido-grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 72px; }
  .recorrido__fotos { position: sticky; top: calc(var(--alto-cabecera) + 100px); }
}
.recorrido { position: relative; display: grid; gap: 30px; margin: 0; padding: 0 0 0 36px; list-style: none; counter-reset: paso; }
.recorrido::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--caramelo), rgb(var(--caramelo-rgb) / .12)); }
.paso { position: relative; counter-increment: paso; }
.paso::before { content: ""; position: absolute; left: -36px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--fondo-alterno); border: 2px solid var(--caramelo); }
.paso__titulo { font-size: 1.5rem; color: var(--texto); }
.paso__titulo::before { content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 6px; font: 600 var(--pequeno)/1.2 var(--fuente-texto); letter-spacing: .12em; color: var(--cobre); }
.paso p { max-width: 58ch; margin-top: 8px; color: var(--texto-2); }

/* Cómo se prueba, regiones y glosario */
.cata { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: cata; }
@media (min-width: 700px) { .cata { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cata { grid-template-columns: repeat(5, 1fr); } }
.cata li { counter-increment: cata; padding: 24px 22px; border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--tarjeta-fondo); }
.cata li::before { content: counter(cata); display: block; margin-bottom: 14px; font-family: var(--fuente-display); font-size: 2.4rem; line-height: 1; color: rgb(var(--caramelo-rgb) / .45); }
.cata h3 { margin-bottom: 8px; font-size: 1.3rem; color: var(--caramelo); }
.cata p { color: var(--texto-2); font-size: .95rem; }

.regiones { display: grid; gap: 1px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--linea); }
@media (min-width: 700px) { .regiones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .regiones { grid-template-columns: repeat(3, 1fr); } }
.regiones li { padding: 26px 24px; background: var(--fondo); }
.regiones h3 { margin-bottom: 6px; color: var(--texto); }
.regiones p { color: var(--texto-2); }
.regiones .es-nuestra { background: linear-gradient(160deg, rgb(var(--caramelo-rgb) / .16), transparent 60%), var(--fondo); }
.region__tag {
  display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: var(--pildora);
  background: rgb(var(--caramelo-rgb) / .16); color: var(--caramelo); font-size: .8rem; font-weight: 700;
}

.glosario { display: grid; gap: 0 56px; margin: 0; }
@media (min-width: 900px) { .glosario { grid-template-columns: repeat(2, 1fr); } }
.glosario div { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.glosario dt { font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes); font-size: 1.3rem; color: var(--caramelo); }
.glosario dd { margin: 6px 0 0; color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) {
  .js .taza .capa { transform: none; transition: none; }
  .metodo-cafe:hover { transform: none; }
}

/* ---------- Página Fit (fit.html) ----------
   Usa el tema claro de tokens.css ([data-tema="fit"]): menta, verde azulado y lila. */

/* Hojas de salvia en las esquinas de la cabecera, como en el volante. */
.fit-cabeza { position: relative; overflow: hidden; isolation: isolate; }
.fit-cabeza::before, .fit-cabeza::after {
  content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%239DB6A0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 110C40 70 70 40 112 22'/%3E%3Cpath d='M44 78c-14-2-22-12-22-26 14 0 24 9 22 26zM62 58c-3-13 3-24 16-30 5 13 0 25-16 30zM80 42c8-11 20-14 32-9-6 12-18 16-32 9zM58 66c12 6 18 17 14 30-13-4-19-16-14-30z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fit-cabeza::before { left: -60px; bottom: -40px; }
.fit-cabeza::after { right: -50px; top: calc(var(--alto-cabecera) - 10px); transform: rotate(180deg); }
.fit-cabeza .pagina-cabeza__foto img { box-shadow: 0 30px 60px -36px rgb(var(--fit-rgb) / .55); }

.sellos { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.sellos li {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  border: 1px solid var(--borde); border-radius: var(--pildora); background: var(--tarjeta-fondo);
  font-weight: 700; font-size: .95rem; line-height: 1.2;
}
.sellos .icono { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgb(var(--fit-rgb) / .1); color: var(--primario); }
.sellos small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 500; color: var(--texto-2); }
.fit-cabeza__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.fit-productos { display: grid; gap: 24px; }
@media (min-width: 700px) { .fit-productos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fit-productos--tres { grid-template-columns: repeat(3, 1fr); } }
.fit-producto {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--tarjeta-fondo);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.fit-producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.fit-producto__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.fit-producto__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.fit-producto__nombre { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); color: var(--texto); }
.fit-producto__desc { color: var(--texto-2); }
.fit-producto__etiqueta { margin-bottom: -6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.fit-sellos, .fit-sabores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fit-sellos li { padding: 4px 12px; border-radius: var(--pildora); background: rgb(var(--fit-rgb) / .1); color: var(--primario); font-size: .82rem; font-weight: 700; }
.fit-sabores li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--borde); border-radius: var(--pildora); font-size: .92rem; font-weight: 600; }
.fit-sabores__punto { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.fit-producto__pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 6px; }
.fit-producto__nota { font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes); font-style: italic; font-size: 1.1rem; color: var(--acento); }
.precio-fit {
  display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; padding: 8px 18px;
  border-radius: var(--pildora); background: var(--lila-claro); color: var(--lila);
  font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.precio-fit small { font-size: .78rem; font-weight: 600; }

.combos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .combos { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.combo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--tarjeta-fondo);
}
.combo__texto { display: grid; gap: 4px; }
.combo__iconos { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--primario); }
.combo__iconos .icono { width: 26px; height: 26px; }
.combo__mas { font-weight: 700; color: var(--texto-2); }
.combo__nombre { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.combo__detalle { color: var(--texto-2); font-size: .85rem; }
.combo__precio { display: grid; justify-items: end; gap: 6px; }
.combo__precio strong {
  padding: 6px 16px; border-radius: var(--pildora); background: var(--primario); color: var(--primario-texto);
  font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.combo__ahorro { color: var(--acento); font-size: .8rem; font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .fit-producto:hover { transform: none; }
}

/* Con «Café» y «Fit» en el menú, entre 1024 y 1199 px los enlaces van más juntos. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .cabecera__inner { gap: 18px; }
  .nav__lista { gap: 22px; }
}

/* ---------- Inicio: ramitas de salvia ----------
   Como en los afiches: una ramita en las esquinas de tres secciones (Próximos talleres, las
   promesas y el cierre), tenues y detrás del contenido. Solo en el inicio. */
[data-tema="inicio"] #talleres-inicio,
[data-tema="inicio"] #promesas,
[data-tema="inicio"] .cta-final { position: relative; overflow: hidden; isolation: isolate; }
[data-tema="inicio"] #talleres-inicio::before,
[data-tema="inicio"] #talleres-inicio::after,
[data-tema="inicio"] #promesas::after,
[data-tema="inicio"] .cta-final::before,
[data-tema="inicio"] .cta-final::after {
  content: ""; position: absolute; z-index: -1; width: 250px; height: 250px; pointer-events: none; opacity: .42;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M14 112C38 74 68 44 112 20' fill='none' stroke='%239DB6A0' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%239DB6A0'%3E%3Cpath d='M40 82c-15-1-24-11-25-26 15-1 25 9 25 26z'/%3E%3Cpath d='M58 62c-4-13 2-25 15-31 6 13 1 25-15 31z'/%3E%3Cpath d='M78 44c8-11 20-15 32-10-6 12-18 16-32 10z'/%3E%3Cpath d='M54 70c13 5 19 16 16 30-13-4-20-15-16-30z'/%3E%3Cpath d='M76 50c13 3 21 13 20 27-13-2-21-12-20-27z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
[data-tema="inicio"] #talleres-inicio::before { right: -46px; top: -34px; transform: rotate(180deg); }
[data-tema="inicio"] #talleres-inicio::after { left: -56px; bottom: -48px; }
[data-tema="inicio"] #promesas::after { right: -40px; top: -30px; transform: rotate(180deg); }
[data-tema="inicio"] .cta-final::before { left: -50px; top: -40px; transform: scaleY(-1); }
[data-tema="inicio"] .cta-final::after { right: -50px; bottom: -44px; transform: scaleX(-1); }
@media (max-width: 639px) {
  [data-tema="inicio"] #talleres-inicio::before,
  [data-tema="inicio"] #talleres-inicio::after,
  [data-tema="inicio"] #promesas::after,
  [data-tema="inicio"] .cta-final::before,
  [data-tema="inicio"] .cta-final::after { width: 150px; height: 150px; opacity: .32; }
}

/* ---------- Talleres (talleres.html y la sección «Próximos talleres» del inicio) ----------
   talleres.html usa el tema de tokens.css ([data-tema="talleres"]): lino, oliva y malva. */

.pasos-reserva { display: grid; gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.pasos-reserva li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.pasos-reserva span {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primario); color: var(--primario-texto); font-size: .85rem; font-weight: 700;
}

/* En la cabecera, el afiche del próximo taller, un poco girado como si estuviera pegado. */
.destacado--cartel { width: min(100%, 360px); justify-self: center; }
.destacado__enlace {
  position: relative; display: block; overflow: hidden; border-radius: var(--radio-md);
  box-shadow: 0 30px 60px -30px rgb(var(--tinta-rgb) / .55);
  transform: rotate(1.5deg); transition: transform var(--t-ui) var(--ease-out);
}
.destacado__enlace:hover { transform: none; }
@media (max-width: 599px) { .destacado__enlace { transform: none; } }
.pagina-cabeza__foto .destacado__img { aspect-ratio: auto; height: auto; border-radius: 0; }
.destacado__insignia {
  position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: var(--pildora);
  background: var(--acento); color: #fff; font-size: .8rem; font-weight: 700;
}

/* Tarjeta grande de cada taller: afiche y datos */
.talleres { display: grid; gap: 28px; }
.taller {
  display: grid; gap: 22px; padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--tarjeta-fondo);
}
@media (min-width: 800px) { .taller { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 36px; align-items: start; } }
.taller__cartel { display: block; overflow: hidden; border-radius: var(--radio-md); box-shadow: 0 16px 36px -24px rgb(var(--tinta-rgb) / .6); }
.taller__img { width: 100%; height: auto; transition: transform var(--t-ui) var(--ease-out); }
.taller__cartel:hover .taller__img { transform: scale(1.02); }
@media (max-width: 799px) { .taller__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; } }
.taller__cuerpo { display: grid; gap: 14px; align-content: start; min-width: 0; }
.taller__cuando { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; color: var(--texto-2); }
.taller__insignia {
  display: inline-block; padding: 4px 12px; border-radius: var(--pildora);
  background: var(--acento); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.taller__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.12; color: var(--texto); }
.taller__frase { font-family: var(--fuente-display); font-variation-settings: var(--display-ajustes); font-style: italic; font-size: 1.15rem; color: var(--acento); }
.taller__desc { max-width: 60ch; color: var(--texto-2); }
.taller__datos { display: grid; gap: 12px 24px; margin: 4px 0 0; padding: 16px 0; border-block: 1px solid var(--linea); }
@media (min-width: 560px) { .taller__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.taller__datos dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.taller__datos dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.taller__datos a { color: var(--enlace); }
.taller__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.taller__cupos { color: var(--acento); font-size: .88rem; font-weight: 700; }
.taller__agotado { padding: 8px 16px; border-radius: var(--pildora); background: var(--linea); font-weight: 700; }
.talleres-vacio { padding: 24px; border: 1px dashed var(--borde); border-radius: var(--radio-md); color: var(--texto-2); }

/* Ya pasaron: solo información, en pequeño */
.talleres-pasados { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .talleres-pasados { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .talleres-pasados { grid-template-columns: repeat(3, 1fr); } }
.taller-pasado {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--tarjeta-fondo);
}
.taller-pasado__img { width: 64px; height: 88px; object-fit: cover; object-position: top; border-radius: 8px; filter: saturate(.75); }
.taller-pasado__fecha { font-size: .8rem; color: var(--texto-2); }
.taller-pasado__titulo { font-weight: 700; line-height: 1.3; }
/* Títulos largos («incondicionalmente») en columnas angostas: se parten en vez de salirse. */
.taller__titulo, .taller-pasado__titulo, .taller-mini__titulo, .reserva__titulo { overflow-wrap: anywhere; hyphens: auto; }
.taller-pasado__quien { font-size: .85rem; color: var(--texto-2); }

/* Inicio: «Próximos talleres» */
.talleres-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; margin: 0 0 8px; padding: 0; list-style: none; }
.taller-mini {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px;
  border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--tarjeta-fondo);
}
.taller-mini__img { width: 96px; height: 128px; object-fit: cover; object-position: top; border-radius: 10px; }
.taller-mini__cuerpo { display: grid; gap: 6px; align-content: start; }
.taller-mini__cuando { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.taller-mini__titulo { font-size: 1.2rem; line-height: 1.2; }
.taller-mini__titulo a { color: var(--texto); text-decoration: none; }
.taller-mini__titulo a:hover { text-decoration: underline; }
.taller-mini__precio { font-size: .9rem; color: var(--texto-2); }
.taller-mini .boton { justify-self: start; margin-top: 4px; }
@media (max-width: 379px) {
  .taller-mini { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .taller-mini__img { width: 72px; height: 96px; }
}

/* La ventana para reservar: centrada en el computador, desde abajo en el celular. */
.reserva {
  width: min(100% - 24px, 480px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 0; border-radius: var(--radio-lg);
  background: var(--tarjeta-fondo); color: var(--texto); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .45);
}
.reserva::backdrop { background: rgb(var(--tinta-rgb) / .5); }
.reserva[open] { animation: subir var(--t-ui) var(--ease-out); }
.reserva__form { position: relative; display: grid; gap: 14px; padding: 28px 24px 24px; }
.reserva__cerrar {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.6rem; line-height: 1; color: var(--texto-2);
}
.reserva__cerrar:hover { background: var(--hover); color: var(--texto); }
.reserva__sobre { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.reserva__titulo { padding-right: 36px; font-size: 1.6rem; line-height: 1.15; color: var(--texto); }
.reserva__cuando { color: var(--texto-2); font-weight: 600; }
.reserva__campos { display: grid; gap: 12px; }
.reserva__nota { color: var(--texto-2); font-size: .82rem; }
.reserva [aria-invalid="true"] { border-color: var(--marca-pendiente); }
@media (max-width: 599px) {
  .reserva { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radio-lg) var(--radio-lg) 0 0; }
  .reserva__form { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .reserva[open] { animation: fundir 150ms linear; }
  .destacado__enlace { transform: none; }
}

/* ---------- Recuadros de foto pendiente ---------- */

.ph {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 20px; text-align: center;
  background: var(--placeholder); color: var(--texto-2);
  font-size: var(--pequeno); line-height: 1.4;
}
.ph__icono { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.ph figcaption { max-width: 30ch; }
.ph--hero {
  align-content: start;
  padding-top: calc(var(--alto-cabecera) + 36px);
  background: transparent; color: rgb(var(--crema-rgb) / .72);
}
@media (max-height: 720px) and (max-width: 1023px) {
  .ph--hero figcaption { display: none; }
}

/* ---------- Vista previa y producción ----------
   <html data-mode="preview">: lo pendiente se ve con marco punteado y etiqueta.
   <html data-mode="produccion">: lo pendiente desaparece sin dejar hueco. */

[data-mode="preview"] .pendiente { outline: 2px dashed var(--marca-pendiente); outline-offset: -2px; }
[data-mode="preview"] .pendiente::before {
  content: "PENDIENTE: " attr(data-pendiente);
  display: block; width: fit-content; max-width: 100%;
  margin-bottom: 10px; padding: 4px 10px;
  border-radius: 6px;
  background: var(--marca-pendiente); color: #fff;
  font: 600 .72rem/1.35 var(--fuente-texto); letter-spacing: .02em;
  text-align: left; text-transform: none;
}
[data-mode="preview"] .seccion.pendiente { position: relative; }
[data-mode="preview"] .seccion.pendiente::before { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; }
[data-mode="preview"] .capitulo.pendiente::before,
[data-mode="preview"] .cita.pendiente::before { margin-bottom: 0; }
[data-mode="produccion"] .pendiente,
[data-mode="produccion"] .solo-preview { display: none !important; }

/* ---------- Página 404 ---------- */

.pagina-404 { display: grid; place-items: center; min-height: 100vh; background: var(--superficie); }
.error { display: grid; justify-items: center; gap: 16px; max-width: 640px; padding: 48px var(--margen); text-align: center; }
.error .sobretitulo { margin: 0; }
.error__titulo { font-size: var(--h2); line-height: var(--h2-alto); letter-spacing: var(--h2-tracking); color: var(--primario); text-wrap: balance; }
.error__texto { color: var(--texto-2); font-size: 1.1rem; }
.error__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
/* Dos puntos que no se encontraron: la mesa vacía. */
.error__puntos { position: relative; display: flex; gap: 88px; margin-bottom: 20px; }
.error__puntos::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 50%;
  border-top: 1px dashed var(--texto-2);
}
.error__puntos span { width: 10px; height: 10px; border-radius: 50%; background: var(--primario); }

/* ---------- Movimiento ----------
   Mejora progresiva: sin JavaScript (sin la clase .js en <html>) todo se ve quieto y completo.
   Con prefers-reduced-motion no hay intro, ni zoom, ni desplazamientos: solo fundidos de 150 ms. */

/* Intro «Conexión», 1,8 s en total:
   0–150 ms capa · 150–750 ms dos puntos trazan la línea · 750 ms se encuentran y sale un anillo ·
   900–1250 ms aparece el nombre y la línea se recoge · 1250–1800 ms la capa se abre en círculo.
   La capa se esconde sola a los 1,8 s y, como seguro, otra vez a los 2,4 s. */
@property --radio-intro {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.intro .capa-intro {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  background: var(--superficie);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--radio-intro), #000 calc(var(--radio-intro) + 1px));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--radio-intro), #000 calc(var(--radio-intro) + 1px));
  animation:
    intro-abrir 550ms var(--ease-in-out) 1250ms both,
    intro-fin 1ms linear 1800ms forwards,
    intro-seguro 1ms linear 2400ms forwards;
}
.intro-saltada .capa-intro { opacity: 0; pointer-events: none; transition: opacity 150ms linear; }

.intro__lineas { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; overflow: visible; }
.intro__linea { fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro .intro__linea {
  animation:
    intro-trazo 600ms var(--ease-in-out) 150ms both,
    intro-recoger 350ms var(--ease-in-out) 900ms forwards;
}

.intro__punto {
  position: absolute; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--texto);
}
.intro__punto--izq { left: -8px; }
.intro__punto--der { right: -8px; }
.intro .intro__punto--izq { animation: intro-izq 600ms var(--ease-in-out) 150ms both, intro-apagar 150ms linear 750ms forwards; }
.intro .intro__punto--der { animation: intro-der 600ms var(--ease-in-out) 150ms both, intro-apagar 150ms linear 750ms forwards; }

.intro__anillo {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border: 1.5px solid var(--texto); border-radius: 50%;
  opacity: 0;
}
.intro .intro__anillo { animation: intro-anillo 300ms var(--ease-out) 750ms forwards; }

.intro__marca {
  position: absolute; left: 0; right: 0; top: 50%;
  padding-inline: var(--margen);
  text-align: center;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.5rem); line-height: 1.1; font-weight: 560; letter-spacing: -.02em;
  color: var(--primario);
  opacity: 0; transform: translateY(-50%);
}
.intro .intro__marca { animation: intro-marca 350ms var(--ease-out) 900ms forwards; }

@keyframes intro-abrir { to { --radio-intro: 80vmax; } }
@keyframes intro-fin { to { visibility: hidden; } }
@keyframes intro-seguro { to { visibility: hidden; opacity: 0; } }
@keyframes intro-trazo { to { stroke-dashoffset: 0; } }
@keyframes intro-recoger { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes intro-izq { from { left: -8px; } to { left: calc(50% - 4px); } }
@keyframes intro-der { from { right: -8px; } to { right: calc(50% - 4px); } }
@keyframes intro-apagar { to { opacity: 0; } }
@keyframes intro-anillo { from { opacity: .9; transform: scale(.15); } to { opacity: 0; transform: scale(2.2); } }
@keyframes intro-marca { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } to { opacity: 1; transform: translateY(-50%); } }

/* Inicio: zoom lento de la foto y el texto que entra en escalera.
   Con intro, arranca cuando la capa empieza a abrirse; si la saltan, arranca ya. */
.js .hero__media { animation: zoom-hero var(--t-zoom) linear both; }
.js .hero__seq > * {
  animation: subir var(--t-reveal) var(--ease-out) both;
  animation-delay: calc(var(--retraso-hero, 0ms) + var(--d, 0ms));
}
.js .hero__seq > :nth-child(2) { --d: 120ms; }
.js .hero__seq > :nth-child(3) { --d: 240ms; }
.js .hero__seq > :nth-child(4) { --d: 360ms; }
.intro { --retraso-hero: 1300ms; }
.intro-saltada { --retraso-hero: 0ms; }

@keyframes zoom-hero { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes subir { from { opacity: 0; transform: translateY(var(--subida)); } to { opacity: 1; transform: none; } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }

/* Bloques que entran al bajar. Si main.js no carga, un seguro los muestra a los 3 s. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--subida));
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--escalon));
  animation: revelar-seguro 1ms linear 3s forwards;
}
.js-ok [data-reveal] { animation: none; }
.js [data-reveal].visible { opacity: 1; transform: none; }
@keyframes revelar-seguro { to { opacity: 1; transform: none; } }

/* Menú del celular */
.js .menu-movil:not([hidden]) { animation: fundir var(--t-ui) var(--ease-out); }
.js .menu-movil:not([hidden]) .menu-movil__lista li { animation: subir var(--t-reveal) var(--ease-out) both; }
.js .menu-movil:not([hidden]) .menu-movil__lista li:nth-child(2) { animation-delay: 70ms; }
.js .menu-movil:not([hidden]) .menu-movil__lista li:nth-child(3) { animation-delay: 140ms; }
.js .menu-movil:not([hidden]) .menu-movil__lista li:nth-child(4) { animation-delay: 210ms; }

/* WhatsApp flotante: pulso suave 3 veces a los 4 s, y se detiene. */
@media (min-width: 1024px) {
  .wa-flotante::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--primario);
    opacity: 0; pointer-events: none;
    animation: pulso 1.4s var(--ease-out) 4s 3;
  }
}
@keyframes pulso { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__media { animation: none; }
  .js .hero__seq > * { animation: fundir 150ms linear both; animation-delay: 0ms; }
  .js [data-reveal] { transform: none; transition: opacity 150ms linear; transition-delay: 0s; }
  .js .menu-movil:not([hidden]),
  .js .menu-movil:not([hidden]) .menu-movil__lista li { animation: fundir 150ms linear both; }
  .favorito:hover, .wa-flotante:hover { transform: none; }
  .boton:hover .flecha { transform: none; }
  .wa-flotante::after, .plato.resaltado { animation: none; }
  .carta__barra, .cabecera { transition-duration: 150ms; }
}