/* Reset base (venía en el encabezado del prototipo) */
:root{color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ============ TOKENS ============
   Paleta base (la del cliente) + tokens derivados por tema.
   Los pasteles (--primario/--secundario/--acento) solo se usan como fondos,
   etiquetas y detalles; el texto sobre un pastel usa --sobre-pastel. */
:root{
  color-scheme:light;
  --fondo:#EFE2CF;
  --superficie:#FBF5EA;
  --borde:#D9C8AF;
  --primario:#CFE6F2;
  --secundario:#FCE0CC;
  --acento:#F9CFCB;
  --texto:#2B3A4A;
  --texto-suave:#4C5B6E;
  --boton:#2F6F9F;
  --boton-texto:#FFFFFF;

  /* derivados (claro) */
  --sobre-pastel:var(--texto);
  --link:var(--texto);
  --etiqueta:var(--texto-suave);
  --marca:color-mix(in srgb, var(--boton) 50%, var(--texto));
  --boton-hover:color-mix(in srgb, var(--boton) 82%, #000);
  --boton-active:color-mix(in srgb, var(--boton) 65%, #000);
  --control-borde:color-mix(in srgb, var(--texto-suave) 78%, var(--superficie));
  --tinte-pct:32%;
  --hover-pct:55%;
  --activo-pct:70%;
  --foco:var(--boton);
  --shadow:215 28% 22%;
  --header-bg:color-mix(in srgb, var(--fondo) 88%, transparent);
  --deco-opacity:.6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --fondo:#161B26;
    --superficie:#212836;
    --borde:#323B4D;
    --primario:#8CC8EC;
    --secundario:#FFC9A8;
    --acento:#FF9E99;
    --texto:#F1F4F9;
    --texto-suave:#B4BECC;
    --boton:#8CC8EC;
    --boton-texto:#10202C;

    --sobre-pastel:var(--boton-texto);
    --link:var(--primario);
    --etiqueta:var(--primario);
    --marca:var(--primario);
    --boton-hover:color-mix(in srgb, var(--boton) 80%, #fff);
    --boton-active:color-mix(in srgb, var(--boton) 62%, #fff);
    --control-borde:color-mix(in srgb, var(--texto-suave) 70%, var(--superficie));
    --tinte-pct:16%;
    --hover-pct:22%;
    --activo-pct:32%;
    --foco:var(--primario);
    --shadow:220 50% 3%;
    --header-bg:color-mix(in srgb, var(--fondo) 88%, transparent);
    --deco-opacity:.22;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#161B26;
  --superficie:#212836;
  --borde:#323B4D;
  --primario:#8CC8EC;
  --secundario:#FFC9A8;
  --acento:#FF9E99;
  --texto:#F1F4F9;
  --texto-suave:#B4BECC;
  --boton:#8CC8EC;
  --boton-texto:#10202C;

  --sobre-pastel:var(--boton-texto);
  --link:var(--primario);
  --etiqueta:var(--primario);
  --marca:var(--primario);
  --boton-hover:color-mix(in srgb, var(--boton) 80%, #fff);
  --boton-active:color-mix(in srgb, var(--boton) 62%, #fff);
  --control-borde:color-mix(in srgb, var(--texto-suave) 70%, var(--superficie));
  --tinte-pct:16%;
  --hover-pct:22%;
  --activo-pct:32%;
  --foco:var(--primario);
  --shadow:220 50% 3%;
  --header-bg:color-mix(in srgb, var(--fondo) 88%, transparent);
  --deco-opacity:.22;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--primario); color:var(--sobre-pastel); }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; background:none; border:none; padding:0; margin:0; color:inherit; font-size:inherit; text-align:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}
h1,h2,h3,.font-display{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  color:var(--texto);
  text-wrap:balance;
  font-weight:600;
}
.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--etiqueta);
  font-weight:600;
}
:focus-visible{
  outline:2.5px solid var(--foco);
  outline-offset:3px;
  border-radius:4px;
}

/* ============ TRANSICIÓN DE TEMA (0.2s) ============
   La clase la agrega el JS solo mientras dura el cambio de tema. */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease,
             fill .2s ease, stroke .2s ease, box-shadow .2s ease, outline-color .2s ease,
             opacity .2s ease !important;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after{ transition-duration:0.001ms !important; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-family:'Karla',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--boton); color:var(--boton-texto); box-shadow:0 6px 16px -8px hsl(var(--shadow) / 0.55); }
.btn-primary:hover{ background:var(--boton-hover); }
.btn-primary:active{ background:var(--boton-active); box-shadow:none; }
.btn-ghost{ background:transparent; color:var(--texto); border-color:var(--boton); }
.btn-ghost:hover{ background:var(--primario); color:var(--sobre-pastel); border-color:var(--boton); }
.btn-ghost:active{ background:color-mix(in srgb, var(--primario) 78%, var(--boton)); color:var(--sobre-pastel); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"]{
  background:var(--superficie);
  color:var(--texto-suave);
  border:1.5px dashed var(--borde);
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}
.btn-sm{ padding:8px 16px; font-size:0.82rem; }

/* ============ HEADER / NAV ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--marca);
  flex-shrink:0;
}
.brand-logo{ width:68px; height:68px; flex-shrink:0; border-radius:50%; }
/* El logo es azul oscuro sobre transparente: en oscuro lleva un disco pastel detrás */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-logo{ background:var(--primario); box-shadow:0 0 0 1px var(--borde); }
}
:root[data-theme="dark"] .brand-logo{ background:var(--primario); box-shadow:0 0 0 1px var(--borde); }
.brand-text{
  font-family:'Fraunces', serif;
  font-size:1.32rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.primary-nav{ display:none; }
.primary-nav ul{ display:flex; align-items:center; gap:4px; }
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:9px 15px;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  color:var(--texto);
  border:1px solid transparent;
  border-radius:999px;
  transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover{ background:color-mix(in srgb, var(--primario) var(--hover-pct), var(--fondo)); color:var(--texto); border-color:var(--borde); }
.nav-link:active{ background:var(--primario); color:var(--sobre-pastel); border-color:var(--borde); }
.nav-link .caret{ width:9px; height:9px; transition:transform 0.2s ease; }
.nav-link.active{ background:var(--primario); color:var(--sobre-pastel); border-color:var(--borde); }

.nav-item{ position:relative; }
.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:440px;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:16px;
  box-shadow:0 20px 44px -20px hsl(var(--shadow) / 0.35);
  padding:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-item:hover .caret,
.nav-item:focus-within .caret{ transform:rotate(180deg); }
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.dropdown-col{ padding:10px; border-radius:12px; border:1px solid transparent; }
.dropdown-col:hover{ background:color-mix(in srgb, var(--primario) var(--tinte-pct), var(--superficie)); border-color:var(--borde); }
.dropdown-col .dd-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-bottom:6px;
  display:block;
}
.dropdown-col a{
  display:block;
  text-decoration:none;
  font-weight:600;
  color:var(--link);
  padding:6px 0;
  font-size:0.94rem;
}
.dropdown-col a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--boton); }
.dropdown-col a:active{ text-decoration-color:var(--texto); }
.dropdown-col p{ font-size:0.82rem; color:var(--texto-suave); margin-top:2px; }

