/* Haikmaro — sistema visual base (spec 12). Celular primero. */

/* ---------- Tipografías self-hosted (archivos en el paso siguiente) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("/assets/fonts/cormorant-garamond-300i.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400i.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
/* Sustitutos ajustados por métrica para que el cambio de fuente no mueva el layout. */
@font-face { font-family: "Cormorant fallback"; src: local("Georgia"); size-adjust: 92%; ascent-override: 90%; descent-override: 28%; }
@font-face { font-family: "Inter fallback"; src: local("Arial"); size-adjust: 100%; }

/* ---------- Tokens ---------- */
:root {
  --perla: #FBFAF6; /* acentos: hover, fondos de opción */
  --fondo: #FFFFFF; /* fondo de página: un solo tono, el de la cabecera (Haik, 21/10/2026) */
  --verde: #0F2A22;
  --verde-2: #16352B;
  --verde-3: #1B3A30;
  --dorado: #B99764;
  --dorado-tinta: #7A6544;       /* dorado para texto sobre Perla (5.3:1) */
  --dorado-suave: rgba(185, 151, 100, 0.35);
  --dorado-linea: rgba(185, 151, 100, 0.45);
  --tinta: #1C2420;
  --tinta-2: #3E4843;
  --gris: #55605A;               /* 6.3:1 sobre Perla */
  --gris-claro: #C9C2B2;
  --crema: #E6E0D3;              /* marcadores y skeletons */
  --claro: #F6F3EC;              /* texto sobre verde */
  --claro-2: #D8DED9;
  --claro-3: #C9D2CD;
  --verde-claro: #8FA39A;
  --error: #8A3B2E;
  --error-sobre-verde: #E8B4A6;

  --serif: "Cormorant Garamond", "Cormorant fallback", Georgia, serif;
  --sans: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-rapido: 160ms;
  --t-suave: 240ms;
  --t-lento: 400ms;
  --curva: cubic-bezier(.2, .6, .2, 1);

  --gutter: 20px;
  --ancho-max: 1280px;
  --barra-precio: 0px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 14px; font-weight: 300; line-height: 1.6; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
input, button, select, textarea { font-family: var(--sans); font-size: 16px; } /* 16px evita el zoom de iOS */
:focus-visible { outline: 1px solid var(--dorado); outline-offset: 3px; }
.seccion--verde :focus-visible, .pie :focus-visible, .hero :focus-visible, .linea :focus-visible { outline-color: var(--claro); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}
.saltar { position: absolute; left: -999px; top: 0; background: var(--verde); color: var(--claro); padding: 10px 14px; z-index: 100; }
.saltar:focus { left: 12px; top: 12px; }

/* ---------- Escala tipográfica ---------- */
.display { margin: 0; font-family: var(--serif); font-weight: 300; line-height: 1.05; color: var(--verde); }
.display em { font-style: italic; }
.display--xl { font-size: 44px; }
.display--l { font-size: 34px; }
.display--m { font-size: 28px; }
.display--s { font-size: 22px; font-weight: 400; }
.eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.eyebrow--dorado { color: var(--dorado); }           /* solo sobre verde */
.seccion:not(.seccion--verde) .eyebrow--dorado { color: var(--dorado-tinta); }
.linea .eyebrow--dorado { color: var(--dorado); }    /* sobre foto oscura */
.linea-dorada { width: 40px; height: 1px; background: var(--dorado); margin: 0 auto; }
.linea-dorada--izq { margin: 0; }
.separador-fino { height: 1px; background: var(--dorado-suave); }
.marca-grande { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .32em; padding-left: .32em; color: var(--claro); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; background: none; transition: background var(--t-suave) var(--curva), color var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
.boton--grande { min-height: 52px; width: 100%; letter-spacing: .2em; }
.boton--borde { border-color: var(--dorado); color: var(--claro); }
.boton--borde:hover { background: rgba(185, 151, 100, .14); }
.boton--borde-verde { border-color: var(--verde); color: var(--verde); }
.boton--borde-verde:hover { background: var(--verde); color: var(--claro); }
.boton--lleno { background: var(--verde); color: var(--claro); }
.boton--lleno:hover { background: var(--verde-3); }
.boton--dorado { background: var(--dorado); color: var(--verde); font-weight: 500; }
.boton--verde { background: var(--verde); color: var(--claro); border-color: var(--verde); }
.boton--verde:hover { background: #1d3a31; }
.enlace-subrayado { font-size: 12px; letter-spacing: .12em; color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 3px; }

/* ---------- Marcadores de contenido (hasta que llegue el real) ---------- */
.marcador { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--crema); color: #6B6A60; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.8; }
.marcador--oscuro { background: var(--verde-2); color: var(--verde-claro); }
.marcador--verde { background: var(--verde-2); color: var(--verde-claro); }

/* ---------- Cabecera y menú ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--fondo); border-bottom: 1px solid var(--dorado-linea); color: var(--verde); }
.cabecera--sobre-video { position: absolute; top: 0; left: 0; right: 0; height: 72px; background: transparent; border: 0; color: var(--claro); }
.cabecera__boton { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.cabecera__marca { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: .32em; padding-left: .32em; text-decoration: none; color: inherit; }
.menu { position: fixed; inset: 0; z-index: 30; background: var(--perla); color: var(--verde); /* tono claro (Haik, 22/10) */ padding: 50px 28px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(-12px); transition: opacity var(--t-suave) var(--curva), transform var(--t-lento) var(--curva); }
.menu--visible { opacity: 1; transform: none; }
.menu[hidden] { display: none; }
.menu a { opacity: 0; transform: translateY(8px); transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva); }
.menu--visible a { opacity: 1; transform: none; }
.menu--visible a:nth-child(2) { transition-delay: 40ms; } .menu--visible a:nth-child(3) { transition-delay: 80ms; } .menu--visible a:nth-child(4) { transition-delay: 120ms; } .menu--visible a:nth-child(5) { transition-delay: 160ms; } .menu--visible a:nth-child(6) { transition-delay: 200ms; } .menu--visible a:nth-child(7) { transition-delay: 240ms; }
.menu a { font-family: var(--serif); font-size: 22px; font-weight: 300; line-height: 1.25; color: var(--verde); text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--dorado-linea); } /* más chico (Haik, 28/10): entran los botones del showroom en la pantalla */
.menu__cerrar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; background: none; border: 0; color: var(--verde); font-size: 28px; font-weight: 300; cursor: pointer; }
/* La franja del showroom al pie del menú (Haik, 22/10): como la de la web actual, con los dos botones. */
/* "Lectura" (Haik, 22/10): el último artículo del blog, con su miniatura, entre el menú y la franja del showroom. */
.menu__lectura { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.menu__lectura .eyebrow { font-size: 11px; color: var(--dorado-tinta); }
.menu .menu__lectura-enlace { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--dorado-linea); border-bottom: 1px solid var(--dorado-linea); background: #fff; opacity: 1; transform: none; font-size: 18px; line-height: 1.25; transition: border-color var(--t-suave) var(--curva); }
.menu .menu__lectura-enlace:hover, .menu .menu__lectura-enlace:active { border-color: var(--dorado); }
.menu__lectura-foto { flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover; background: var(--crema); }
.menu__lectura-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.menu__lectura-titulo { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--verde); }
.menu__lectura-leer { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dorado); }
.menu__lectura-flecha { flex: 0 0 14px; color: var(--dorado); }
.menu__franja { margin-top: 0; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.menu__franja .eyebrow { font-size: 11px; color: var(--dorado-tinta); }
.menu__franja-titulo { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; font-weight: 300; line-height: 1.15; letter-spacing: .02em; color: var(--verde); }
.menu__franja-botones { display: flex; gap: 10px; }
.menu .menu__franja-botones a { flex: 1 1 0; opacity: 1; transform: none; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .14em; padding: 0 8px; }
.menu .boton--borde-dorado { background: transparent; border: 1px solid var(--dorado); color: var(--verde); }
body.menu-abierto { overflow: hidden; }


/* ---------- Cabecera de computadora: logo centrado + barra con desplegables ---------- */
.cabecera-pc { display: none; }
@media (min-width: 900px) {
  .cabecera--celular, .menu { display: none !important; }
  .cabecera-pc { display: block; background: #fff; }
  .cabecera-pc__logo { display: flex; justify-content: center; padding: 14px 0 10px; }
  .cabecera-pc__imagen { width: 190px; height: auto; }
  .barra { position: relative; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); background: #fff; }
  .barra__lista { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: stretch; max-width: var(--ancho-max); }
  .barra__lista > li { position: static; }
  .barra__lista > li > a { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); text-decoration: none; transition: color var(--t-suave) var(--curva), background var(--t-suave) var(--curva); }
  .barra__lista > li > a:hover, .barra__item--sub:hover > a, .barra__item--sub:focus-within > a { color: var(--dorado-tinta); background: var(--perla); }
  .barra__flecha { display: inline-block; transition: transform var(--t-suave) var(--curva); }
  .barra__item--sub:hover .barra__flecha, .barra__item--sub:focus-within .barra__flecha { transform: translateY(2px); }
  .barra__carrito > a { padding: 0 18px; }
  .submenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; background: var(--perla); border-bottom: 1px solid var(--dorado-linea); box-shadow: 0 18px 40px rgba(15,42,34,.10); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-suave) var(--curva), transform var(--t-suave) var(--curva), visibility 0s linear var(--t-suave); }
  .barra__item--sub:hover .submenu, .barra__item--sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .submenu__tarjetas { max-width: var(--ancho-max); margin: 0 auto; padding: 28px 32px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; }
  .submenu__tarjeta { position: relative; display: block; min-height: 300px; overflow: hidden; text-decoration: none; color: var(--claro); background: var(--verde-3); }
  .submenu__foto { position: absolute; inset: 0; transition: transform var(--t-lento) var(--curva); }
  .submenu__tarjeta:hover .submenu__foto { transform: scale(1.03); }
  .submenu__tarjeta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,34,0) 40%, rgba(15,42,34,.9) 100%); }
  .submenu__texto { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; padding-bottom: 14px; }
  .submenu__texto::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--dorado); transform: scaleX(0); transform-origin: left; transition: transform var(--t-lento) var(--curva); }
  .submenu__tarjeta:hover .submenu__texto::after, .submenu__tarjeta:focus-visible .submenu__texto::after { transform: scaleX(1); }
  .submenu__flecha { position: absolute; right: 0; bottom: 22px; color: var(--dorado); opacity: 0; transform: translateX(-10px); transition: opacity var(--t-suave) var(--curva), transform var(--t-lento) var(--curva); }
  .submenu__tarjeta:hover .submenu__flecha, .submenu__tarjeta:focus-visible .submenu__flecha { opacity: 1; transform: none; transition-delay: 120ms; }
  .submenu__titulo { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.1; color: var(--claro); }
  .submenu__sub { margin-top: 6px; font-size: 13px; color: var(--claro-2); }
  .hero { min-height: 82vh; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 72px var(--gutter) 64px; }
.seccion--verde { background: var(--verde); color: var(--claro-3); }
.seccion--verde .display { color: var(--claro); }
.seccion--borde { border-top: 1px solid var(--dorado-linea); }
.seccion__encabezado { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 32px; }
.seccion__encabezado--izq { align-items: flex-start; text-align: left; gap: 10px; }

/* Hero */
.hero { position: relative; min-height: min(100svh, 820px); background: var(--verde); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 28px 64px; color: var(--claro); }
.hero__fondo { position: absolute; inset: 0; background: var(--verde-2) center / cover no-repeat; }
.hero__fondo .marcador, .hero__fondo video, .hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__degrade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,34,.55) 0%, rgba(15,42,34,0) 30%, rgba(15,42,34,0) 45%, rgba(15,42,34,.92) 100%); }
.hero__texto { position: relative; display: flex; flex-direction: column; gap: 20px; }
.hero .display { color: var(--claro); }
.hero__bajada { margin: 0; max-width: 300px; color: var(--claro-2); }

/* Líneas */
.lineas__bloques { display: flex; flex-direction: column; gap: 20px; }
.linea { position: relative; min-height: 480px; background: var(--verde-3); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px; color: var(--claro); overflow: hidden; }
.linea__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lento) var(--curva); }
.linea:hover img.linea__foto { transform: scale(1.03); }
.linea__degrade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,34,0) 40%, rgba(15,42,34,.95) 100%); }
.linea__texto { position: relative; display: flex; flex-direction: column; gap: 16px; }
.linea .display { color: var(--claro); font-size: 36px; }
.linea__botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cómo lo hacemos: el camino (decisión 89). Las fotos en zigzag; un hilo dorado se dibuja con el scroll por detrás y remata en el anillo. */
.camino { position: relative; }
.hilo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hilo__traza { fill: none; stroke: var(--dorado); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(185,151,100,.55)); }
.hilo__anillo { fill: none; stroke: var(--dorado); stroke-width: 1.1; }
.hilo__laurel { fill: none; stroke: var(--dorado); stroke-width: .8; opacity: 0; transition: opacity .6s ease .2s; }
.hilo__hoja { fill: var(--dorado); stroke: var(--dorado); stroke-width: .4; opacity: 0; transition: opacity .6s ease .3s; }
.hilo__gema { fill: #FFFFFF; stroke: var(--claro-3); stroke-width: 1; opacity: 0; transition: opacity .5s ease; }
.hilo__brillo { fill: none; stroke: var(--dorado); stroke-width: .8; stroke-linecap: round; opacity: 0; transition: opacity .5s ease .4s; }
.hilo.listo .hilo__gema, .hilo.listo .hilo__brillo, .hilo.listo .hilo__laurel, .hilo.listo .hilo__hoja { opacity: 1; }
.camino:not(.camino--js) .hilo { display: none; }
.hitos { list-style: none; margin: 0; padding: 0 0 150px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 34px; }
.hito { position: relative; display: flex; flex-direction: column; gap: 10px; width: 66%; }
.hito:nth-child(even) { align-self: flex-end; align-items: flex-end; text-align: right; }
.hito__foto { aspect-ratio: 4 / 5; max-width: 100%; width: 100%; overflow: hidden; border-radius: 10px; background: var(--verde-2); box-shadow: 0 0 0 1px var(--dorado-linea), 0 18px 40px rgba(0,0,0,.35); }
.hito__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hito__n { font-family: var(--serif); font-size: 15px; letter-spacing: .14em; color: var(--dorado); }
.hito__t { margin: 2px 0; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--claro); }
.hito__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--claro-3); }
/* Con JavaScript, cada foto arranca apagada y se enciende cuando el hilo llega. */
.camino--js .hito { transform: translateY(28px) scale(.96); transition: transform .7s var(--curva); }
.camino--js .hito__img { filter: brightness(.3) saturate(.6); transition: filter .8s ease; }
.camino--js .hito__texto { opacity: .35; transition: opacity .6s ease; }
.camino--js .hito.visto { transform: none; }
.camino--js .hito.visto .hito__img { filter: none; }
.camino--js .hito.visto .hito__texto { opacity: 1; }
/* Adornos de pintura japonesa en los huecos verdes: trazo dorado en relieve (sombra propia y filo de luz) y un destello
   que avanza con el scroll. Solo en celular. */
.adorno { display: none; position: absolute; top: 44%; width: max-content; pointer-events: none; }
.adorno svg { display: block; overflow: visible; max-width: none; fill: none; stroke: var(--dorado); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } /* max-width: none: la regla general de svg al 100 % dejaba el adorno sin ancho y el dibujo caía sobre la foto */
.hito:nth-child(odd) .adorno { left: calc(100% + 22px); }
.hito:nth-child(even) .adorno { right: calc(100% + 22px); }
.adorno--pajaros { top: 22%; }
.adorno--montanas { top: 38%; }
.hito:nth-child(1) .adorno--luna { left: calc(100% + 60px); top: 96%; }
.hito:nth-child(3) .adorno--ave { left: calc(100% + 70px); top: 4%; }
.hito:nth-child(4) .adorno--rama { right: auto; left: calc(100% - 50px); top: 132%; }
/* Set mágico: cada uno en un hueco libre, del lado contrario al adorno principal. */
.hito:nth-child(1) .adorno--estrellas { left: calc(100% + 54px); top: -4%; }
.hito:nth-child(2) .adorno--llave { right: calc(100% + 40px); top: 50%; transform: rotate(-20deg); }
.hito:nth-child(2) .adorno--castillo { right: calc(100% + 30px); top: 92%; }
.hito:nth-child(3) .adorno--mariposas { left: calc(100% + 56px); top: 68%; }
.hito:nth-child(4) .adorno--farol { right: calc(100% + 26px); top: 0%; }
.hito:nth-child(4) .adorno--reloj { right: calc(100% + 52px); top: 74%; }
.estrella--1, .estrella--2 { stroke-dasharray: 0 100; animation: adorno-fugaz 7s ease-out infinite; }
.estrella--2 { animation-delay: -3.5s; }
.chispa { animation: adorno-titilar 3s ease-in-out infinite; }
.mariposa { transform-origin: 20px 20px; animation: adorno-aleteo 4s ease-in-out infinite; }
.mariposa--2 { transform-origin: 50px 38px; animation-duration: 5s; animation-delay: -2s; }
.llama { animation: adorno-titilar 1.8s ease-in-out infinite; }
.arena { animation: adorno-titilar 6s ease-in-out infinite; }
@keyframes adorno-fugaz { 0% { stroke-dasharray: 0 100; opacity: 0; } 10% { opacity: 1; } 40% { stroke-dasharray: 100 0; opacity: 1; } 60%, 100% { stroke-dasharray: 100 0; opacity: 0; } }
@keyframes adorno-titilar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes adorno-aleteo { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.6); } }
.foil-sombra { transform: translate(0.6px, 2px); }
.foil-sombra path { stroke: rgba(0,0,0,.75); stroke-width: 1.8; filter: blur(0.9px); }
.foil-base { filter: drop-shadow(0 -0.6px 0 rgba(255,243,214,.35)); }
.foil-brillo path { stroke: #FFF3D6; stroke-width: 1.2; stroke-dasharray: 9 91; stroke-dashoffset: calc((100 - var(--destello, 0) - var(--desfase, 0)) * 1px); transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 1.5px rgba(255,243,214,.9)); }
.arbol { transform-origin: 50% 100%; animation: adorno-mecer 6s ease-in-out infinite; }
.arbol--2 { animation-duration: 7.5s; animation-delay: -2s; }
.pajaro { animation: adorno-planear 9s ease-in-out infinite; }
.pajaro--2 { animation-duration: 11s; animation-delay: -4s; }
.nube { stroke-width: .8; animation: adorno-deriva 12s ease-in-out infinite; }
.nube--2 { animation-delay: -5s; }
.rama { transform-origin: 0 100%; animation: adorno-mecer 8s ease-in-out infinite; }
.nieve { stroke-width: .8; }
@keyframes adorno-mecer { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes adorno-planear { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -4px); } }
@keyframes adorno-deriva { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (max-width: 899px) { .adorno { display: block; } }
@media (prefers-reduced-motion: reduce) { .camino--js .hito { transform: none; transition: none; } .camino--js .hito__img { filter: none; transition: none; } .camino--js .hito__texto { opacity: 1; } .arbol, .pajaro, .nube, .rama, .estrella--1, .estrella--2, .chispa, .mariposa, .llama, .arena { animation: none; } .foil-brillo path { transition: none; } .hilo__traza { transition: none; } }

/* Creando historias (decisión 89): el 3D siempre a la vista; el botón de vidrio abre la idea o el anillo. */
.historias__bajada { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 21px; color: var(--tinta-2); }
.historias__fotos { position: relative; width: 100%; max-width: 100%; aspect-ratio: 3 / 4; overflow: hidden; display: flex; background: var(--crema); border-radius: 10px; user-select: none; -webkit-user-select: none; }
.historias__fotos .pano { position: relative; height: 100%; overflow: hidden; flex: 1 1 0; transition: width .65s var(--curva); }
.historias--js .historias__fotos .pano { flex: 0 0 auto; }
.historias__fotos.arrastrando .pano { transition: none; }
.historias__fotos .pano img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; min-width: 100%; object-fit: cover; object-position: center; transform: translateX(-50%); max-width: none; -webkit-user-drag: none; pointer-events: none; }
.historias__fotos .pano--idea + .pano--proyecto, .historias__fotos .pano--anillo { box-shadow: inset 1px 0 0 var(--dorado); }
/* La mano con el anillo, con un poco de zoom sobre el anillo (Haik, 28/10): queda centrado y grande cuando el paño se abre. */
.historias__fotos .pano--anillo img { transform: translateX(-62%) scale(1.45); transform-origin: 62% 48%; } /* el anillo (al 62 % del ancho de la foto) queda en el centro del paño */
.historias:not(.historias--js) .perilla { display: none; }
/* La perilla: una píldora fina de vidrio apoyada sobre el borde de abajo de las fotos (desenfoca lo que tiene detrás),
   con reflejo arriba y un canto que brilla; el botón, una gota de vidrio dorado con el diamante. */
