/* ══════════════════════════════════════════════════════════════
   corso-ux.css — Método Corso · capa de interacción
   Se carga la ÚLTIMA en todas las páginas. Sobrescribe el sistema
   anterior de botones (fill deslizante) y define:
     1. CTAs: jerarquía primario / secundario / terciario
     2. Header desktop + botón y menú mobile
     3. Hero: entrada en ranura, eje vertical, parallax
     4. Revelados de scroll para cards y titulares
     5. Botones flotantes: visibilidad por scroll
   Personalidad: sobria, arquitectónica, precisa.
   Todo el movimiento se desactiva con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

:root {
  --cx-gold: #a98a62;
  --cx-gold-hi: #c2a47a;
  --cx-gold-light: #d8c4a6;
  --cx-ink: #0a0806;
  --cx-line: rgba(216, 196, 166, 0.24);
  --cx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --cx-ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  --cx-hh: 68px;
}

/* ══════════════════════════════════════════════════════════════
   1. CTAs
   ══════════════════════════════════════════════════════════════ */

/* Base común: anula el fill deslizante heredado */
html body .btn::after,
html body .btn-gold::after,
html body .header-cta::after,
html body .shop-btn::after {
  content: none !important;
  display: none !important;
}
html body .btn,
html body .btn-gold {
  isolation: isolate;
  transition:
    color 0.4s var(--cx-ease),
    background-color 0.4s var(--cx-ease),
    border-color 0.4s var(--cx-ease),
    letter-spacing 0.5s var(--cx-ease),
    transform 0.25s var(--cx-ease) !important;
}
html body .btn:focus-visible,
html body .btn-gold:focus-visible,
html body .header-cta:focus-visible,
html body .shop-btn:focus-visible {
  outline: 1px solid var(--cx-gold-light) !important;
  outline-offset: 4px !important;
}

/* ── 1a. PRIMARIO: bloque de bronce + destello que cruza una vez ── */
html body .btn.btn-gold:not(.cx-demote):not(.cx-card-cta):not(.cx-link),
html body .header-cta {
  color: var(--cx-ink) !important;
  background: var(--cx-gold) !important;
  border: 1px solid var(--cx-gold) !important;
  font-weight: 500 !important;
}
html body .btn.btn-gold:not(.cx-demote):not(.cx-card-cta):not(.cx-link)::before,
html body .header-cta::before {
  /* «Alba»: una franja de luz que sube desde la base del botón */
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -70%;
  height: 70%;
  background: linear-gradient(
    to top,
    rgba(255, 244, 222, 0) 0%,
    rgba(255, 244, 222, 0.5) 55%,
    rgba(255, 244, 222, 0) 100%
  );
  transform: translateY(0);
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  html body .btn.btn-gold:not(.cx-demote):not(.cx-card-cta):not(.cx-link):hover,
  html body .header-cta:hover {
    color: var(--cx-ink) !important;
    background: var(--cx-gold-hi) !important;
    border-color: var(--cx-gold-hi) !important;
    letter-spacing: 0.24em !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 222, 0.55),
      0 10px 30px -12px rgba(169, 138, 98, 0.55) !important;
    transform: none !important;
  }
  html body .btn.btn-gold:not(.cx-demote):not(.cx-card-cta):not(.cx-link):hover::before,
  html body .header-cta:hover::before {
    animation: cxDawn 0.95s var(--cx-ease) both;
  }
}
@keyframes cxDawn {
  from { transform: translateY(0); }
  to   { transform: translateY(-245%); }
}
html body .btn.btn-gold:not(.cx-demote):not(.cx-card-cta):not(.cx-link):active,
html body .header-cta:active {
  transform: scale(0.97) !important;
  background: #8f7350 !important;
}

/* ── 1b. SECUNDARIO: contorno tenue; al pasar, el borde se traza ── */
html body .btn:not(.btn-gold):not(.cx-link),
html body .btn.btn-gold.cx-demote,
html body .btn.btn-gold.cx-card-cta {
  color: var(--cx-gold-light) !important;
  background: transparent !important;
  border: 1px solid var(--cx-line) !important;
}
html body .btn:not(.btn-gold):not(.cx-link)::before,
html body .btn.btn-gold.cx-demote::before,
html body .btn.btn-gold.cx-card-cta::before,
html body .btn:not(.btn-gold):not(.cx-link) > .cx-trace,
html body .btn.btn-gold.cx-demote > .cx-trace,
html body .btn.btn-gold.cx-card-cta > .cx-trace {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 1px solid transparent;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}
html body .btn:not(.btn-gold):not(.cx-link)::before,
html body .btn.btn-gold.cx-demote::before,
html body .btn.btn-gold.cx-card-cta::before {
  top: 0;
  left: 0;
  transition:
    width 0.2s linear 0.2s,
    height 0.2s linear 0s,
    border-color 0s linear 0.4s;
}
.cx-trace {
  bottom: 0;
  right: 0;
  transition:
    width 0.2s linear 0.2s,
    height 0.2s linear 0s,
    border-color 0s linear 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  html body .btn:not(.btn-gold):not(.cx-link):hover,
  html body .btn.btn-gold.cx-demote:hover,
  html body .btn.btn-gold.cx-card-cta:hover {
    color: #f4f1ec !important;
    background: rgba(169, 138, 98, 0.06) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body .btn:not(.btn-gold):not(.cx-link):hover::before,
  html body .btn.btn-gold.cx-demote:hover::before,
  html body .btn.btn-gold.cx-card-cta:hover::before {
    width: 100%;
    height: 100%;
    border-top-color: var(--cx-gold);
    border-right-color: var(--cx-gold);
    transition:
      width 0.2s linear,
      height 0.2s linear 0.2s,
      border-color 0s;
  }
  html body .btn:not(.btn-gold):not(.cx-link):hover > .cx-trace,
  html body .btn.btn-gold.cx-demote:hover > .cx-trace,
  html body .btn.btn-gold.cx-card-cta:hover > .cx-trace {
    width: 100%;
    height: 100%;
    border-bottom-color: var(--cx-gold);
    border-left-color: var(--cx-gold);
    transition:
      width 0.2s linear 0.4s,
      height 0.2s linear 0.6s,
      border-color 0s linear 0.4s;
  }
}
html body .btn:not(.btn-gold):not(.cx-link):active,
html body .btn.btn-gold.cx-demote:active,
html body .btn.btn-gold.cx-card-cta:active {
  transform: scale(0.97) !important;
  border-color: var(--cx-gold) !important;
}
/* CTA dentro de card: misma lógica, más compacto */
html body .btn.btn-gold.cx-card-cta {
  min-height: 40px !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.66rem !important;
}

/* ── 1c. TERCIARIO: enlace con subrayado que crece y flecha que avanza ── */
html body a.btn.cx-link,
html body .shop-btn {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.7em !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.45rem 0 !important;
  color: var(--cx-gold-light) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  transition: color 0.35s var(--cx-ease) !important;
}
html body a.btn.cx-link::before,
html body .shop-btn::before {
  content: "\2192";
  position: static;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.95em;
  letter-spacing: 0;
  color: var(--cx-gold);
  transition: transform 0.45s var(--cx-ease);
}
html body a.btn.cx-link,
html body .shop-btn {
  background-image: linear-gradient(var(--cx-gold), var(--cx-gold)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 28% 1px !important;
  transition:
    color 0.35s var(--cx-ease),
    background-size 0.55s var(--cx-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body a.btn.cx-link:hover,
  html body .shop-btn:hover {
    color: #f4f1ec !important;
    background-size: 100% 1px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body a.btn.cx-link:hover::before,
  html body .shop-btn:hover::before {
    transform: translateX(5px);
  }
}
html body a.btn.cx-link:active,
html body .shop-btn:active {
  transform: none !important;
  background-size: 100% 1px !important;
}

/* ── 1d. CTA del header: primario compacto ── */
html body .header-ctas .btn.btn-gold {
  min-height: 36px !important;
  padding: 0.5rem 1.15rem !important;
  font-size: 0.6rem !important;
}
html body .header-cta {
  font-size: 0.58rem !important;
}

/* ══════════════════════════════════════════════════════════════
   2. HEADER
   ══════════════════════════════════════════════════════════════ */
html body .site-header {
  transition:
    height 0.5s var(--cx-ease),
    background-color 0.5s var(--cx-ease),
    box-shadow 0.5s var(--cx-ease);
  border-bottom-color: transparent;
}
/* Línea inferior que se traza desde el centro al cargar */
html body .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 196, 166, 0.28) 20%,
    rgba(216, 196, 166, 0.28) 80%,
    transparent
  );
  transform: scaleX(0);
  transition: transform 1.4s var(--cx-ease-io) 0.15s;
  pointer-events: none;
  z-index: 2;
}
html.cx-hdr-in body .site-header::after {
  transform: scaleX(1);
}
html.cx-scrolled body .site-header {
  background-color: rgba(4, 4, 4, 0.94);
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.9);
}
@media (min-width: 1280px) and (pointer: fine) {
  html.cx-scrolled body .site-header {
    height: 58px;
  }
  html.cx-scrolled body .site-header .logo-mark {
    width: 38px;
    height: 38px;
  }
  html body .site-header .logo-mark {
    transition: width 0.5s var(--cx-ease), height 0.5s var(--cx-ease);
  }
}

/* Entrada: el emblema gira hasta su eje y el nombre se asienta */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion body .site-header .logo-mark {
    animation: cxMarkIn 1.2s var(--cx-ease) 0.1s backwards;
  }
  html.cx-motion body .site-header .logo-text span {
    display: inline-block;
    animation: cxTrack 1.5s var(--cx-ease) 0.25s backwards;
  }
  html.cx-motion body .site-header .nav-icon,
  html.cx-motion body .site-header .lang-switch,
  html.cx-motion body .site-header .header-ctas,
  html.cx-motion body .site-header .header-cta,
  html.cx-motion body .site-header .mobile-toggle {
    animation: cxDrop 0.9s var(--cx-ease) backwards;
    animation-delay: calc(0.45s + var(--cx-i, 0) * 45ms);
  }
}
@keyframes cxMarkIn {
  from { opacity: 0; transform: rotate(-70deg) scale(0.7); }
  to   { opacity: 1; transform: none; }
}
@keyframes cxTrack {
  from { opacity: 0; letter-spacing: 0.75em; filter: blur(3px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes cxDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* Nav desktop: la etiqueta abre su espaciado al pasar y un rombo
   (motivo de la plomada del hero) marca la página activa.
   Sin subrayado: es el gesto de Anduriñas. */
html body .nav-icon {
  position: relative;
}
html body .nav-icon .nav-label {
  transition: letter-spacing 0.5s var(--cx-ease), color 0.3s;
}
html body .nav-icon svg {
  transition: transform 0.45s var(--cx-ease), color 0.3s;
}
html body .nav-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--cx-gold);
  transform: rotate(45deg) scale(0);
  transition: transform 0.45s var(--cx-ease);
}
@media (hover: hover) and (pointer: fine) {
  html body .nav-icon:hover .nav-label {
    letter-spacing: 0.16em !important;
  }
  html body .nav-icon:hover svg {
    transform: translateY(-2px);
  }
}
html body .nav-icon.active::after {
  transform: rotate(45deg) scale(1);
}
html body .nav-icon.active {
  box-shadow: none !important;
}

/* ── 2b. Botón de menú mobile: escalera de tres trazos ──
   Reposo: tres líneas escalonadas (larga, media, corta).
   Hover/foco: se igualan. Abierto: forman una X y el marco se enciende. */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1600px) {
  html body .mobile-toggle {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    gap: 0 !important;
    border: 1px solid var(--cx-line) !important;
    background: transparent !important;
    transition: border-color 0.4s var(--cx-ease), background-color 0.4s var(--cx-ease);
  }
  html body .mobile-toggle span {
    position: absolute !important;
    right: 11px;
    height: 1px !important;
    background: var(--cx-gold-light) !important;
    opacity: 1 !important;
    transform-origin: center;
    transition:
      width 0.45s var(--cx-ease),
      top 0.35s var(--cx-ease) 0.12s,
      transform 0.4s var(--cx-ease),
      opacity 0.25s !important;
  }
  html body .mobile-toggle span:nth-child(1) { top: 15px; width: 22px !important; }
  html body .mobile-toggle span:nth-child(2) { top: 21px; width: 15px !important; }
  html body .mobile-toggle span:nth-child(3) { top: 27px; width: 8px !important; }
  html body .mobile-toggle:hover span,
  html body .mobile-toggle:focus-visible span {
    width: 22px !important;
  }
  html body .mobile-toggle.open {
    border-color: var(--cx-gold) !important;
    background: rgba(169, 138, 98, 0.08) !important;
  }
  html body .mobile-toggle.open span {
    top: 21px !important;
    width: 22px !important;
    transition:
      width 0.3s var(--cx-ease),
      top 0.3s var(--cx-ease),
      transform 0.45s var(--cx-ease) 0.2s,
      opacity 0.2s !important;
  }
  html body .mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) !important; }
  html body .mobile-toggle.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  html body .mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) !important; }
}