.menu-toggle,
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1.5px solid var(--control-borde);
  background:var(--superficie);
  color:var(--texto);
  cursor:pointer;
  flex-shrink:0;
  transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.menu-toggle:hover,
.theme-toggle:hover{ background:var(--primario); color:var(--sobre-pastel); border-color:var(--boton); }
.menu-toggle:active,
.theme-toggle:active,
.menu-toggle[aria-expanded="true"]{ background:color-mix(in srgb, var(--primario) 78%, var(--boton)); color:var(--sobre-pastel); border-color:var(--boton); }
.menu-toggle svg{ width:20px; height:20px; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.nav-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle.is-dark .icon-sun{ display:block; }
.theme-toggle.is-dark .icon-moon{ display:none; }

.lang-toggle{
  display:inline-flex;
  align-items:center;
  border-radius:12px;
  border:1.5px solid var(--control-borde);
  background:var(--superficie);
  overflow:hidden;
  flex-shrink:0;
  height:44px;
}
.lang-btn{
  /* son enlaces (<a>): se centran y se quita el subrayado para que se vean como botones */
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:normal;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.05em;
  height:100%;
  padding:0 12px;
  color:var(--texto-suave);
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover{ background:color-mix(in srgb, var(--primario) var(--hover-pct), var(--superficie)); color:var(--texto); }
.lang-btn:active{ background:var(--primario); color:var(--sobre-pastel); }
.lang-btn.is-active{ background:var(--boton); color:var(--boton-texto); }
.lang-btn:focus-visible{ outline-offset:-3px; }
.nav-actions .lang-toggle{ display:none; }
.mobile-nav-inner .lang-toggle{ align-self:flex-start; margin-bottom:14px; }

/* Mobile nav panel */
.mobile-nav{
  display:block;
  max-height:0;
  overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height 0.25s ease;
}
.mobile-nav.open{
  max-height:600px;
  border-top-color:var(--borde);
}
.mobile-nav-inner{ padding:14px 24px 22px; display:flex; flex-direction:column; gap:2px; }
.mobile-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 4px;
  text-decoration:none;
  color:var(--texto);
  font-weight:700;
  font-size:1.02rem;
  border-bottom:1px solid var(--borde);
  background:none;
  border-left:none;
  border-right:none;
  border-top:none;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.mobile-link:hover{ background:color-mix(in srgb, var(--primario) var(--tinte-pct), transparent); }
.mobile-link:active{ background:color-mix(in srgb, var(--primario) var(--activo-pct), transparent); }
.mobile-link.active{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--boton); }
.mobile-link-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--borde); }
.mobile-link-row .mobile-link{ flex:1; border-bottom:none; }
.mobile-sub-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  flex-shrink:0;
  color:var(--texto-suave);
}
.mobile-sub-toggle:hover{ color:var(--texto); background:color-mix(in srgb, var(--primario) var(--tinte-pct), transparent); }
.mobile-sub-toggle svg{ width:16px; height:16px; transition:transform 0.2s ease; }
.mobile-sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-sub{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.22s ease;
}
.mobile-sub.open{ max-height:260px; }
.mobile-sub-inner{ padding:6px 4px 14px 14px; display:flex; flex-direction:column; gap:12px; }
.mobile-sub-inner .dd-label{ font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--texto-suave); }
.mobile-sub-inner a{ text-decoration:none; color:var(--link); font-weight:600; display:block; padding:5px 0 5px; }
.mobile-sub-inner a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--boton); }
@media (min-width: 1100px){
  .primary-nav{ display:block; }
  .menu-toggle{ display:none; }
  .mobile-nav{ display:none; }
  .nav-actions .lang-toggle{ display:inline-flex; }
}