.perilla { position: absolute; left: 50%; bottom: 18px; z-index: 3; width: min(224px, calc(100% - 48px)); height: 44px; margin-left: calc(-1 * min(224px, calc(100% - 48px)) / 2); border-radius: 22px; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 55%, rgba(255,255,255,.14)); -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.05); backdrop-filter: blur(18px) saturate(1.7) brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 32px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12); touch-action: pan-y; cursor: grab; }
.perilla::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from 200deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 18%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.1) 55%, rgba(255,255,255,.85) 72%, rgba(255,255,255,.2) 88%, rgba(255,255,255,.95)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.perilla::after { content: ""; position: absolute; left: 8px; right: 8px; top: 2px; height: 46%; border-radius: 18px 18px 40% 40%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.04)); }
.perilla.arrastrando { cursor: grabbing; }
.perilla__pista { position: absolute; left: 22px; right: 22px; top: 50%; height: 0; z-index: 1; }
.perilla__pista::before, .perilla__pista::after, .perilla__centro { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 0 3px rgba(0,0,0,.35); }
.perilla__pista::before { left: 0; } .perilla__pista::after { left: 100%; } .perilla__centro { left: 50%; }
.perilla__tirador { position: absolute; top: 4px; left: var(--p, 50%); width: 36px; height: 36px; margin-left: -18px; padding: 0; border: 0; border-radius: 50%; z-index: 2; color: #FFFFFF; display: grid; place-items: center; cursor: grab; transition: left .65s var(--curva); background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 22%, rgba(236,214,170,.35) 48%, rgba(185,151,100,.55) 100%); -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: blur(8px) saturate(1.8); box-shadow: inset 0 1.5px 2px rgba(255,255,255,.95), inset 0 -7px 12px rgba(185,151,100,.45), inset 0 -1px 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 16px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.2); }
.perilla__tirador::before { content: ""; position: absolute; top: 4px; left: 8px; width: 13px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.95); filter: blur(1.2px); pointer-events: none; }
.perilla__tirador::after { content: ""; position: absolute; bottom: 4px; left: 10px; right: 10px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(1.5px); pointer-events: none; }
.perilla__tirador svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.perilla.arrastrando .perilla__tirador { transition: none; cursor: grabbing; }
.perilla__tirador:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.historias__rotulos { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 18px; }
.historias__rotulo { background: none; border: 0; padding: 8px 4px; font-family: var(--serif); font-size: 17px; line-height: 1.1; color: var(--verde); cursor: pointer; text-align: center; }
.historias__rotulo small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; color: var(--dorado-tinta); }
.historias__rotulo:focus-visible { outline: 1px solid var(--dorado); outline-offset: 2px; }
.historias__rotulo:first-child { text-align: left; } .historias__rotulo:last-child { text-align: right; }
.historias:not(.historias--js) .historias__rotulo { cursor: default; }
.historias__relato { position: relative; max-width: 620px; margin: 10px auto 0; min-height: 3.2em; text-align: center; }
.historias__relato p { position: absolute; inset: 0; margin: 0; font-size: 15px; line-height: 1.65; color: var(--tinta-2); opacity: 0; transition: opacity .4s; }
.historias__relato p.activo { opacity: 1; }
.historias__pie { display: flex; justify-content: center; margin-top: 30px; }
/* Preguntas frecuentes al lado de "Creando historias" (decisión 97): en el celular debajo, cerradas. */
.historias__faq { margin-top: 40px; }
.historias__faq-titulo { margin: 8px 0 4px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--verde); }
.historias__faq .faq__lista { margin-top: 14px; }
.historias__faq-pie { margin: 16px 0 0; font-size: 13px; color: var(--gris); }
.historias__sello { display: none; }
@media (prefers-reduced-motion: reduce) { .historias__fotos .pano, .perilla__tirador, .historias__relato p { transition: none; } }

/* Destacadas y tiras */
.destacadas { padding-right: 0; }
.destacadas__encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-right: var(--gutter); margin-bottom: 28px; }
.tira { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter); scrollbar-width: none; }
.tira::-webkit-scrollbar { display: none; }
.tarjeta { flex: 0 0 240px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.tira--piezas .pieza { flex: 0 0 min(68vw, 250px); scroll-snap-align: start; }
.tira--piezas .pieza__foto { aspect-ratio: 4 / 5; }
/* Vitrina de destacadas (decisión 90): una grande con nombre y precio sobre la foto y cuatro chicas en cuadrícula. */
.destacadas--vitrina { padding-right: var(--gutter); }
.destacadas--vitrina .destacadas__encabezado { padding-right: 0; }
.vitrina-inicio { display: grid; gap: 14px; }
.vitrina-inicio .pieza__foto { aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; width: 100%; }
.pieza--grande { position: relative; overflow: hidden; border-radius: 10px; }
.pieza--grande .pieza__foto { aspect-ratio: 4 / 5; border-radius: 10px; }
.pieza__sobre { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 48px 18px 18px; background: linear-gradient(transparent, rgba(15, 42, 34, .86)); color: var(--claro); }
.pieza--grande .pieza__metal { color: #E6CDA0; }
.pieza--grande .pieza__nombre { color: var(--claro); font-size: 30px; line-height: 1; }
.pieza--grande .pieza__precio { color: var(--claro-2); }
.vitrina-inicio__chicas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vitrina-inicio__chicas .pieza { min-width: 0; }
.tarjeta__foto { aspect-ratio: 4 / 5; }
.tarjeta__nombre { font-family: var(--serif); font-size: 19px; color: var(--verde); }
.tarjeta__precio { font-size: 13px; color: var(--gris); }

/* El taller */
.taller { padding-top: 0; display: flex; flex-direction: column; gap: 24px; }
.taller__foto { display: block; width: 100%; height: 260px; object-fit: cover; background: var(--crema); }
.taller__texto { display: flex; flex-direction: column; gap: 14px; }
.taller__texto p { margin: 0; color: var(--tinta-2); }

/* Blog en inicio */
.articulo-mini { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; padding: 14px 0; }
.articulo-mini__foto { flex: 0 0 110px; height: 110px; }
.articulo-mini__titulo { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--verde); margin-top: 6px; }

/* ---------- Pie: franja compacta ---------- */
.pie { background: var(--verde); color: var(--claro-2); padding: 28px var(--gutter) 16px; font-size: 12px; line-height: 1.5; }
.pie a { color: var(--claro-2); text-decoration: none; }
.pie__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.pie__bloque { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pie__bloque a { padding: 4px 0; }
.pie__bloque--marca { grid-column: 1 / -1; }
.pie__marca { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: .32em; color: var(--claro); line-height: 1; }
.pie__lugar { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado); margin: 6px 0 18px; }
.pie__etiqueta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado); margin-bottom: 4px; }
/* Buscador de modelos (Haik, 22/10). */
.pie__buscar { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.pie__buscar-titulo { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado); }
.pie__buscar-campo { display: flex; align-items: stretch; background: #fff; border-radius: 8px; overflow: hidden; }
.pie__buscar-campo input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--tinta); font-size: 16px; border-radius: 0; -webkit-appearance: none; appearance: none; }
.pie__buscar-campo input::placeholder { color: var(--gris); }
.pie__buscar-campo input:focus { outline: none; }
.pie__buscar-campo:focus-within { box-shadow: 0 0 0 2px var(--dorado); }
.pie__buscar-campo button { flex: 0 0 48px; display: grid; place-items: center; border: 0; background: var(--dorado); color: var(--verde); cursor: pointer; }
/* El sello: el diamante del logo y la frase. */
.pie__sello { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 34px 0 8px; text-align: center; }
.pie__diamante { width: 72px; height: auto; }
.pie__orgullo { margin: 0; font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--claro); }
.pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 18px 0 0; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--claro-3); transition: color var(--t-suave) var(--curva); }
.pie__redes a:hover, .pie__redes a:focus-visible { color: var(--dorado); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--dorado-suave); font-size: 11px; color: #A9B6AF; }
.pie__legal a { color: #A9B6AF; padding: 4px 0; }

/* ---------- WhatsApp flotante ---------- */
/* Botones flotantes (Haik, 26/10): píldoras con texto, uno sobre otro. "Atención por WhatsApp" abajo, "Asistente Haikmaro" arriba. */
.whatsapp { position: fixed; right: 20px; bottom: calc(var(--barra-precio) + 16px + env(safe-area-inset-bottom)); z-index: 15; height: 46px; padding: 0 18px 0 14px; border-radius: 23px; background: var(--fondo); border: 1px solid var(--dorado); color: var(--verde); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 18px rgba(15,42,34,.12); }
.whatsapp span { line-height: 1; }
.guia-activa .whatsapp { display: none; }
.guia-activa .guia-boton { bottom: calc(var(--barra-precio) + 16px + env(safe-area-inset-bottom)); }
.guia-activa .guia-sigo { bottom: calc(var(--barra-precio) + 16px + env(safe-area-inset-bottom) + 54px); }
.whatsapp, .guia-boton { transition: padding .25s ease, transform .15s ease; }
.flotantes--chicos .whatsapp, .flotantes--chicos .guia-boton { width: 46px; padding: 0; justify-content: center; }
.flotantes--chicos .whatsapp span, .flotantes--chicos .guia-boton span { display: none; }

/* ---------- Páginas de error ---------- */
.pagina-error { min-height: 60vh; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; gap: 16px; }
.pagina-error .display { overflow-wrap: anywhere; }
.pagina-error p { margin-left: auto; margin-right: auto; }
.pagina-error p { margin: 0; max-width: 420px; color: var(--tinta-2); }
.pagina-error__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.pagina-error__ref { font-size: 11px; color: var(--gris); }

/* ---------- Computadora ---------- */
@media (min-width: 900px) {
  body { font-size: 15px; }
  .display--xl { font-size: 64px; }
  .display--l { font-size: 44px; }
  .display--m { font-size: 36px; }
  .seccion { padding: 96px var(--gutter); max-width: var(--ancho-max); margin: 0 auto; }
  .seccion--verde, .seccion--borde { max-width: none; }
  .seccion--verde > *, .seccion--borde > * { max-width: var(--ancho-max); margin-left: auto; margin-right: auto; }
  .hero { padding: 0 8vw 96px; }
  .hero__texto { max-width: 560px; }
  .hero__bajada { max-width: 420px; }
  .boton--grande { width: auto; min-width: 280px; }
  .lineas__bloques { flex-direction: row; }
  .linea { flex: 1 1 0; min-height: 560px; }
  .hitos { flex-direction: row; gap: 24px; padding: 0 150px 0 0; }
  .hito, .hito:nth-child(even) { width: auto; flex: 1 1 0; align-self: auto; align-items: flex-start; text-align: left; }
  .hito__foto { aspect-ratio: 1 / 1; }
  .hito__p { font-size: 14px; }
  /* En computadora, igual que en el celular (Haik, 29/10): cada foto mide siempre lo que mide el marco, quieta y centrada
     en su paño; la división solo la tapa o la descubre. Nada cambia de tamaño. (El celular no se toca.) */
  /* Decisión 97: el bloque (opción B, al ancho del marco) a la izquierda y las preguntas a la derecha. */
  /* Decisión 98: marco fino dorado alrededor del bloque, con el sello de las manos de la caja arriba al centro (solo computadora y tablet). */
  /* Las dos líneas del recuadro se dibujan con pseudoelementos para dejar un hueco arriba, detrás de las manos (sin fondo
     que tape: así no se nota ningún rectángulo aunque el fondo de la pantalla no sea blanco puro). */
  .historias__dos { --hueco: calc(clamp(170px, 18vw, 240px) + 64px); position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); column-gap: clamp(28px, 4.5vw, 64px); align-items: start; margin: calc(clamp(170px, 18vw, 240px) * .42) 16px 0; padding: 112px clamp(18px, 3vw, 48px) 40px; }
  .historias__dos::before, .historias__dos::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--linea-marco, var(--dorado)); border-top: 0; background: linear-gradient(90deg, var(--linea-marco, var(--dorado)) 0, var(--linea-marco, var(--dorado)) calc(50% - var(--hueco) / 2), transparent calc(50% - var(--hueco) / 2), transparent calc(50% + var(--hueco) / 2), var(--linea-marco, var(--dorado)) calc(50% + var(--hueco) / 2)) top / 100% 1px no-repeat; }
  .historias__dos::before { inset: 0; }
  .historias__dos::after { inset: -15px; --linea-marco: rgba(185, 151, 100, .45); }
  .historias__dos--solo { grid-template-columns: minmax(0, 1fr); }
  /* El bloque se "desarma" en la grilla: el encabezado ocupa la primera fila y las preguntas arrancan en la segunda, a la altura del marco. */
  .historias__bloque { display: contents; }
  .historias__bloque > * { grid-column: 1; min-width: 0; width: 100%; max-width: 600px; justify-self: end; }
  .historias__sello { display: block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: clamp(170px, 18vw, 240px); color: var(--dorado); pointer-events: none; }
  .historias__sello svg { display: block; width: 100%; height: auto; overflow: visible; max-width: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  .historias__bloque > .historias__relato { width: 100%; }
  .historias__faq { grid-column: 2; grid-row: 2 / span 4; margin-top: 0; min-width: 0; } /* las cuatro filas del bloque debajo del encabezado: fotos, rótulos, relato y botón */
  .historias__faq-titulo { font-size: 32px; }
  .historias__fotos { aspect-ratio: 1 / 1; width: min(100%, 640px); margin: 0 auto; container-type: inline-size; }
  .historias__fotos .pano img { width: 100cqw; min-width: 0; height: 100%; }
  .historias__fotos .pano--anillo img { transform: translateX(-62%); transform-origin: 62% 48%; }
  .historias__rotulo { font-size: 22px; }
  .historias__relato p { font-size: 16px; }
  .historias__bajada { font-size: 26px; }
  .tira--piezas .pieza { flex-basis: 270px; }
  .vitrina-inicio { grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .pieza--grande .pieza__foto { aspect-ratio: auto; height: 100%; }
  .vitrina-inicio__chicas { gap: 22px; }
  .taller { flex-direction: row; align-items: center; gap: 56px; }
  .taller__foto { flex: 1 1 0; height: 420px; }
  .taller__texto { flex: 1 1 0; }
  .pie { padding: 36px 8vw 18px; }
  .pie__fila { grid-template-columns: 1.6fr 1fr 1fr; gap: 24px 48px; }
  .pie__bloque--marca { grid-column: auto; }
}

/* ---------- Página de producto ---------- */
.galeria { position: relative; background: var(--crema); }
.galeria__tira { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__tira::-webkit-scrollbar { display: none; }
.galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--crema); }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria__puntos { display: flex; justify-content: center; gap: 8px; padding: 14px 0 0; background: var(--fondo); }
.galeria__punto { width: 24px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.galeria__punto::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--gris-claro); transition: background var(--t-suave) var(--curva); }
.galeria__punto.activo::after { background: var(--verde); }
.prod__encabezado { padding: 28px var(--gutter) 32px; display: flex; flex-direction: column; gap: 14px; }
.prod__nombre { font-size: 38px; }
.prod__sufijo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-top: -6px; }
.prod__corta { font-size: 14px; line-height: 1.65; color: var(--tinta-2); }
.prod__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.prod__precio-valor { font-family: var(--serif); font-size: 28px; color: var(--verde); }
.moneda { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); opacity: .8; }
.prod__par { font-size: 12px; color: var(--gris); }
.prod__precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; max-width: 760px; }
.prod__precios-caja { display: grid; grid-template-rows: 14px 12px auto 14px; row-gap: 5px; align-items: end; min-width: 0; border: 1px solid var(--dorado-linea); border-radius: 4px; padding: 10px 8px 9px; }
.prod__precios-metodo { font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__precios-moneda { font-family: var(--sans); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.prod__precios-valor { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1; color: var(--verde); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod__precios-nota { font-family: var(--sans); font-size: 9.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__precios-caja--efectivo { background: var(--verde); border-color: var(--verde); outline: 1px solid var(--dorado-linea); outline-offset: -4px; }
.prod__precios-caja--efectivo .prod__precios-metodo { color: var(--dorado); }
.prod__precios-caja--efectivo .prod__precios-moneda, .prod__precios-caja--efectivo .prod__precios-nota { color: var(--claro-3); }
.prod__precios-caja--efectivo .prod__precios-valor { color: var(--claro); }
@media (min-width: 641px) {
  .prod__precios { gap: 12px; }
  .prod__precios-caja { grid-template-rows: 16px 14px auto 16px; row-gap: 6px; padding: 14px 14px 12px; }
  .prod__precios-caja--efectivo { outline-offset: -5px; }
  .prod__precios-metodo { font-size: 11px; letter-spacing: .2em; }
  .prod__precios-moneda { font-size: 10px; letter-spacing: .14em; }
  .prod__precios-valor { font-size: clamp(22px, 2.6vw, 34px); }
  .prod__precios-nota { font-size: 11px; }
}
.prod__gemelo { margin: 0; font-size: 13px; }
.prod__gemelo a { color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 2px; }
.prod__pasoapaso { background: var(--verde); color: var(--claro-3); padding: 44px var(--gutter) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.prod__pasoapaso .display { color: var(--claro); }
.prod__pronto { margin: 0; max-width: 420px; font-size: 13px; color: var(--claro-3); }
.prod__botones { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.prod__larga .eyebrow { margin-bottom: 16px; }
/* HTML que viene del creador de descripciones: respeta sus estilos en línea; solo se acotan imágenes y anchos. */
.descripcion-importada { max-width: 100%; overflow-wrap: anywhere; }
.descripcion-importada img, .descripcion-importada svg { max-width: 100%; height: auto; }
.descripcion-importada p { margin: 0 0 1em; }
/* Acordeón de las descripciones largas (details.hm-acc): el sitio viejo ponía el + y el − por CSS y animaba con un script
   que la web descarta por seguridad; acá se reproducen (ver producto.js). Sin tocar el HTML que manda el sistema de descripciones. */
.descripcion-importada details.hm-acc > summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* sin el gris del toque ni demora del doble toque en iPhone (Haik, 27/10) */
.descripcion-importada details.hm-acc.hm-cerrando summary::after { transform: none; } /* el × vuelve a + apenas se toca, no al terminar de plegarse */
.descripcion-importada details.hm-acc > summary::-webkit-details-marker { display: none; }
.descripcion-importada details.hm-acc > summary { padding: 20px 22px !important; } /* el bloque trae 16px 22px 30px: quedaba una franja vacía abajo */
.descripcion-importada details.hm-acc > summary > p { display: none; } /* el <p> con el span vacío y un <br> agregaba un renglón en blanco; el "+" lo pone summary::after */
.descripcion-importada details.hm-acc > summary h3 { font-size: 13px !important; letter-spacing: .2em !important; font-weight: 500 !important; line-height: 1.3; transition: color var(--t-suave) var(--curva); } /* el bloque trae 10px: se veía muy chico (Haik, 27/10) */
@media (min-width: 900px) { .descripcion-importada details.hm-acc > summary h3 { font-size: 14px !important; } }
.descripcion-importada details.hm-acc > summary:hover h3 { color: var(--dorado-tinta) !important; }
/* El "+" lo pone la regla general de summary::after (más abajo), que ya gira a "×" al abrir; el span.hm-tog queda vacío. */
.descripcion-importada details.hm-acc .hm-inner { will-change: height; }
.descripcion-importada h2, .descripcion-importada h3 { font-family: var(--serif); font-weight: 400; color: var(--verde); margin: 1.4em 0 .5em; }
.descripcion-importada h1 { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; color: var(--verde); margin: 0 0 .6em; }
.descripcion-importada h2 { font-size: 26px; }
.descripcion-importada h3 { font-size: 21px; }
.descripcion-importada ul, .descripcion-importada ol { padding-left: 1.3em; margin: 0 0 1em; }
.descripcion-importada table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.descripcion-importada iframe, .descripcion-importada video { max-width: 100%; }
@media (min-width: 900px) { .descripcion-importada h1 { font-size: 44px; } .descripcion-importada h2 { font-size: 30px; } }
.tarjeta img.tarjeta__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--crema); }
@media (min-width: 900px) {
  /* Computadora: galería a la izquierda; encabezado y paso a paso a la derecha; lo demás a lo ancho. Áreas explícitas:
     nada se solapa aunque una sección crezca o aparezca (FAQ, video). */
  .prod { max-width: var(--ancho-max); margin: 0 auto; padding: 32px var(--gutter) 0; }
  /* El bloque de arriba es la grilla de dos columnas; lo demás (descripción larga, franja, FAQ, video, relacionados) va debajo a lo ancho.
     Así la galería fija (sticky) solo acompaña hasta el final del paso a paso y no se mete debajo de la descripción (Haik, 24/10). */
  .prod__arriba { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 14fr); grid-template-rows: auto auto 1fr; grid-template-areas: "galeria encabezado" "galeria escalera" "galeria pasoapaso"; column-gap: 48px; row-gap: 0; align-items: start; }
  .galeria { grid-area: galeria; background: transparent; position: sticky; top: 24px; align-self: start; }
  .galeria__tira { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
  .galeria__foto:first-child { grid-column: 1 / -1; }
  .galeria__puntos { display: none; }
  .prod__encabezado { grid-area: encabezado; padding: 12px 0 32px; }
  .escalera { grid-area: escalera; padding-left: 0; padding-right: 0; }
  .prod__nombre { font-size: 44px; }
  .prod__pasoapaso { grid-area: pasoapaso; margin-top: 0; align-items: flex-start; text-align: left; padding: 36px 24px; }
  .prod__larga { grid-area: larga; padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
  .prod__larga .descripcion-importada { max-width: 100%; font-size: 16px; }
  .prod .franja-juego { grid-area: franja; margin: 40px calc(50% - 50vw) 0; }
  .prod .faq { grid-area: faq; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .prod .faq__lista { max-width: 860px; }
  .prod__video { grid-area: video; margin: 0; }
  .prod .destacadas { grid-area: relacionados; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .prod .destacadas__encabezado { padding-right: 0; }
  .prod .tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow: visible; padding-right: 0; }
  .prod .tarjeta { flex: none; }
}
}
/* Acordeones de las descripciones (details/summary): sin triángulo, con línea dorada y "+" */
.descripcion-importada details { border-top: 1px solid var(--dorado-linea); }
.descripcion-importada details:last-of-type { border-bottom: 1px solid var(--dorado-linea); }
.descripcion-importada summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; font-family: var(--serif); font-size: 20px; color: var(--verde); }
.descripcion-importada summary::-webkit-details-marker { display: none; }
.descripcion-importada summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--dorado-tinta); transition: transform var(--t-suave) var(--curva); }
.descripcion-importada details[open] summary::after { transform: rotate(45deg); }
.descripcion-importada details > *:not(summary) { padding-bottom: 14px; }

/* ---------- Catálogo ---------- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avisos { background: var(--verde); color: var(--claro-2); font-size: 11px; letter-spacing: .04em; text-align: center; padding: 10px var(--gutter); }
.cat__encabezado { padding: 40px var(--gutter) 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cat__encabezado .display--xl { font-size: 40px; }
.cat__intro { margin: 0; max-width: 320px; font-size: 13px; color: var(--tinta-2); }
/* Pestañas (metal del catálogo, categorías del blog): como el menú de la agenda, en Cormorant espaciada, con un
   diamante de trazos encima de la elegida que se desliza hasta la que se toca (Haik, 22/10). Sin JavaScript queda el subrayado. */
/* Fija al bajar (Haik, 22/10): en el celular queda pegada debajo de la cabecera (64px); en computadora, arriba de todo. */
.pestanas { position: sticky; top: 64px; z-index: 19; background: var(--fondo); display: flex; gap: 16px; padding: 14px 12px 0; border-bottom: 1px solid var(--dorado-linea); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; } /* overflow-y hidden: con solo overflow-x, el eje vertical quedaba «auto» y en el iPhone un arrastre en diagonal subía o bajaba la tira (Haik, 1/11) */
.pestanas::-webkit-scrollbar { display: none; }
/* Centradas cuando entran; si no entran (celular con cuatro metales, blog), se deslizan de lado sin cortar la primera. */
.pestanas a:first-of-type { margin-left: auto; } .pestanas a:last-of-type { margin-right: auto; } /* of-type: el diamante (svg) va primero */
.pestanas a { padding: 6px 1px 13px; font-family: var(--serif); font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
@media (min-width: 720px) { .pestanas { gap: 26px; padding-left: var(--gutter); padding-right: var(--gutter); } .pestanas a { font-size: 13px; letter-spacing: .14em; } } /* más chico que el menú principal (Haik, 28/10) */
@media (min-width: 900px) { .pestanas { top: 0; } }
.pestanas a:hover { color: var(--dorado-tinta); }
.pestanas a[aria-current="page"] { color: var(--verde); }
html:not(.js) .pestanas a[aria-current="page"] { border-bottom-color: var(--dorado); }
.pestanas__diamante { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; color: var(--dorado); pointer-events: none; opacity: 0; transition: transform 300ms var(--curva), opacity var(--t-suave) var(--curva); }
.pestanas--medido .pestanas__diamante { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pestanas__diamante { transition: none; } }
.cat__barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--gutter) 20px; }
.cat__filtrar { display: flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); cursor: pointer; }
.cat__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--dorado); }
.cat__cantidad { font-size: 12px; color: var(--gris); }
.cat__orden select { height: 44px; border: 0; background: none; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); cursor: pointer; }
.cat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter) 16px; }
.chip-filtro { font-size: 12px; color: var(--verde); border: 1px solid var(--dorado-linea); padding: 6px 10px; text-decoration: none; }
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; padding: 0 16px; }
.pieza { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.pieza__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--crema); transition: transform var(--t-lento) var(--curva); }
.pieza:hover .pieza__foto { transform: scale(1.02); }
/* Cartelito «Nuevo» (decisión 91): cinta verde con filetes dorados cruzando la esquina de la foto. */
.pieza { position: relative; }
.pieza__cinta-caja { position: absolute; top: 0; right: 0; z-index: 2; width: 92px; height: 92px; overflow: hidden; pointer-events: none; }
.pieza__cinta { position: absolute; top: 18px; right: -36px; width: 136px; padding: 6px 0 5px; transform: rotate(45deg); background: var(--verde); color: #E6CDA0; text-align: center; font-size: 9.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1; border-top: 1px solid var(--dorado); border-bottom: 1px solid var(--dorado); box-shadow: 0 2px 6px rgba(15, 42, 34, .18); }
@media (min-width: 900px) { .pieza__cinta-caja { width: 104px; height: 104px; } .pieza__cinta { top: 21px; right: -38px; width: 150px; font-size: 10px; } }
.pieza__metal { margin-top: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.pieza__nombre { font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--verde); }
.pieza__precio { font-size: 13px; color: var(--tinta-2); }
/* Las frases de la vitrina (Haik, 24/10): sin franja verde, sobre el fondo de la página; "Haikmaro" chico y dorado arriba, la frase grande debajo. */
.frase { grid-column: 1 / -1; margin: 16px 0; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.frase__texto { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 30px; line-height: 1.2; color: var(--verde); }
.frase__bajada { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dorado-tinta); }
.frase--foto { padding: 0; align-items: flex-start; text-align: left; }
.frase--foto .frase__texto { font-style: normal; }
.frase__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.frase__a { display: contents; color: inherit; text-decoration: none; }
.frase--computadora { display: none; }
/* La carta del juego en el catálogo de Alianzas: ocupa el lugar de una pieza. */
.pieza--computadora { display: none; }
.pieza-juego__mesa { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .06) 0 1px, transparent 1px 14px); }
.pieza-juego__mesa::before { content: ''; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(185, 151, 100, .35), rgba(185, 151, 100, 0) 65%); }
.pieza-juego__carta { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 480 / 740; object-fit: cover; border-radius: 5px; box-shadow: 0 18px 36px rgba(0, 0, 0, .45); transition: transform var(--t-lento) var(--curva); }
.pieza-juego__carta--atras { transform: translate(-36%, -56%) rotate(10deg); }
.pieza-juego__carta--frente { transform: translate(-64%, -46%) rotate(-7deg); }
.pieza--juego:hover .pieza-juego__carta--atras { transform: translate(-28%, -58%) rotate(14deg); }
.pieza--juego:hover .pieza-juego__carta--frente { transform: translate(-70%, -48%) rotate(-11deg); }
.pieza-juego__ir { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-tinta); }
.pieza--juego .pieza__nombre { font-size: 18px; }
.submenu__foto--juego { display: flex; align-items: flex-start; justify-content: center; padding-top: 9%; box-sizing: border-box; background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .06) 0 1px, transparent 1px 14px); }
.submenu__carta { position: absolute; left: 50%; top: 8%; width: 30%; aspect-ratio: 480 / 740; object-fit: cover; border-radius: 4px; box-shadow: 0 14px 28px rgba(0, 0, 0, .45); }
.submenu__carta--atras { transform: translateX(-30%) rotate(10deg); }
.submenu__carta--frente { transform: translateX(-72%) translateY(6%) rotate(-7deg); }
.submenu__sub--juego { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado); }
.menu a.menu__sub { display: flex; align-items: center; gap: 14px; padding-left: 18px; font-size: 18px; font-style: italic; color: var(--dorado-tinta); }
/* Franja fina del juego, a todo el ancho, sobre las preguntas frecuentes de cada alianza. */
.franja-juego { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 34px 20px; background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .05) 0 1px, transparent 1px 14px); border-top: 1px solid rgba(185, 151, 100, .45); border-bottom: 1px solid rgba(185, 151, 100, .45); color: var(--claro); text-decoration: none; }
.franja-juego__cartas { position: relative; flex: 0 0 78px; height: 84px; }
.franja-juego__cartas img { position: absolute; top: 6px; width: 46px; aspect-ratio: 480 / 740; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); transition: transform var(--t-lento) var(--curva); }
.franja-juego__cartas img:first-child { left: 28px; transform: rotate(12deg); }
.franja-juego__cartas img:last-child { left: 4px; transform: rotate(-8deg); }
.franja-juego:hover .franja-juego__cartas img:first-child { transform: rotate(18deg) translateX(2px); }
.franja-juego:hover .franja-juego__cartas img:last-child { transform: rotate(-14deg) translateX(-2px); }
.franja-juego__texto { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 24px; line-height: 1.25; }
.franja-juego__ir { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 12px 18px; border: 1px solid var(--dorado); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dorado); transition: background var(--t-suave) var(--curva), color var(--t-suave) var(--curva); }
.franja-juego:hover .franja-juego__ir { background: var(--dorado); color: var(--verde); }
@media (max-width: 599px) { .franja-juego { flex-wrap: wrap; gap: 14px 16px; padding: 28px 20px; } .franja-juego__cartas { flex-basis: 62px; height: 68px; } .franja-juego__cartas img { width: 38px; } .franja-juego__cartas img:first-child { left: 22px; } .franja-juego__texto { flex: 1 1 0; font-size: 20px; } .franja-juego__ir { flex-basis: 100%; justify-content: center; } }
@media (min-width: 900px) { .franja-juego { gap: 36px; padding: 52px 32px; } .franja-juego__cartas { flex-basis: 96px; height: 104px; } .franja-juego__cartas img { width: 56px; top: 8px; } .franja-juego__cartas img:first-child { left: 36px; } .franja-juego__texto { font-size: 32px; } .franja-juego__ir { padding: 14px 24px; font-size: 12px; } }
.menu__cartas { position: relative; flex: 0 0 34px; height: 36px; }
.menu__cartas img { position: absolute; top: 2px; width: 20px; aspect-ratio: 480 / 740; object-fit: cover; border-radius: 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.menu__cartas img:first-child { left: 12px; transform: rotate(12deg); }
.menu__cartas img:last-child { left: 2px; transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .pieza-juego__carta { transition: none; } .pieza--juego:hover .pieza-juego__carta--atras { transform: translate(-36%, -56%) rotate(10deg); } .pieza--juego:hover .pieza-juego__carta--frente { transform: translate(-64%, -46%) rotate(-7deg); } }
.cat__mas { display: flex; justify-content: center; padding: 0 var(--gutter) 64px; }
.catalogo .grilla { margin-bottom: 56px; } /* aire antes de "Ver más" o del pie (Haik, 24/10: la última fila casi tocaba el pie) */
.cat__mas .boton { width: auto; }
.cat__vacio { padding: 40px var(--gutter); text-align: center; color: var(--gris); }
.filtros-dialogo { border: 0; padding: 0; width: 100%; max-width: 100%; margin: auto 0 0; background: var(--fondo); color: var(--tinta); }
.filtros-dialogo::backdrop { background: rgba(15,42,34,.55); }
.filtros-dialogo__form { padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; max-height: 85svh; overflow-y: auto; }
.filtros-dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; }
.filtros-dialogo__cerrar { width: 44px; height: 44px; background: none; border: 0; font-size: 26px; font-weight: 300; color: var(--verde); cursor: pointer; }
.filtros-dialogo__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.filtros-dialogo__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span { display: inline-block; padding: 9px 12px; border: 1px solid var(--gris-claro); font-size: 13px; color: var(--tinta-2); cursor: pointer; transition: border-color var(--t-suave) var(--curva), color var(--t-suave) var(--curva); }
.chip-check span small { color: var(--gris); margin-left: 4px; }
.chip-check input:checked + span { border-color: var(--verde); color: var(--verde); }
.chip-check input:focus-visible + span { outline: 1px solid var(--dorado); outline-offset: 2px; }
.filtros-dialogo__precio { display: flex; gap: 12px; }
.filtros-dialogo__precio label { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--gris); }
.filtros-dialogo__precio input { height: 44px; border: 1px solid var(--gris-claro); background: #fff; padding: 0 10px; border-radius: 0; }
/* La barra de precio: dos manijas sobre una línea dorada, el tramo elegido en verde; los extremos son el menor y el mayor reales. */
.rango { display: none; flex-direction: column; gap: 10px; padding: 4px 2px 0; }
.js .rango { display: flex; } .js .rango ~ .filtros-dialogo__precio { display: none; }
.rango__valores, .rango__extremos { display: flex; justify-content: space-between; }
.rango__valor { font-family: var(--serif); font-size: 18px; color: var(--verde); }
.rango__extremos { font-size: 11px; color: var(--gris); }
.rango__pista { position: relative; height: 28px; }
.rango__pista::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--dorado-linea); }
.rango__relleno { position: absolute; top: 13px; height: 2px; background: var(--verde); }
.rango__pista input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; }
.rango__pista input[type="range"]::-webkit-slider-runnable-track { height: 28px; background: none; }
.rango__pista input[type="range"]::-moz-range-track { height: 28px; background: none; }
.rango__pista input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: #fff; border: 1.5px solid var(--dorado); box-shadow: 0 1px 6px rgba(15,42,34,.18); cursor: grab; }
.rango__pista input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid var(--dorado); box-shadow: 0 1px 6px rgba(15,42,34,.18); cursor: grab; }
.rango__pista input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--verde); outline-offset: 2px; }
.filtros-dialogo__acciones { display: flex; gap: 10px; }
.filtros-dialogo__acciones .boton { flex: 1 1 0; }
@media (min-width: 900px) {
  .cat__encabezado { padding: 56px var(--gutter) 28px; }
  .cat__encabezado .display--xl { font-size: 52px; }
  .cat__barra, .cat__chips { max-width: var(--ancho-max); margin: 0 auto; }
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 20px; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--gutter); }
  .catalogo .grilla { margin-bottom: 72px; }
  .frase--celular { display: none; }
  .pieza--celular { display: none; }
  .pieza--computadora { display: flex; }
  .frase--computadora { display: flex; }
  .frase { padding: 56px 32px; }
  .frase__texto { font-size: 38px; }
  .frase--foto { flex-direction: row; align-items: center; gap: 40px; }
  .frase__foto { width: 50%; }
  .filtros-dialogo { max-width: 520px; margin: auto; }
}