/* ── 2c. Menú mobile: retícula que desciende como una persiana ──
   Mismos enlaces de siempre, colocados en una cuadrícula de 2 columnas
   con líneas de plano. Sin botones flotantes encima. */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1600px) {
  html body .mobile-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 0 !important;
    position: fixed !important;
    inset: var(--cx-hh) 0 0 auto !important;
    width: min(86vw, 420px);
    max-height: none !important;
    height: calc(100dvh - var(--cx-hh));
    padding: 1.25rem 1rem 2.5rem !important;
    border-left: 1px solid rgba(216, 196, 166, 0.16) !important;
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    background: #050505 !important;
    border: 0 !important;
    z-index: 99 !important;
    visibility: hidden;
    clip-path: inset(0 0 0 100%);
    transition:
      clip-path 0.65s var(--cx-ease-io),
      visibility 0s linear 0.65s;
  }
  html body .mobile-menu.open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 0.75s var(--cx-ease-io),
      visibility 0s;
  }
  html body .mobile-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/textura.jpeg") repeat;
    background-size: 380px auto;
    opacity: 0.07;
    pointer-events: none;
  }
  html body .mobile-menu > a {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 78px;
    padding: 1rem 0.8rem 0.8rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(216, 196, 166, 0.12) !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.24rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    line-height: 1.1;
    color: #ece4d8 !important;
    opacity: 0;
    transform: translateX(22px);
    transition:
      opacity 0.3s var(--cx-ease),
      transform 0.3s var(--cx-ease),
      color 0.3s,
      background-color 0.3s;
  }
  html body .mobile-menu > a:nth-of-type(odd) {
    border-right: 1px solid rgba(216, 196, 166, 0.12) !important;
  }
  /* Marca de esquina: pequeño ángulo de plano en cada celda */
  html body .mobile-menu > a::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--cx-gold);
    border-left: 1px solid var(--cx-gold);
    opacity: 0.45;
    transition: width 0.4s var(--cx-ease), height 0.4s var(--cx-ease), opacity 0.3s;
  }
  html body .mobile-menu > a[target="_blank"]::after {
    content: "\2197";
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    color: var(--cx-gold);
    opacity: 0.7;
  }
  html body .mobile-menu > a.active,
  html body .mobile-menu > a[aria-current="page"] {
    color: var(--cx-gold-light) !important;
    background: rgba(169, 138, 98, 0.07) !important;
  }
  html body .mobile-menu > a.active::before,
  html body .mobile-menu > a[aria-current="page"]::before {
    width: 22px;
    opacity: 1;
  }
  html body .mobile-menu > a:active {
    background: rgba(169, 138, 98, 0.12) !important;
  }
  html body .mobile-menu.open > a {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.55s var(--cx-ease),
      transform 0.65s var(--cx-ease),
      color 0.3s,
      background-color 0.3s;
    transition-delay: calc(0.28s + var(--cx-i, 0) * 40ms);
  }
  html body .mobile-menu .mobile-lang {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem !important;
    border-top: 0 !important;
    opacity: 0;
    transition: opacity 0.4s var(--cx-ease);
  }
  html body .mobile-menu.open .mobile-lang {
    opacity: 1;
    transition-delay: 0.7s;
  }
  html.cx-menu-open,
  html.cx-menu-open body {
    overflow: hidden !important;
  }
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce), (pointer: coarse) and (max-width: 1600px) and (prefers-reduced-motion: reduce) {
  html body .mobile-menu,
  html body .mobile-menu > a {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. HERO
   ══════════════════════════════════════════════════════════════ */
html body .hero h1,
html body .metodo-hero h1 {
  opacity: 1 !important;
}
.cx-hero h1 {
  overflow: hidden;
  padding-bottom: 0.08em;
}
.cx-h1-in {
  display: block;
  translate: 0 calc(var(--cxp, 0) * 34px);
}
.cx-hero > .cx-fx {
  translate: 0 calc(var(--cxp, 0) * 46px);
}
/* Eje vertical: una plomada que cae hasta el emblema o el titular */
.cx-axis {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: var(--cx-axis-h, 80px);
  background: linear-gradient(
    to bottom,
    rgba(216, 196, 166, 0),
    rgba(216, 196, 166, 0.45) 75%,
    var(--cx-gold)
  );
  transform-origin: top;
  pointer-events: none;
  z-index: 1;
}
.cx-axis::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  background: var(--cx-gold);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-h1-in {
    animation: cxSlot 1.25s var(--cx-ease) 0.55s backwards;
  }
  html.cx-motion .cx-hero > .cx-fx {
    animation: cxRise 1.1s var(--cx-ease) backwards;
    animation-delay: calc(0.7s + var(--cx-i, 0) * 130ms);
  }
  html.cx-motion .cx-hero .hero-kicker.cx-fx {
    animation: cxFocus 1.2s var(--cx-ease) 0.4s backwards;
  }
  html.cx-motion .cx-axis {
    animation: cxPlumb 1.3s var(--cx-ease-io) 0.15s backwards;
  }
  html.cx-motion .cx-axis::after {
    animation: cxFade 0.6s ease 1.3s backwards;
  }
}
@keyframes cxSlot {
  from { translate: 0 108%; }
  to   { translate: 0 0; }
}
@keyframes cxRise {
  /* Persiana: se descubre de arriba abajo (sin fadeUp, que es de Anduriñas) */
  from { clip-path: inset(0 0 100% 0); opacity: 0.2; }
  to   { clip-path: inset(0 0 -10% 0); opacity: 1; }
}
@keyframes cxFocus {
  from { opacity: 0; filter: blur(6px); letter-spacing: 0.55em; }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes cxPlumb {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   4. REVELADOS DE SCROLL
   Cada familia de contenido tiene su propio gesto:
     trace   → listas y filas (sistema, acordeones, FAQ)
     rise    → cards en bloque
     curtain → imágenes (tienda, autor)
     slot    → titulares H2
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* trace: la línea superior se traza y el contenido se desliza */
  html.cx-motion .cx-trace-r {
    position: relative;
  }
  html.cx-motion .cx-trace-r::after {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--cx-gold), rgba(169, 138, 98, 0.15));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--cx-ease-io);
    transition-delay: var(--cx-d, 0s);
    pointer-events: none;
  }
  html.cx-motion .cx-trace-r > * {
    opacity: 0;
    translate: -18px 0;
    transition:
      opacity 0.9s var(--cx-ease),
      translate 0.9s var(--cx-ease);
    transition-delay: calc(var(--cx-d, 0s) + 0.25s);
  }
  html.cx-motion .cx-trace-r.cx-in::after {
    transform: scaleX(1);
  }
  html.cx-motion .cx-trace-r.cx-in > * {
    opacity: 1;
    translate: 0 0;
  }
  /* El trazo se apaga hasta quedar como línea de plano tenue */
  html.cx-motion .cx-trace-r.cx-done::after {
    opacity: 0.35;
    transition: opacity 1.2s ease, transform 0.6s var(--cx-ease);
  }

  /* rise: la card emerge desde una ranura inferior */
  html.cx-motion .cx-rise-r {
    clip-path: inset(100% 0 0 0);
    translate: 0 28px;
    transition:
      clip-path 1.1s var(--cx-ease-io),
      translate 1.1s var(--cx-ease);
    transition-delay: var(--cx-d, 0s);
  }
  html.cx-motion .cx-rise-r.cx-in {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
  html.cx-motion .cx-rise-r.cx-done {
    clip-path: none;
  }

  /* curtain → «enfoque»: la imagen pasa de desenfocada a nítida
     (la cortina lateral es de Anduriñas) */
  html.cx-motion .cx-curtain-r img {
    filter: blur(14px) saturate(0.4);
    opacity: 0.35;
    scale: 1.06;
    transition:
      filter 1.3s var(--cx-ease),
      opacity 1s var(--cx-ease),
      scale 1.5s var(--cx-ease);
    transition-delay: var(--cx-d, 0s);
  }
  html.cx-motion .cx-curtain-r.cx-in img {
    filter: none;
    opacity: 1;
    scale: 1;
  }

  /* slot: el titular sube desde detrás de una línea */
  html.cx-motion .cx-slot-r {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.6em;
    transition:
      clip-path 1s var(--cx-ease-io),
      translate 1s var(--cx-ease);
    transition-delay: var(--cx-d, 0s);
  }
  html.cx-motion .cx-slot-r.cx-in {
    clip-path: inset(0 0 -20% 0);
    translate: 0 0;
  }
}

/* Cards: foco de luz que sigue al puntero + escuadras en dos esquinas
   que se trazan al pasar (motivo de las celdas del menú).
   Sin línea superior ni elevación: son gestos de Anduriñas. */
html body .card,
html body .obra-card,
html body .psique-articulo,
html body .cx-rail > .sistema-item {
  --cx-c: var(--cx-gold);
  background-image:
    radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), rgba(216, 196, 166, 0.085), transparent 70%),
    linear-gradient(var(--cx-c), var(--cx-c)),
    linear-gradient(var(--cx-c), var(--cx-c)),
    linear-gradient(var(--cx-c), var(--cx-c)),
    linear-gradient(var(--cx-c), var(--cx-c)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100% !important;
  background-size: 100% 100%, 0 1px, 1px 0, 0 1px, 1px 0 !important;
  transition:
    background-size 0.6s var(--cx-ease),
    border-color 0.4s var(--cx-ease),
    box-shadow 0.45s var(--cx-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .card:hover,
  html body .obra-card:hover,
  html body .psique-articulo:hover,
  html body .cx-rail > .sistema-item:hover {
    background-size: 100% 100%, 26px 1px, 1px 26px, 26px 1px, 1px 26px !important;
    transform: none !important;
    box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.95) !important;
  }
  html body .sistema-item .sistema-item-label {
    transition: color 0.35s var(--cx-ease), letter-spacing 0.5s var(--cx-ease);
  }
  html body .sistema-item:hover .sistema-item-label {
    color: var(--cx-gold-light);
    letter-spacing: 0.3em;
  }
  html body .shop-card .shop-thumb {
    overflow: hidden;
  }
  /* El producto se eleva sobre su peana gris y proyecta sombra
     (sin zoom: es el gesto de Anduriñas) */
  html body .shop-card .shop-thumb {
    position: relative;
  }
  html body .shop-card .shop-thumb::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 7%;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent);
    opacity: 0;
    transform: scaleX(0.7);
    transition: opacity 0.6s var(--cx-ease), transform 0.8s var(--cx-ease);
    pointer-events: none;
  }
  html body .shop-card .shop-thumb img {
    transition: translate 0.8s var(--cx-ease) !important;
  }
  html body .shop-card:hover .shop-thumb img {
    translate: 0 -8px;
  }
  html body .shop-card:hover .shop-thumb::after {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. BOTONES FLOTANTES
   Instagram / Asistente: ocultos en el hero, se esconden al bajar,
   vuelven al subir o al detener el scroll.
   Volver arriba: solo a partir del 50 % de la página.
   Menú mobile abierto: ninguno visible.
   ══════════════════════════════════════════════════════════════ */
html body .ig-dm-float,
html body .corso-wrap,
html body .scroll-top-wrap {
  transition:
    opacity 0.45s var(--cx-ease),
    translate 0.5s var(--cx-ease),
    visibility 0s linear 0s !important;
}
html.cx-fl-hide body .ig-dm-float,
html.cx-fl-hide body .corso-wrap:not(.cx-keep),
html:not(.cx-top-show) body .scroll-top-wrap,
html.cx-menu-open body .ig-dm-float,
html.cx-menu-open body .corso-wrap,
html.cx-menu-open body .scroll-top-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  translate: 0 18px;
  transition:
    opacity 0.35s var(--cx-ease),
    translate 0.45s var(--cx-ease),
    visibility 0s linear 0.45s !important;
}

/* Instagram: disco sobrio en la paleta de la marca (sin pulso) */
html body .ig-dm-float {
  width: 50px !important;
  height: 50px !important;
  background: #0b0b0b !important;
  border: 1px solid rgba(216, 196, 166, 0.28) !important;
  color: var(--cx-gold-light) !important;
  animation: none !important;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.85) !important;
}
html body .ig-dm-float svg {
  width: 22px !important;
  height: 22px !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .ig-dm-float:hover {
    transform: translateY(-2px) !important;
    border-color: var(--cx-gold) !important;
    color: #f4f1ec !important;
  }
}