/* ============ PÁGINAS (una sección de nav = una página) ============ */
.page{ display:none; }
.page.is-active{ display:block; }

/* ============ FONDO DE LA PORTADA (inicio) ============
   Imagen decorativa detrás del hero y de la mitad superior del carrusel.
   Ajustes:
   --banner-fin:      distancia desde el final del carrusel (puntos incluidos)
                      hasta donde termina el fondo. Más grande = fondo más corto.
   --banner-posicion: qué parte de la imagen queda visible al recortarse.
   --banner-capa:     cuánto color de fondo tapa la imagen (100% = no se ve).
                      Mínimos para contraste AA: 70% en claro, 80% en oscuro. */
.inicio-portada{
  --banner-fin:210px;
  --banner-posicion:center;
  --banner-capa:80%;
  position:relative;
  isolation:isolate; /* el fondo (z-index:-1) queda detrás del contenido pero delante del body */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .inicio-portada{ --banner-capa:82%; }
}
:root[data-theme="dark"] .inicio-portada{ --banner-capa:82%; }
.inicio-fondo{
  position:absolute;
  top:0; left:0; right:0;
  bottom:var(--banner-fin);
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.inicio-fondo img{
  width:100%; height:100%; max-width:none;
  object-fit:cover; /* recorta sin deformar */
  object-position:var(--banner-posicion);
  display:block;
}
/* Capa del color de la página: atenúa la imagen y abajo se funde con el fondo */
.inicio-fondo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--fondo) var(--banner-capa), transparent) 0%,
    color-mix(in srgb, var(--fondo) var(--banner-capa), transparent) 55%,
    var(--fondo) 100%);
}