/* ---- Preguntas frecuentes (producto) ---- */
.faq__lista { margin-top: 20px; border-top: 1px solid var(--dorado-linea); }
.faq__item { border-bottom: 1px solid var(--dorado-linea); }
.faq__pregunta { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--verde); }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1px solid var(--dorado-tinta); border-bottom: 1px solid var(--dorado-tinta); transform: translateY(-70%) rotate(45deg); transition: transform var(--t-suave); }
.faq__item[open] .faq__pregunta::after { transform: translateY(-30%) rotate(225deg); }
.faq__respuesta { padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--gris); }
.faq__respuesta p { margin: 0 0 10px; }
.faq__todas { margin-top: 18px; }
.enlace-fino { color: var(--dorado-tinta); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-size: 13px; letter-spacing: .04em; }

/* ---- Video de categoría ---- */
.prod__video { text-align: center; }
.prod__video-marco { display: block; width: 100%; max-width: 720px; margin: 24px auto 0; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(185,151,100,.35); }

.aviso-borrador { position: sticky; top: 0; z-index: 30; background: var(--dorado); color: var(--verde); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 8px 16px; }

.cat__descripcion { max-width: 640px; margin: 14px auto 0; font-size: 14px; line-height: 1.6; color: var(--gris); text-align: center; }

@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-italic-400.woff2") format("woff2"); }

/* ---- Paso a paso (acordeón) ---- */
.prod__pasoapaso [data-constructor] { width: 100%; align-self: stretch; }
.acordeon { width: 100%; margin-top: 24px; text-align: left; }
/* Riel de progreso vertical a la izquierda del acordeón: puntos en celular, puntos + nombre en computadora. */
.acordeon--con-riel { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.acordeon__tramos { min-width: 0; }
/* En el celular el riel queda centrado en la pantalla mientras se baja por el paso a paso (Haik, 22/10): el alto lo mide
   constructor.js (--riel-top); en los extremos del paso a paso se queda con la sección. En computadora, arriba. */
.riel { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: sticky; top: var(--riel-top, 24px); }
@media (min-width: 900px) { .riel { top: 24px; } }
.riel__paso { position: relative; display: flex; }
.riel__paso:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 1px; background: rgba(185,151,100,.35); }
.riel__paso--hecho:not(:last-child)::after { background: var(--dorado); }
.riel__boton { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 0 20px; background: none; border: 0; color: var(--claro-3); font-family: var(--sans); font-size: 12px; letter-spacing: .02em; text-align: left; text-decoration: none; cursor: pointer; }
.riel__boton[disabled] { cursor: default; }
.riel__punto { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(185,151,100,.5); border-radius: 50%; background: var(--verde); color: var(--dorado); font-family: var(--serif); font-size: 12px; line-height: 1; transition: background var(--t-suave) var(--curva), color var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
.riel__paso--hecho .riel__punto { background: var(--dorado); border-color: var(--dorado); color: var(--verde); }
.riel__paso--actual .riel__punto { border-color: var(--dorado); color: var(--claro); box-shadow: 0 0 0 3px rgba(185,151,100,.25); }
.riel__paso--actual .riel__texto { color: var(--claro); }
.riel__paso--hecho .riel__boton:hover .riel__texto { color: var(--claro); }
.riel__paso--resumen .riel__punto { font-size: 11px; }
.riel__texto { display: none; }
@media (min-width: 900px) {
  /* Haik (24/10): en el paso a paso del producto el riel lleva solo los números romanos (el nombre del paso queda como
     ayuda al pasar el mouse), para que el contenido tenga todo el ancho posible. En el pago el riel sigue con sus nombres. */
  .acordeon--con-riel { grid-template-columns: 28px minmax(0, 1fr); gap: 0 20px; }
  .riel--claro .riel__texto { display: block; line-height: 1.3; }
}
.opcion__marca { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--verde); color: var(--claro); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: 10px; }
[data-constructor].cargando { opacity: .6; transition: opacity var(--t-rapido); }
.tramo { border-top: 1px solid rgba(185,151,100,.35); padding: 14px 0; }
.tramo--abierto { position: relative; z-index: 2; } /* el panel de talle debe quedar por encima de lo que sigue (cada tramo es su propio contexto por la transición de vista) */
.tramo:last-of-type { border-bottom: 1px solid rgba(185,151,100,.35); }
.tramo__cabecera { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tramo__numero { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--dorado); color: var(--dorado); font-family: var(--serif); font-size: 14px; }
.tramo--elegido .tramo__numero { background: var(--dorado); color: var(--verde); }
.tramo__titulo { font-family: var(--serif); font-size: 20px; color: var(--claro); }
.tramo__elegido { grid-column: 2; font-size: 13px; color: var(--claro-3); }
.tramo__elegido em { font-style: normal; color: var(--dorado); }
.tramo__cambiar { grid-column: 3; grid-row: 1 / span 2; background: none; border: 0; color: var(--dorado); font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 6px 0; }
.tramo__cuerpo { margin-top: 14px; animation: desplegar var(--t-lento) var(--curva) both; }
/* Movimiento: todo lo que se despliega entra con el mismo gesto (fundido + leve bajada). */
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; }
/* Paso a paso: fundido corto de toda la página al cambiar de paso (sin grupos por tramo; ver constructor.js). */
html.vt-fundido::view-transition-old(root), html.vt-fundido::view-transition-new(root) { animation-duration: var(--t-suave); animation-timing-function: var(--curva); }
::view-transition-group(*) { animation-duration: var(--t-lento); animation-timing-function: var(--curva); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--t-suave); animation-timing-function: var(--curva); }
.faq__item[open] .faq__respuesta, .descripcion-importada details[open] > *:not(summary) { animation: desplegar var(--t-suave) var(--curva) both; }
.js .talle--abierto .talle__panel { animation: desplegar var(--t-suave) var(--curva) both; }
.filtros-dialogo[open] { animation: desplegar var(--t-lento) var(--curva) both; }
.filtros-dialogo::backdrop { background: rgba(15,42,34,.45); animation: fundir var(--t-suave) var(--curva) both; }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opciones--color, .opciones--talle { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones--talle { flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.opcion { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: #fff; color: var(--verde); cursor: pointer; min-height: 44px; } /* esquinas apenas redondeadas (Haik, 22/10) */
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion--activa { border-color: var(--dorado); box-shadow: 0 0 0 1px var(--dorado); background: var(--perla); padding-top: 36px; }
.opciones--plazo .opcion--activa { padding-top: 14px; }
.opciones--talle .opcion--activa { padding-top: 10px; }
.opcion:has(input:focus-visible) { outline: 1px solid var(--dorado); outline-offset: 2px; }
.opcion__nombre { font-family: var(--serif); font-size: 17px; }
.opcion__detalle { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dorado-tinta); }
.opcion__detalle--texto { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--gris); }
.opcion__precio { font-size: 12px; color: var(--gris); }
.opcion--activa .opcion__precio { color: var(--dorado-tinta); }
.opcion__muestra { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(15,42,34,.15); margin-bottom: 4px; }
.opcion__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; margin-bottom: 4px; }
.opciones--color .opcion__foto { width: 48px; height: 48px; }
.opciones--color .opcion { align-items: center; min-width: 108px; text-align: center; }
/* En las tarjetas angostas (color, gema con foto) la marca ocupa el ancho de la tarjeta, sin pisar la foto ni salirse. */
.opciones--color .opcion__marca, .opciones--gema .opcion__marca { left: 8px; right: 8px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; letter-spacing: .06em; padding: 3px 6px; }
.opciones--color .opcion__nombre { font-size: 13px; font-family: var(--sans); }
.opciones--talle .opcion { min-width: 52px; align-items: center; scroll-snap-align: start; padding: 10px 6px; }
.opciones--talle .opcion--aparte { min-width: 160px; }
.opcion--aparte .opcion__detalle { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--gris); white-space: normal; }
/* Gramos (Haik, 24/10, opción A): cinco tarjetas en una fila (tres y dos en el celular), centradas, con el corte a escala
   que crece con los gramos, la cota del ancho, los gramos, "el par" y el precio total. */