/* Volver arriba: anillo de progreso de lectura */
html body .scroll-top-btn {
  position: relative;
  width: 46px !important;
  height: 46px !important;
  background: #0b0b0b !important;
  border: 1px solid rgba(216, 196, 166, 0.14) !important;
  color: var(--cx-gold-light) !important;
}
/* style.css fija «.scroll-top-btn svg» a 18 px: el anillo necesita
   más especificidad o queda diminuto en una esquina */
html body .scroll-top-btn svg.cx-ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: none !important;
  transform: rotate(-90deg);
  pointer-events: none;
}
.cx-ring circle {
  fill: none;
  stroke: var(--cx-gold);
  stroke-width: 1.2;
  stroke-dasharray: 144.5;
  stroke-dashoffset: calc(144.5 - 144.5 * var(--cx-prog, 0));
}
@media (hover: hover) and (pointer: fine) {
  html body .scroll-top-btn:hover svg:not(.cx-ring) {
    transform: translateY(-2px);
  }
  html body .scroll-top-btn svg:not(.cx-ring) {
    transition: transform 0.4s var(--cx-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ig-dm-float,
  html body .corso-wrap,
  html body .scroll-top-wrap {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   6. DENSIDAD — menos aire vertical entre secciones
   Antes: 256–416 px arriba y abajo de cada sección en desktop.
   Mismo contenido, scroll bastante más corto.
   ══════════════════════════════════════════════════════════════ */
html body .section-full {
  padding-top: clamp(5rem, 11vh, 8.5rem) !important;
  padding-bottom: clamp(5rem, 11vh, 8.5rem) !important;
}
@media (max-width: 760px) {
  html body .section-full {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. CARRILES HORIZONTALES
   Listas y grupos de cards (≥3) se deslizan en horizontal.
   Desktop: el carril sale de la columna de texto y muestra 3–4.
   Mobile: a sangre, con la siguiente tarjeta asomando.
   ══════════════════════════════════════════════════════════════ */
html body .cx-rail {
  --cx-gap: 18px;
  --cx-vis: 3;
  --cx-rw: min(1080px, calc(100vw - 96px));
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--cx-gap) !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: var(--cx-rw) !important;
  max-width: none !important;
  left: 50%;
  margin-left: calc(var(--cx-rw) / -2) !important;
  margin-right: 0 !important;
  padding: 4px 0 6px !important;
  border: 0 !important;
}
html body .cx-rail::-webkit-scrollbar {
  display: none;
}
html body .cx-rail[data-kind="shop"] {
  --cx-vis: 4;
}
html body .cx-rail > * {
  flex: 0 0 calc((100% - (var(--cx-vis) - 1) * var(--cx-gap)) / var(--cx-vis)) !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  scroll-snap-align: start;
}
html body .cx-rail > .sistema-item,
html body .cx-rail > .card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 1.75rem 1.5rem 1.6rem !important;
  border: 1px solid rgba(216, 196, 166, 0.13) !important;
  background-color: #070707 !important;
  transition:
    border-color 0.45s var(--cx-ease),
    background-size 0.7s var(--cx-ease),
    transform 0.45s var(--cx-ease) !important;
}
html body .cx-rail > .sistema-item > :last-child:has(.btn),
html body .cx-rail > .sistema-item > a.btn:last-child,
html body .cx-rail > .card > a.btn:last-child {
  margin-top: auto !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .cx-rail > .sistema-item:hover,
  html body .cx-rail > .card:hover {
    border-color: rgba(216, 196, 166, 0.34) !important;
  }
}
html body .cx-rail:focus-visible {
  outline: 1px solid var(--cx-gold-light);
  outline-offset: 6px;
}

/* Controles: contador, barra de progreso y flechas */
.cx-rail-ctl {
  --cx-rw: min(1080px, calc(100vw - 96px));
  position: relative;
  left: 50%;
  width: var(--cx-rw);
  margin: 1.25rem 0 0 calc(var(--cx-rw) / -2);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-family: "Inter", sans-serif;
}
.cx-rail-ctl[hidden] {
  display: none;
}
.cx-rail-count {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--text-dim, #777064);
  font-variant-numeric: tabular-nums;
  min-width: 4.6em;
}
.cx-rail-count b {
  font-weight: 400;
  color: var(--cx-gold-light);
}
.cx-rail-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(216, 196, 166, 0.14);
  overflow: hidden;
}
.cx-rail-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--cx-thumb, 30%);
  background: var(--cx-gold);
  transform: translateX(var(--cx-pos, 0%));
  transition: transform 0.35s var(--cx-ease), width 0.35s var(--cx-ease);
}
.cx-rail-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(216, 196, 166, 0.22);
  border-radius: 0;
  color: var(--cx-gold-light);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, opacity 0.3s, background-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.cx-rail-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--cx-ease);
}
.cx-rail-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .cx-rail-btn:not(:disabled):hover {
    border-color: var(--cx-gold);
    color: #f4f1ec;
  }
  .cx-rail-btn[data-dir="1"]:not(:disabled):hover svg { transform: translateX(3px); }
  .cx-rail-btn[data-dir="-1"]:not(:disabled):hover svg { transform: translateX(-3px); }
}
.cx-rail-btn:active:not(:disabled) {
  background: rgba(169, 138, 98, 0.12);
}
.cx-rail-btn:focus-visible {
  outline: 1px solid var(--cx-gold-light);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  html body .cx-rail,
  .cx-rail-ctl {
    --cx-rw: calc(100vw - 48px);
  }
  html body .cx-rail {
    --cx-vis: 2;
  }
  html body .cx-rail[data-kind="shop"] {
    --cx-vis: 3;
  }
}
@media (max-width: 760px) {
  html body .cx-rail,
  .cx-rail-ctl {
    --cx-rw: 100vw;
  }
  html body .cx-rail {
    --cx-gap: 12px;
    padding: 4px 20px 6px !important;
    scroll-padding-inline: 20px;
  }
  html body .cx-rail > * {
    flex: 0 0 80vw !important;
  }
  html body .cx-rail[data-kind="shop"] > * {
    flex-basis: 64vw !important;
  }
  .cx-rail-ctl {
    padding: 0 20px;
  }
  html body .cx-rail > .sistema-item,
  html body .cx-rail > .card {
    padding: 1.5rem 1.25rem 1.4rem !important;
  }
}
/* Pista de deslizamiento: una vez, en táctil, al primer carril */
@media (prefers-reduced-motion: reduce) {
  html body .cx-rail {
    scroll-behavior: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   8. HERO POTENTE
   ══════════════════════════════════════════════════════════════ */
/* Compás alrededor del emblema: círculo que se traza y cuatro marcas */
.cx-halo {
  position: absolute;
  width: var(--cx-halo, 300px);
  height: var(--cx-halo, 300px);
  left: var(--cx-hx, 50%);
  top: var(--cx-hy, 0);
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
}
.cx-halo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cx-halo circle {
  fill: none;
  stroke: rgba(216, 196, 166, 0.3);
  stroke-width: 0.6;
  stroke-dasharray: 302;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.cx-halo line {
  stroke: var(--cx-gold);
  stroke-width: 0.8;
}
.cx-halo .cx-halo-dot {
  fill: var(--cx-gold-light);
}
.cx-halo .cx-halo-orbit {
  transform-origin: 50% 50%;
}
.cx-hero h1 {
  position: relative;
}
/* Destello que recorre el titular una vez, tras subir */
.cx-hero h1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 238, 205, 0.95) 50%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-position: 160% 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-halo circle {
    animation: cxDraw 2.2s var(--cx-ease-io) 0.35s backwards;
  }
  html.cx-motion .cx-halo line {
    animation: cxFade 0.8s ease 1.9s backwards;
  }
  html.cx-motion .cx-halo .cx-halo-orbit {
    animation: cxOrbit 60s linear 2.4s infinite;
  }
  html.cx-motion .cx-halo .cx-halo-dot {
    animation: cxFade 0.8s ease 2.4s backwards;
  }
  html.cx-motion .cx-hero h1::after {
    animation: cxShine 1.6s var(--cx-ease) 1.85s both;
  }
  html.cx-motion body .hero.cx-hero::after,
  html.cx-motion body .metodo-hero.cx-hero::after {
    animation: cxWm 2.6s var(--cx-ease) 0.2s backwards !important;
  }
}
@keyframes cxDraw {
  from { stroke-dashoffset: 302; }
  to   { stroke-dashoffset: 0; }
}
@keyframes cxOrbit {
  to { transform: rotate(360deg); }
}
@keyframes cxShine {
  0%   { opacity: 1; background-position: 160% 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}
@keyframes cxWm {
  from { filter: blur(14px) opacity(0); scale: 1.12; }
  to   { filter: blur(0) opacity(1); scale: 1; }
}

/* ══════════════════════════════════════════════════════════════
   9. CTAs — destello al entrar en pantalla y pulso al tocar
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion body .btn.btn-gold.cx-glint:not(.cx-demote):not(.cx-card-cta):not(.cx-link)::before {
    animation: cxDawn2 1.2s var(--cx-ease) 0.45s both;
  }
  html.cx-motion body .cx-hero .btn.btn-gold.cx-glint::before {
    animation-delay: 2.3s;
  }
  html.cx-motion.cx-hdr-in body .header-ctas .btn.btn-gold::before,
  html.cx-motion.cx-hdr-in body .header-cta::before {
    animation: cxDawn2 1.2s var(--cx-ease) 1.5s both;
  }
  /* Pulso: anillo que se expande desde el botón al pulsarlo */
  html body .btn.cx-press,
  html body .header-cta.cx-press,
  html body .shop-btn.cx-press,
  html body .cx-rail-btn.cx-press {
    animation: cxPulse 0.6s var(--cx-ease) both;
  }
  html body a.btn.cx-link.cx-press::before,
  html body .shop-btn.cx-press::before {
    transform: translateX(6px);
  }
}
@keyframes cxDawn2 {
  from { transform: translateY(0); }
  to   { transform: translateY(-245%); }
}
@keyframes cxPulse {
  from { outline: 1px solid rgba(216, 196, 166, 0.75); outline-offset: 0; }
  to   { outline: 1px solid rgba(216, 196, 166, 0); outline-offset: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   10. HEADER — textura y emblema
   ══════════════════════════════════════════════════════════════ */
html body .site-header {
  background-image:
    linear-gradient(rgba(6, 6, 6, 0.86), rgba(6, 6, 6, 0.86)),
    url("/textura.jpeg") !important;
  background-size: auto, 420px auto !important;
  background-repeat: repeat !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .site-header .logo-mark {
    transition: transform 0.9s var(--cx-ease), width 0.5s var(--cx-ease), height 0.5s var(--cx-ease);
  }
  html body .site-header .logo-text:hover .logo-mark {
    transform: rotate(-14deg);
  }
}

/* Flotantes por encima del aviso de cookies mientras está abierto */
html.cc-open:not(.cx-fl-hide):not(.cx-menu-open) body .ig-dm-float,
html.cc-open:not(.cx-fl-hide):not(.cx-menu-open) body .corso-wrap {
  translate: 0 calc(-1 * var(--cc-h, 0px));
}
html.cc-open.cx-top-show:not(.cx-menu-open) body .scroll-top-wrap {
  translate: 0 calc(-1 * var(--cc-h, 0px));
}

/* Carril con desbordamiento en desktop: alineado con el texto,
   sangra hasta el borde derecho y deja asomar la siguiente tarjeta */
@media (min-width: 1025px) {
  html body .cx-rail.cx-flow {
    --cx-vis: 3.3;
    left: 0;
    width: calc(50vw + 50% - 40px) !important;
    margin-left: 0 !important;
  }
  html body .cx-rail.cx-flow[data-kind="shop"] {
    --cx-vis: 4.3;
  }
  .cx-rail-ctl.cx-flow {
    left: 0;
    width: 100%;
    margin-left: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   11. TIENDA — barra de promoción compacta en mobile
   Mismo texto; ocupaba casi media pantalla en un móvil.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html body .promo-bar {
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .promo-bar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.35rem 0.75rem !important;
    padding-right: 1.6rem;
  }
  html body .promo-bar-text {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }
  html body .promo-bar-how {
    font-size: 0.64rem !important;
    line-height: 1.35 !important;
    margin-top: 0.2rem;
    opacity: 0.85;
  }
  html body .promo-bar-cta {
    font-size: 0.6rem !important;
    padding: 0.5rem 0.7rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap;
  }
}
html.cx-menu-open body .promo-bar {
  visibility: hidden;
}
/* Flotantes por encima de la barra de promoción */
html:has(.promo-bar.visible):not(.cx-fl-hide) body .ig-dm-float,
html:has(.promo-bar.visible):not(.cx-fl-hide) body .corso-wrap,
html:has(.promo-bar.visible).cx-top-show body .scroll-top-wrap {
  translate: 0 -78px;
}
@media (max-width: 760px) {
  html body .promo-bar-inner {
    position: relative;
  }
  html body .promo-bar-close {
    position: absolute !important;
    top: -0.15rem;
    right: -0.35rem;
    width: 32px;
    height: 32px;
    padding: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   12. TIENDA — fondo gris en las fotos de producto
   Las fotos traen fondo blanco; con darken sobre gris el blanco
   pasa a gris y el producto conserva su color.
   ══════════════════════════════════════════════════════════════ */
/* Peana gris clara bajo el mockup blanco. Los mockups
   son cuadrados con mucho margen: en 4:5 con «cover» se recorta solo
   aire lateral y el producto ocupa más tarjeta. */
html body .shop-thumb {
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  /* Blanco roto, el marfil de la marca (antes gris #d3cfc8: la foto
     parecía velada) */
  background: #f4f1ec !important;
  background-image: radial-gradient(120% 95% at 50% 32%, #f8f6f2 0%, #ece8e1 100%) !important;
}
html body .shop-thumb img {
  /* darken (no multiply): solo el blanco del mockup toma el gris de la
     peana; el producto conserva su color y su contraste reales */
  mix-blend-mode: darken;
  padding: 0 !important;
  object-fit: cover !important;
  filter: none !important;
}
/* Mockups recortados (.webp con transparencia): el fondo blanco ya no
   existe, así que no hace falta fundir. Con «darken» todo lo que era
   más claro que la peana (el texto «Ante lucem», los haces de luz) se
   aplanaba al gris y la foto parecía llevar un velo. */
html body .shop-thumb img[src$=".webp"] { mix-blend-mode: normal; }

/* ══════════════════════════════════════════════════════════════
   13. MENÚ MOBILE — mismo dibujo de elipses que el footer
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1600px) {
  html body .mobile-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23c4ad8c' stroke-width='0.65'%3E%3Cellipse cx='300' cy='640' rx='36' ry='22' transform='rotate%28-12 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='82' ry='46' transform='rotate%28-10 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='140' ry='76' transform='rotate%28-8 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='210' ry='108' transform='rotate%28-6 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='292' ry='140' transform='rotate%28-5 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='386' ry='172' transform='rotate%28-4 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='492' ry='204' transform='rotate%28-3 300 640%29'/%3E%3Cellipse cx='300' cy='640' rx='610' ry='236' transform='rotate%28-2 300 640%29'/%3E%3Cellipse cx='70' cy='150' rx='30' ry='18' transform='rotate%2814 70 150%29'/%3E%3Cellipse cx='70' cy='150' rx='72' ry='40' transform='rotate%2811 70 150%29'/%3E%3Cellipse cx='70' cy='150' rx='128' ry='66' transform='rotate%288 70 150%29'/%3E%3Cellipse cx='70' cy='150' rx='196' ry='96' transform='rotate%286 70 150%29'/%3E%3Cellipse cx='70' cy='150' rx='276' ry='126' transform='rotate%284 70 150%29'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    transform: scale(1.08);
    transition: transform 1.6s var(--cx-ease), opacity 1.2s ease;
  }
  html body .mobile-menu.open::after {
    transform: none;
  }
  html body .mobile-menu > a,
  html body .mobile-menu .mobile-lang {
    position: relative;
    z-index: 1;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. ACCESIBILIDAD — panel y modos
   ══════════════════════════════════════════════════════════════ */
.cx-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  padding: 0.7rem 1.1rem;
  background: var(--cx-gold);
  color: var(--cx-ink);
  font: 500 0.75rem/1 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--cx-ease);
}
.cx-skip:focus {
  transform: none;
  outline: 2px solid #f4f1ec;
  outline-offset: 2px;
}

/* Botón de apertura en el header (junto a las banderas) */
html body .cx-a11y-open.cx-a11y-hdr {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 0.15rem;
  background: transparent;
  border: 1px solid rgba(216, 196, 166, 0.22);
  border-radius: 0;
  color: var(--cx-gold-light);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
html body .cx-a11y-open.cx-a11y-hdr[aria-expanded="true"],
html body .cx-a11y-open.cx-a11y-hdr:hover {
  border-color: var(--cx-gold);
  color: #f4f1ec;
  background: rgba(169, 138, 98, 0.1);
}
.cx-a11y-slot {
  display: flex;
  align-items: center;
  margin-left: 0.75rem;
}
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1600px) {
  /* En mobile el acceso está dentro del menú */
  html body .site-header .lang-switch .cx-a11y-hdr {
    display: none;
  }
}
/* Botón dentro del menú mobile: ocupa la fila de idiomas */
html body .mobile-menu .cx-a11y-open.cx-a11y-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 38px;
  padding: 0 0.9rem;
  margin-right: 0.4rem;
  background: transparent;
  border: 1px solid rgba(216, 196, 166, 0.3);
  border-radius: 0;
  color: var(--cx-gold-light);
  font: 400 0.62rem/1 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Panel */
.cx-a11y {
  position: fixed;
  top: calc(var(--cx-hh, 68px) + 10px);
  right: 16px;
  z-index: 100001;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--cx-hh, 68px) - 30px);
  overflow-y: auto;
  padding: 1.1rem 1.1rem 1rem;
  background: #080808;
  background-image: linear-gradient(rgba(8, 8, 8, 0.9), rgba(8, 8, 8, 0.9)), url("/textura.jpeg");
  background-size: auto, 380px auto;
  border: 1px solid rgba(216, 196, 166, 0.22);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  font-family: "Inter", sans-serif;
  color: #ece6dc;
}
.cx-a11y[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cx-a11y:not([hidden]) {
    animation: cxPanel 0.45s var(--cx-ease) both;
  }
}
@keyframes cxPanel {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (max-width: 760px) {
  .cx-a11y {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 85dvh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
  }
}
.cx-a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(216, 196, 166, 0.14);
}
.cx-a11y-head strong {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
}
.cx-a11y-x {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid rgba(216, 196, 166, 0.2);
  border-radius: 0;
  color: #ece6dc;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cx-a11y-opt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 3.4rem 0.7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(216, 196, 166, 0.1);
  border-radius: 0;
  color: #ece6dc;
  font: 400 0.86rem/1.35 "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
}
.cx-a11y-main {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.cx-a11y-main .cx-a11y-l {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  color: #f4f1ec;
}
.cx-a11y-d {
  flex-basis: 100%;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #b9ad9b;
}
/* Interruptor */
.cx-a11y-opt i {
  position: absolute;
  right: 0;
  top: 50%;
  width: 38px;
  height: 20px;
  margin-top: -10px;
  border: 1px solid rgba(216, 196, 166, 0.4);
  transition: background-color 0.3s, border-color 0.3s;
}
.cx-a11y-opt i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: #b9ad9b;
  transition: transform 0.35s var(--cx-ease), background-color 0.3s;
}
.cx-a11y-opt[aria-checked="true"] i {
  background: rgba(169, 138, 98, 0.25);
  border-color: var(--cx-gold);
}
.cx-a11y-opt[aria-checked="true"] i::after {
  transform: translateX(18px);
  background: var(--cx-gold-light);
}
.cx-a11y-tts {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.cx-a11y-play,
.cx-a11y-stop,
.cx-a11y-reset {
  min-height: 42px;
  padding: 0.5rem 0.9rem;
  border-radius: 0;
  font: 400 0.64rem/1.2 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.cx-a11y-play {
  flex: 1;
  background: var(--cx-gold);
  border: 1px solid var(--cx-gold);
  color: var(--cx-ink);
}
.cx-a11y-stop {
  background: transparent;
  border: 1px solid rgba(216, 196, 166, 0.35);
  color: #ece6dc;
}
.cx-a11y-stop[hidden] {
  display: none;
}
.cx-a11y-reset {
  width: 100%;
  margin-top: 0.5rem;
  background: transparent;
  border: 0;
  color: #b9ad9b;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cx-a11y button:focus-visible,
.cx-a11y-open:focus-visible {
  outline: 2px solid var(--cx-gold-light);
  outline-offset: 2px;
}
html.cx-a11y-open body .ig-dm-float,
html.cx-a11y-open body .corso-wrap,
html.cx-a11y-open body .scroll-top-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Foco visible en toda la web (teclado) */
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid var(--cx-gold-light);
  outline-offset: 3px;
}

/* ── Modo LECTURA CÓMODA (clase a11y-easy; no es «Lectura Fácil» UNE 153101: cambia la presentación, no la redacción) ──
   Letra sin serifa, más tamaño e interlineado, líneas cortas,
   texto alineado a la izquierda, sin cursivas, más contraste
   y sin movimiento ni marcas de agua decorativas. */
html.a11y-easy {
  --text-muted: #ebe5db !important;
  --text-dim: #cfc6b8 !important;
}
html.a11y-easy body p,
html.a11y-easy body li,
html.a11y-easy body blockquote,
html.a11y-easy body summary,
html.a11y-easy body dd,
html.a11y-easy body label,
html.a11y-easy body .hero-sub,
html.a11y-easy body .hero-copy p,
html.a11y-easy body .exp-body p {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: max(1.05rem, 1em) !important;
  line-height: 1.85 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.06em !important;
  color: #ebe5db !important;
  max-width: 66ch;
}
html.a11y-easy body .section-inner p,
html.a11y-easy body .section-inner li,
html.a11y-easy body .cx-rail p {
  text-align: left !important;
}
html.a11y-easy body em,
html.a11y-easy body i:not([aria-hidden]),
html.a11y-easy body cite {
  font-style: normal !important;
}
html.a11y-easy body h1,
html.a11y-easy body h2,
html.a11y-easy body h3 {
  font-style: normal !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
}
html.a11y-easy body .section-label,
html.a11y-easy body .sistema-item-label,
html.a11y-easy body .hero-kicker {
  letter-spacing: 0.1em !important;
  font-size: 0.8rem !important;
  color: var(--cx-gold-light) !important;
}
html.a11y-easy body .hero::after,
html.a11y-easy body .metodo-hero::after,
html.a11y-easy body .cx-halo,
html.a11y-easy body .cx-axis {
  display: none !important;
}
html.a11y-easy body a:not(.btn):not(.nav-icon):not(.logo-text):not(.shop-btn):not(.header-cta) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ── Texto más grande ── */
html.a11y-big {
  font-size: 118% !important;
}

/* ── Alto contraste ── */
html.a11y-hc {
  --text: #ffffff !important;
  --text-muted: #f2ede6 !important;
  --text-dim: #d9d1c4 !important;
  --border: rgba(255, 255, 255, 0.35) !important;
  --gold: #d1b48a !important;
  --cx-gold: #d1b48a;
  --cx-line: rgba(255, 255, 255, 0.5);
}
html.a11y-hc body p,
html.a11y-hc body li,
html.a11y-hc body span,
html.a11y-hc body summary {
  color: #f2ede6 !important;
}
html.a11y-hc body .hero::after,
html.a11y-hc body .metodo-hero::after {
  display: none !important;
}

/* ── Subrayar enlaces ── */
html.a11y-ul body a:not(.btn):not(.nav-icon):not(.logo-text):not(.shop-btn):not(.header-cta):not(.cx-skip) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ── Reducir animaciones (también activo en lectura fácil) ── */
html.a11y-rm *,
html.a11y-rm *::before,
html.a11y-rm *::after,
html.a11y-easy *,
html.a11y-easy *::before,
html.a11y-easy *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   15. HEADER RESPONSIVE — el nav completo no cabía entre 1025 y
   ~1366 px y cortaba iconos (Instagram, banderas). Hasta 1279 px se
   usa el menú hamburguesa; de 1280 a 1519 px, un nav compacto.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1279px), (pointer: coarse) and (min-width: 1025px) and (max-width: 1600px) {
  html body .site-header .nav-icons { display: none !important; }
  html body .site-header .mobile-toggle { display: flex !important; }
  html body .site-header .header-cta { display: inline-flex !important; }
  html body .site-header .header-ctas { display: none !important; }
  html body .site-header .logo-mark { width: 34px; height: 34px; }
  html body .site-header .logo-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0;
    position: static;
    min-width: 0;
  }
  html body .site-header .logo-text span {
    flex: 1;
    text-align: center;
    position: static;
  }
}
@media (min-width: 1280px) and (max-width: 1519px) and (pointer: fine) {
  html body .site-header { padding: 0 1.25rem !important; }
  html body .site-header .logo-text { letter-spacing: 0.18em; gap: 0.45rem; }
  html body .site-header .logo-mark { width: 40px; height: 40px; }
  html body .site-header .nav-icon { padding: 0 0.38rem !important; min-width: 40px !important; }
  html body .site-header .nav-label { letter-spacing: 0.03em !important; }
  html body .site-header .nav-icons { gap: 0.05rem !important; }
  html body .header-ctas .btn.btn-gold { padding: 0.5rem 0.8rem !important; letter-spacing: 0.12em !important; }
  html body .site-header .lang-switch { gap: 0.25rem; margin-left: 0.3rem; }
  html body .site-header .lang-btn { width: 30px; height: 30px; padding: 0; }
  html body .cx-a11y-open.cx-a11y-hdr { width: 30px; height: 30px; }
}
html body .site-header .logo-text span { white-space: nowrap; }

/* Velo sobre la página cuando el panel lateral está abierto */
.cx-scrim {
  position: fixed;
  inset: var(--cx-hh, 68px) 0 0 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--cx-ease), visibility 0s linear 0.5s;
}
html.cx-menu-open .cx-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--cx-ease), visibility 0s;
}
@media (min-width: 1280px) and (pointer: fine), (min-width: 1601px) {
  .cx-scrim { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   16. DETALLES DELUXE (del Lab, ninguno usado en Famara)
   ══════════════════════════════════════════════════════════════ */

/* Contorno → relleno: las citas se dibujan en trazo y luego se llenan */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-ink-r {
    color: transparent !important;
    -webkit-text-stroke: 0.6px rgba(216, 196, 166, 0.85);
    transition:
      color 1.8s var(--cx-ease) 0.9s,
      -webkit-text-stroke-color 1.2s ease 2.2s !important;
  }
  html.cx-motion .cx-ink-r footer,
  html.cx-motion .cx-ink-r cite {
    -webkit-text-stroke: 0;
  }
  html.cx-motion .cx-ink-r.cx-in {
    color: var(--cx-ink-c, #f4f1ec) !important;
    -webkit-text-stroke-color: rgba(216, 196, 166, 0);
  }
}

/* Contador de los carriles: cifras que ruedan como un cuentakilómetros */
.cx-odo {
  display: inline-flex;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  vertical-align: bottom;
}
.cx-odo > span {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s var(--cx-ease);
}
.cx-odo > span > b {
  display: block;
  height: 1.2em;
  font-weight: 400;
  color: var(--cx-gold-light);
}

/* Retrato del autor: se revela en iris, desde un círculo */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-iris-r img {
    clip-path: circle(0% at 50% 38%);
    scale: 1.08;
    transition:
      clip-path 1.8s var(--cx-ease-io),
      scale 2.2s var(--cx-ease);
  }
  html.cx-motion .cx-iris-r.cx-in img {
    clip-path: circle(85% at 50% 38%);
    scale: 1;
  }
  html.cx-motion .cx-iris-r.cx-done img {
    clip-path: none;
  }
}

/* Firma: el pie del autor se escribe de izquierda a derecha y una
   rúbrica se traza debajo */
.cx-sign-r {
  position: relative;
  display: inline-block;
}
.cx-rubric {
  display: block;
  width: min(240px, 80%);
  height: 18px;
  margin-top: 0.35rem;
  overflow: visible;
}
.cx-rubric path {
  fill: none;
  stroke: var(--cx-gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-sign-r > :not(.cx-rubric) {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.7s cubic-bezier(0.45, 0.05, 0.3, 1) 0.3s;
  }
  html.cx-motion .cx-sign-r.cx-in > :not(.cx-rubric) {
    clip-path: inset(0 -2% 0 0);
  }
  html.cx-motion .cx-sign-r .cx-rubric path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.3s var(--cx-ease-io) 1.8s;
  }
  html.cx-motion .cx-sign-r.cx-in .cx-rubric path {
    stroke-dashoffset: 0;
  }
}

/* Progreso de los diagnósticos: una línea que amanece, con el sol
   avanzando en la punta */
html body .arq-progress-fill,
html body .diag-progress-fill {
  position: relative;
  background: linear-gradient(90deg, rgba(169, 138, 98, 0.25), var(--cx-gold) 70%, #f1d9b3) !important;
  overflow: visible !important;
}
html body .arq-progress-fill::after,
html body .diag-progress-fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #f6e3c3;
  box-shadow:
    0 0 0 3px rgba(246, 227, 195, 0.12),
    0 0 14px 4px rgba(241, 200, 140, 0.45);
}
html body .arq-progress,
html body .diag-progress-bar {
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   17. EASTER EGGS
   ══════════════════════════════════════════════════════════════ */
.cx-egg {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--cc-h, 0px));
  z-index: 100002;
  width: min(440px, calc(100vw - 32px));
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  background: #080808;
  border: 1px solid rgba(216, 196, 166, 0.28);
  border-left: 2px solid var(--cx-gold);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  translate: -50% 16px;
  transition:
    opacity 0.5s var(--cx-ease),
    translate 0.6s var(--cx-ease),
    visibility 0s linear 0.6s;
}
.cx-egg.on {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition:
    opacity 0.5s var(--cx-ease),
    translate 0.6s var(--cx-ease),
    visibility 0s;
}
.cx-egg-q {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.35;
  color: #f4f1ec;
}
.cx-egg-a {
  margin: 0.45rem 0 0;
  font: 400 0.6rem/1.2 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
}
.cx-egg-x {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: #b9ad9b;
  font-size: 1.1rem;
  cursor: pointer;
}