/* ============ HERO ============ */
.hero{ padding-block:64px 48px; }
.hero-copy{ max-width:640px; }
@media (min-width:640px){
  .hero-copy{ max-width:1132px; }
}
.hero-copy .eyebrow{ margin-bottom:14px; display:inline-block; }
.hero-copy .eyebrow.eyebrow-chip{
  background:var(--secundario);
  color:var(--sobre-pastel);
  padding:5px 13px;
  border:1px solid var(--borde);
  border-radius:999px;
}
.hero-headline{ color:var(--texto); }
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.1rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  text-wrap:wrap;
}
.hero h1 em{ color:var(--boton); font-style:italic; font-weight:500; }
.hero p.lede{
  margin-top:20px;
  font-size:1.1rem;
  color:var(--texto-suave);
  max-width:52ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-stats{ display:flex; gap:28px; margin-top:38px; flex-wrap:wrap; }
.hero-stat b{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--boton); display:block; }
.hero-stat span{ font-size:0.82rem; color:var(--texto-suave); }

/* ============ CARROUSEL ============ */
.shelf-section{ padding-block:8px 56px; }
.shelf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.shelf-head h2{ font-size:1.5rem; }
.shelf-controls{ display:flex; gap:8px; }
.shelf-btn{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--control-borde);
  background:var(--superficie);
  color:var(--texto);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.shelf-btn:hover{ border-color:var(--boton); background:var(--primario); color:var(--sobre-pastel); }
.shelf-btn:active{ background:color-mix(in srgb, var(--primario) 78%, var(--boton)); color:var(--sobre-pastel); }
.shelf-btn:disabled, .shelf-btn[aria-disabled="true"]{ background:var(--superficie); color:var(--texto-suave); border:1.5px dashed var(--borde); cursor:not-allowed; }
.shelf-btn svg{ width:18px; height:18px; }

.carousel{ position:relative; }
.carousel-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.slide{
  --pastel:var(--primario);
  scroll-snap-align:start;
  flex:0 0 min(560px, 88vw);
  border-radius:22px;
  padding:32px;
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  color:var(--texto);
  border:1px solid var(--borde);
  background:linear-gradient(155deg, var(--superficie), color-mix(in srgb, var(--pastel) var(--tinte-pct), var(--superficie)));
  /* Cada slide es un enlace */
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow 0.2s ease, border-color 0.2s ease;
}
.slide:hover, .slide:focus-visible{ box-shadow:0 14px 28px -18px hsl(var(--shadow) / 0.45); border-color:var(--control-borde); }
.slide:focus-visible{ outline-offset:-4px; } /* así el contorno no queda recortado por el carril */
.slide > div{ margin-top:auto; } /* el texto queda abajo aunque el slide no tenga etiqueta */
.slide-accion{
  display:inline-block;
  margin-top:16px;
  font-weight:600;
  color:var(--boton);
  position:relative;
}
.slide-flecha{ display:inline-block; transition:transform 0.2s ease; }
.slide:hover .slide-flecha, .slide:focus-visible .slide-flecha{ transform:translateX(4px); }
.slide-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
  width:fit-content;
  font-weight:600;
  background:var(--pastel);
  color:var(--sobre-pastel);
  border:1px solid var(--borde);
}
.slide h3{ font-size:1.55rem; margin-top:16px; max-width:22ch; position:relative; }
.slide p{ margin-top:8px; color:var(--texto-suave); max-width:38ch; position:relative; }
.slide-deco{ position:absolute; right:-30px; bottom:-30px; opacity:var(--deco-opacity); width:150px; height:150px; pointer-events:none; }
.slide-deco *{ stroke:var(--borde); stroke-width:1px; vector-effect:non-scaling-stroke; }