.opciones--gramos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opciones--gramos .opcion { align-items: center; text-align: center; padding: 14px 6px 14px; gap: 1px; }
.opciones--gramos .opcion--activa { padding-top: 14px; }
.opciones--gramos .opcion__marca { top: -9px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; font-size: 9px; padding: 3px 8px; }
.opciones--gramos .opcion__nombre { font-size: 19px; line-height: 1.1; }
.opciones--gramos .opcion__detalle { font-size: 10px; }
.opciones--gramos .opcion__precio { margin-top: 4px; white-space: nowrap; }
@media (max-width: 599px) { .opciones--gramos .opcion__precio { font-size: 11px; } .opciones--gramos .opcion__nombre { font-size: 17px; } }
.opcion__mm { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: .03em; color: var(--gris); }
.perfil { display: block; width: 100%; max-width: 120px; height: auto; margin: 0 auto 2px; overflow: visible; }
.perfil__cuerpo path, .perfil__cuerpo rect { fill: #cfc8bd; transition: fill var(--t-suave) var(--curva); }
.opcion--activa .perfil__cuerpo path, .opcion--activa .perfil__cuerpo rect { fill: var(--dorado); }
.perfil__base { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
.perfil__cota { stroke: rgba(0, 0, 0, .3); stroke-width: .7; }
.perfil__flechas { fill: rgba(0, 0, 0, .3); }
.tramo__simulador { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--dorado); text-decoration: none; border-bottom: 1px solid var(--dorado); }
.tramo__nota { margin: 12px 0 0; font-size: 13px; color: var(--claro-3); }
.tramo__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tramo__volver { background: none; border: 0; color: var(--claro-3); font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.tramo__continuar { margin-left: auto; }
.resumen { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--dorado); }
.resumen__titulo { font-family: var(--serif); font-size: 24px; color: var(--claro); margin-bottom: 12px; }
.resumen__precios { display: grid; gap: 8px; margin: 0; }
.resumen__precios div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(246,243,236,.15); padding: 8px 0; }
.resumen__precios dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.resumen__precios dd { margin: 0; font-family: var(--serif); font-size: 24px; color: var(--claro); min-width: 7ch; text-align: right; }
.resumen__precios dd .moneda { font-family: var(--sans); font-size: 11px; color: var(--claro-3); margin-right: 4px; }
.resumen__nota { margin: 12px 0 0; font-size: 12px; color: var(--claro-3); }
/* Efectivo en el taller, un poco más grande (Haik, 22/10: sin recuadro ni color, solo el tamaño). */
.resumen__precios .resumen__destacado dt, .carrito-resumen__totales .resumen__destacado dt { font-size: 13px; color: var(--claro); }
.resumen__precios .resumen__destacado dd, .carrito-resumen__totales .resumen__destacado dd { font-size: 30px; }
.carrito-linea__precios .resumen__destacado dt { font-size: 11px; color: var(--tinta-2); }
.carrito-linea__precios .resumen__destacado dd { font-size: 24px; }
.resumen__pronto { margin: 10px 0 0; font-size: 12px; color: var(--dorado); }
.resumen .prod__botones { margin-top: 18px; max-width: none; } /* a todo el ancho del resumen, como los precios */
.resumen .boton[disabled] { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .tramo, .opcion { transition: none; } }
@media (min-width: 900px) {
  .opciones { grid-template-columns: repeat(3, 1fr); }
  .opciones--gramos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  /* Haik (24/10): en columnas la etiqueta larga de la tarjeta se partía palabra por palabra y el monto se salía; van en filas, como en el celular. */
  .resumen__precios { gap: 4px; }
  .resumen__precios div { padding: 10px 0; }
  .resumen__precios dt { max-width: 62%; }
}
.resumen__enlaces { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 10px 24px; margin-top: 14px; }
.resumen__reiniciar { font-size: 12px; letter-spacing: .06em; color: var(--claro-3); text-decoration: none; border-bottom: 1px solid rgba(246,243,236,.35); padding-bottom: 2px; transition: color var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
.resumen__reiniciar:hover { color: var(--claro); border-color: var(--claro); }
.galeria__foto--resaltada img { outline: 2px solid var(--dorado); outline-offset: -2px; }

/* Grabado */
.opciones--grabado { grid-template-columns: repeat(2, 1fr); }
/* Versiones de esta pieza (spec 4.7): escalera de bloques que suben, numeración fija, detalle y precio. */
.escalera { padding: 8px var(--gutter) 36px; display: flex; flex-direction: column; gap: 18px; }
.escalera__cabecera { display: flex; flex-direction: column; gap: 6px; }
.escalera__intro { margin: 0; font-size: 13px; color: var(--tinta-2); }
.escalera__aviso { margin: -6px 0 0; font-size: 12px; color: var(--gris); }
.escalera__aviso a { color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 1px; }
.escalera__grafico { display: flex; flex-direction: column; width: 100%; }
.escalera__bloques { display: flex; align-items: flex-end; gap: 6px; }
.escalera__escalon { flex: 1 1 0; min-width: 0; max-width: 126px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.escalera__icono { display: block; line-height: 0; transition: transform var(--t-suave) var(--curva); }
.escalera__escalon:hover .escalera__icono { transform: translateY(-3px); }
.escalera__bloque { display: block; width: 100%; background: var(--crema); border-top: 2px solid transparent; box-sizing: border-box; transition: background var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
.escalera__escalon:hover .escalera__bloque { background: #D9D2C3; }
.escalera__escalon--previo .escalera__bloque { background: #CDB892; }
.escalera__escalon--actual .escalera__bloque { background: var(--verde); border-top-color: var(--dorado); }
.escalera__escalon:focus-visible { outline: 1px solid var(--dorado); outline-offset: 3px; }
.escalera__linea { height: 1px; background: var(--dorado); }
.escalera__romanos { display: flex; gap: 6px; padding-top: 8px; }
.escalera__romano { flex: 1 1 0; min-width: 0; max-width: 126px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-family: var(--serif); font-size: 17px; color: var(--dorado-tinta); }
.escalera__etiqueta { font-family: var(--sans); font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: var(--gris); }
.escalera__romano--actual .escalera__etiqueta { color: var(--verde); }
.escalera__romano--actual { color: var(--verde); font-weight: 600; }
.escalera__detalles { border-top: 1px solid rgba(185,151,100,.5); padding-top: 16px; min-height: 92px; }
.escalera__detalle { display: flex; flex-direction: column; gap: 6px; animation: desplegar var(--t-suave) var(--curva) both; }
.escalera__detalle[hidden] { display: none; }
.escalera__elija { margin: 0; font-size: 13px; color: var(--gris); }
.escalera__nombre { font-family: var(--serif); font-size: 22px; color: var(--verde); }
.escalera__num { color: var(--dorado-tinta); margin-right: 4px; }
.escalera__texto { margin: 0; font-size: 13px; color: var(--tinta-2); }
.escalera__precio { font-family: var(--serif); font-size: 24px; color: var(--verde); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.escalera__precio .moneda { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.escalera__precio-nota { font-family: var(--sans); font-size: 12px; color: var(--gris); }
.escalera__gemelo { margin: 0; font-size: 12px; color: var(--dorado-tinta); }
/* Talle: desplegable propio (decisión 43): campo + panel con los talles en grilla. Sin JavaScript el panel queda abierto. */
.talle { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.talle__rotulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado); }
.talle__campo { display: none; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--dorado); background: #fff; color: var(--verde); font-family: var(--serif); font-size: 19px; text-align: left; cursor: pointer; border-radius: 0; }
.talle__campo:focus-visible { outline: 1px solid var(--dorado); outline-offset: 2px; }
.talle__valor--vacio { color: var(--gris); }
.talle__flecha { flex: 0 0 auto; color: var(--dorado-tinta); transition: transform var(--t-suave) var(--curva); }
.talle__campo[aria-expanded="true"] .talle__flecha { transform: rotate(180deg); }
.talle__panel { background: #fff; border: 1px solid var(--dorado); padding: 14px; box-shadow: 0 14px 36px rgba(15,42,34,.18); }
.js .talle__campo { display: flex; }
.js .talle__panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; }
.js .talle--abierto .talle__panel { display: block; }
.talle__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px 4px; }
/* Cada celda es el talle con su diámetro en mm debajo; el recuadro de elección abarca los dos (Haik, 24/10). */
.talle__celda { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 6px 4px 5px; border: 1px solid transparent; border-radius: 10px; color: var(--verde); font-family: var(--serif); font-size: 19px; line-height: 1.1; cursor: pointer; transition: background var(--t-suave) var(--curva), color var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
.talle__mm { font-family: var(--sans); font-size: 10px; letter-spacing: .02em; color: var(--gris); white-space: nowrap; transition: color var(--t-suave) var(--curva); }
.talle__valor-mm { color: var(--gris); font-weight: 300; }
.talle__celda input, .talle__nose input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.talle__celda:hover { border-color: var(--dorado); }
.talle__celda--activa, .talle__celda:has(input:checked) { background: var(--verde); border-color: var(--verde); color: var(--claro); }
.talle__celda--activa .talle__mm, .talle__celda:has(input:checked) .talle__mm { color: var(--claro-3); }
.talle__celda:has(input:focus-visible), .talle__nose:has(input:focus-visible) { outline: 1px solid var(--dorado); outline-offset: 2px; }
.talle__nose { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 12px 14px 12px 46px; border: 1px solid var(--dorado); border-radius: 8px; background: var(--perla); cursor: pointer; transition: background var(--t-suave) var(--curva), border-color var(--t-suave) var(--curva); }
/* "Aún no lo sé" como botón (Haik, 22/10): recuadro con el punto de selección a la izquierda. */
.talle__nose::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1px solid var(--dorado); background: #fff; box-sizing: border-box; }
.talle__nose:hover { background: #fff; border-color: var(--dorado-tinta); }
.talle__nose--activa, .talle__nose:has(input:checked) { background: #fff; box-shadow: 0 0 0 1px var(--dorado); }
.talle__nose--activa::before, .talle__nose:has(input:checked)::before { border: 5px solid var(--verde); }
.talle__nose--activa .talle__nose-nombre, .talle__nose:has(input:checked) .talle__nose-nombre { color: var(--verde); }
.talle__nose-nombre { font-family: var(--serif); font-size: 18px; color: var(--verde); }
.talle__nose-nota { font-size: 12px; color: var(--gris); }
/* Plazos: una fila por modalidad, con el punto de selección a la izquierda y el recargo a la derecha. */
.opciones--plazo { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.opciones--plazo .opcion { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "punto nombre precio" "punto detalle precio"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; }
.opciones--plazo .opcion::before { content: ""; grid-area: punto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--gris-claro); background: #fff; box-sizing: border-box; }
.opciones--plazo .opcion--activa { background: var(--perla); }
.opciones--plazo .opcion--activa::before { border: 6px solid var(--dorado); }
.opciones--plazo .opcion__nombre { grid-area: nombre; font-size: 19px; }
.opciones--plazo .opcion__detalle { grid-area: detalle; }
.opciones--plazo .opcion__precio { grid-area: precio; font-size: 14px; text-align: right; white-space: nowrap; }
.paso__intro { margin: 14px 0 10px; font-size: 13px; color: var(--claro-3); }
.grabado { display: none; }
.grabado--activo { display: block; }
.grabado__campo { margin-top: 10px; padding: 12px; background: #fff; border-radius: 8px; }
.grabado__rotulo { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dorado-tinta); margin-bottom: 8px; }
.grabado__vista { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 10px; }
.grabado__texto { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-style: italic; font-weight: 400; }
.grabado__linea { display: flex; align-items: center; gap: 10px; }
.grabado__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--gris-claro); background: #fff; font-family: "Montserrat", sans-serif; font-style: italic; font-size: 16px; color: var(--tinta); border-radius: 0; }
.grabado__input:focus { border-color: var(--verde); outline: none; }
.grabado__cuenta { flex: none; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.grabado__simbolos { display: flex; gap: 8px; margin-top: 8px; }
.grabado__simbolo { width: 40px; height: 36px; border: 1px solid var(--dorado-linea); background: var(--perla); color: var(--verde); font-size: 18px; cursor: pointer; }

/* ---- Páginas sueltas ---- */
.pagina-suelta { max-width: 860px; margin: 0 auto; padding: 40px var(--gutter) 72px; }
.pagina-suelta__cabecera { text-align: center; margin-bottom: 32px; }
.pagina-suelta__cabecera .linea-dorada { margin: 16px auto 0; }
.pagina-suelta__cuerpo { font-size: 16px; line-height: 1.7; color: var(--tinta-2); }
.faq--pagina { padding: 0 0 36px; }
.faq--pagina .display { margin-bottom: 6px; }

/* Carrito (Etapa 11, decisión 47) */
.cabecera__boton--carrito, .barra__carrito > a { position: relative; }
.cabecera__contador { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--verde); color: var(--claro); font-family: var(--sans); font-size: 10px; line-height: 16px; text-align: center; }
.barra__carrito .cabecera__contador { top: 8px; right: 6px; }
.carrito-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.carrito-pagina__cabecera { text-align: center; margin-bottom: 28px; }
.carrito-pagina__cabecera .linea-dorada { margin: 16px auto 0; }
.carrito-pagina__cantidad { margin: 12px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.carrito-pagina__aviso { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--dorado); color: var(--dorado-tinta); font-size: 13px; text-align: center; }
.carrito-pagina__aviso--error { border-color: var(--error); color: var(--error); }
.carrito-pagina__vacio { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 0; text-align: center; color: var(--tinta-2); }
.carrito-pagina__cuerpo { display: flex; flex-direction: column; gap: 28px; }
.carrito-lineas { display: flex; flex-direction: column; }
.carrito-linea { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 16px; padding: 20px 0; border-top: 1px solid var(--dorado-linea); }
.carrito-linea:last-child { border-bottom: 1px solid var(--dorado-linea); }
.carrito-linea--no { opacity: .7; }
.carrito-linea__foto { width: 96px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--crema); grid-row: 1 / span 2; align-self: start; }
.carrito-linea__datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.carrito-linea__nombre { font-family: var(--serif); font-size: 22px; color: var(--verde); line-height: 1.15; }
.carrito-linea__elecciones { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--tinta-2); }
.carrito-linea__rotulo { color: var(--gris); }
.carrito-linea__rotulo::after { content: ":"; }
.carrito-linea__aviso { margin: 6px 0 0; font-size: 12px; color: var(--error); }
.carrito-linea__acciones { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.carrito-linea__quitar { margin: 0; }
.carrito-linea__enlace { background: none; border: 0; padding: 0 0 2px; font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--dorado-tinta); text-decoration: none; border-bottom: 1px solid var(--dorado); cursor: pointer; }
.carrito-linea__enlace--quitar { color: var(--gris); border-bottom-color: var(--gris-claro); }
.carrito-linea__grupos { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.carrito-linea__elecciones--comun { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
.carrito-linea__anillo { border-left: 1px solid var(--dorado-linea); padding-left: 12px; }
.carrito-linea__anillo .eyebrow { color: var(--dorado-tinta); margin-bottom: 4px; }
.carrito-linea__anillo .carrito-linea__elecciones { margin-top: 0; }
/* Detalle del precio (Haik, 25/10): la pieza, las gemas, el Express, el valor de lista y los tres montos por método. */
.carrito-linea__precios { grid-column: 2; margin: 0; display: grid; gap: 4px; }
.carrito-linea__precios div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.carrito-linea__precios dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.carrito-linea__precios dd { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--verde); white-space: nowrap; }
.carrito-linea__detalle-titulo { color: var(--gris); margin-bottom: 4px; }
.carrito-linea__parte dt { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.carrito-linea__parte dd { font-size: 16px; }
.carrito-linea__metodo--primero, .carrito-linea__metodo.resumen__destacado { border-top: 1px solid var(--dorado-linea); margin-top: 6px; padding-top: 10px; }
.carrito-linea__precios dd .moneda, .carrito-resumen__totales dd .moneda { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-right: 3px; }
.carrito-linea__par { margin: 2px 0 0; font-size: 11px; color: var(--gris); text-align: right; }
.carrito-resumen { background: var(--verde); color: var(--claro); padding: 24px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.carrito-resumen .display { color: var(--claro); }
.carrito-resumen__totales { margin: 0; display: grid; gap: 8px; }
.carrito-resumen__totales div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(246,243,236,.15); padding: 8px 0; }
.carrito-resumen__totales dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.carrito-resumen__totales dd { margin: 0; font-family: var(--serif); font-size: 24px; color: var(--claro); }
.carrito-resumen__totales dt, .resumen__precios dt { max-width: 58%; }
.carrito-resumen__totales dd, .resumen__precios dd { white-space: nowrap; } /* la etiqueta larga de tarjeta se parte; el monto no (Haik, 22/10) */
.carrito-resumen__totales dd .moneda { color: var(--claro-3); }
.carrito-resumen__nota { margin: 0; font-size: 12px; color: var(--claro-3); }
.carrito-resumen__cupon { padding-top: 6px; border-top: 1px solid rgba(246,243,236,.15); font-size: 13px; }
.carrito-resumen__cupon-detalle summary { list-style: none; cursor: pointer; color: var(--dorado); font-size: 12px; letter-spacing: .06em; padding: 4px 0; }
.carrito-resumen__cupon-detalle summary::-webkit-details-marker { display: none; }
.carrito-resumen__cupon-detalle[open] summary { color: var(--claro-3); }
.carrito-resumen__cupon-form { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.carrito-resumen__cupon-form input[type="text"] { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--dorado); background: #fff; color: var(--verde); font-family: var(--sans); font-size: 16px; border-radius: 0; text-transform: uppercase; }
.carrito-resumen__cupon-form .boton { min-height: 44px; padding: 0 16px; border-color: var(--dorado); color: var(--claro); }
.carrito-resumen__cupon-codigo { color: var(--claro); letter-spacing: .06em; }
.carrito-resumen__cupon-quitar { background: none; border: 0; padding: 0 0 1px; color: var(--claro-3); font-family: var(--sans); font-size: 12px; border-bottom: 1px solid rgba(246,243,236,.35); cursor: pointer; }
.carrito-resumen__cupon-error { margin: 8px 0 0; font-size: 12px; color: #E8B4A6; }
.carrito-resumen__cupon-aplicado { margin: 0; font-size: 12px; color: var(--dorado); }
.carrito-resumen__envio { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(246,243,236,.15); }
.carrito-resumen__envio .eyebrow { color: var(--dorado); }
.carrito-resumen__envio p { margin: 0; font-size: 13px; color: var(--claro-2, var(--claro)); }
.carrito-resumen__envio-nota { margin: 0 0 14px; font-size: 12px; color: var(--claro-3); }
.carrito-resumen__botones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.carrito-resumen__botones .boton--borde-verde { border-color: var(--dorado); color: var(--claro); }
.carrito-resumen__botones .boton[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.comprar-form[hidden] { display: none; }
@media (min-width: 900px) {
  .carrito-pagina__cuerpo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
  .carrito-resumen { position: sticky; top: 24px; padding: 28px 28px 30px; }
  .carrito-linea { grid-template-columns: 140px minmax(0, 1fr) 250px; gap: 12px 24px; padding: 28px 0; }
  .carrito-linea__foto { width: 140px; grid-row: 1; }
  .carrito-linea__nombre { font-size: 26px; }
  .carrito-linea__precios { grid-column: 3; grid-row: 1; align-content: start; }
}

/* Página de pago (decisión 47) */
.pago-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.pago-pagina__cabecera { text-align: center; margin-bottom: 28px; }
.pago-pagina__cabecera .linea-dorada { margin: 16px auto 0; }
.pago-pagina__intro { margin: 14px auto 0; max-width: 520px; font-size: 14px; color: var(--tinta-2); }
.trampa { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.pago-form { display: flex; flex-direction: column; gap: 28px; }
/* Paso a paso del pago: riel claro + tramos; sin JavaScript se ven todos abiertos. */
.pago-wizard { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; align-items: start; min-width: 0; }
.riel--claro .riel__boton { color: var(--gris); }
.riel--claro .riel__punto { background: #fff; border-color: var(--gris-claro); color: var(--dorado-tinta); }
.riel--claro .riel__paso--hecho .riel__punto { background: var(--dorado); border-color: var(--dorado); color: var(--verde); }
.riel--claro .riel__paso--actual .riel__punto { border-color: var(--verde); background: var(--verde); color: var(--claro); box-shadow: 0 0 0 3px rgba(15,42,34,.12); }
.riel--claro .riel__paso--actual .riel__texto { color: var(--verde); }
.riel--claro .riel__paso--hecho .riel__boton:hover .riel__texto { color: var(--verde); }
.riel--claro .riel__paso:not(:last-child)::after { background: var(--dorado-linea); }
.riel--claro .riel__paso--hecho:not(:last-child)::after { background: var(--dorado); }
.pago-tramos { min-width: 0; }
.ptramo { border-top: 1px solid var(--dorado-linea); padding: 16px 0 18px; }
/* Sin nombres de transición por tramo en el pago (27/10): al plegarse uno, los de abajo "volaban"; queda el fundido corto de pago.js. */
.ptramo:last-child { border-bottom: 1px solid var(--dorado-linea); }
.ptramo__cabecera { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ptramo__numero { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--dorado); color: var(--dorado-tinta); font-family: var(--serif); font-size: 14px; }
.ptramo--hecho .ptramo__numero { background: var(--dorado); color: var(--verde); }
.ptramo__titulo { font-family: var(--serif); font-size: 22px; color: var(--verde); }
.ptramo__elegido { grid-column: 2; font-size: 13px; color: var(--tinta-2); }
.ptramo__elegido:empty { display: none; }
.ptramo__cambiar { grid-column: 3; grid-row: 1 / span 2; background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); cursor: pointer; }
.ptramo__cuerpo { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; animation: desplegar var(--t-lento) var(--curva) both; }
.ptramo__acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.ptramo__acciones .boton:only-child { margin-left: auto; }
.ptramo__volver { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); cursor: pointer; }
.pago__nota--direccion { margin: 6px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); }
.pago__resumen-nota { margin: 0; font-size: 12px; color: var(--claro-3); }
/* Con JavaScript: un tramo abierto por vez; los demás muestran lo elegido y "Cambiar". */
.js .ptramo:not(.ptramo--abierto) .ptramo__cuerpo { display: none; }
.js .ptramo--abierto .ptramo__cambiar, .js .ptramo:not(.ptramo--hecho) .ptramo__cambiar { display: none; }
.js .ptramo:not(.ptramo--hecho) .ptramo__elegido { display: none; }
html:not(.js) .ptramo__cambiar, html:not(.js) .ptramo__elegido, html:not(.js) .ptramo__acciones button[data-continuar], html:not(.js) .ptramo__volver, html:not(.js) .riel--claro { display: none; }
html:not(.js) .pago-wizard { grid-template-columns: minmax(0, 1fr); }
.pago__boton { width: auto; min-width: 240px; }
.ptramo--abierto { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .pago-wizard { grid-template-columns: 150px minmax(0, 1fr); gap: 0 22px; }
}
.pago__nota { margin: -6px 0 0; font-size: 13px; color: var(--gris); }
.pago__grilla { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.campo > span { font-size: 12px; letter-spacing: .04em; }
.campo small { font-size: 11px; color: var(--gris); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--gris-claro); background: #fff; color: var(--tinta); font-family: var(--sans); font-size: 16px; border-radius: 0; }
.campo textarea { padding: 12px 14px; resize: vertical; }
.campo select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F2A22' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 40px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); }
.campo--error input, .campo--error select { border-color: var(--error); }
.campo__error { font-size: 12px; color: var(--error); }
.campo--check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.campo--check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--verde); flex: 0 0 auto; }
.campo--check a { color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); }
.campo--error.campo--check span { color: var(--error); }
.pago__opciones { display: flex; flex-direction: column; gap: 8px; }
.eleccion { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, auto); align-items: center; column-gap: 14px; padding: 14px 16px; border: 1px solid var(--gris-claro); background: #fff; cursor: pointer; transition: border-color var(--t-suave) var(--curva), background var(--t-suave) var(--curva); }
.eleccion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eleccion__punto { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--gris-claro); background: #fff; box-sizing: border-box; transition: border var(--t-suave) var(--curva); }
.eleccion--activa { border-color: var(--dorado); box-shadow: 0 0 0 1px var(--dorado); background: var(--perla); }
.eleccion--activa .eleccion__punto { border: 6px solid var(--dorado); }
.eleccion:has(input:focus-visible) { outline: 1px solid var(--dorado); outline-offset: 2px; }
.eleccion__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eleccion__nombre { font-family: var(--serif); font-size: 19px; color: var(--verde); }
.eleccion__descuento { display: block; margin-top: 4px; font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dorado-tinta); white-space: nowrap; }
.eleccion__nombre small { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dorado-tinta); }
.eleccion__detalle { font-size: 12px; color: var(--gris); line-height: 1.4; }
.eleccion__precio { font-family: var(--serif); font-size: 17px; color: var(--verde); text-align: right; max-width: 150px; line-height: 1.25; }
.eleccion__precio .moneda { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-right: 3px; }
.pago__direccion { margin-top: 8px; }
.pago__resumen { background: var(--verde); color: var(--claro); padding: 24px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.pago__resumen .display { color: var(--claro); }
.pago__piezas summary { list-style: none; cursor: pointer; font-size: 12px; letter-spacing: .06em; color: var(--dorado); }
.pago__piezas summary::-webkit-details-marker { display: none; }
.pago__piezas ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--claro-3); }
.pago__piezas strong { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--claro); }
.pago__volver { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--claro-3); text-decoration: none; border-bottom: 1px solid rgba(246,243,236,.35); }
.pago__totales { margin: 0; display: grid; gap: 6px; }
.pago__totales div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(246,243,236,.15); }
.pago__totales dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.pago__totales dd { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--claro); text-align: right; }
.pago__totales dd .moneda { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--claro-3); margin-right: 3px; }
.pago__totales-cupon dd { color: var(--dorado); }
.pago__totales-total dd { font-size: 26px; }
.pago__resumen .campo--check { color: var(--claro-3); }
.pago__resumen .campo--check a { color: var(--claro); border-bottom-color: var(--dorado); }
.pago__boton { width: 100%; }
.boton--esperando { opacity: .6; }
@media (min-width: 900px) {
  .pago-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .pago__grilla { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
  .pago__resumen { position: sticky; top: 24px; padding: 28px 28px 30px; }
}

/* Estado del pedido (spec 6.5) */
.pedido-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.pedido-pagina__cabecera { text-align: center; margin-bottom: 28px; }
.pedido-pagina__cabecera .linea-dorada { margin: 16px auto 0; }
.pedido-pagina__intro { margin: 14px auto 0; max-width: 560px; font-size: 14px; color: var(--tinta-2); }
.pedido-pagina__cuerpo { display: flex; flex-direction: column; gap: 28px; }
.pedido-pagina__columna { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pedido-bloque { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--tinta-2); }
.pedido-bloque p { margin: 0; line-height: 1.6; }
.pedido-bloque--verde { background: var(--verde); color: var(--claro); padding: 24px 20px; }
.pedido-bloque--verde .display { color: var(--claro); }
.pedido-bloque--verde .boton { align-self: flex-start; margin-top: 6px; }
.pedido-bloque__nota { font-size: 12px; color: var(--gris); }
.pedido-bloque--verde .pedido-bloque__nota { color: var(--claro-3); }
.pedido-bloque__sub { margin: 8px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado); font-weight: 400; }
.pedido-cuenta { margin: 0; display: grid; gap: 8px; }
.pedido-cuenta div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid rgba(246,243,236,.15); }
.pedido-cuenta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.pedido-cuenta dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.pedido-cuenta code { font-family: var(--sans); font-size: 15px; color: var(--claro); letter-spacing: .04em; }
.pedido-cuenta__copiar { background: none; border: 1px solid var(--dorado); color: var(--dorado); font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; }
.pedido-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pedido-linea__paso { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 0 18px 0; font-size: 14px; color: var(--gris); }
.pedido-linea__paso:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: -2px; width: 1px; background: var(--dorado-linea); }
.pedido-linea__punto { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--dorado-linea); background: #fff; box-sizing: border-box; flex: 0 0 auto; }
.pedido-linea__paso--hecho { color: var(--verde); }
.pedido-linea__paso--hecho .pedido-linea__punto, .pedido-linea__paso--actual .pedido-linea__punto { background: var(--dorado); border-color: var(--dorado); }
.pedido-linea__paso--actual { color: var(--verde); font-weight: 500; }
.pedido-linea__paso--actual .pedido-linea__punto { box-shadow: 0 0 0 3px rgba(185,151,100,.25); }
.pedido-item { padding: 14px 0; border-top: 1px solid var(--dorado-linea); display: flex; flex-direction: column; gap: 6px; }
.pedido-item__nombre { font-family: var(--serif); font-size: 20px; color: var(--verde); }
.pedido-item__talle { font-size: 13px; color: var(--dorado-tinta); }
.pedido-item__entrega { font-size: 13px; color: var(--verde); }
.pedido-item__precio { font-family: var(--serif); font-size: 18px; color: var(--verde); }
.pedido-item__precio .moneda { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-right: 3px; }
.pedido-resumen { background: var(--perla); border: 1px solid var(--dorado-linea); padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.pedido-resumen .carrito-resumen__totales div { border-bottom-color: var(--dorado-linea); }
.pedido-resumen .carrito-resumen__totales dt { color: var(--gris); }
.pedido-resumen .carrito-resumen__totales dd { color: var(--verde); font-size: 18px; text-align: right; }
.pedido-resumen .carrito-resumen__totales dd .moneda { color: var(--gris); }
.pedido-resumen .carrito-resumen__totales dd small { font-family: var(--sans); font-size: 12px; color: var(--gris); }
.pedido-resumen__total { font-size: 26px !important; }
.pedido-resumen__cliente { font-size: 13px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 8px; }
.pedido-resumen__cliente p { margin: 0; line-height: 1.6; }
@media (min-width: 900px) {
  .pedido-pagina__cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .pedido-resumen { position: sticky; top: 24px; }
}

/* Blog (Etapa 14) */
.blog-pagina, .articulo-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.blog-pagina__cabecera, .articulo-pagina__cabecera { text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.blog-pagina__intro { margin: 0; max-width: 560px; font-size: 14px; color: var(--tinta-2); }
.blog-pagina__vacio { text-align: center; color: var(--gris); }
.blog-pagina .pestanas { margin-bottom: 28px; }
.blog-grilla { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
.articulo-tarjeta { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.articulo-tarjeta__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--crema); transition: transform var(--t-lento) var(--curva); }
.articulo-tarjeta:hover .articulo-tarjeta__foto { transform: scale(1.02); }
.articulo-tarjeta__texto { display: flex; flex-direction: column; gap: 6px; }
.articulo-tarjeta__titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--verde); }
.articulo-tarjeta__extracto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.articulo-tarjeta__leer { font-size: 12px; letter-spacing: .08em; color: var(--dorado-tinta); }
.blog-paginas { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 36px; }
.blog-paginas__n { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.articulo-pagina__cabecera { text-align: left; align-items: stretch; gap: 0; margin-bottom: 0; }
.articulo-pagina.hk-article { max-width: 760px; padding-top: 28px; }
.articulo-pagina__cabecera a { color: inherit; text-decoration: none; }
.articulo-pagina__etiquetas { max-width: 760px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.articulo-pagina__etiquetas span { padding: 4px 10px; border: 1px solid var(--dorado-linea); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.articulo-pagina__compartir { max-width: 760px; margin: 28px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-top: 18px; border-top: 1px solid var(--dorado-linea); }
.articulo-pagina__compartir a, .articulo-pagina__copiar { background: none; border: 0; padding: 0 0 2px; font-family: var(--sans); font-size: 13px; color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); cursor: pointer; }
.articulo-pagina__relacionados { margin: 56px auto 0; max-width: 1000px; display: flex; flex-direction: column; gap: 18px; }
.blog-grilla--chica .articulo-tarjeta__titulo { font-size: 19px; }
/* Suscripción a las novedades del blog (31/10/2026): lista del blog y pie de cada artículo */
.suscribir { max-width: 760px; margin: 48px auto 0; padding: 28px 24px; background: var(--perla); border: 1px solid var(--dorado-linea); display: flex; flex-direction: column; gap: 20px; }
.suscribir__texto { display: flex; flex-direction: column; gap: 8px; }
.suscribir__texto .eyebrow { color: var(--dorado-tinta); }
.suscribir__titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--verde); text-wrap: balance; }
.suscribir__bajada { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tinta-2); max-width: 520px; }
.suscribir__form { display: flex; flex-direction: column; gap: 8px; }
.suscribir__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.suscribir__campo { display: flex; flex-direction: column; gap: 10px; }
.suscribir__campo input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--dorado-linea); background: #fff; color: var(--tinta); font-size: 16px; border-radius: 0; -webkit-appearance: none; appearance: none; }
.suscribir__campo input::placeholder { color: var(--gris); }
.suscribir__campo input:focus { outline: none; border-color: var(--dorado); box-shadow: 0 0 0 2px var(--dorado-linea); }
.suscribir__campo .boton { height: 46px; padding: 0 22px; white-space: nowrap; }
.suscribir__nota { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--gris); }
@media (min-width: 700px) {
  .suscribir { padding: 32px 36px; }
  .suscribir__campo { flex-direction: row; align-items: stretch; }
}
.comentarios { max-width: 760px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 18px; }
.comentarios__lista, .comentarios__hilo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comentarios__hilo { margin: 14px 0 0 24px; padding-left: 16px; border-left: 1px solid var(--dorado-linea); }
.comentario { padding: 14px 16px; background: var(--perla); border: 1px solid var(--dorado-linea); }
.comentario--taller { background: #fff; border-color: var(--dorado); }
.comentario__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.comentario__nombre { font-family: var(--serif); font-size: 17px; color: var(--verde); }
.comentario__taller { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); border: 1px solid var(--dorado); padding: 1px 6px; }
.comentario__fecha { font-size: 12px; color: var(--gris); margin-left: auto; }
.comentario__texto { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.comentarios__vacio { margin: 0; font-size: 14px; color: var(--gris); }
.comentarios__form { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--dorado-linea); }
.comentarios__form .boton { align-self: flex-start; }
.comentarios__nota { margin: 0; font-size: 12px; color: var(--gris); }
.blog-inicio__todos { margin: 18px 0 0; }
.articulo-mini__foto { object-fit: cover; background: var(--crema); }
@media (min-width: 700px) { .blog-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .articulo-tarjeta--destacada { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: 32px; } .articulo-tarjeta--destacada .articulo-tarjeta__titulo { font-size: 32px; } }