/* El emblema del header da una vuelta completa */
html body .site-header .logo-mark.cx-spin {
  animation: cxSpin 1.6s var(--cx-ease-io) both !important;
}
@keyframes cxSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
/* El compás del hero gira una vez (memento mori) */
.cx-halo.cx-turn svg {
  animation: cxSpin 2.4s var(--cx-ease-io) both;
}

/* Ante lucem: línea en el hero y compás más cálido */
.cx-dawn-line {
  margin: 1.4rem auto 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic;
  font-size: 1.05rem !important;
  color: #f1d9b3 !important;
  letter-spacing: 0.02em;
}
html.cx-antelucem .cx-halo circle {
  stroke: rgba(241, 210, 160, 0.55);
}
html.cx-antelucem .cx-halo .cx-halo-dot {
  fill: #f6e3c3;
}

/* Modo estoico: sin color durante unos segundos.
   El filtro va en <html> (no en <body>) para no romper los fixed. */
html.cx-stoic {
  filter: grayscale(1) contrast(1.06);
}

/* ══════════════════════════════════════════════════════════════
   18. RESEÑAS — reales y con su texto íntegro.
   Cita destacada (extracto literal) + primer párrafo visible
   + resto desplegable. Sin estrellas: no vienen de una plataforma
   de valoración.
   ══════════════════════════════════════════════════════════════ */