.slide-a{ --pastel:var(--secundario); }
.slide-b{ --pastel:var(--primario); }
.slide-c{ --pastel:var(--acento); }
.slide-d{ --pastel:var(--primario); }
.slide-a .slide-deco *{ fill:var(--secundario); }
.slide-b .slide-deco *{ fill:var(--primario); }
.slide-c .slide-deco *{ fill:var(--acento); }
.slide-d .slide-deco *{ fill:var(--primario); }

.carousel-dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:color-mix(in srgb, var(--texto-suave) 55%, var(--fondo));
  border:none;
  cursor:pointer;
  padding:0;
  transition:background-color 0.15s ease, width 0.2s ease;
}
.dot:hover{ background:var(--texto-suave); }
.dot:active{ background:var(--texto); }
.dot[aria-current="true"]{ background:var(--boton); width:22px; border-radius:5px; }

/* ============ CATEGORÍAS ============ */
.section{ padding-block:56px; }
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head h2{ font-size:1.9rem; }
.section-head p{ margin-top:10px; color:var(--texto-suave); font-size:1.02rem; }

/* ============ BENEFICIOS ============ */
.benefits{ background:var(--superficie); border-block:1px solid var(--borde); }
.benefits-grid{ display:grid; gap:28px; grid-template-columns:repeat(2,1fr); }
.benefit{ display:flex; gap:14px; align-items:flex-start; }
.benefit-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--primario); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
}
.benefit:nth-child(4n+2) .benefit-icon{ background:var(--secundario); }
.benefit:nth-child(4n+3) .benefit-icon{ background:var(--acento); }
.benefit-icon svg{ width:22px; height:22px; color:var(--sobre-pastel); }
.benefit h4{ font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; }
.benefit p{ color:var(--texto-suave); font-size:0.92rem; margin-top:4px; }

/* ============ CATÁLOGO (tarjetas generadas desde PRODUCTOS) ============ */
#catalogo-root, #recursos-root{ --portada-ratio:3/4; } /* cambiar a 1/1 para portadas cuadradas */
.catalogo-categoria + .catalogo-categoria{ margin-top:52px; }
.catalogo-cat-titulo{
  font-size:1.5rem;
  margin-bottom:22px;
  padding-bottom:10px;
  border-bottom:1px solid var(--borde);
  scroll-margin-top:120px; /* al bajar a #cat-... no queda tapado por la barra fija (~97px) */
}
.catalogo-vacio{
  padding:22px 24px;
  border:1.5px dashed var(--control-borde);
  border-radius:18px;
  background:var(--superficie);
  color:var(--texto-suave);
  font-size:0.95rem;
}
.catalogo-grid{
  display:grid;
  gap:22px;
  grid-template-columns:minmax(0,300px);
  justify-content:center;
}
.producto-card{
  --pastel:var(--primario);
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:18px;
  overflow:hidden;
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.producto-card:nth-child(3n+2){ --pastel:var(--secundario); }
.producto-card:nth-child(3n+3){ --pastel:var(--acento); }
.producto-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -20px hsl(var(--shadow) / 0.45); border-color:var(--control-borde); }
.producto-card:focus-within{ border-color:var(--boton); box-shadow:0 0 0 1px var(--boton); }
/* Tarjeta sin portada (recursos gratuitos): franja de color pastel arriba.
   Es solo decoración; overflow:hidden de la tarjeta le redondea las esquinas. */