/* Blog · me gusta · Novedades */
.articulo-pagina__like { display: inline-flex; margin-right: 8px; }
.articulo-pagina__like-boton { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: none; border: 1px solid var(--dorado); color: var(--dorado-tinta); font-family: var(--sans); font-size: 12px; letter-spacing: .06em; cursor: pointer; transition: background var(--t-rapido, 160ms), color var(--t-rapido, 160ms); }
.articulo-pagina__like-boton:hover { background: var(--verde); color: var(--claro); }
.articulo-pagina__like-boton--dado, .articulo-pagina__like-boton:disabled { background: var(--verde); color: var(--claro); cursor: default; }
.novedades-pagina { min-height: 50vh; }
.novedades-pagina__volver { margin-top: 24px; }
.novedades-pagina__corregir { max-width: 440px; margin: 26px auto 0; text-align: left; }

/* Buscador y 404 */
.buscar { display: flex; gap: 8px; max-width: 520px; margin: 18px auto; }
.buscar input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--gris-claro); background: #fff; font-size: 16px; color: var(--tinta); }
.pagina-error__sugerencias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pagina-error__sugerencias a { color: var(--verde); border-bottom: 1px solid var(--dorado); text-decoration: none; }
.form__error { color: var(--error, #8A3B2E); font-size: 14px; }

/* Widget de turnos (Etapa 18.4): la agenda adentro de la web, con la estética del sistema de turnos
   (tarjeta blanca con borde suave, calendario en verde abeto, día elegido en dorado, chips de horarios, botón redondeado). */
.turnos { --ag-crema: #FAF9F7; --ag-abeto: #0F2A22; --ag-dorado: #B99764; --ag-dorado-texto: #8A6D3B; --ag-gris: #5F5E5A; --ag-deshabilitado: #C8C4BB; --ag-linea: #E5DFD3; font-family: var(--sans); color: var(--ag-abeto); container-type: inline-size; }
.turnos [hidden] { display: none !important; }
.turnos__grilla { display: grid; grid-template-columns: 1fr; gap: 20px; }
.turnos__grilla--simple { grid-template-columns: 1fr !important; }
.turnos__resumen { background: #fff; border: 1px solid var(--ag-linea); border-radius: 16px; padding: 18px 20px; align-self: start; }
.turnos__eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-dorado-texto); }
.turnos__evento { margin: 4px 0 0; font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--ag-abeto); }
.turnos__datos { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.turnos__datos dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ag-gris); }
.turnos__datos dd { margin: 2px 0 0; color: var(--ag-abeto); }
.turnos__cambiar, .turnos__enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ag-dorado-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.turnos__cambiar:hover, .turnos__enlace:hover { color: var(--ag-abeto); }
.turnos__paso { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.turnos__tarjeta { background: #fff; border: 1px solid var(--ag-linea); border-radius: 16px; padding: 20px; display: grid; gap: 22px; }
.turnos__tarjeta--aviso { gap: 12px; font-size: 14px; color: var(--ag-gris); }
.turnos__mes { display: flex; align-items: center; justify-content: space-between; }
.turnos__mes-nombre { font-family: var(--serif); font-size: 24px; color: var(--ag-abeto); }
.turnos__mes-capital { text-transform: capitalize; }
.turnos__mes-anio { color: var(--ag-gris); }
.turnos__flechas { display: flex; gap: 4px; }
.turnos__flecha { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; font-size: 22px; color: var(--ag-gris); cursor: pointer; transition: background var(--t-rapido), color var(--t-rapido); }
.turnos__flecha:hover:not([disabled]) { background: rgba(229, 223, 211, .6); color: var(--ag-abeto); }
.turnos__flecha[disabled] { opacity: .35; cursor: default; }
.turnos__dias { margin-top: 14px; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; text-align: center; transition: opacity var(--t-suave); }
.turnos__dias--cargando { opacity: .5; }
.turnos__dia-nombre { padding-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-gris); }
.turnos__celda { display: flex; justify-content: center; }
.turnos__dia { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ag-deshabilitado); cursor: default; transition: box-shadow var(--t-rapido), background var(--t-rapido); }
.turnos__dia--libre { background: #fff; font-weight: 500; color: var(--ag-abeto); box-shadow: 0 0 0 1px var(--ag-linea); cursor: pointer; }
.turnos__dia--libre:hover { box-shadow: 0 0 0 1px var(--ag-abeto); }
.turnos__dia--activo { background: var(--ag-dorado); color: var(--ag-crema); font-weight: 500; cursor: pointer; }
.turnos__dia--hoy:not(.turnos__dia--activo)::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--ag-dorado); }
.turnos__horarios { min-width: 0; }
.turnos__nota { margin: 0; font-size: 14px; color: var(--ag-gris); }
.turnos__nota--fecha { margin-bottom: 10px; color: var(--ag-abeto); }
.turnos__nota--fecha::first-letter { text-transform: uppercase; }
.turnos__nota--chica { font-size: 12px; }
.turnos__nota--dorada { font-size: 12px; color: var(--ag-dorado-texto); }
.turnos__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.turnos__chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ag-linea); background: #fff; font: inherit; font-size: 14px; color: var(--ag-abeto); cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido), color var(--t-rapido); }
.turnos__chip:hover { border-color: var(--ag-abeto); }
.turnos__chip--activo { background: var(--ag-abeto); border-color: var(--ag-abeto); color: var(--ag-crema); }
.turnos__encuesta { border-top: 1px solid var(--ag-linea); padding-top: 16px; display: grid; gap: 8px; }
.turnos__chips--encuesta .turnos__chip { min-height: 34px; padding: 0 14px; font-size: 13px; }
.turnos__select { margin-left: 6px; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ag-linea); background: #fff; font: inherit; font-size: 15px; color: var(--ag-abeto); }
.turnos__plazo { background: var(--ag-crema); border: 1px solid var(--ag-linea); border-radius: 16px; padding: 16px 20px; display: grid; gap: 6px; }
.turnos__plazo-titulo { margin: 0; font-family: var(--serif); font-size: 20px; color: var(--ag-abeto); }
.turnos__plazo-texto { margin: 0; font-size: 13px; color: var(--ag-gris); }
.turnos__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ag-abeto); }
.turnos__check input { margin-top: 3px; accent-color: var(--ag-abeto); }
.turnos__datos-tarjeta { gap: 12px; }
.turnos__campos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.turnos__campo { display: block; }
.turnos__campo input, .turnos__campo textarea, .turnos__campo select { margin-top: 4px; width: 100%; border: 1px solid var(--ag-linea); border-radius: 8px; background: #fff; padding: 9px 12px; font: inherit; font-size: 16px; color: var(--ag-abeto); outline: none; }
.turnos__campo input:focus, .turnos__campo textarea:focus, .turnos__campo select:focus { border-color: var(--ag-dorado); }
.turnos__campo--error input, .turnos__campo--error textarea, .turnos__campo--error select { border-color: var(--error); }
.turnos__acciones { display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.turnos__acciones--izq { justify-content: flex-start; flex-wrap: wrap; }
.turnos__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 8px; border: 1px solid var(--ag-abeto); background: var(--ag-abeto); font: inherit; font-size: 14px; font-weight: 500; color: var(--ag-crema); cursor: pointer; text-decoration: none; transition: background var(--t-rapido), opacity var(--t-rapido); }
.turnos__boton:hover { background: #1b4036; }
.turnos__boton[disabled] { opacity: .45; cursor: not-allowed; }
.turnos__boton--borde { background: #fff; color: var(--ag-abeto); border-color: var(--ag-linea); }
.turnos__boton--borde:hover { background: #fff; border-color: var(--ag-abeto); }
.turnos__aviso { margin: 0; font-size: 14px; color: var(--ag-gris); }
.turnos__aviso--error { color: var(--error); }
.turnos__aviso a { color: var(--ag-dorado-texto); }
.turnos__listo { gap: 8px; scroll-margin-top: 96px; } /* al confirmar, la cabecera fija no tapa el aviso */
.turnos__listo-cuando { margin: 0; font-size: 16px; color: var(--ag-abeto); }
.turnos__listo-cuando::first-letter { text-transform: uppercase; }
@container (min-width: 700px) {
  .turnos__tarjeta { grid-template-columns: minmax(0, 1fr) 220px; padding: 28px; }
  .turnos__tarjeta > .turnos__encuesta, .turnos__tarjeta > .turnos__plazo { grid-column: 1 / -1; }
  .turnos__horarios { border-left: 1px solid var(--ag-linea); padding-left: 24px; max-height: 420px; overflow-y: auto; }
  .turnos__datos-tarjeta, .turnos__listo { grid-template-columns: 1fr; }
  .turnos__campos { grid-template-columns: 1fr 1fr; }
  .turnos__campo--ancho { grid-column: 1 / -1; }
  .turnos__dia { width: 44px; height: 44px; }
}
@container (min-width: 940px) {
  .turnos__grilla { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
  .turnos__resumen { position: sticky; top: 24px; }
}

.pedido-visita { margin: 18px 0 8px; display: grid; gap: 12px; }
.pedido-visita__mail { margin: 0; border-top: 1px solid rgba(246, 243, 236, .25); padding-top: 14px; font-size: 14px; color: var(--claro-3); }
.pedido-visita__cuando { margin: 0; font-family: var(--serif); font-size: 22px; color: inherit; }
.pedido-visita__cuando::first-letter { text-transform: uppercase; }
.pedido-visita__enlace { font-size: 13px; color: var(--dorado-tinta); }
/* Dentro del bloque verde del pedido, los botones del widget van en dorado (el abeto se perdería contra el fondo). */
.pedido-bloque--verde .turnos__boton { background: var(--dorado); border-color: var(--dorado); color: var(--verde); }
.pedido-bloque--verde .turnos__boton:hover { background: #c9a96f; }
.pedido-bloque--verde .turnos__boton--borde { background: transparent; border-color: var(--dorado); color: var(--claro); }
.pedido-bloque--verde .turnos__boton--borde:hover { background: rgba(185, 151, 100, .14); }

/* Página Contacto (rearmada con la estética nueva a partir de la migrada; Haik, 21/10/2026). El HTML vive en Páginas. */
.pagina--ancha .pagina-suelta { max-width: var(--ancho-max); }
.contacto { text-align: center; }
.contacto__eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-tinta); }
.descripcion-importada .contacto__titulo { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.1; color: var(--verde); }
.descripcion-importada .contacto__titulo--2 { font-size: 32px; }
.descripcion-importada .contacto__bajada { margin: 14px 0 4px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--dorado-tinta); }
.descripcion-importada .contacto__nota { margin: 0 0 32px; font-size: 13px; color: var(--gris); }
.contacto__tarjetas { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 560px; margin: 0 auto 56px; text-align: left; }
.contacto-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--dorado-linea); background: #fff; color: var(--verde); text-decoration: none; transition: border-color var(--t-rapido), background var(--t-rapido); }
.contacto-tarjeta__cuerpo { min-width: 0; }
.contacto-tarjeta::after { content: "→"; color: var(--dorado-tinta); font-size: 18px; }
.contacto-tarjeta:hover { border-color: var(--dorado); background: var(--perla); }
.contacto-tarjeta__rotulo { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-tinta); }
.contacto-tarjeta__texto { display: block; margin-top: 3px; font-size: 16px; }
.contacto-tarjeta--oscura { background: var(--verde); color: var(--claro); border-color: var(--verde); }
.contacto-tarjeta--oscura:hover { background: var(--verde-3); border-color: var(--verde-3); }
.contacto-tarjeta--oscura .contacto-tarjeta__rotulo, .contacto-tarjeta--oscura::after { color: var(--dorado); }
.contacto-tarjeta--oscura .contacto-tarjeta__texto { font-family: var(--serif); font-size: 24px; }
.contacto__visitas { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 28px auto 40px; max-width: 980px; }
.contacto-visita { display: flex; flex-direction: column; align-items: center; }
.descripcion-importada .contacto-visita img { width: 100%; max-width: 320px; aspect-ratio: 1026 / 598; object-fit: cover; margin: 0 0 14px; }
.descripcion-importada .contacto-visita p { margin: 0; }
.contacto-visita__nombre { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); }
.contacto-visita__sub { font-family: var(--serif); font-size: 18px; color: var(--tinta-2); }
.contacto-visita__direccion { margin-top: 4px !important; font-size: 12px; color: var(--gris); }
.contacto-visita__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 12px; padding: 0 22px; border: 1px solid var(--dorado); color: var(--dorado-tinta); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background var(--t-rapido), color var(--t-rapido); }
.contacto-visita__boton:hover { background: var(--dorado); color: var(--verde); }
.contacto__agendas { text-align: left; margin: 0 0 40px; }
.visita-acordeon details { border-top: 1px solid var(--dorado-linea); }
.visita-acordeon:last-child details { border-bottom: 1px solid var(--dorado-linea); }
.descripcion-importada .contacto__beneficios { list-style: none; margin: 0 0 20px; padding: 18px 0; border-top: 1px solid var(--dorado-linea); border-bottom: 1px solid var(--dorado-linea); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-tinta); }
.descripcion-importada .contacto__beneficios li { margin: 0; padding: 0; }
.descripcion-importada .contacto__mapa { margin: 0; font-size: 13px; }
/* [[mapa]] (Contacto): el mapa adentro de la página, al ancho del bloque. */
.mapa { margin: 24px 0 0; }
.mapa__marco { display: block; width: 100%; height: 360px; max-width: 100%; border: 0; border-radius: 4px; background: var(--perla); }
.mapa__titulo { margin: 8px 0 0; font-size: 13px; color: var(--dorado-tinta); }
@media (max-width: 600px) { .mapa__marco { height: 280px; } }
.descripcion-importada .contacto__mapa a { color: var(--dorado-tinta); }
@media (min-width: 720px) {
  .descripcion-importada .contacto__titulo { font-size: 52px; }
  .contacto__visitas { grid-template-columns: repeat(3, 1fr); }
}