.cx-reviews-wrap {
  margin-top: 3rem;
}
html body .cx-rail.cx-reviews {
  align-items: flex-start !important;
}
html body .cx-review {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
  text-align: left;
}
html body .cx-review p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-muted, #b9ad9b);
}
html body .cx-review .cx-review-q {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.32rem !important;
  font-style: italic;
  line-height: 1.35 !important;
  color: #f4f1ec !important;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(216, 196, 166, 0.14);
}
.cx-review-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.35rem 0;
  font: 400 0.64rem/1.2 "Inter", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
  cursor: pointer;
  list-style: none;
}
.cx-review-more summary::-webkit-details-marker {
  display: none;
}
.cx-review-more summary::after {
  content: "+";
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--cx-gold);
  transition: transform 0.4s var(--cx-ease);
}
.cx-review-more[open] summary::after {
  transform: rotate(45deg);
}
.cx-review-more[open] summary {
  margin-bottom: 0.7rem;
}
.cx-review-more p + p {
  margin-top: 0.8rem;
}
@media (prefers-reduced-motion: no-preference) {
  .cx-review-more[open] p {
    animation: cxFade 0.6s ease both;
  }
}
html body .cx-review .cx-review-src {
  margin-top: 0.4rem;
  font: 400 0.6rem/1.2 "Inter", sans-serif !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim, #777064) !important;
}

/* Menú mobile abierto: flotantes fuera al instante y por debajo del menú
   (doble seguro: aunque fallara la visibilidad, quedan tapados) */
html.cx-menu-open body .ig-dm-float,
html.cx-menu-open body .corso-wrap,
html.cx-menu-open body .scroll-top-wrap,
html.cx-menu-open body .corso-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════
   19. CIERRE DE ARTÍCULOS — un solo bloque (antes: «Ante lucem»
   + «Apoya el proyecto» seguidos, con cinco botones)
   ══════════════════════════════════════════════════════════════ */