.producto-card--sin-portada::before{
  content:"";
  display:block;
  height:8px;
  flex-shrink:0;
  background:var(--pastel);
}
.producto-portada{
  aspect-ratio:var(--portada-ratio);
  width:100%;
  position:relative;
  overflow:hidden;
  background:var(--fondo);
  border-bottom:1px solid var(--borde);
  flex-shrink:0;
}
.producto-portada img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.producto-portada-fallback{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  background:var(--pastel);
  color:var(--sobre-pastel);
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.25;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
/* Etiqueta "Gratis" en la esquina de la portada de los productos gratuitos.
   Colores del botón (contraste AA en claro y oscuro); el borde y la sombra la
   separan de la imagen, sea cual sea el color de la portada debajo. */
.producto-etiqueta{
  position:absolute;
  top:12px;
  left:12px;
  z-index:1;
  padding:5px 12px;
  border-radius:999px;
  background:var(--boton);
  color:var(--boton-texto);
  border:2px solid var(--superficie);
  box-shadow:0 4px 12px -4px hsl(var(--shadow) / 0.5);
  font-size:0.82rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0.02em;
}
.producto-info{ padding:16px 18px 18px; display:flex; flex-direction:column; flex-grow:1; }
/* Título y descripción se muestran completos; el JS iguala sus alturas
   entre todas las tarjetas para que tengan el mismo tamaño y los botones alineados. */
.producto-titulo{
  font-size:1.1rem;
  line-height:1.3;
}
.producto-desc{
  margin-top:8px;
  font-size:0.88rem;
  line-height:1.5;
  color:var(--texto-suave);
}
.producto-foot{ margin-top:auto; padding-top:16px; }
.producto-btn{ width:100%; padding:11px 16px; font-size:0.9rem; }
/* Tarjeta del catálogo con dos botones ("Tienda" y "Descripción") lado a lado */
.producto-foot--doble{ display:flex; gap:8px; }
.producto-foot--doble .producto-btn{ flex:1; min-width:0; padding-inline:10px; }

/* ============ PÁGINA DE PRODUCTO ============ */
.producto-volver{
  display:inline-block;
  margin-bottom:24px;
  color:var(--link);
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
}
.producto-volver:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--boton); }
.producto-detalle{
  --portada-ratio:3/4;
  --pastel:var(--primario);
  display:grid;
  gap:28px;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
.producto-detalle .producto-portada{
  max-width:360px;
  width:100%;
  margin-inline:auto;
  border:1px solid var(--borde);
  border-radius:18px;
}
.producto-detalle-titulo{ font-size:2rem; line-height:1.2; margin-top:8px; }
/* Descripción larga: HTML generado desde data/descripciones/<id>.<idioma>.md */
.producto-larga{ margin-top:16px; max-width:62ch; color:var(--texto-suave); font-size:1.02rem; line-height:1.65; }
.producto-larga > :first-child{ margin-top:0; }
.producto-larga p, .producto-larga ul{ margin-top:12px; }
.producto-larga h2{ font-size:1.4rem; line-height:1.3; color:var(--texto); margin-top:34px; }
.producto-larga h3{ font-size:1.15rem; line-height:1.35; color:var(--texto); margin-top:24px; }
.producto-larga h4{ font-family:'Fraunces', Georgia, serif; font-size:1rem; font-weight:600; color:var(--texto); margin-top:20px; }
.producto-larga h2 + p, .producto-larga h2 + ul, .producto-larga h3 + p, .producto-larga h3 + ul, .producto-larga h4 + p{ margin-top:8px; }
.producto-larga strong{ color:var(--texto); font-weight:700; }
.producto-larga ul{ list-style:disc; padding-left:1.3em; }
.producto-larga li + li{ margin-top:6px; }
.producto-larga li::marker{ color:var(--boton); }
/* Desplegables ("Conoce la descripción completa") */
.producto-larga details{
  margin-top:12px;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:14px;
}
.producto-larga summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  cursor:pointer;
  color:var(--boton);
  font-weight:600;
  list-style:none;
}
.producto-larga summary::-webkit-details-marker{ display:none; }
.producto-larga summary::before{
  content:"";
  width:7px; height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform 0.2s ease;
  flex-shrink:0;
}
.producto-larga details[open] summary::before{ transform:rotate(45deg); }
.producto-larga summary:hover{ text-decoration:underline; text-underline-offset:4px; }
.producto-larga summary:focus-visible{ outline-offset:-3px; border-radius:14px; }
.producto-larga details > :not(summary){ margin-inline:18px; }
.producto-larga details > :last-child{ margin-bottom:18px; }
.producto-larga details[open] summary{ border-bottom:1px solid var(--borde); }
/* Opciones al pie: lado a lado si entran, si no una debajo de la otra (la descarga siempre primero) */
.producto-opciones{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin-top:28px;
  max-width:62ch;
}
.producto-opcion{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:18px;
  scroll-margin-top:120px; /* al bajar a #muestras no queda tapado por la barra fija */
}
.producto-opcion p{ color:var(--texto-suave); font-size:0.95rem; line-height:1.5; }
.producto-opcion .btn{ align-self:flex-start; }
/* Botón de descarga con el formato del archivo al lado (abajo si no entra) */
.producto-descarga{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.producto-formato{ color:var(--texto-suave); font-size:0.88rem; }
@media (min-width: 768px){
  .producto-detalle{ grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:44px; }
  .producto-detalle .producto-portada{ margin-inline:0; }
  /* Página sin portada (recursos gratuitos): el texto ocupa una sola columna */
  .producto-detalle--sin-portada{ grid-template-columns:minmax(0,1fr); }
}

/* ============ ARTÍCULO (Novedades y consejos) ============ */
/* Texto largo: ancho de línea limitado (~68 caracteres) y espaciado cómodo */
.articulo{ max-width:68ch; }
.articulo-titulo{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height:1.2; margin-top:10px; }
/* HTML generado desde data/paginas/novedades.<idioma>.md */
.articulo-texto{ margin-top:24px; color:var(--texto-suave); font-size:1.05rem; line-height:1.7; }
.articulo-texto p, .articulo-texto ul{ margin-top:16px; }
.articulo-texto > :first-child{ margin-top:0; }
.articulo-texto h2{ font-size:1.45rem; line-height:1.3; color:var(--texto); margin-top:44px; }
.articulo-texto h2 + p{ margin-top:10px; }
.articulo-texto strong{ color:var(--texto); font-weight:700; }
.articulo-texto ul{ list-style:disc; padding-left:1.3em; }
.articulo-texto li + li{ margin-top:10px; }
.articulo-texto li::marker{ color:var(--boton); }
/* Enlace: texto con color de lectura y subrayado del color de botón (como el menú) */
.articulo-texto a{ color:var(--texto); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--boton); }
.articulo-texto a:hover{ text-decoration-color:var(--texto); }
/* Botones al pie: lado a lado si entran, si no uno debajo del otro */
.articulo-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:28px; border-top:1px solid var(--borde); }