/* Videos de YouTube en páginas ([[video:ID]]): tarjeta con miniatura; el reproductor se carga al tocar. */
.video { margin: 0; }
.video__facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--crema); cursor: pointer; overflow: hidden; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(15, 42, 34, .85); color: var(--dorado); display: grid; place-items: center; transition: transform var(--t-rapido), background var(--t-rapido); }
.video__play svg { margin-left: 4px; }
.video__facade:hover .video__play { background: var(--verde); transform: scale(1.06); }
.video__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.descripcion-importada .video__titulo { margin: 8px 0 0; font-size: 13px; color: var(--gris); }

/* Página Garantía y mantenimiento (rearmada, 22/10/2026; el HTML vive en Páginas) */
.garantia { color: var(--tinta-2); }
.garantia__portada { text-align: center; padding-bottom: 36px; }
.garantia__eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-tinta); }
.descripcion-importada .garantia__titulo { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.1; color: var(--verde); }
.descripcion-importada .garantia__bajada { margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--dorado-tinta); }
.garantia__seccion { padding: 32px 0; border-top: 1px solid var(--dorado-linea); }
.descripcion-importada .garantia__h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--verde); }
.descripcion-importada .garantia__h3 { margin: 14px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--verde); }
.descripcion-importada .garantia__intro { margin: 0 0 20px; max-width: 640px; }
.garantia__dos { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.garantia__destacado { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--verde); color: var(--claro); }
.garantia__destacado-cifra { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--dorado); }
.garantia__destacado-texto { font-size: 14px; line-height: 1.5; }
.garantia__tarjetas { display: grid; grid-template-columns: 1fr; gap: 16px; }
.garantia__tarjeta { padding: 20px 22px; background: #fff; border: 1px solid var(--dorado-linea); }
.descripcion-importada .garantia__tarjeta h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--verde); }
.descripcion-importada .garantia__tarjeta p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.descripcion-importada .garantia__tarjeta ul, .descripcion-importada .garantia ul { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.descripcion-importada .garantia__consejo { margin: 10px 0 0; padding: 10px 12px; background: var(--perla); border-left: 3px solid var(--dorado); font-size: 13px; }
.garantia__tarjeta--si { border-top: 3px solid #2F6B4F; }
.garantia__tarjeta--no { border-top: 3px solid var(--error); }
.descripcion-importada .garantia__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.descripcion-importada .garantia__pasos li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.6; }
.garantia__pasos span { font-family: var(--serif); font-size: 24px; color: var(--dorado-tinta); line-height: 1.2; }
.descripcion-importada .garantia__nota { margin: 18px 0 0; font-size: 13px; color: var(--gris); }
.garantia__nota a { color: var(--dorado-tinta); }
.garantia__tablas { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.descripcion-importada .garantia__tabla table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--dorado-linea); }
.descripcion-importada .garantia__tabla th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dorado-tinta); padding: 10px 12px; border-bottom: 1px solid var(--dorado-linea); }
.descripcion-importada .garantia__tabla td { padding: 9px 12px; border-bottom: 1px solid #EFEBE2; }
.descripcion-importada .garantia__tabla tr:last-child td { border-bottom: 0; }
.descripcion-importada .garantia__tabla td:last-child { color: var(--verde); font-weight: 500; white-space: nowrap; }
.garantia__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 36px 0 28px; }
.garantia__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border: 1px solid var(--verde); color: var(--verde); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background var(--t-rapido), color var(--t-rapido); }
.garantia__boton:hover { background: var(--verde); color: var(--claro); }
.garantia__boton--lleno { background: var(--dorado); border-color: var(--dorado); color: var(--verde); }
.garantia__boton--lleno:hover { background: var(--verde); border-color: var(--verde); color: var(--claro); }
.descripcion-importada .garantia__cita { margin: 0; padding: 28px 20px; text-align: center; border-top: 1px solid var(--dorado-linea); }
.descripcion-importada .garantia__cita p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--verde); }
.garantia__cita cite { display: block; margin-top: 8px; font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-tinta); }
@media (min-width: 720px) {
  .descripcion-importada .garantia__titulo { font-size: 52px; }
  .garantia__dos { grid-template-columns: 1fr 1fr; gap: 28px; }
  .garantia__dos--video { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .garantia__tarjetas { grid-template-columns: repeat(2, 1fr); }
  .garantia__tablas { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) { .garantia__tarjetas { grid-template-columns: repeat(3, 1fr); } }

/* Secciones nuevas del inicio editable: banner, bloque de texto, frase */
.banner { position: relative; overflow: hidden; }
.banner--verde { background: var(--verde); color: var(--claro); min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; }
.banner--verde .banner__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__degrade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,34,.15) 0%, rgba(15,42,34,.92) 100%); }
.banner__texto { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.banner--verde .display { color: var(--claro); }
.banner--verde p { margin: 0; color: var(--claro-2); }
.banner--claro { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.banner--claro .banner__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--crema); }
.banner--claro p { margin: 0; color: var(--tinta-2); }
.banner .boton { align-self: flex-start; }
.bloque-texto { max-width: 820px; }
.bloque-texto--centrado { text-align: center; }
.bloque-texto--centrado .linea-dorada { margin: 14px auto 0; }
.bloque-texto .linea-dorada--izq { margin: 14px 0 0; }
.bloque-texto__cuerpo { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--tinta-2); }
.frase-inicio { text-align: center; max-width: 760px; }
.frase-inicio blockquote { margin: 18px 0 0; }
.frase-inicio p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--verde); }
.frase-inicio cite { display: block; margin-top: 12px; font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-tinta); }
@media (min-width: 900px) {
  .banner--verde { min-height: 540px; padding: 0 8vw 72px; }
  .banner--claro { grid-template-columns: 1fr 1fr; gap: 56px; }
  .frase-inicio p { font-size: 32px; }
}