.cx-cierre-mas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 560px;
  margin: 2.25rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(216, 196, 166, 0.12);
  text-align: left;
}
.cx-cierre-shop {
  margin: 0 !important;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted, #b9ad9b);
  max-width: 300px;
}
.cx-cierre-tag {
  display: block;
  margin-bottom: 0.2rem;
  font: 400 0.6rem/1.2 "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
}
.cx-cierre-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
@media (max-width: 560px) {
  .cx-cierre-mas {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cx-cierre-links {
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   20. SISTEMA DE ALINEACIÓN — un solo eje para toda la web
   Antes: cada bloque tenía su ancho (640/680/720/760) y los títulos
   empezaban en cuatro sitios distintos; los carriles sangraban a la
   derecha. Ahora:
     · Páginas hub: contenedor de 1080 px centrado; cabecera de sección
       (etiqueta + H2 + entradilla) centrada; texto corrido en un bloque
       de 640 px centrado y alineado a la izquierda; cards y carriles
       centrados en el contenedor; CTA principal centrado.
     · Artículos (páginas con .article-nav): columna de lectura de
       720 px centrada, texto a la izquierda.
   ══════════════════════════════════════════════════════════════ */
html body:not(:has(.article-nav)) .section-full > .section-inner {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Cabecera de sección centrada */
html body:not(:has(.article-nav)) .section-full > .section-inner > .section-label,
html body:not(:has(.article-nav)) .section-full > .section-inner > h2,
html body:not(:has(.article-nav)) .section-full > .section-inner > h2 + p,
html body:not(:has(.article-nav)) .section-full > .section-inner > .section-label + p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px;
}
html body:not(:has(.article-nav)) .section-full > .section-inner > .section-label {
  display: block !important;
  position: relative;
}
html body:not(:has(.article-nav)) .section-full > .section-inner > .section-label::after {
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
}
html body:not(:has(.article-nav)) .section-full > .section-inner > .section-label.visible::after {
  transform: translateX(-50%) scaleX(1) !important;
}
/* Texto corrido y bloques de lectura: bloque de 640 centrado, texto a la izquierda */
html body:not(:has(.article-nav)) .section-full > .section-inner > p:not(h2 + p):not(.section-label + p),
html body:not(:has(.article-nav)) .section-full > .section-inner > blockquote,
html body:not(:has(.article-nav)) .section-full > .section-inner > ul,
html body:not(:has(.article-nav)) .section-full > .section-inner > ol,
html body:not(:has(.article-nav)) .section-full > .section-inner > .sistema-list:not(.cx-rail),
html body:not(:has(.article-nav)) .section-full > .section-inner > .exp-list,
html body:not(:has(.article-nav)) .section-full > .section-inner > form,
html body:not(:has(.article-nav)) .section-full > .section-inner > .contacto-form {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body:not(:has(.article-nav)) .section-full > .section-inner > .faq-list {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Cards y carriles: centrados en el contenedor, sin sangrar fuera */
html body .cx-rail,
html body .cx-rail.cx-flow {
  --cx-rw: 100% !important;
  left: auto !important;
  width: 100% !important;
  margin-left: 0 !important;
}
html body .cx-rail.cx-flow {
  --cx-vis: 3.3;
}
.cx-rail-ctl,
.cx-rail-ctl.cx-flow {
  left: auto !important;
  width: 100% !important;
  margin-left: 0 !important;
}
/* En artículos, las cards siguen saliendo de la columna de lectura */
html body:has(.article-nav) .cx-rail {
  --cx-rw: min(1080px, calc(100vw - 48px)) !important;
  left: 50% !important;
  width: var(--cx-rw) !important;
  margin-left: calc(var(--cx-rw) / -2) !important;
}
/* CTA de sección centrado */
html body:not(:has(.article-nav)) .section-full > .section-inner > a.btn:not(.cx-link) {
  display: flex !important;
  width: max-content !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body:not(:has(.article-nav)) .section-full > .section-inner > a.btn.cx-link {
  display: flex !important;
  width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1024px) {
  html body .cx-rail.cx-flow {
    --cx-vis: 2.2;
  }
}
@media (max-width: 760px) {
  /* Mobile: los carriles siguen a sangre, con la siguiente tarjeta asomando */
  html body .cx-rail,
  html body .cx-rail.cx-flow,
  html body:has(.article-nav) .cx-rail {
    --cx-rw: 100vw !important;
    left: 50% !important;
    width: 100vw !important;
    margin-left: -50vw !important;
  }
  .cx-rail-ctl,
  .cx-rail-ctl.cx-flow {
    left: 50% !important;
    width: 100vw !important;
    margin-left: -50vw !important;
  }
}
/* Cabeceras anidadas: bloques interactivos de Estoicismo e intros de la tienda */
html body:not(:has(.article-nav)) .block-head,
html body:not(:has(.article-nav)) .shop-intro {
  text-align: center !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body:not(:has(.article-nav)) .block-head .section-label,
html body:not(:has(.article-nav)) .shop-intro .section-label {
  display: block !important;
  text-align: center !important;
  position: relative;
}
html body:not(:has(.article-nav)) .block-head .section-label::after,
html body:not(:has(.article-nav)) .shop-intro .section-label::after {
  left: 50% !important;
  transform: translateX(-50%) scaleX(1) !important;
}
/* Contenido dentro de acordeones: sin desplazamiento de revelado
   (al estar cerrado nunca «entra» en pantalla y quedaba corrido 18 px) */
html body .exp-body .cx-trace-r > *,
html body details .cx-trace-r > * {
  opacity: 1 !important;
  translate: none !important;
}
html body .exp-body .cx-trace-r::after {
  transform: scaleX(1) !important;
  opacity: 0.35;
}
html body:not(:has(.article-nav)) .block-head > .block-title,
html body:not(:has(.article-nav)) .block-head > .block-sub,
html body:not(:has(.article-nav)) .shop-intro > h2,
html body:not(:has(.article-nav)) .shop-intro > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Psique: los artículos dentro del acordeón heredaban el estilo de cita de
   .exp-body p (cursiva, filete y sangría en cada párrafo) y anulaban su
   propio estilo (.psique-articulo p / .psique-autor). Se respeta el de la página. */
html body .exp-body .psique-articulo p {
  font-family: inherit;
  font-style: normal;
  border-left: 0;
  padding: 0;
  margin-left: 0;
}
html body .exp-body .psique-articulo .psique-autor {
  font-family: "Inter", sans-serif;
}
html body .exp-body .psique-articulo .psique-cierre {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  border-left: 1px solid var(--border-gold);
  padding-left: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   21. HEADER — grupos con aire (desktop) y marca junto al emblema
   (tablet y mobile). Desktop: marca · navegación | utilidades | CTA.
   El CTA pasa al extremo derecho y cada grupo queda separado por
   un filete fino; nada se oculta ni se elimina.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (pointer: fine), (min-width: 1601px) {
  html body .site-header { justify-content: flex-start !important; }
  html body .site-header .nav-icons { order: 1; margin-left: auto !important; }
  html body .site-header .header-ctas {
    order: 2;
    display: flex !important;
    align-items: center;
    margin-left: 0.9rem !important;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(216, 196, 166, 0.18);
    height: 34px;
  }
  html body .site-header .lang-switch {
    margin-left: 0.6rem !important;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(216, 196, 166, 0.18);
    height: 34px;
  }
}
@media (min-width: 1440px) and (pointer: fine), (min-width: 1601px) {
  html body .site-header .nav-icons { gap: 0.3rem !important; }
  html body .site-header .lang-switch { margin-left: 1rem !important; padding-left: 1rem; gap: 0.4rem !important; }
  html body .site-header .header-ctas { margin-left: 1.25rem !important; padding-left: 1.25rem; }
}
@media (min-width: 1800px) {
  html body .site-header .nav-icons { gap: 0.6rem !important; }
}

/* Tablet y mobile (menú hamburguesa): «Método Corso» junto al emblema */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1600px) {
  html body .site-header .logo-text { gap: 0.75rem !important; }
  html body .site-header .logo-text span {
    flex: 0 1 auto !important;
    text-align: left !important;
  }
  html body .site-header .header-cta,
  html body .site-header .header-ctas { margin-left: auto; }
}
@media (max-width: 430px) {
  html body .site-header .logo-text { gap: 0.55rem !important; letter-spacing: 0.15em !important; }
}

/* ══════════════════════════════════════════════════════════════
   22. WATERMARK «CORSO» — cabe entero y centrado. Con 16rem y 0.4em
   de tracking medía ~1400 px y se cortaba la C en desktop y tablet;
   el padding-left compensa el tracking que queda tras la última O.
   ══════════════════════════════════════════════════════════════ */
html body .hero::after,
html body .metodo-hero::after {
  font-size: clamp(3.5rem, 15vw, 13rem) !important;
  letter-spacing: 0.3em !important;
  padding-left: 0.3em !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   23. MANIFIESTO — «Claridad.» como firma en movimiento: la palabra
   se escribe con un borde de tinta suave (máscara, no recorte duro),
   una punta de luz recorre la línea y al final se traza la rúbrica.
   ══════════════════════════════════════════════════════════════ */
.cx-mani-r {
  display: block;
  text-align: center;
  margin: 4.5rem 0 3.5rem;
}
.cx-mani-in {
  position: relative;
  display: inline-block;
  padding: 0 0.15em;
}
html body .cx-mani-r .mani-word {
  display: inline-block;
  margin: 0 !important;
  padding: 0.08em 0.12em 0.12em;
  opacity: 1;
  transform: none;
}
.cx-mani-rub {
  display: block;
  width: 108%;
  height: 22px;
  margin: 0.2rem 0 0 -4%;
  overflow: visible;
}
.cx-mani-rub path {
  fill: none;
  stroke: var(--cx-gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.cx-nib { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-mani-r .mani-word {
    -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 52% 100%);
    mask-image: linear-gradient(90deg, #000 0 40%, transparent 52% 100%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  html.cx-motion .cx-mani-r.cx-in .mani-word {
    animation: cxWrite 2.4s cubic-bezier(0.5, 0.05, 0.35, 1) 0.2s both;
  }
  html.cx-motion .cx-mani-r .cx-nib {
    display: block;
    position: absolute;
    left: 0;
    top: 58%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--cx-gold-light, #d8c4a6);
    box-shadow: 0 0 10px 2px rgba(216, 196, 166, 0.55);
    opacity: 0;
    pointer-events: none;
  }
  html.cx-motion .cx-mani-r.cx-in .cx-nib {
    animation: cxNib 2.4s cubic-bezier(0.5, 0.05, 0.35, 1) 0.2s both;
  }
  html.cx-motion .cx-mani-r .cx-mani-rub path {
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 1.4s var(--cx-ease-io) 2.3s, opacity 0.01s linear 2.3s;
  }
  html.cx-motion .cx-mani-r.cx-in .cx-mani-rub path {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes cxWrite {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes cxNib {
  0%   { left: 2%; top: 62%; opacity: 0; }
  8%   { opacity: 1; }
  30%  { top: 48%; }
  55%  { top: 66%; }
  80%  { top: 50%; opacity: 1; }
  100% { left: 98%; top: 60%; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   30. CONTRASTE — grises secundarios más claros.
   --text-dim (#777064) daba 4,1:1 sobre negro (no llega a AA en
   texto pequeño). Ahora ~6,8:1; --text-muted sube ligeramente.
   ══════════════════════════════════════════════════════════════ */
:root {
  --text-muted: #cbc1b1;
  --text-dim: #a39b8d;
}
html body .footer-nav-articulos { opacity: 1 !important; color: var(--text-dim); }
html body .footer-nav-articulos a { color: var(--text-dim); }
html body .sig-pagina a { opacity: 1 !important; color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════════════
   31. NAV DESKTOP — solo texto, legible. Sin iconos; «Inicio» lo
   cubre el emblema y «Arquitecto» el botón «Diagnóstico gratis»,
   así que en desktop se ocultan (siguen en menú mobile y footer).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (pointer: fine), (min-width: 1601px) {
  html body .site-header .nav-icons { gap: 0.15rem !important; }
  html body .site-header .nav-icon {
    flex-direction: row !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 0.7rem !important;
    background: transparent !important;
  }
  html body .site-header .nav-icon svg { display: none !important; }
  html body .site-header .nav-icon .nav-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    color: var(--text-muted) !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  html body .site-header .nav-icon:hover .nav-label,
  html body .site-header .nav-icon.active .nav-label,
  html body .site-header .nav-icon[aria-current="page"] .nav-label { color: var(--text) !important; }
  html body .site-header .nav-icon::after { bottom: 0; }
  html body .site-header .nav-icons > a.nav-icon:first-child,
  html body .site-header .nav-icon[href*="arquitecto-del-caracter"],
  html body .site-header .nav-icon[href*="character-test"] { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  html body .site-header .nav-icon:hover .nav-label { letter-spacing: 0.2em !important; }
}
@media (min-width: 1280px) and (max-width: 1519px) and (pointer: fine) {
  html body .site-header .nav-icon { padding: 0 0.5rem !important; }
  html body .site-header .nav-icon .nav-label { letter-spacing: 0.1em !important; }
}

/* ══════════════════════════════════════════════════════════════
   32. HOME — hero compacto con CTA visible sin scroll, camino
   Diagnóstico → Sistema → Archivo/Libro, y bloques de cada paso.
   ══════════════════════════════════════════════════════════════ */
html body .hero.hero--home {
  min-height: 0 !important;
  padding-top: calc(var(--cx-hh) + clamp(2.5rem, 7vh, 5rem)) !important;
  padding-bottom: clamp(3rem, 7vh, 5rem) !important;
}
html body .hero--home .hero-logo {
  width: clamp(96px, 13vh, 140px) !important;
  height: auto !important;
  margin-bottom: clamp(1.2rem, 2.6vh, 2rem) !important;
}
html body .hero--home .hero-kicker { margin-bottom: clamp(1rem, 2vh, 1.5rem) !important; }
html body .hero--home h1 { margin-bottom: clamp(1rem, 2.2vh, 1.6rem) !important; }
html body .hero--home .hero-sub { margin-bottom: 0.6rem !important; }
html body .hero--home .hero-copy p {
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  color: var(--text-muted);
  max-width: 34rem;
  margin: 0 auto;
}
html body .hero--home .hero-ctas { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
html body .hero-meta {
  display: block;
  margin: 1rem 0 0 !important;
  font-family: inherit;
  font-size: 0.7rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--text-dim) !important;
}
html body .hero-meta { font-family: var(--font-ui, "Inter", sans-serif) !important; }

/* Número de paso en las etiquetas de sección */
.step-n {
  color: var(--cx-gold);
  margin-right: 0.55em;
  padding-right: 0.7em;
  border-right: 1px solid var(--cx-line);
}

/* 01 · Diagnóstico */
.diag-home { text-align: left; }
.diag-home-txt {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.diag-home-txt > .section-label { grid-column: 1 / -1; }
.diag-home-txt > h2 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; }
.diag-home-txt > p { grid-column: 2; grid-row: 2; margin-top: 0.4rem; }
.diag-home-txt > .diag-home-cta { grid-column: 2; grid-row: 3; }
.diag-home .section-label { text-align: left; }
.diag-home .section-label::after { margin-left: 0 !important; }
.diag-home h2 { text-align: left; }
.diag-home-txt > p { color: var(--text-muted); max-width: 34rem; }
.diag-home-cta { margin-top: 2rem; }
.diag-home-cta .hero-meta { margin-top: 0.9rem; }
/* 03 · Práctica (estoicismo aplicado): texto + lista enlazada a cada
   herramienta de estoicismo.html */
.prac-home {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  text-align: left;
}
.prac-home .section-label { text-align: left; }
.prac-home .section-label::after { margin-left: 0 !important; }
.prac-home h2 { text-align: left; }
.prac-home-txt > p { color: var(--text-muted); max-width: 34rem; }
.prac-home-cta { margin-top: 2rem; }
.prac-home-cta .hero-meta { margin-top: 0.9rem; }
.prac-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cx-line);
}
.prac-list a {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 1.1rem;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--cx-line);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s var(--cx-ease), border-color 0.35s var(--cx-ease), background-color 0.25s;
}
.prac-n { font-size: 0.85rem; color: var(--cx-gold); }
.prac-d { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.prac-go { display: inline-flex; align-self: center; color: var(--cx-gold); transition: transform 0.45s var(--cx-ease); }
.prac-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .prac-list a:hover { color: var(--cx-gold-light); border-bottom-color: var(--cx-gold); }
  .prac-list a:hover .prac-go { transform: translateX(4px); }
}
.prac-list a:active { background: rgba(169, 138, 98, 0.1); }
.prac-list a:focus-visible { outline: 1px solid var(--cx-gold-light); outline-offset: 2px; }
#practica { scroll-margin-top: var(--cx-hh, 68px); }
@media (max-width: 900px) {
  .prac-home { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .prac-list a { grid-template-columns: 1.7rem minmax(0, 1fr) auto; min-height: 64px; align-items: center; }
  .prac-t { grid-column: 2; }
  .prac-d { grid-column: 2; grid-row: 2; margin-top: 0.15rem; }
  .prac-go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .diag-home-txt { display: block; }
  .diag-home-txt > h2 { margin-bottom: 1.4rem; }
}

/* 03 · Archivo y libro */
.libro-home {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  text-align: left;
}
.libro-home .libro-mockup { margin: 0 !important; }
.libro-home .libro-mockup img { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.libro-home .section-label { text-align: left; }
.libro-home .section-label::after { margin-left: 0 !important; }
.libro-home h2 { text-align: left; }
.libro-home-txt > p { color: var(--text-muted); max-width: 34rem; }
.libro-home-note { font-size: 0.95rem; }
.libro-home .libro-ctas { justify-content: flex-start !important; margin-top: 1.8rem; }
.libro-home-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.libro-home-more a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--cx-line); padding-bottom: 2px; }
.libro-home-more a:hover { color: var(--text); border-color: var(--cx-gold); }
@media (max-width: 900px) {
  .libro-home { grid-template-columns: 1fr; }
  .libro-home .libro-mockup img { max-width: 210px; }
}
/* El mockup de Método Corso mide lo mismo que en home en cualquier página */
html body .libro-mockup img[src*="mockup-libro"] { width: 100%; max-width: 300px; height: auto; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  html body .libro-mockup img[src*="mockup-libro"] { max-width: 210px; }
}
/* …y fuera de la home queda centrado (el contenedor es inline-block) */
html body .section-inner > .libro-mockup:has(> img[src*="mockup-libro"]) {
  display: block;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tienda: franja compacta */
html body .shop-strip { padding-top: clamp(2.5rem, 6vh, 4rem) !important; padding-bottom: clamp(2.5rem, 6vh, 4rem) !important; }
.shop-strip-in {
  display: flex;
  align-items: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  padding: 1.6rem 0;
  text-align: left;
}
.shop-strip-in .section-label { margin: 0 !important; }
.shop-strip-in .section-label::after { display: none; }
.shop-strip-in p { flex: 1 1 22rem; margin: 0; color: var(--text-muted); }
.shop-strip-in strong { color: var(--text); font-weight: 400; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; margin-right: 0.4rem; }

/* ══════════════════════════════════════════════════════════════
   33. FIX — subtítulo del hero invisible. style.css parte de
   opacity:0 y confía en su animación heroTexto; la entrada cxRise
   (cx-fx) la sustituye y, al acabar, el texto volvía a 0.
   ══════════════════════════════════════════════════════════════ */
html body .hero-sub:not(.is-changing) {
  opacity: 1;
  transform: none;
}
/* Etiquetas UI de la home en la sans del sistema */
.cf-tab-l, .cf-panel-l, .cf-frag-label, .camino-t, .camino-d, .step-n,
.libro-home-more, .prac-n, .prac-d {
  font-family: var(--font-ui, "Inter", sans-serif);
}
.cf-foot { text-align: center; }
@media (max-width: 900px) {
  html body .libro-home .libro-ctas { flex-direction: column; align-items: stretch !important; }
  html body .libro-home .libro-ctas .btn { width: 100%; text-align: center; }
}

/* Cita de lector junto al libro (extracto literal de una reseña real) */
.libro-quote { margin: 1.8rem 0 0; padding-left: 1.2rem; border-left: 1px solid var(--cx-gold); max-width: 34rem; }
.libro-quote blockquote {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--text);
}
.libro-quote figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.libro-quote figcaption a { color: var(--text-muted); border-bottom: 1px solid var(--cx-line); text-decoration: none; }
.libro-quote figcaption a:hover { color: var(--text); border-color: var(--cx-gold); }

/* ══════════════════════════════════════════════════════════════
   35. CAMINO — línea de tiempo editorial: un filete y un rombo por
   paso (motivo de la plomada). El 01 lleva el rombo relleno: es la
   única marca de «empieza aquí». Cada paso es un enlace a su sección,
   con flecha siempre visible. Al entrar en pantalla la línea se traza
   una vez y los rombos se encienden en orden (solo con cx-motion; con
   «reducir animaciones» aparece ya dibujada).
   Desktop: horizontal. Mobile: filas táctiles con línea vertical.
   ══════════════════════════════════════════════════════════════ */
.camino { padding: clamp(2.5rem, 6vh, 3.5rem) clamp(1.25rem, 4vw, 3rem) 0; }
.camino-list {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.camino-list::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: linear-gradient(90deg, var(--cx-gold) 0%, rgba(169, 138, 98, 0.5) 100%);
  transform-origin: left center;
}
.camino-step a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  padding: 1.7rem 1.5rem 0 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.camino-step a::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  border: 1px solid var(--cx-gold);
  background: #000;
  transform: rotate(45deg);
  transition: background-color 0.4s var(--cx-ease), transform 0.5s var(--cx-ease), opacity 0.5s var(--cx-ease);
}
.camino-step a::before { background: var(--cx-gold); }
.camino-step:nth-child(2) { --cd: 0.6s; }
.camino-step:nth-child(3) { --cd: 1.15s; }
.camino-n {
  grid-row: span 2;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cx-gold);
}
.camino-t {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.camino-d { font-size: 0.86rem; color: var(--text-dim); margin-top: 0.3rem; transition: color 0.35s; }
.camino-go { display: inline-flex; color: var(--cx-gold); transition: transform 0.45s var(--cx-ease); }
.camino-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .camino-step a:hover::before { background: var(--cx-gold-light); transform: rotate(45deg) scale(1.25); }
  .camino-step a:hover .camino-d { color: var(--text-muted); }
  .camino-step a:hover .camino-go { transform: translateY(3px); }
}
.camino-step a:focus-visible { outline: 1px solid var(--cx-gold-light); outline-offset: 6px; }

/* Destinos: que el header fijo no tape la etiqueta de la sección */
#diagnostico, #confrontaciones, #libro { scroll-margin-top: var(--cx-hh, 68px); }

@media (max-width: 760px) {
  .camino { padding-top: 2rem; }
  .camino-list { grid-template-columns: 1fr; }
  .camino-list::before {
    left: 4px; right: auto; top: 1.6rem; bottom: 1.6rem;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--cx-gold) 0%, rgba(169, 138, 98, 0.5) 100%);
    transform-origin: center top;
  }
  .camino-step + .camino-step a { border-top: 1px solid var(--cx-line); }
  .camino-step a {
    align-items: center;
    min-height: 64px;
    margin-left: 1.6rem;
    padding: 0.85rem 2.6rem 0.85rem 0.4rem;
    transition: background-color 0.25s;
  }
  .camino-step a::before { left: calc(-1.6rem + 0px); top: 50%; margin-top: -4.5px; }
  .camino-step a:active { background: rgba(169, 138, 98, 0.1); }
  .camino-step a:active::before { background: var(--cx-gold-light); }
  .camino-step:nth-child(2) { --cd: 0.2s; }
  .camino-step:nth-child(3) { --cd: 0.4s; }
  .camino-n { font-size: 1.5rem; }
  .camino-t { display: block; }
  .camino-go {
    position: absolute;
    right: 0.6rem; top: 50%;
    width: 32px; height: 32px;
    margin-top: -16px;
    align-items: center; justify-content: center;
    border: 1px solid var(--cx-line);
    border-radius: 50%;
  }
}

/* Entrada: la línea se traza y los rombos se encienden en orden (primero
   aparecen huecos, luego se llenan). Los retardos viven en --cd y solo
   mientras dura la entrada: al terminar (.cx-camino-done) el hover responde
   al instante. En mobile los textos solo funden: un transform en .camino-t
   la convertía en bloque contenedor de la flecha (absoluta) y esta saltaba
   de sitio al acabar la transición. */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .camino:not(.cx-camino-in) .camino-list::before { transform: scaleX(0); }
  html.cx-motion .camino:not(.cx-camino-in) .camino-step a::before { opacity: 0; background: #000; transform: rotate(45deg) scale(0.2); }
  html.cx-motion .camino:not(.cx-camino-in) .camino-step a > span,
  html.cx-motion .camino:not(.cx-camino-in) .camino-kicker { opacity: 0; transform: translateY(8px); }
  html.cx-motion .camino:not(.cx-camino-in) .camino-list::before,
  html.cx-motion .camino:not(.cx-camino-in) .camino-step a::before,
  html.cx-motion .camino:not(.cx-camino-in) .camino-step a > span { transition: none !important; }
  html.cx-motion .camino.cx-camino-in .camino-list::before { transition: transform 1.5s var(--cx-ease-io); }
  html.cx-motion .camino.cx-camino-in .camino-kicker { transition: opacity 0.7s var(--cx-ease), transform 0.8s var(--cx-ease); }
  html.cx-motion .camino.cx-camino-in:not(.cx-camino-done) .camino-step a::before {
    transition:
      opacity 0.5s var(--cx-ease) var(--cd, 0s),
      transform 0.5s var(--cx-ease) var(--cd, 0s),
      background-color 0.6s var(--cx-ease) calc(var(--cd, 0s) + 0.4s);
  }
  html.cx-motion .camino.cx-camino-in:not(.cx-camino-done) .camino-step a > span {
    transition: opacity 0.7s var(--cx-ease) var(--cd, 0s), transform 0.8s var(--cx-ease) var(--cd, 0s);
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  html.cx-motion .camino:not(.cx-camino-in) .camino-list::before { transform: scaleY(0); }
  html.cx-motion .camino:not(.cx-camino-in) .camino-step a > span { transform: none; }
  html.cx-motion .camino.cx-camino-in .camino-list::before { transition-duration: 0.9s; }
}

/* ══════════════════════════════════════════════════════════════
   36. LAS 5 CONFRONTACIONES — índice editorial + lámina.
   Sin marco: filetes finos, línea de bronce bajo la pestaña activa,
   pie con contador y «Siguiente». Sin JS: todo en lista.
   ══════════════════════════════════════════════════════════════ */
.cf {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 3rem;
  border-top: 1px solid var(--cx-line);
  text-align: left;
}
.cf-tabs { display: flex; flex-direction: column; }
.cf-tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  row-gap: 0.3rem;
  align-items: baseline;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.35s var(--cx-ease);
}
.cf-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--cx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--cx-ease);
}
.cf-tab-n {
  grid-row: span 2;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1;
  color: inherit;
  transition: color 0.35s;
}
.cf-tab-l { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cf-tab-q {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text-dim);
  transition: color 0.35s;
}
.cf-tab[aria-selected="true"] { color: var(--text); }
.cf-tab[aria-selected="true"] .cf-tab-n { color: var(--cx-gold); }
.cf-tab[aria-selected="true"] .cf-tab-q { color: var(--text-muted); }
.cf-tab[aria-selected="true"]::after { transform: scaleX(1); }
.cf-tab.cf-seen:not([aria-selected="true"]) .cf-tab-n { color: rgba(169, 138, 98, 0.7); }
.cf-tab:focus-visible { outline: 1px solid var(--cx-gold-light); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cf-tab:hover { color: var(--text); }
  .cf-tab:hover .cf-tab-q { color: var(--text-muted); }
}

.cf-panels { display: flex; flex-direction: column; padding-top: 2.4rem; }
.cf-stage { position: relative; flex: 1 1 auto; }
.cf-panel { position: relative; outline: none; }
.cf-panel[hidden] { display: none; }
.cf-panel-n {
  position: absolute;
  right: 0; top: -0.6rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(6rem, 11vw, 9.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 196, 166, 0.16);
  pointer-events: none;
}
.cf-icon { width: 60px; height: 60px; color: var(--cx-gold); display: block; margin-bottom: 1.4rem; }
.cf-panel-l {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
  margin-bottom: 0.6rem;
}
.cf-panel h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 1rem;
  max-width: 20ch;
}
.cf-panel-p { color: var(--text-muted); max-width: 38rem; margin: 0 0 2rem; }
.cf-frag { margin: 0; padding-left: 1.4rem; border-left: 1px solid var(--cx-gold); max-width: 38rem; }
.cf-frag-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.cf-frag p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.cf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cx-line);
  font-family: var(--font-ui, "Inter", sans-serif);
}
.cf-count { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-dim); white-space: nowrap; }
.cf-count b { color: var(--cx-gold); font-weight: 400; }
.cf-next {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.cf-next-l { color: var(--cx-gold-light); }
.cf-next svg { width: 14px; height: 14px; margin-left: 0.2rem; transition: transform 0.4s var(--cx-ease); }
.cf-next:hover svg { transform: translateX(4px); }
.cf-next:focus-visible { outline: 1px solid var(--cx-gold-light); outline-offset: 4px; }
.cf-foot { margin-top: 2.8rem; text-align: center; }

html:not(.cx-js) .cf { grid-template-columns: 1fr; }
html:not(.cx-js) .cf-tabs, html:not(.cx-js) .cf-nav { display: none; }
html:not(.cx-js) .cf-panel[hidden] { display: block; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--cx-line); }

@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cf-panel.cf-in .cf-icon path,
  html.cx-motion .cf-panel.cf-in .cf-icon line,
  html.cx-motion .cf-panel.cf-in .cf-icon polyline,
  html.cx-motion .cf-panel.cf-in .cf-icon circle {
    stroke-dasharray: 400;
    animation: cfDraw 1.4s var(--cx-ease) backwards;
  }
  html.cx-motion .cf-panel.cf-in .cf-panel-l,
  html.cx-motion .cf-panel.cf-in h3,
  html.cx-motion .cf-panel.cf-in .cf-panel-p,
  html.cx-motion .cf-panel.cf-in .cf-frag { animation: cfRise 0.8s var(--cx-ease) backwards; }
  html.cx-motion .cf-panel.cf-in h3 { animation-delay: 0.06s; }
  html.cx-motion .cf-panel.cf-in .cf-panel-p { animation-delay: 0.12s; }
  html.cx-motion .cf-panel.cf-in .cf-frag { animation-delay: 0.2s; }
  html.cx-motion .cf-panel.cf-in .cf-panel-n { animation: cfNum 1s var(--cx-ease) backwards; }
}
@keyframes cfDraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes cfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cfNum { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .cf-tab-q { display: none; }
  .cf { grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2fr); }
}
@media (max-width: 760px) {
  .cf { grid-template-columns: 1fr; border-top: 0; margin-top: 2.2rem; }
  .cf-tabs { flex-direction: row; border-bottom: 1px solid var(--cx-line); }
  .cf-tab { flex: 1 1 0; display: flex; justify-content: center; padding: 0.9rem 0; border-bottom: 0; }
  .cf-tab-n { font-size: 1.3rem; }
  .cf-tab-l, .cf-tab-q {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cf-tab::after { left: 22%; right: 22%; }
  .cf-panels { padding-top: 1.8rem; }
  .cf-icon { width: 50px; height: 50px; margin-bottom: 1rem; }
  .cf-panel-n { font-size: 5.5rem; top: -0.4rem; }
  .cf-nav { margin-top: 1.8rem; }
  .cf-next-l { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   37. IDIOMAS — texto ES · EN · IT en lugar de banderas
   ══════════════════════════════════════════════════════════════ */
html body .lang-switch,
html body .mobile-lang { gap: 0 !important; align-items: center; }
html body .lang-btn {
  position: relative;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0.45rem 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  color: var(--text-dim) !important;
  text-decoration: none !important;
  transform: none !important;
  transition: color 0.3s !important;
}
html body .lang-btn + .lang-btn::before {
  content: "";
  position: absolute;
  left: -0.5px; top: 50%;
  width: 1px; height: 0.8em;
  margin-top: -0.4em;
  background: var(--cx-line);
}
html body .lang-btn::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: calc(0.5rem - 0.14em);
  bottom: 0.1rem;
  height: 1px;
  background: var(--cx-gold);
  transform: scaleX(0);
  transition: transform 0.45s var(--cx-ease);
}
html body .lang-btn:hover,
html body .lang-btn.active { color: var(--text) !important; }
html body .lang-btn.active::after { transform: scaleX(1); }
html body .mobile-lang .lang-btn { font-size: 0.8rem !important; padding: 0.7rem 0.8rem !important; }
html body .mobile-lang .lang-btn::after { left: 0.8rem; right: calc(0.8rem - 0.14em); bottom: 0.3rem; }
html body .site-header .lang-btn,
html body .site-header .lang-btn.active,
html body .mobile-menu .lang-btn,
html body .mobile-menu .lang-btn.active { background: none !important; box-shadow: none !important; }

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════
   38. FOOTER — hueco inferior para los flotantes (volver arriba,
   asistente, DM) más la zona segura del iPhone. Antes lo daba un
   <style> en cada página (9,5 / 9 rem) y las que no lo tenían (404)
   quedaban tapadas.
   ══════════════════════════════════════════════════════════════ */
html body .footer { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 860px) {
  html body .footer { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Con el footer en pantalla la barra de promoción de la tienda se
   retira (opción b) y los flotantes vuelven a su sitio: así no tapan
   el crédito ni los enlaces legales. Al volver a subir, reaparece. */
html.cx-foot-in body .promo-bar {
  transform: translateY(110%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.45s var(--cx-ease), opacity 0.3s, visibility 0s linear 0.45s !important;
}
html.cx-foot-in:has(.promo-bar.visible):not(.cx-fl-hide) body .ig-dm-float,
html.cx-foot-in:has(.promo-bar.visible):not(.cx-fl-hide) body .corso-wrap,
html.cx-foot-in:has(.promo-bar.visible).cx-top-show body .scroll-top-wrap {
  translate: 0 0;
}

/* ══════════════════════════════════════════════════════════════
   39. AJUSTES — índice de práctica (estoicismo), cierres con menos
   botones y firma del manifiesto.
   ══════════════════════════════════════════════════════════════ */

/* Índice de cinco pasos: mismo componente que el camino de la home */
@media (min-width: 761px) {
  .camino--5 .camino-list { grid-template-columns: repeat(5, 1fr); }
}
/* Home: cuatro pasos (Diagnóstico · Sistema · Práctica · Archivo y libro) */
@media (min-width: 761px) {
  .camino--4 .camino-list { grid-template-columns: repeat(4, 1fr); }
}
.camino--4 .camino-step:nth-child(2) { --cd: 0.4s; }
.camino--4 .camino-step:nth-child(3) { --cd: 0.8s; }
.camino--4 .camino-step:nth-child(4) { --cd: 1.15s; }
.camino--5 .camino-step:nth-child(2) { --cd: 0.28s; }
.camino--5 .camino-step:nth-child(3) { --cd: 0.56s; }
.camino--5 .camino-step:nth-child(4) { --cd: 0.84s; }
.camino--5 .camino-step:nth-child(5) { --cd: 1.12s; }
html body .camino .camino-kicker {
  max-width: 1100px;
  margin: 0 auto 1.6rem;
  font-family: var(--font-ui, "Inter", sans-serif) !important;
  font-size: 0.7rem !important;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (min-width: 761px) and (max-width: 1040px) {
  .camino--4 .camino-step a,
  .camino--5 .camino-step a { grid-template-columns: 1fr; row-gap: 0.5rem; padding-right: 0.8rem; }
  .camino--4 .camino-n,
  .camino--5 .camino-n { grid-row: auto; }
}
@media (max-width: 760px) {
  .camino--4 .camino-step:nth-child(2) { --cd: 0.15s; }
  .camino--4 .camino-step:nth-child(3) { --cd: 0.3s; }
  .camino--4 .camino-step:nth-child(4) { --cd: 0.45s; }
  .camino--5 .camino-step:nth-child(2) { --cd: 0.12s; }
  .camino--5 .camino-step:nth-child(3) { --cd: 0.24s; }
  .camino--5 .camino-step:nth-child(4) { --cd: 0.36s; }
  .camino--5 .camino-step:nth-child(5) { --cd: 0.48s; }
}
#b-quiz-fase, #b-test-virtud, #b-dilema, #b-meditacion, #b-reto { scroll-margin-top: var(--cx-hh, 68px); }

/* Cierres: como mucho dos botones; el resto baja a enlaces terciarios */
.cx-mas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 1.8rem;
  margin-top: 1.5rem;
}

/* Firma del manifiesto: filete que se traza, nombre que se escribe con
   la misma tinta que «Claridad.» y lugar que asienta su espaciado */
html body .mani-sign {
  display: block;
  margin: 3.6rem 0 0;
  text-align: center;
}
.mani-sign::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 1.7rem;
  background: var(--cx-gold);
}
html body .mani-sign .mani-author {
  display: inline-block;
  margin: 0;
  padding: 0.05em 0.25em 0.14em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
  color: var(--text);
  opacity: 1;
  transform: none;
}
.mani-place {
  display: block;
  margin-top: 1rem;
  padding-left: 0.34em;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 0.64rem;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cx-gold-light);
}
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cx-firma-r::before { transform: scaleX(0); transition: transform 1s var(--cx-ease-io); }
  html.cx-motion .cx-firma-r.cx-in::before { transform: scaleX(1); }
  html.cx-motion .cx-firma-r .mani-author {
    -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 52% 100%);
    mask-image: linear-gradient(90deg, #000 0 40%, transparent 52% 100%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  html.cx-motion .cx-firma-r.cx-in .mani-author {
    animation: cxWrite 2.1s cubic-bezier(0.5, 0.05, 0.35, 1) 0.6s both;
  }
  html.cx-motion .cx-firma-r .mani-place {
    opacity: 0;
    letter-spacing: 0.62em;
    transition: opacity 1.2s var(--cx-ease) 2.2s, letter-spacing 1.8s var(--cx-ease) 2.2s;
  }
  html.cx-motion .cx-firma-r.cx-in .mani-place { opacity: 1; letter-spacing: 0.34em; }
}

/* ══════════════════════════════════════════════════════════════
   40. ACCESIBILIDAD — fallos detectados con axe-core (WCAG 2.2 A/AA)
   ══════════════════════════════════════════════════════════════ */
/* Navegación entre artículos: dorado al 60 % daba 2,85:1 sobre negro.
   Ahora --text-dim (~6,8:1) y dorado claro al pasar. */
html body .article-nav a { color: var(--text-dim); opacity: 1; transition: color 0.25s var(--cx-ease); }
html body .article-nav a:hover,
html body .article-nav a:focus-visible { color: var(--cx-gold-light); }

/* Acordeón cerrado: su contenido seguía recibiendo el foco del teclado
   aunque estuviera oculto (aria-hidden + max-height: 0). */
html body .exp-item:not(.abierto) .exp-body { visibility: hidden; transition: max-height 0.55s var(--ease, ease), visibility 0s linear 0.55s; }
html body .exp-item.abierto .exp-body { visibility: visible; transition: max-height 0.55s var(--ease, ease), visibility 0s; }

/* Campos de formulario: mismo anillo de foco que el resto de controles
   (solo cambiaba el color del borde, casi imperceptible). */
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible {
  outline: 2px solid var(--cx-gold-light);
  outline-offset: 2px;
}

/* Aviso del asistente: su botón de cerrar no recibe foco mientras el
   aviso está oculto. */
html body .corso-tooltip:not(.show) .corso-tooltip-x { visibility: hidden; }

/* Cerrar de la barra de la tienda: opacidad completa (3,57:1 → pleno). */
html body .promo-bar-close { opacity: 1; }

/* El emblema del hero no flota ni pulsa si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html body .hero-logo { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   Confrontaciones (home): enlace al artículo de cada panel
   ══════════════════════════════════════════════════════════════ */
html body .cf-panel .cf-read { margin-top: 1.8rem; }
/* Entra con la misma cascada que el resto del panel (cfRise), la última */
@media (prefers-reduced-motion: no-preference) {
  html.cx-motion .cf-panel.cf-in .cf-read { animation: cfRise 0.8s var(--cx-ease) 0.28s backwards; }
}

/* Autor (home) en mobile: la columna no puede ser más ancha que la pantalla.
   Con «Texto más grande» el botón, que no parte línea, empujaba la columna
   1fr y la página se desplazaba 32 px en horizontal. */
@media (max-width: 768px) {
  html body .autor-section { grid-template-columns: minmax(0, 1fr); }
  html body .autor-texto .btn { white-space: normal; max-width: 100%; text-align: center; }
}