/* ============ COLUMNAS INFORMATIVAS (inicio y nosotros) ============ */
.stub-cols{ display:grid; gap:16px; margin-top:26px; grid-template-columns:1fr; text-align:left; }
.stub-col{
  --pastel:var(--primario);
  background:color-mix(in srgb, var(--pastel) var(--tinte-pct), var(--superficie));
  border:1px solid var(--borde);
  border-radius:14px;
  padding:17px 19px;
}
.stub-col:nth-child(3n+2){ --pastel:var(--secundario); }
.stub-col:nth-child(3n+3){ --pastel:var(--acento); }
.stub-col h4{ font-family:'Fraunces',serif; font-size:1.05rem; margin-bottom:6px; color:var(--texto); }
.stub-col p{ margin:0; font-size:0.88rem; color:var(--texto-suave); }

/* ============ CONTACTO ============ */
.contact-wrap{ display:grid; gap:32px; grid-template-columns:1fr; }
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.field label{ display:block; font-weight:700; font-size:0.85rem; margin-bottom:6px; color:var(--texto); }
.field input, .field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid var(--control-borde);
  background:var(--superficie);
  color:var(--texto);
  font-family:'Karla',sans-serif;
  font-size:0.95rem;
  transition:border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--texto-suave); opacity:1; }