/* ---------- Sobre nosotros (Haik, 22/10/2026): la historia, la filosofía, el oro, las gemas y el taller ---------- */
.nosotros { max-width: 980px; margin: 0 auto; }
.descripcion-importada .nosotros .nosotros__eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-tinta); }
.nosotros__portada { text-align: center; padding-bottom: 8px; }
.descripcion-importada .nosotros__titulo { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.08; color: var(--verde); }
.descripcion-importada .nosotros__bajada { max-width: 620px; margin: 16px auto 28px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--dorado-tinta); }
.descripcion-importada .nosotros__foto { margin: 0; }
.descripcion-importada .nosotros__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.descripcion-importada .nosotros__foto--portada img { aspect-ratio: 4 / 3; }
.nosotros__bloque { padding: 44px 0 0; }
.descripcion-importada .nosotros__subtitulo { margin: 0 0 14px; font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1.15; color: var(--verde); }
.nosotros__bloque p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--tinta-2); }
.nosotros__bloque h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--verde); }
.descripcion-importada .nosotros__datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.descripcion-importada .nosotros__datos li { margin: 0; padding: 16px 18px; border: 1px solid var(--dorado-linea); background: #fff; display: flex; flex-direction: column; gap: 4px; }
.descripcion-importada .nosotros__datos strong { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--verde); }
.descripcion-importada .nosotros__datos span { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.nosotros__bloque--dos { display: grid; grid-template-columns: 1fr; gap: 24px; }
.descripcion-importada .nosotros__cita { margin: 22px 0 20px; padding: 0 0 0 18px; border-left: 2px solid var(--dorado); }
.descripcion-importada .nosotros .nosotros__cita p { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--verde); }
.descripcion-importada .nosotros__cita footer { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dorado-tinta); }
.descripcion-importada .nosotros__recuadro { margin-top: 20px; padding: 20px 22px; background: var(--perla); border: 1px solid var(--dorado-linea); }
.descripcion-importada .nosotros__recuadro ul, .descripcion-importada .nosotros__columnas ul { margin: 0; padding-left: 18px; }
.descripcion-importada .nosotros__recuadro p { font-size: 15px; margin: 0 0 10px; }
.descripcion-importada .nosotros__recuadro p:last-child { margin-bottom: 0; }
.descripcion-importada .nosotros__recuadro li, .descripcion-importada .nosotros__columnas li { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.descripcion-importada .nosotros .nosotros__destacado { padding: 16px 20px; background: var(--verde); color: var(--claro); font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.nosotros__columnas { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
.nosotros__porque { text-align: center; padding-bottom: 20px; }
.nosotros__tres { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; margin-top: 8px; }
.nosotros__tres > div { padding: 20px 22px; border-top: 2px solid var(--dorado); background: var(--perla); }
.descripcion-importada .nosotros .nosotros__tres p { margin: 0; font-size: 15px; }
.descripcion-importada .nosotros .nosotros__cierre { margin: 32px 0 18px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--verde); }
.descripcion-importada .nosotros .nosotros__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
@media (min-width: 720px) {
  .descripcion-importada .nosotros__titulo { font-size: 56px; }
  .descripcion-importada .nosotros__subtitulo { font-size: 36px; }
  .descripcion-importada .nosotros__datos { grid-template-columns: repeat(2, 1fr); }
  .nosotros__bloque { padding-top: 64px; }
  .nosotros__bloque--dos { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .nosotros__bloque--invertido .nosotros__texto { order: 2; }
  .nosotros__columnas, .nosotros__tres { grid-template-columns: repeat(3, 1fr); }
  .nosotros__columnas { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ---------- Editorial (decisión 61, 22/10/2026): la estética de los artículos de haikmaro.com, clases hk-* ----------
   Vale para el cuerpo de los artículos del blog y para las páginas migradas de WordPress. App\Services\Editorial
   convierte el HTML viejo a estas clases; el creador de descripciones ya las usa. */
.hk-article { --hk-line: #E8E0D5; --hk-cream: #F5F2ED; --hk-cream-2: #C9C2B6; font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--tinta); }
.hk-article p { margin: 0 0 20px; }
.hk-article a { color: var(--dorado-tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hk-article strong { font-weight: 500; }
.hk-article em { font-family: var(--serif); font-size: 1.08em; }
.hk-article h2, .hk-article h3, .hk-article h4 { font-family: var(--serif); font-weight: 400; color: var(--verde); letter-spacing: -.01em; line-height: 1.12; margin: 0; }
.hk-article h2 { font-size: clamp(28px, 1.6rem + 1vw, 36px); margin: 44px 0 16px; }
.hk-article h3 { font-size: clamp(22px, 1.3rem + .6vw, 26px); margin: 36px 0 12px; }
.hk-article h4 { font-size: 20px; margin: 0 0 8px; }
.hk-article ul, .hk-article ol { list-style: none; padding: 0; margin: 0 0 20px; }
.hk-article li { position: relative; padding: 4px 0 4px 24px; }
.hk-article ul > li::before { content: "—"; position: absolute; left: 0; top: 4px; color: var(--dorado); }
.hk-article ol { counter-reset: hk; }
.hk-article ol > li { counter-increment: hk; padding-left: 34px; }
.hk-article ol > li::before { content: counter(hk, decimal-leading-zero); position: absolute; left: 0; top: 5px; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--dorado); }
.hk-article img { max-width: 100%; height: auto; }
.hk-kicker, .hk-label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.hk-kicker { display: block; color: var(--dorado-tinta); margin: 0 0 12px; }
.hk-article .hk-title, .hk-article h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 2rem + 1.5vw, 46px); line-height: 1.08; letter-spacing: -.01em; color: var(--tinta); margin: 0 0 14px; }
.hk-article p.hk-lead { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--tinta-2); margin: 0 0 16px; }
.hk-article .hk-updated { font-size: 12px; color: var(--gris); margin: 0 0 8px; }
.hk-hr { border: 0; border-top: 1px solid var(--hk-line, #E8E0D5); margin: 26px 0; }
.hk-hr-gold { border: 0; height: 5px; border-top: 1px solid var(--dorado); border-bottom: 1px solid var(--dorado); margin: 22px 0 28px; }
.hk-ornament { text-align: center; color: var(--dorado); font-size: 14px; letter-spacing: .6em; margin: 34px 0; }
.hk-summary { margin: 0 0 28px; padding: 22px 22px 18px; background: var(--perla); border-left: 1px solid var(--dorado); }
.hk-summary .hk-label { display: block; color: var(--dorado-tinta); margin-bottom: 10px; }
.hk-summary p { margin: 0 0 10px; font-size: 1.02em; }
.hk-summary p:last-child, .hk-summary ul, .hk-summary ol { margin-bottom: 0; }
.hk-summary li { padding: 5px 0 5px 20px; font-size: .96em; }
.hk-summary li::before { top: 5px; }
.hk-figure { margin: 28px 0; }
.hk-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; background: var(--crema); }
.hk-figure.hk-bleed { margin: 0 0 28px; }
.hk-figure figcaption { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--tinta); margin-top: 10px; line-height: 1.4; }
.hk-figure--chica { margin: 20px auto; max-width: 320px; }
.hk-figure--chica img { aspect-ratio: auto; object-fit: contain; background: none; }
.hk-figure--libre img { aspect-ratio: auto; object-fit: contain; background: none; }
.hk-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.hk-galeria .hk-figure, .hk-galeria .hk-figure--chica { margin: 0; max-width: none; }
.hk-galeria .hk-figure--chica img { aspect-ratio: 4 / 5; object-fit: contain; }
.hk-side { display: flex; flex-direction: column; margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--hk-line, #E8E0D5); border-bottom: 1px solid var(--hk-line, #E8E0D5); }
.hk-side + .hk-side { margin-top: -40px; border-top: 0; }
.hk-side > div { display: contents; }
.hk-side > div > h3 { order: -1; margin: 0 0 14px; }
.hk-side .hk-figure { margin: 0 0 16px; }
.hk-side .hk-figure figcaption { margin-bottom: 0; }
.hk-side > div > p:last-child { margin-bottom: 0; }
.hk-side .hk-label { display: block; margin: 14px 0 6px; color: var(--dorado-tinta); }
.hk-section { display: flex; align-items: baseline; gap: 14px; margin: 48px 0 16px; }
.hk-section h2 { margin: 0; }
.hk-section .hk-n { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1; color: var(--dorado); flex: none; }
.hk-dropcap::first-letter { font-family: var(--serif); float: left; font-size: 3.6em; line-height: .8; margin: .08em .12em 0 0; color: var(--tinta); }
.hk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.hk-stat { border: 1px solid var(--hk-line, #E8E0D5); padding: 16px 14px; }
.hk-stat .hk-v { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--tinta); }
.hk-stat .hk-v small { font-size: .55em; }
.hk-stat .hk-label { margin-top: 8px; display: block; }
.hk-chart { margin: 26px 0 30px; }
.hk-chart .hk-label { display: block; margin-bottom: 6px; }
.hk-chart svg { width: 100%; height: auto; display: block; }
.hk-chart.hk-diagram svg { max-width: 300px; margin: 0 auto; }
.hk-chart.hk-diagram figcaption { text-align: center; }
.hk-chart figcaption { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--tinta); margin-top: 10px; line-height: 1.4; }
.hk-chart-t { font-family: var(--sans); font-size: 11px; fill: var(--gris); }
.hk-chart-l { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .08em; fill: var(--tinta); }
.hk-chart-v { font-family: var(--serif); font-size: 20px; fill: var(--tinta); }
.hk-chart-c { font-family: var(--serif); font-size: 30px; fill: var(--tinta); }
.hk-chart text { font-family: var(--sans); }
.hk-chart .chart-grid { stroke: var(--hk-line, #E8E0D5); stroke-width: 1; }
.hk-chart .chart-axis { stroke: var(--gris); stroke-width: 1; }
.hk-chart .chart-line { fill: none; stroke: var(--dorado); stroke-width: 2.5; }
.hk-chart .chart-line-silver { fill: none; stroke: #9EA2A8; stroke-width: 2.5; }
.hk-chart .chart-dot { fill: var(--dorado); }
.hk-chart .chart-dot-silver { fill: #9EA2A8; }
.hk-legend { font-size: 13px; line-height: 2; color: var(--tinta-2); }
.hk-legend span { display: inline-block; margin-right: 10px; }
.hk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.hk-dot.oro { background: #C6A15B; } .hk-dot.cobre { background: #B06A4F; } .hk-dot.plata { background: #9EA2A8; } .hk-dot.platino { background: #C7CBD1; border: 1px solid #9EA2A8; }
.hk-band { background: var(--verde); color: var(--hk-cream, #F5F2ED); margin: 36px 0; padding: 32px 22px; }
.hk-band .hk-label { color: var(--dorado); display: flex; align-items: center; gap: 8px; }
.hk-band .hk-label svg { width: 14px; height: 14px; stroke: var(--dorado); fill: none; stroke-width: 1.2; flex: none; }
.hk-article .hk-band .hk-lead { font-family: var(--serif); font-style: normal; font-size: clamp(22px, 1.3rem + .8vw, 28px); line-height: 1.3; margin: 14px 0 12px; color: var(--hk-cream, #F5F2ED); }
.hk-band p { font-size: 15px; color: var(--hk-cream-2, #C9C2B6); margin: 0 0 10px; }
.hk-band p:last-child { margin-bottom: 0; }
.hk-band a { color: var(--dorado); }
.hk-band ul > li::before { color: var(--dorado); }
.hk-band li { color: var(--hk-cream-2, #C9C2B6); font-size: 15px; }
.hk-band__autor { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado) !important; margin-top: 12px !important; }
.hk-table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: 14px; display: table; }
.hk-table thead th { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); text-align: left; padding: 10px 0; border-bottom: 1px solid var(--dorado); }
.hk-table td, .hk-table th[scope=row] { padding: 11px 0; border-bottom: 1px solid var(--hk-line, #E8E0D5); vertical-align: top; text-align: left; }
.hk-table th[scope=row] { font-weight: 400; color: var(--tinta-2); width: 38%; padding-right: 12px; }
.hk-table td { color: var(--tinta); }
.hk-table td + td, .hk-table th + th { padding-left: 12px; }
.hk-table caption { caption-side: bottom; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--tinta); text-align: left; padding-top: 10px; line-height: 1.4; }
.hk-article .hk-quote { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 1.35rem + .8vw, 30px); line-height: 1.3; margin: 32px 0; padding: 0 0 0 18px; border-left: 1px solid var(--dorado); color: var(--tinta); }
.hk-article .hk-quote p { margin: 0 0 12px; }
.hk-article .hk-quote p:last-of-type { margin-bottom: 0; }
.hk-quote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-top: 10px; }
.hk-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0; }
.hk-card { border: 1px solid var(--hk-line, #E8E0D5); padding: 18px 18px 14px; background: #fff; }
.hk-card h4 { font-size: 20px; margin: 0 0 8px; }
.hk-card h4 a { text-decoration: none; color: var(--verde); }
.hk-card p { font-size: 15px; margin: 0 0 8px; color: var(--tinta-2); }
.hk-card .hk-figure { margin: -18px -18px 14px; }
.hk-card .hk-figure img { aspect-ratio: 1 / 1; }
.hk-cta { display: grid; gap: 10px; margin: 30px 0 10px; }
.hk-cta-titulo { font-family: var(--serif); font-size: clamp(24px, 1.4rem + .8vw, 30px); line-height: 1.2; color: var(--verde); margin: 36px 0 8px !important; }
.hk-article .hk-btn { display: block; width: 100%; text-align: center; padding: 15px 18px; min-height: 48px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: background var(--t-suave) var(--curva), color var(--t-suave) var(--curva); }
.hk-article .hk-btn-primary { background: var(--verde); color: var(--claro); }
.hk-article .hk-btn-primary:hover { background: var(--verde-3); color: var(--claro); }
.hk-article .hk-btn-secondary { border: 1px solid var(--dorado); color: var(--dorado-tinta); background: transparent; }
.hk-article .hk-btn-secondary:hover { background: var(--perla); }
.hk-sources { font-size: 13px; color: var(--gris); margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--hk-line, #E8E0D5); }
.hk-sources .hk-label { display: block; margin-bottom: 6px; }
.hk-sources ul { margin: 6px 0 0; }
.hk-sources li { font-size: 13px; padding: 2px 0 2px 18px; }
.hk-sources a { color: var(--tinta-2); }
.hk-link { padding: 14px 18px; border: 1px solid var(--hk-line, #E8E0D5); }
.hk-faq h3 { font-size: clamp(20px, 1.2rem + .5vw, 24px); margin: 22px 0 6px; }
.hk-faq p { margin: 0 0 6px; }
.pagina-suelta__cuerpo.hk-article { max-width: 760px; margin: 0 auto; }
@media (min-width: 720px) {
  .hk-band { padding: 40px 36px; }
  .hk-figure img { aspect-ratio: 3 / 2; }
  .hk-side .hk-figure img, .hk-galeria .hk-figure img { aspect-ratio: 4 / 5; }
  .hk-figure--libre img { aspect-ratio: auto; }
  .hk-side { display: grid; grid-template-columns: 38% 1fr; column-gap: 32px; align-items: center; padding: 28px 0; }
  .hk-side.hk-side-right { grid-template-columns: 1fr 38%; }
  .hk-side.hk-side-right > .hk-figure { order: 2; }
  .hk-side > .hk-figure { margin: 0; }
  .hk-side > div { display: block; }
  .hk-side > div > h3 { margin: 0 0 10px; }
  .hk-stats { gap: 16px; }
  .hk-chart.hk-diagram svg { max-width: 340px; }
  .hk-cta { grid-template-columns: 1fr 1fr; }
  .hk-cta .hk-btn:only-child { grid-column: 1 / -1; }
  .hk-table { font-size: 15px; }
  .hk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hk-cards:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hk-galeria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Juego «Descubra su alianza» (Etapa 18 B, docs/juego/especificacion.md) · paso 1: portada ---------- */
.juego { position: relative; touch-action: manipulation; min-height: calc(100svh - 64px); background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .05) 0 1px, transparent 1px 14px); color: var(--claro); overflow: hidden; }
.juego__portada { min-height: inherit; max-width: 560px; margin: 0 auto; padding: 26px 28px 34px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.juego__abanico { position: relative; width: 100%; height: 290px; }
.juego__naipe { position: absolute; left: 50%; width: 136px; aspect-ratio: 480 / 740; animation: juego-flotar 6s ease-in-out infinite; }
.juego__naipe img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 110%; box-shadow: 0 20px 44px rgba(0, 0, 0, .5); border-radius: 6px; }
.juego__naipe--1 { top: 70px; margin-left: -186px; z-index: 1; animation-delay: 0s; } .juego__naipe--1 img { transform: rotate(-26deg); }
.juego__naipe--2 { top: 40px; margin-left: -128px; z-index: 2; animation-delay: .25s; } .juego__naipe--2 img { transform: rotate(-13deg); }
.juego__naipe--3 { top: 18px; margin-left: -68px; z-index: 3; animation-delay: .5s; } .juego__naipe--3 img { transform: none; }
.juego__naipe--4 { top: 40px; margin-left: -8px; z-index: 2; animation-delay: .75s; } .juego__naipe--4 img { transform: rotate(13deg); }
.juego__naipe--5 { top: 70px; margin-left: 50px; z-index: 1; animation-delay: 1s; } .juego__naipe--5 img { transform: rotate(26deg); }
.juego__texto { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; text-align: center; animation: juego-aparecer .9s ease both; }
.juego__linea { width: 40px; height: 1px; background: var(--dorado); }
.juego__titulo { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.05; color: var(--claro); }
.juego__titulo em { font-style: italic; }
.juego__bajada { margin: 0; max-width: 300px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--claro-3); }
.juego__pie { margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dorado); }
.juego__acciones { width: 100%; margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.juego__boton { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; height: 54px; border: 0; border-radius: 0; background: var(--dorado); color: var(--verde); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.juego__boton:hover { background: #c7a874; }
.juego__boton:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; }
@keyframes juego-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes juego-aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .juego { min-height: calc(100svh - 112px); }
  .juego__portada { padding-top: 48px; }
  .juego__abanico { height: 380px; }
  .juego__naipe { width: 190px; }
  .juego__naipe--1 { top: 90px; margin-left: -260px; } .juego__naipe--2 { top: 52px; margin-left: -178px; } .juego__naipe--3 { top: 24px; margin-left: -95px; } .juego__naipe--4 { top: 52px; margin-left: -12px; } .juego__naipe--5 { top: 90px; margin-left: 70px; }
  .juego__titulo { font-size: 52px; }
  .juego__acciones { max-width: 360px; }
}
/* En celulares angostos el abanico se achica para que las cartas de las puntas no se corten. */
@media (max-width: 440px) { .juego__abanico { transform: scale(.64); transform-origin: 50% 0; height: 210px; margin-top: 14px; } }
/* Paso 2: las pantallas de preguntas (fondo perla, como en la muestra). */
.juego:has(.juego__pantalla) { background: var(--perla); color: var(--tinta); }
.juego__pantalla { max-width: 620px; margin: 0 auto; padding: 0 0 36px; animation: juego-aparecer .55s cubic-bezier(.22, .61, .36, 1) both; }
.juego__saliendo { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
.juego__barra { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-bottom: 1px solid var(--dorado-linea); }
.juego__icono { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--verde); }
.juego__paso { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; color: var(--dorado-tinta); }
.juego__progreso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 16px 24px 0; }
.juego__progreso span { height: 2px; background: var(--crema); }
.juego__progreso .hecho { background: var(--dorado); }
.juego__progreso .actual { background: var(--verde); }
.juego__encabezado { padding: 20px 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.juego__kicker { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.juego__pregunta { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 31px; line-height: 1.1; color: var(--verde); }
.juego__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 20px; }
.juego__opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.juego__carta { display: block; perspective: 900px; text-decoration: none; color: var(--verde); text-align: center; }
.juego__giro { position: relative; display: block; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; animation: juego-entrar-carta .7s both; animation-delay: calc(var(--i, 0) * 90ms + var(--espera, 0s)); }
/* Las caras se cambian justo a mitad del giro (90°), así no depende de backface-visibility, que Safari a veces ignora. */
.juego__giro > .juego__frente { animation: juego-cara-aparece .7s both; animation-delay: inherit; }
.juego__giro > .juego__dorso { animation: juego-cara-se-va .7s both; animation-delay: inherit; }
.juego__frente { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 0 0 12px; box-sizing: border-box; background: #fff; border: 1px solid var(--dorado-linea); border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 18px rgba(15, 42, 34, .06); transition: transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva); }
.juego__dorso { position: absolute; inset: 0; border-radius: 8px; background: #000 center / contain no-repeat; transform: rotateY(180deg); opacity: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.juego__carta:hover .juego__frente { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 42, 34, .12); }
.juego__carta--elegida .juego__frente, .juego__carta--elegida:hover .juego__frente { transition-duration: .35s; transform: translateY(-8px); border-color: var(--verde); box-shadow: 0 0 0 2px var(--dorado), 0 22px 44px rgba(15, 42, 34, .22); }
.juego__opciones--vuelta .juego__carta--elegida .juego__giro, .juego__opciones--vuelta .juego__carta--elegida .juego__giro > * { animation: none; }
.juego__opciones--vuelta .juego__carta:not(.juego__carta--elegida) .juego__giro { animation: juego-salir-carta .65s both; }
.juego__opciones--vuelta .juego__carta:not(.juego__carta--elegida) .juego__frente { animation: juego-cara-se-va .65s both; }
.juego__opciones--vuelta .juego__carta:not(.juego__carta--elegida) .juego__dorso { animation: juego-cara-aparece .65s both; }
.juego__pantalla--capitulo { --espera: 1.3s; }
.juego__pantalla--saltado { --espera: 0s; }
@keyframes juego-entrar-carta { 0% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); } 50% { transform: rotateY(90deg); animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { transform: rotateY(0); } }
@keyframes juego-salir-carta { 0% { transform: rotateY(0); animation-timing-function: cubic-bezier(.4, 0, .7, .4); } 50% { transform: rotateY(90deg); animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { transform: rotateY(180deg); } }
@keyframes juego-cara-aparece { 0%, 49.99% { visibility: hidden; opacity: 0; } 50%, 100% { visibility: visible; opacity: 1; } }
@keyframes juego-cara-se-va { 0%, 49.99% { visibility: visible; opacity: 1; } 50%, 100% { visibility: hidden; opacity: 0; } }
/* La carta del capítulo se reparte grande en el centro, con un destello, y después se va sola (o al tocarla). */
.juego__reparto { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 26px; padding-top: clamp(48px, 13svh, 120px); box-sizing: border-box; background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .05) 0 1px, transparent 1px 14px); animation: juego-reparto-fin .45s ease 1.45s forwards; cursor: pointer; }
.juego__reparto-carta { position: relative; }
.juego__resplandor { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 151, 100, .35), rgba(185, 151, 100, 0) 65%); animation: juego-latir 2.4s ease-in-out infinite; }
.juego__naipe-grande { position: relative; width: 210px; aspect-ratio: 960 / 1479; overflow: hidden; border-radius: 8px; background: #0b0b0b; /* si la foto tarda, se ve un naipe oscuro y no un hueco verde */ box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: juego-repartir .85s cubic-bezier(.2, .7, .2, 1) both; }
.juego__naipe-grande img { display: block; width: 100%; height: 100%; object-fit: cover; }
.juego__brillo { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); animation: juego-destello 1.1s ease .45s both; }
.juego__reparto-texto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: juego-aparecer .6s ease .35s both; }
.juego__reparto-numero { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dorado); }
.juego__reparto-nombre { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 36px; line-height: 1.1; color: var(--claro); }
@media (min-width: 900px) { .juego__naipe-grande { width: 250px; } .juego__reparto-nombre { font-size: 44px; } }
.juego__reparto--fuera { animation: juego-reparto-fin .35s ease forwards; }
@keyframes juego-repartir { 0% { opacity: 0; transform: translateY(60px) rotate(-10deg) scale(.9); } 60% { opacity: 1; transform: translateY(-6px) rotate(1deg) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes juego-destello { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } }
@keyframes juego-latir { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes juego-reparto-fin { to { opacity: 0; visibility: hidden; } }
.juego__foto { display: block; flex: 0 0 auto; aspect-ratio: 4 / 5; background: var(--crema); }
.juego__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.juego__foto--ilus { display: flex; align-items: center; justify-content: center; background: #fff; }
.juego__foto--ilus svg { display: block; width: 100%; height: auto; }
.juego__etiqueta { margin-top: 8px; padding: 0 6px; font-family: var(--serif); font-size: 21px; line-height: 1.1; }
.juego__opciones--3 .juego__etiqueta { font-size: 17px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.juego__sub { padding: 0 6px; font-size: 12px; color: var(--gris); }
.juego__quedan { margin: 18px 0 0; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado-tinta); }
.juego__nota { margin: 12px auto 0; max-width: 300px; padding: 0 24px; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--gris); }
.juego__nota a { color: var(--verde); }
.juego__bajada-pregunta { margin: 0; font-size: 12px; color: var(--gris); }
/* Paso 4: el duelo final. */
.juego__frente { position: relative; }
.juego__sello { position: absolute; top: -1px; right: 12px; z-index: 2; padding: 8px 9px 7px; background: var(--verde); color: var(--claro); border-bottom: 2px solid var(--dorado); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
.juego__carta--elegida .juego__sello { opacity: 1; transform: none; }
.juego__opciones--duelo .juego__etiqueta { font-size: 19px; }
.juego__opciones--duelo .juego__sub { min-height: 2.8em; }
.juego__carta--queda .juego__giro, .juego__carta--queda .juego__giro > * { animation: none; }
.juego__carta--queda .juego__frente { animation: juego-asentar .6s ease both; }
.juego__carta--queda .juego__sello { animation: juego-sello-fuera .45s ease both; }
@keyframes juego-asentar { from { transform: translateY(-8px); border-color: var(--verde); box-shadow: 0 0 0 2px var(--dorado), 0 22px 44px rgba(15, 42, 34, .22); } to { transform: none; border-color: var(--dorado-linea); box-shadow: 0 6px 18px rgba(15, 42, 34, .06); } }
@keyframes juego-sello-fuera { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
.juego__pantalla--sigue { animation: none; }
.juego__rondas { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.juego__rondas span { width: 7px; height: 7px; border-radius: 4px; background: rgba(185, 151, 100, .3); transition: width .3s ease; }
.juego__rondas .hecho { background: var(--verde); }
.juego__rondas .actual { width: 22px; background: var(--dorado); }
@media (min-width: 900px) { .juego__opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .juego__opciones { gap: 18px; } .juego__opciones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .juego__opciones--4 .juego__etiqueta { font-size: 18px; } .juego__pantalla:has(.juego__opciones--4) { max-width: 820px; } }
/* Paso 5: el resultado. Franja verde con resplandor, la ganadora se da vuelta con brillo dorado, sin precio. */
.juego__pantalla--resultado { position: relative; padding-bottom: 44px; }
.juego__resultado { position: relative; }
.juego__resultado-fondo { position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: -1px; height: 300px; background: var(--verde) repeating-linear-gradient(45deg, rgba(185, 151, 100, .05) 0 1px, transparent 1px 14px); overflow: hidden; }
.juego__resultado-brillo { position: absolute; left: 50%; top: 120px; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 151, 100, .45), rgba(185, 151, 100, 0) 65%); animation: juego-latir 3.2s ease-in-out infinite; }
.juego__otra-vez { position: absolute; top: 14px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--dorado); text-decoration: none; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.juego__otra-vez:hover { color: var(--claro); }
.juego__otra-vez:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; }
.juego__resultado-marca { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 24px 18px; text-align: center; }
.juego__resultado-logo { font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--claro); }
.juego__resultado-kicker { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--dorado); }
.juego__mesa-final { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.juego__revelar { position: relative; z-index: 2; flex: 0 0 162px; min-width: 0; perspective: 1100px; --espera: .25s; }
.juego__revelar .juego__giro, .juego__revelar .juego__giro > * { animation-duration: .85s; }
.juego__revelar .juego__frente { padding: 0; gap: 0; border: 1px solid var(--verde); box-shadow: 0 0 0 2px var(--dorado), 0 0 46px rgba(185, 151, 100, .55), 0 24px 48px rgba(15, 42, 34, .3); }
.juego__revelar .juego__foto { aspect-ratio: 3 / 4; }
/* Los tres precios "desde": discretos, no una lista de precios. */
.juego__precios { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 8px 10px; border-top: 1px solid var(--dorado-linea); background: #fff; }
.juego__desde { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.juego__efectivo { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--dorado-tinta); white-space: nowrap; }
.juego__metodo { color: var(--dorado-tinta); }
.juego__otros { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 1.45; color: var(--gris); white-space: nowrap; }
.juego__resultado-texto { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 24px 0; text-align: center; animation: juego-aparecer .6s ease .65s both; }
.juego__resultado-nombre { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.05; color: var(--verde); }
.juego__resultado-botones { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0 auto; padding: 16px 24px 0; animation: juego-aparecer .6s ease .8s both; }
.juego__resultado-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.juego__resultado-boton { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--dorado); color: var(--verde); text-decoration: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.juego__resultado-boton--lleno { height: 50px; border: 0; background: var(--verde); color: var(--claro); font-size: 12px; letter-spacing: .2em; }
.juego__resultado-boton:hover { border-color: var(--verde); }
.juego__resultado-boton--lleno:hover { background: #163a2f; }
.juego__resultado-boton:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.juego__carta:focus-visible, .juego__similar-dorso:focus-visible, .juego__similar .juego__frente:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; border-radius: 8px; }
.juego__icono:focus-visible { outline: 2px solid var(--dorado); outline-offset: -4px; }
/* Dos similares boca abajo: se dan vuelta solo al tocarlas, de a una. */
.juego__similares { max-width: 520px; margin: 0 auto; }
.juego__similares-texto { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 24px 0; text-align: center; animation: juego-aparecer .6s ease .7s both; }
.juego__similares-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado-tinta); }
.juego__similares-pista { font-size: 11px; line-height: 1.5; color: var(--gris); }
.juego__similar { position: relative; z-index: 1; flex: 0 0 120px; min-width: 0; height: 186px; perspective: 900px; animation: juego-aparecer .6s ease .5s both; }
.juego__similar:first-child { margin-right: -8px; }
.juego__similar:last-child { margin-left: -8px; }
/* Que se entienda que hay que darlas vuelta: cada tanto se asoman, giran un poco y vuelven. */
@keyframes juego-asomar { 0%, 55%, 100% { transform: rotateY(180deg); } 68% { transform: rotateY(136deg); } 80% { transform: rotateY(190deg); } 89% { transform: rotateY(176deg); } }
.juego__similar--vacio { visibility: hidden; }
.juego__similar .juego__giro { height: 100%; transform: rotateY(180deg); animation: juego-asomar 1.7s ease-in-out .25s infinite; }
.juego__similar:last-child:not(.juego__similar--abierta) .juego__giro { animation-delay: 1.1s; }
.juego__similar .juego__giro > .juego__frente { animation: none; opacity: 0; padding: 0 6px 7px; gap: 0; align-items: center; text-align: center; border-color: var(--verde); box-shadow: 0 0 0 2px var(--dorado), 0 12px 26px rgba(15, 42, 34, .18); text-decoration: none; }
.juego__similar .juego__giro > .juego__dorso { animation: none; opacity: 1; border: 0; padding: 0; cursor: pointer; }
.juego__similar-dorso::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--dorado); border-radius: 8px; opacity: .6; pointer-events: none; }
.juego__similar .juego__foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; align-self: stretch; margin: 0 -6px 5px; }
.juego__similar-nombre { padding: 0 4px; font-family: var(--serif); font-size: 14px; line-height: 1.05; color: var(--verde); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.juego__similar-ver { margin-top: 0; white-space: nowrap; font-size: 5.5px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: var(--dorado-tinta); opacity: .8; }
.juego__similar-pie { display: flex; align-items: flex-end; align-self: stretch; gap: 4px; margin-top: 3px; }
.juego__similar--izq .juego__similar-pie { justify-content: flex-start; }
.juego__similar--der .juego__similar-pie { justify-content: flex-end; }
.juego__similar-valor { display: flex; flex-direction: column; }
.juego__similar--izq .juego__similar-valor { align-items: flex-start; text-align: left; }
.juego__similar--der .juego__similar-valor { align-items: flex-end; text-align: right; }
.juego__desde--par { margin-top: -1px; margin-bottom: 2px; }
.juego__similar-precio { margin-top: 1px; padding-bottom: 0; font-family: var(--serif); font-size: 13px; line-height: 1.1; color: var(--dorado-tinta); white-space: nowrap; }
.juego__similar--abierta .juego__giro { animation: juego-entrar-carta .7s both; }
.juego__similar--abierta .juego__giro > .juego__frente { animation: juego-cara-aparece .7s both; }
.juego__similar--abierta .juego__giro > .juego__dorso { animation: juego-cara-se-va .7s both; pointer-events: none; }
@media (max-width: 379px) { .juego__similar { flex-basis: 108px; height: 168px; } .juego__revelar { flex-basis: 152px; } }
@media (min-width: 900px) { .juego__resultado-fondo { height: 340px; } .juego__revelar { flex-basis: 240px; } .juego__similar { flex-basis: 180px; height: 278px; } .juego__similar:first-child { margin-right: -10px; } .juego__similar:last-child { margin-left: -10px; } .juego__similar-nombre { font-size: 17px; } .juego__similar-precio { font-size: 16px; } .juego__similar-ver { font-size: 6.5px; } .juego__resultado-nombre { font-size: 40px; } .juego__efectivo { font-size: 26px; } .juego__otros { flex-direction: row; gap: 12px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) {
  .juego__similar .juego__giro, .juego__similar--abierta .juego__giro { transform: none; }
  .juego__similar .juego__giro > .juego__dorso { display: block; }
  .juego__similar--abierta .juego__giro > .juego__frente { opacity: 1; }
  .juego__similar--abierta .juego__giro > .juego__dorso { display: none; }
}
/* Menos movimiento: sin giros ni repartos, solo fundidos. */
@media (prefers-reduced-motion: reduce) {
  .juego__pantalla { animation: juego-fundido .3s ease both; }
  .juego__giro, .juego__giro > *, .juego__opciones--vuelta .juego__carta .juego__giro, .juego__opciones--vuelta .juego__carta .juego__giro > * { animation: none !important; transform: none; }
  .juego__dorso { display: none; }
  .juego__opciones--vuelta .juego__carta:not(.juego__carta--elegida) { opacity: .25; transition: opacity .25s ease; }
  .juego__frente { transition: none; }
  .juego__naipe-grande, .juego__brillo, .juego__resplandor, .juego__reparto-texto { animation: none; }
  .juego__reparto { display: none; }
  .juego__reparto--breve { display: flex; }
  .juego__pantalla--capitulo { --espera: 0s; }
}
@keyframes juego-fundido { from { opacity: 0; } to { opacity: 1; } }
/* Sin el botón flotante de WhatsApp en el juego (Haik, 23/10). */
.juego-pagina .whatsapp { display: none; }
@media (prefers-reduced-motion: reduce) { .juego__naipe, .juego__texto { animation: none; } }

/* ---------- Armador de gemas (decisión 73): el anillo dibujado con sus gemas, como en pedidos-clientes ---------- */
.armador { display: flex; flex-direction: column; gap: 10px; }
.armador__ayuda { margin: 0 0 4px; padding-left: 12px; border-left: 2px solid var(--dorado); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--claro); } /* Haik, 1/11: que se note; cursiva editorial con filete dorado (opción 2) */
.armador__filas { display: flex; flex-direction: column; gap: 2px; scroll-margin-top: 84px; } /* al aplicar, la pantalla sube hasta acá; la cabecera fija no lo tapa */
/* La tira: las gemas en su posición sobre la cinta, pegaditas; entran todas sin scroll (se achican con la cantidad). */
.armador [hidden] { display: none !important; }
/* Cada gema es un ítem flexible de hasta 44 px que se achica parejo con las demás hasta que la fila entra entera. */
.armador__tira { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 14px 12px 6px; }
.armador--separadas .armador__tira { gap: 12px; }
.armador__cinta { position: absolute; left: 6%; right: 6%; top: calc(50% - 7px); height: 1px; background: rgba(246,243,236,.35); }
.armador__gema { position: relative; flex: 0 1 44px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--claro-3); font-family: var(--sans); font-size: 10px; }
.armador__cuerpo { display: block; width: 100%; aspect-ratio: var(--ratio, 1) / 1; border-radius: 50%; overflow: hidden; background: var(--verde); box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s ease; }
.armador__gema--pera .armador__cuerpo { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.armador__gema--oval .armador__cuerpo { border-radius: 50%; }
.armador__gema--princess .armador__cuerpo, .armador__gema--baguette .armador__cuerpo, .armador__gema--esmeralda .armador__cuerpo { border-radius: 4px; }
.armador__cuerpo img, .armador__cuerpo svg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La central más grande, con su talla real. */
.armador__gema--central { flex-basis: 64px; }
.armador__gema[aria-pressed="true"] .armador__cuerpo { box-shadow: 0 0 0 2px var(--dorado), 0 0 18px rgba(185,151,100,.6); }
.armador__gema[aria-pressed="true"] { color: var(--dorado); }
.armador__gema:focus-visible { outline: 1px solid var(--dorado); outline-offset: 3px; }
.armador__bajo-tira { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 22px; }
.armador__toque { margin: 0; text-align: center; font-size: 12px; color: var(--claro-3); }
.armador__restaurar { background: none; border: 0; padding: 4px 0; color: var(--dorado); font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid rgba(185,151,100,.5); }
.armador__restaurar:hover { color: var(--claro); }
/* El recuadro de la gema tocada: las gemas que entran en esa posición y los tres botones. */
.armador__recuadro { background: #fff; color: var(--verde); border-radius: 8px; padding: 14px 14px 12px; }
.armador__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.armador__gema-titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.armador__espec { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dorado-tinta); text-align: right; }
.armador__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.armador__grupo { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); }
.armador__grupo::after { content: ""; flex: 1; height: 1px; background: var(--dorado-linea); }
.armador__grupo:first-child { margin-top: 0; }
.armador__opcion { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--dorado-linea); border-radius: 8px; background: #fff; color: var(--verde); font-family: var(--sans); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.armador__opcion:hover { border-color: var(--dorado); }
.armador__opcion[aria-pressed="true"] { border-color: var(--dorado); box-shadow: 0 0 0 1px var(--dorado); background: var(--perla); }
/* La gema que ya está puesta en esa posición (Haik, 28/10, opción A en verde): borde verde, tilde en la esquina y "Elegida". */
.armador__opcion--actual { position: relative; background: var(--perla); border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.armador__opcion--actual::after { content: ""; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B99764' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px #fff; }
.armador__opcion--actual .armador__opcion-p::after { content: " · " attr(data-elegida); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.armador__opcion-img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden; }
.armador__opcion-img--pera { border-radius: 40% 40% 50% 50% / 30% 30% 50% 50%; width: 24px; height: 34px; flex-basis: 24px; }
.armador__opcion-img--princess, .armador__opcion-img--baguette, .armador__opcion-img--esmeralda { border-radius: 3px; }
.armador__opcion-img img, .armador__opcion-img svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.armador__opcion-n { font-size: 12px; line-height: 1.2; }
.armador__opcion-p { display: block; font-size: 10px; color: var(--gris); margin-top: 1px; }
.armador__opcion[aria-pressed="true"] .armador__opcion-p { color: var(--dorado-tinta); }
.armador__opcion-q { display: block; font-size: 10px; color: var(--dorado-tinta); }
/* El recuadro con flecha que nace debajo de la gema tocada y pregunta dónde va (Haik, 27/10). --flecha la pone el JS. */
.armador__aplicar { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 10px 10px; background: var(--perla); border: 1px solid var(--dorado); border-radius: 8px; --flecha: 50%; }
.armador__aplicar[hidden] { display: none; }
.armador__aplicar::before { content: ""; position: absolute; top: -7px; left: calc(var(--flecha) - 6px); width: 12px; height: 12px; background: var(--perla); border-left: 1px solid var(--dorado); border-top: 1px solid var(--dorado); transform: rotate(45deg); }
.armador__aplicar-t { margin: 0 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-tinta); }
.armador__aplicar-t b { font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--verde); }
.armador__aplicar-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.armador__btn { height: 40px; padding: 0 16px; border: 1px solid var(--dorado); background: #fff; color: var(--verde); font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.armador__btn--lleno { background: var(--verde); color: var(--claro); border-color: var(--verde); }
.armador__btn[disabled] { opacity: .45; cursor: default; }
.armador__aviso { margin: 0; font-size: 12px; color: #a0522d; }
.armador__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(185,151,100,.35); }
.armador__total span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.armador__total b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; color: var(--claro); white-space: nowrap; }
.armador__total b [data-armador-total] { font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--claro); }
.armador__total b small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--claro-3); margin-right: 2px; }
@media (max-width: 599px) { .armador__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .armador__opcion { padding: 7px 8px; gap: 8px; } .armador__btn { flex: 1 1 100%; } .armador__tira { padding: 12px 2px 6px; gap: 2px; } }

/* "Así queda su anillo" (Haik, 25/10): la ventana de confirmación de las gemas. En computadora, nombre y valor arriba de
   cada gema, unidos por una línea fina; en celular, la lista de renglones. La cinta dorada fina simula el cuerpo del anillo. */
.armador__ver { margin-left: 4px; }
.vista { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-top: 2px solid var(--dorado); padding: 34px 36px 30px; background: #fff; color: var(--verde); font-family: var(--sans); }
.vista::backdrop { background: rgba(8, 26, 21, .78); backdrop-filter: blur(6px); }
.vista__cerrar { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--gris); cursor: pointer; }
.vista__cab { text-align: center; margin-bottom: 22px; }
.vista__cab .eyebrow { color: var(--dorado-tinta); }
.vista__titulo { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 6px 0 4px; color: var(--verde); }
.vista__sub { margin: 0; font-size: 13px; color: var(--gris); }
.vista__filas { display: flex; flex-direction: column; gap: 10px; }
/* Una sola grilla por fila: columnas iguales (--n gemas) y filas compartidas (rótulo, línea, gema, número), así los
   rótulos de distinto alto no desalinean las gemas; con 9 o más gemas la ventana se ensancha y todo se achica un poco. */
.vista--ancha { width: min(1100px, calc(100vw - 32px)); }
.vista__fila { position: relative; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); grid-template-rows: auto 24px 92px 18px; grid-auto-flow: column; justify-items: center; align-items: end; column-gap: 6px; padding: 0 10px; }
.vista__cinta { position: absolute; left: 4%; right: 4%; bottom: 64px; height: 1px; background: var(--dorado); opacity: .8; }
.vista__gema { display: contents; }
.vista__rotulo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: 2px; max-width: 100%; }
.vista__nombre { font-size: 12px; line-height: 1.25; color: var(--verde); }
.vista__valor { font-family: var(--serif); font-size: 16px; color: var(--dorado-tinta); white-space: nowrap; }
.vista__valor .moneda, .vista__li-valor .moneda { font-family: var(--sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.vista__valor--inc { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.vista__linea { width: 1px; height: 18px; background: var(--dorado); opacity: .6; align-self: center; }
.vista__cuerpo { position: relative; z-index: 1; /* por encima de la cinta dorada, que es absoluta (Haik, 27/10) */ display: block; width: 72px; max-width: 100%; aspect-ratio: var(--ratio, 1) / 1; align-self: center; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.vista__gema--central .vista__cuerpo { width: 92px; }
.vista--ancha .vista__nombre { font-size: 11px; }
.vista--ancha .vista__valor { font-size: 14px; }
.vista--ancha .vista__cuerpo { width: 64px; }
.vista--ancha .vista__gema--central .vista__cuerpo { width: 86px; }
.vista__gema--pera .vista__cuerpo { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.vista__gema--princess .vista__cuerpo, .vista__gema--baguette .vista__cuerpo, .vista__gema--esmeralda .vista__cuerpo { border-radius: 4px; }
.vista__cuerpo img, .vista__cuerpo svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vista__num { font-size: 10px; letter-spacing: .14em; color: var(--gris); align-self: end; }
.vista__lista { display: none; list-style: none; margin: 14px 0 0; padding: 0; }
.vista__lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--dorado-linea); font-size: 13px; }
.vista__li-n { width: 20px; font-size: 10px; letter-spacing: .14em; color: var(--gris); }
.vista__li-img { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 26px; }
.vista__li-img--pera { border-radius: 40% 40% 50% 50% / 30% 30% 50% 50%; width: 22px; height: 30px; flex-basis: 22px; }
.vista__li-img--princess, .vista__li-img--baguette, .vista__li-img--esmeralda { border-radius: 3px; }
.vista__li-img img, .vista__li-img svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vista__li-nombre { flex: 1; }
.vista__li-valor { font-family: var(--serif); font-size: 15px; color: var(--dorado-tinta); white-space: nowrap; }
.vista__li-valor--inc { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.vista__pie { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--dorado-linea); }
.vista__pie dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.vista__pie dd { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--verde); }
.vista__pie dd .moneda { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-right: 4px; }
.vista__botones { display: flex; gap: 12px; margin-top: 18px; }
.vista__botones .boton { flex: 1; }
.vista__botones [hidden] { display: none; }
@media (max-width: 640px) {
  .vista { padding: 26px 14px 22px; }
  .vista__titulo { font-size: 26px; }
  .vista__fila { column-gap: 3px; padding: 0; grid-template-rows: 56px 16px; }
  .vista--ancha { width: calc(100vw - 32px); }
  .vista__rotulo, .vista__linea { display: none; }
  .vista__cuerpo, .vista--ancha .vista__cuerpo { width: 38px; }
  .vista__gema--central .vista__cuerpo, .vista--ancha .vista__gema--central .vista__cuerpo { width: 54px; }
  .vista__cinta { bottom: 44px; }
  .vista__lista { display: flex; flex-direction: column; }
  .vista__botones { flex-direction: column; }
}

/* La guía con IA · diseño A "Clásica verde" (referencias/Chat/chat-opcion-a.html, paso 7). */
.guia-boton { position: fixed; right: 20px; bottom: calc(var(--barra-precio) + 16px + env(safe-area-inset-bottom) + 56px); height: 46px; padding: 0 18px 0 14px; border-radius: 23px; border: 1px solid #B99764; background: #0F2A22; color: #B99764; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; z-index: 60; font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 12px 30px rgba(15, 42, 34, .22); transition: transform .15s ease; }
.guia-boton span { line-height: 1; color: #F6F3EC; }
.guia-boton--activa::after { content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #3DBE6C; border: 2px solid #FBFAF6; box-shadow: 0 0 0 0 rgba(61, 190, 108, .6); animation: guia-luz 2s ease-out infinite; }
@keyframes guia-luz { 0% { box-shadow: 0 0 0 0 rgba(61, 190, 108, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 190, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 190, 108, 0); } }
@media (prefers-reduced-motion: reduce) { .guia-boton--activa::after { animation: none; } }
.guia-sigo { position: fixed; right: 20px; bottom: calc(var(--barra-precio) + 16px + env(safe-area-inset-bottom) + 56px + 54px); z-index: 60; max-width: 240px; background: #FFF; border: 1px solid #E2D8C6; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: #1C2420; box-shadow: 0 12px 30px rgba(15, 42, 34, .16); cursor: pointer; animation: guia-entra .3s ease-out; }
.guia-sigo[hidden] { display: none; }
@media (max-width: 600px) { .guia-sigo { right: 16px; } }
.guia-boton:hover { transform: translateY(-1px); }
.guia-boton[hidden] { display: none; }
.guia { position: fixed; right: 20px; bottom: 20px; width: 390px; max-width: calc(100vw - 32px); height: 700px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #FBFAF6; border: 1px solid #E2D8C6; border-radius: 28px; overflow: hidden; z-index: 70; box-shadow: 0 20px 50px rgba(15, 42, 34, .18); font-family: var(--sans); color: #1C2420; }
.guia[hidden] { display: none; }
.guia__cab { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; background: #0F2A22; color: #F6F3EC; }
.guia__monograma { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid #B99764; display: grid; place-items: center; }
.guia__cab-textos { flex: 1; min-width: 0; }
.guia__titulo { font-family: var(--serif); font-size: 21px; line-height: 1; font-weight: 400; }
.guia__subtitulo { font-size: 11px; color: #B99764; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.guia__cerrar { background: none; border: 0; color: #F6F3EC; cursor: pointer; padding: 6px; display: grid; place-items: center; border-radius: 50%; }
.guia__cerrar:hover { background: rgba(255, 255, 255, .08); }
.guia__mensajes { flex: 1; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.guia__mensajes > * { flex-shrink: 0; }
.guia__privacidad { align-self: center; font-size: 10px; color: #8A8F8B; text-align: center; max-width: 260px; line-height: 1.4; margin: 0 0 4px; }
.guia__burbuja { max-width: 82%; padding: 11px 14px; font-size: 14px; line-height: 1.45; border-radius: 4px 16px 16px 16px; background: #FFFFFF; border: 1px solid #E7E0D2; color: #1C2420; align-self: flex-start; }
.guia__burbuja b { font-weight: 600; color: #0F2A22; }
.guia__burbuja em { font-style: italic; }
.guia__burbuja--cliente b { color: #B99764; }
.guia__burbuja--cliente { align-self: flex-end; background: #0F2A22; color: #F6F3EC; border-color: #0F2A22; border-radius: 16px 4px 16px 16px; max-width: 78%; }
.guia__burbuja--espera { color: #8A8F8B; font-style: italic; }
.guia__burbuja--entra { animation: guia-entra .22s ease-out; }
@keyframes guia-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guia__burbuja--entra { animation: none; } .guia__mensajes { scroll-behavior: auto; } }
.guia__tarjetas { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.guia__tarjeta { flex: 0 0 150px; display: block; background: #FFF; border: 1px solid #E2D8C6; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; padding-bottom: 11px; }
.guia__tarjeta-foto { background: #F6F1E6; display: flex; justify-content: center; align-items: center; padding: 8px; height: 100px; }
.guia__tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.guia__tarjeta-categoria { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7A6544; padding: 9px 10px 0; line-height: 1.3; }
.guia__tarjeta-nombre { font-family: var(--serif); font-size: 17px; color: #0F2A22; padding: 3px 10px 0; line-height: 1.15; }
.guia__tarjeta-desde { font-size: 10px; color: #7A6544; padding: 2px 10px 0; }
.guia__tarjeta-desde b { font-size: 13px; color: #8C6A3A; font-weight: 600; }
.guia__tarjeta-porque { font-size: 11px; color: #55605A; padding: 5px 10px 0; line-height: 1.35; }
.guia__tarjeta-ver { font-size: 11px; color: #0F2A22; margin: 7px 10px 0; border-bottom: 1px solid #B99764; display: inline-block; }
.guia__enlace { align-self: flex-start; display: flex; gap: 10px; align-items: center; max-width: 86%; background: #FFF; border: 1px solid #E2D8C6; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; }
.guia__enlace img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 64px; display: block; }
.guia__enlace--sin-foto .guia__enlace-cuerpo { padding-left: 12px; }
.guia__enlace-cuerpo { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px 8px 0; min-width: 0; }
.guia__enlace-titulo { font-family: var(--serif); font-size: 16px; line-height: 1.15; color: #0F2A22; }
.guia__enlace-leer { font-size: 11px; color: #0F2A22; border-bottom: 1px solid #B99764; align-self: flex-start; }
.guia__whatsapp { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #0F2A22; border: 1px solid #CFC6B4; border-radius: 20px; padding: 7px 12px; background: #FFF; text-decoration: none; }
.guia__pie { display: flex; gap: 10px; align-items: center; padding: 12px 14px 16px; border-top: 1px solid #E7E0D2; background: #FBFAF6; }
.guia__pie input { flex: 1; min-width: 0; border: 1px solid #D6CDBB; border-radius: 22px; padding: 11px 16px; font: inherit; font-size: 16px; color: #1C2420; background: #FFF; } /* 16px: con menos, el iPhone hace zoom al tocar el campo */
.guia__pie input::placeholder { color: #9A9E9B; }
.guia__pie input:focus { outline: none; border-color: #B99764; }
.guia__enviar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 0; background: #0F2A22; color: #B99764; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 600px) {
  .guia { right: 0; bottom: auto; top: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  html.guia-abierta, html.guia-abierta body { overflow: hidden; height: 100%; }
  .guia__cab { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .guia__pie { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .guia-boton { right: 16px; }
}
/* Menú armado desde el panel (decisión 82): foto chica en celular, etiqueta "Nuevo" y foto con foco en las tarjetas. */
.menu a.menu__con-foto { display: flex; align-items: center; gap: 14px; }
.menu__foto { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 4px; background: var(--crema); }
.menu__foto--chica { width: 32px; height: 32px; flex-basis: 32px; }
.menu__nuevo { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--dorado); color: var(--verde); font-family: var(--sans); font-size: 9px; font-style: normal; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.barra__lista > li > a .menu__nuevo { margin-left: 4px; font-size: 8px; }
.submenu__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- "Para toda la vida": tambor plano de cuatro tarjetas (decisión 84) ---------- */
.vida { text-align: center; overflow: hidden; --tambor-ancho: 320px; --tambor-alto: 400px; --tambor-radio: .88; } /* radio < ancho: las de los costados quedan apenas metidas bajo la principal (Haik, 27/10) */
.vida__eyebrow { color: var(--dorado-tinta); }
.vida__titulo { margin: 8px 0 28px; }
/* Sin JavaScript: una tira que se desliza con el dedo. */
.tambor { position: relative; }
.tambor__eje { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter); }
.tambor__eje::-webkit-scrollbar { display: none; }
.tambor__tarjeta { position: relative; flex: 0 0 var(--tambor-ancho); width: var(--tambor-ancho); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; scroll-snap-align: center; background: var(--verde); box-shadow: 0 18px 48px rgba(15, 42, 34, .22); }
.tambor__tarjeta img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; filter: contrast(1.12) brightness(.96) saturate(1.05); /* el velo claro de las fotos es a propósito, para que las letras se lean; apenas se suaviza (Haik, 27/10) */ }
.tambor__velo { position: absolute; inset: 0; background: var(--verde); opacity: 0; pointer-events: none; }
.tambor__tarjeta figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 20px 22px; background: linear-gradient(to top, rgba(14, 24, 20, .88) 0%, rgba(14, 24, 20, .55) 38%, rgba(14, 24, 20, 0) 100%); color: #fff; font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.08; letter-spacing: .01em; text-align: left; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.tambor__tarjeta figcaption::before { content: ""; display: block; width: 28px; height: 1px; background: var(--dorado); margin-bottom: 12px; } /* filete dorado (opción 2, Haik 27/10) */
.tambor__puntos { display: none; justify-content: center; gap: 8px; margin-top: 22px; }
.tambor__punto { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--dorado); background: none; padding: 0; cursor: pointer; }
.tambor__punto.es-activo { background: var(--dorado); }
/* Con JavaScript: el tambor. Las tarjetas se superponen en el centro y el JS las reparte sobre el círculo. */
.js .tambor { height: var(--tambor-alto); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.js .tambor.es-arrastre { cursor: grabbing; }
.js .tambor__eje { position: absolute; left: 50%; top: 0; width: var(--tambor-ancho); height: var(--tambor-alto); margin-left: calc(var(--tambor-ancho) / -2); display: block; overflow: visible; padding: 0; }
.js .tambor__tarjeta { position: absolute; inset: 0; width: auto; aspect-ratio: auto; will-change: transform; }
.js .tambor__puntos { display: flex; }
@media (max-width: 640px) { .vida { --tambor-ancho: 60vw; --tambor-alto: 75vw; --tambor-radio: .86; } .tambor__tarjeta figcaption { font-size: 21px; padding: 64px 14px 14px; } .tambor__tarjeta figcaption::before { margin-bottom: 9px; } }
@media (prefers-reduced-motion: reduce) { .js .tambor__tarjeta { transition: none; } }
/* Aviso de configuración retomada (mientras la pestaña siga abierta, la web recuerda la última elección de cada pieza). */
.acordeon__retomada { grid-column: 1 / -1; margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(185, 151, 100, .45); background: rgba(185, 151, 100, .08); font-size: 12.5px; color: var(--claro); }
.acordeon__retomada a { color: var(--dorado); text-decoration: underline; text-underline-offset: 3px; }

/* Autores del blog (decisión 86): firma arriba, caja al pie y página del autor. */
.articulo-pagina__cabecera a[rel="author"] { color: var(--dorado-tinta); border-bottom: 1px solid var(--dorado-linea); }
.autor-caja { max-width: 760px; margin: 40px auto 0; padding: 26px 24px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px 22px; align-items: start; background: var(--perla); border: 1px solid var(--dorado-linea); }
.autor-caja__medallon { display: block; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; text-decoration: none; background: var(--crema); box-shadow: 0 0 0 1px var(--dorado-linea), 0 0 0 4px #fff, 0 0 0 5px var(--dorado-linea); }
.autor-caja__medallon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.autor-caja__inicial { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--serif); font-size: 34px; color: var(--verde); background: var(--crema); }
.autor-caja__texto { min-width: 0; }
.autor-caja__eyebrow { margin: 0 0 4px; font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--dorado-tinta); }
.autor-caja__nombre { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--verde); }
.autor-caja__nombre a { color: inherit; text-decoration: none; }
.autor-caja__nombre a:hover { border-bottom: 1px solid var(--dorado); }
.autor-caja__cargo { margin: 4px 0 0; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.autor-caja__bio { margin: 12px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--tinta-2); }
.autor-caja__creds { list-style: none; margin: 12px 0 0; padding: 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.autor-caja__creds li { position: relative; padding: 2px 0 2px 18px; }
.autor-caja__creds li::before { content: "—"; position: absolute; left: 0; color: var(--dorado); }
.autor-caja__enlaces { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--sans); font-size: 13px; }
.autor-caja__enlaces a { color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 2px; }
@media (max-width: 520px) { .autor-caja { grid-template-columns: 1fr; padding: 22px 18px; } .autor-caja__medallon { width: 72px; height: 72px; } }
.autor-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.autor-pagina__cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
.autor-pagina__medallon { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--crema); box-shadow: 0 0 0 1px var(--dorado-linea), 0 0 0 6px #fff, 0 0 0 7px var(--dorado-linea); margin-bottom: 8px; }
.autor-pagina__medallon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.autor-pagina__medallon .autor-caja__inicial { font-size: 56px; }
.autor-pagina__cargo { margin: 0; font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-tinta); }
.autor-pagina__cuerpo { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.autor-pagina__bio { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--tinta); }
.autor-pagina__bio p { margin: 0 0 18px; }
.autor-pagina__datos { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.autor-pagina__datos .eyebrow { margin: 0 0 8px; font-size: 10px; }
.autor-pagina__datos ul { list-style: none; margin: 0; padding: 0; }
.autor-pagina__datos li { position: relative; padding: 3px 0 3px 18px; }
.autor-pagina__datos li::before { content: "—"; position: absolute; left: 0; color: var(--dorado); }
.autor-pagina__datos ul, .autor-pagina__datos .autor-pagina__temas, .autor-pagina__datos .autor-pagina__perfiles { margin-bottom: 24px; }
.autor-pagina__temas { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.autor-pagina__temas span { padding: 4px 10px; border: 1px solid var(--dorado-linea); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.autor-pagina__perfiles { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.autor-pagina__perfiles a { color: var(--verde); text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 2px; }
@media (min-width: 820px) { .autor-pagina__cuerpo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; } }
.autor-articulos { max-width: var(--ancho-max); margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--dorado-linea); }
.autor-articulos__cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
.autor-articulos .blog-grilla { gap: 28px 24px; }
.pagina-suelta .autor-articulos { max-width: 1000px; }