.field input:hover, .field textarea:hover{ border-color:var(--texto-suave); }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--foco); outline-offset:1px; border-color:var(--foco); }
.field input:disabled, .field textarea:disabled{ background:var(--fondo); color:var(--texto-suave); border:1.5px dashed var(--borde); cursor:not-allowed; }
.form-note{ font-size:0.82rem; color:var(--texto-suave); }
/* Errores de validación: borde más grueso y texto en negrita (la paleta no tiene rojo) */
.field.has-error input, .field.has-error textarea{ border-width:2.5px; border-color:var(--texto); }
.field-error{ margin-top:6px; font-size:0.85rem; font-weight:700; color:var(--texto); }
.field-error::before{ content:"⚠ "; }
/* Avisos generales del formulario (éxito / error) */
.form-aviso{
  margin:0;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--borde);
  color:var(--sobre-pastel);
  font-weight:600;
}
.form-aviso-exito{ background:var(--primario); }
.form-aviso-error{ background:var(--acento); }
/* Honeypot: fuera de la pantalla (no se usa display:none, que algunos bots detectan) */
.campo-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-info{ display:flex; flex-direction:column; gap:18px; }
.contact-info .info-card{
  background:color-mix(in srgb, var(--primario) var(--tinte-pct), var(--superficie));
  border:1px solid var(--borde);
  border-radius:16px;
  padding:19px;
}
.contact-info .info-card:nth-child(2){ background:color-mix(in srgb, var(--secundario) var(--tinte-pct), var(--superficie)); }
.contact-info .info-card:nth-child(3){ background:color-mix(in srgb, var(--acento) var(--tinte-pct), var(--superficie)); }
.contact-info h4{ font-family:'Fraunces',serif; font-size:1.05rem; color:var(--texto); }
.contact-info p{ color:var(--texto-suave); font-size:0.92rem; margin-top:6px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--superficie); color:var(--texto); margin-top:40px; border-top:1px solid var(--borde); }
.footer-grid{
  display:grid;
  gap:32px;
  grid-template-columns:1.3fr 1fr 1fr;
  padding-block:48px 28px;
}
.footer-brand .brand{ color:var(--texto); }
.footer-brand p{ margin-top:12px; color:var(--texto-suave); font-size:0.92rem; max-width:34ch; }
.footer-col h5{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-bottom:14px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; color:var(--link); font-size:0.92rem; }
.footer-col a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--boton); }
.footer-col a:active{ text-decoration-color:var(--texto); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--control-borde);
  color:var(--texto);
  display:flex; align-items:center; justify-content:center;
  transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.footer-social a:hover{ background:var(--primario); color:var(--sobre-pastel); border-color:var(--boton); }
.footer-social a:active{ background:color-mix(in srgb, var(--primario) 78%, var(--boton)); color:var(--sobre-pastel); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  border-top:1px solid var(--borde);
  padding-block:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  font-size:0.82rem;
  color:var(--texto-suave);
}
.payment-note{ display:flex; align-items:center; gap:8px; }
.payment-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  background:var(--primario);
  color:var(--sobre-pastel);
  border:1px solid var(--borde);
  padding:2px 7px;
  border-radius:6px;
}

/* ============ RESPONSIVE ============ */
@media (min-width: 640px){
  .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .stub-cols{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 640px){
  .catalogo-grid{ grid-template-columns:repeat(2,minmax(0,300px)); }
}
@media (min-width: 1024px){
  .catalogo-grid{ grid-template-columns:repeat(4,minmax(0,300px)); }
}
@media (min-width: 900px){
  .contact-wrap{ grid-template-columns:1.3fr 1fr; }
}
@media (min-width: 1080px){
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--boton); color:var(--boton-texto);
  padding:10px 16px; border-radius:0 0 10px 0; z-index:200;
}
.skip-link:focus{ left:0; }