/* ===========================================================================
   Mossraven — capa "premium" (estilo template ThemeForest)
   Fotografía con overlays en degradado, elementos en capas, glass.
   Se carga DESPUÉS de main.css (gana en cascada).
   =========================================================================== */

:root{
  --grad-ink:linear-gradient(180deg,rgba(28,28,28,.0) 0%,rgba(28,28,28,.55) 60%,rgba(28,28,28,.92) 100%);
  --glass:rgba(28,28,28,.62);
  --glass-line:rgba(255,255,255,.10);
}

/* ---- tipografía un punto más editorial ---- */
h1,h2{letter-spacing:-.025em}

/* =========================================================================
   HEADER transparente sobre el hero (solo home), sólido al hacer scroll
   ========================================================================= */
body.home .site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s,box-shadow .25s}
body.home .site-header .utility{background:transparent;color:rgba(255,255,255,.82)}
body.home .site-header .utility a{color:rgba(255,255,255,.82)}
body.home .site-header .utility a:hover{color:#fff}
body.home .site-header .utility__sep{color:rgba(255,255,255,.3)}
body.home .site-header .masthead{background:transparent;border-bottom:1px solid rgba(255,255,255,.12)}
body.home .site-header .brand__name{color:#fff}
body.home .site-header .brand__tag{color:rgba(255,255,255,.6)}
body.home .site-header .mainnav a{color:rgba(255,255,255,.86)}
body.home .site-header .mainnav a:hover{color:#fff;background:rgba(255,255,255,.08)}
body.home .site-header .cart-link{color:#fff}
body.home .site-header .navtoggle{border-color:rgba(255,255,255,.3)}
body.home .site-header .navtoggle svg{color:#fff}

/* estado "pegado" (scroll) → vuelve sólido como el resto del sitio */
body.home .site-header.is-stuck{box-shadow:0 1px 0 rgba(28,28,28,.08),0 6px 24px rgba(28,28,28,.06)}
body.home .site-header.is-stuck .utility{background:var(--ink-900);color:#B6B0A8}
body.home .site-header.is-stuck .utility a{color:#B6B0A8}
body.home .site-header.is-stuck .utility__sep{color:#4A453F}
body.home .site-header.is-stuck .masthead{background:#fff;border-bottom:1px solid var(--line)}
body.home .site-header.is-stuck .brand__name{color:var(--ink-900)}
body.home .site-header.is-stuck .brand__tag{color:var(--ink-400)}
body.home .site-header.is-stuck .mainnav a{color:var(--ink-700)}
body.home .site-header.is-stuck .mainnav a:hover{color:var(--ink-900);background:var(--paper-2)}
body.home .site-header.is-stuck .cart-link{color:var(--ink-700)}
body.home .site-header.is-stuck .navtoggle{border-color:var(--line-2)}
body.home .site-header.is-stuck .navtoggle svg{color:var(--ink-900)}

/* botón refinado con leve elevación */
.btn{transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn--primary{box-shadow:0 1px 2px rgba(180,134,11,.25)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(180,134,11,.28)}
.btn--lg{padding:16px 28px;font-size:16px}
body.home .site-header .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
body.home .site-header .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
body.home .site-header.is-stuck .btn--ghost{color:var(--ink-900);border-color:var(--line-2)}

/* =========================================================================
   HERO con foto a sangre + scrim en degradado + tarjeta glass flotante
   ========================================================================= */
.hero--photo{position:relative;border-bottom:none;background:var(--ink-900);overflow:hidden}
.hero--photo .hero__media{position:absolute;inset:0;z-index:0}
.hero--photo .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero--photo .hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(28,28,28,.92) 0%,rgba(28,28,28,.72) 42%,rgba(28,28,28,.30) 100%),
    linear-gradient(180deg,rgba(28,28,28,.55) 0%,rgba(28,28,28,0) 30%,rgba(28,28,28,.65) 100%);
}
.hero--photo .hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center;
  padding-top:190px;padding-bottom:120px;min-height:88vh;}
.hero--photo .eyebrow{color:var(--amber-bright)}
.hero--photo h1{color:#fff;font-size:clamp(38px,5.4vw,66px);line-height:1.04}
.hero--photo h1 span{color:var(--amber-bright)}
.hero--photo .hero__lead{color:rgba(255,255,255,.82);font-size:20px;max-width:32em}
.hero--photo .hero__assure{color:rgba(255,255,255,.72)}
.hero--photo .hero__assure svg{color:var(--amber-bright)}
/* botón fantasma legible sobre la foto */
.hero--photo .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero--photo .btn--ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10)}

/* tarjeta glass con el diagrama, encima de la foto */
.glasscard{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);border-radius:14px;padding:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.glasscard .diagram__title{color:rgba(255,255,255,.7)}
.glasscard .diagram__dot{background:rgba(255,255,255,.25)}

/* franja de garantías bajo el hero (sin contadores) */
.assurebar{background:var(--ink-900);border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:2}
.assurebar .wrap{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;padding:20px 24px}
.assurebar span{display:inline-flex;align-items:center;gap:10px;color:#B3ADA4;font-size:14px;font-weight:500}
.assurebar svg{width:18px;height:18px;color:var(--amber-bright)}

/* =========================================================================
   SPLIT — texto + foto en capas (foto encima de panel de color)
   ========================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.split--rev .split__media{order:-1}
.split__media{position:relative}
.split__media .ph{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);z-index:2}
.split__media .ph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.split__media .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,41,55,0) 40%,rgba(31,41,55,.45) 100%)}
/* panel de color detrás, desfasado (capa) */
.split__media::before{content:"";position:absolute;width:62%;height:78%;border-radius:14px;z-index:1}
.split--data .split__media::before{right:-22px;bottom:-22px;background:linear-gradient(135deg,var(--amber),var(--amber-600))}
.split--team .split__media::before{left:-22px;top:-22px;background:var(--ink)}
/* chip flotante de dato sobre la foto */
.split__chip{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:0 18px 40px -16px rgba(28,28,28,.4);display:flex;gap:12px;align-items:center;max-width:240px}
.split--data .split__chip{left:-26px;bottom:30px}
.split--team .split__chip{right:-26px;top:30px}
.split__chip .ic{width:38px;height:38px;border-radius:9px;background:var(--amber-050);color:var(--amber-600);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.split__chip .ic svg{width:20px;height:20px}
.split__chip b{display:block;color:var(--ink-900);font-size:15px;line-height:1.2}
.split__chip span{font-size:12.5px;color:var(--ink-500)}
.split__body .eyebrow{margin-bottom:18px}
.split__body h2{font-size:clamp(26px,3.2vw,38px)}
.split__body p.lead{margin-top:18px;font-size:18px;color:var(--ink-500)}
.split__list{margin-top:26px;display:grid;gap:14px}
.split__list li{display:flex;gap:12px;color:var(--ink-700);font-size:15.5px}
.split__list svg{width:20px;height:20px;color:var(--amber-600);flex:0 0 20px;margin-top:2px}

/* =========================================================================
   BANDA con foto de fondo + overlay (confianza / CTA)
   ========================================================================= */
.band{position:relative;overflow:hidden;background:var(--ink-900)}
.band__media{position:absolute;inset:0;z-index:0}
.band__media img{width:100%;height:100%;object-fit:cover}
.band__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,28,28,.55) 0%,rgba(28,28,28,.80) 45%,rgba(28,28,28,.93) 100%),radial-gradient(120% 80% at 82% -5%,rgba(255,141,107,.22),transparent 55%)}
.band .wrap{position:relative;z-index:2}

/* tarjetas de confianza glass sobre la banda */
.assurances--glass{background:transparent;border:none;gap:var(--s5);grid-template-columns:repeat(3,1fr)}
.assurances--glass .assurance{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;backdrop-filter:blur(6px)}
.assurances--glass .assurance h4{color:#fff}
.assurances--glass .assurance p{color:#A8A39C}
.assurances--glass .assurance svg{color:var(--amber)}
.trust__item .stat{color:#fff}

/* CTA sobre banda */
.band .cta-final p{color:rgba(255,255,255,.78)}

/* =========================================================================
   page-hero (shop/legal) — degradado + acento, más premium
   ========================================================================= */
.page-hero{background:linear-gradient(120deg,var(--ink-900),var(--ink));position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 90% -10%,rgba(255,141,107,.18),transparent 55%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}

/* tarjetas de catálogo con acento superior al hover */
.card{position:relative}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);border-radius:10px 10px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.card:hover::before{transform:scaleX(1)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .hero--photo .hero__inner{grid-template-columns:1fr;gap:var(--s7);padding-top:150px;padding-bottom:80px;min-height:0}
  .split{grid-template-columns:1fr;gap:var(--s8)}
  .split--rev .split__media{order:0}
  .split__media{margin-bottom:10px}
  .assurances--glass{grid-template-columns:1fr}
  .assurebar .wrap{gap:14px 28px}
}
@media (max-width:760px){
  .hero--photo .hero__inner{padding-top:130px}
  .hero--photo h1{font-size:38px}
  .split__chip{display:none}
  .split__media::before{display:none}
}

/* ===========================================================================
   AUDIT FIXES — accesibilidad, foco, contraste, motion (F1–F5)
   =========================================================================== */
:root{ --amber-text:#B23C0E; }   /* ámbar legible como texto, ≥4.5:1 sobre blanco y paper-2 */

/* F2 — scroll suave + respeto a reduce-motion */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* F1 — sistema de foco de marca en TODOS los controles */
a.btn:focus-visible,.cart-link:focus-visible,.navtoggle:focus-visible,
.mainnav a:focus-visible,.pstep:focus-visible,.card a:focus-visible,
.foot a:focus-visible,.utility a:focus-visible,.brand:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px; border-radius:6px;
}
/* contextos oscuros → anillo claro para que se vea */
.hero--photo a:focus-visible,.section--ink a:focus-visible,
.band a:focus-visible,.foot a:focus-visible,.utility a:focus-visible{ outline-color:#fff; }
/* slider: el outline no rodea el thumb → box-shadow en el thumb */
input[type=range].slider:focus-visible{ outline:none; }
input[type=range].slider:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(255,141,107,.5),0 0 0 5px rgba(28,28,28,.25); }
input[type=range].slider:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px rgba(255,141,107,.5),0 0 0 5px rgba(28,28,28,.25); }

/* F3 — contraste de texto secundario (eran 2.4–2.5:1 con --ink-400) */
.card__tier,.card__price .iva,.iva-suffix,.reco__scale span,.reco__out .k,.pstep__n{
  color:var(--ink-500);            /* #6B7280 → 4.83:1 */
}
.foot__bottom p{ color:#8A847C; }  /* sobre #121212 ≈ 4.7:1 (era #6E6862, 3.75) */

/* F4 — eyebrow ámbar legible como texto */
.eyebrow{ color:var(--amber-text); }
.eyebrow::before{ background:var(--amber); }   /* la línea conserva el oro vivo */
.split__chip span{ color:var(--ink-500); }
/* sobre fondos oscuros el eyebrow vuelve al oro vivo (ahí ya pasa) */
.hero--photo .eyebrow,.section--ink .eyebrow,.band .eyebrow{ color:var(--amber-bright); }

/* F5 — target táctil del carrito ≥44px sin mover el layout visual */
.cart-link{ width:44px; height:44px; justify-content:center; margin-right:-11px; }

/* ===========================================================================
   PASE 2 — autoría: easing de marca, motion de entrada, diagrama, grid editorial
   =========================================================================== */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); }

/* skip-link (estaba sin estilo → quedaba tras el header fijo) */
.skip-link{ position:fixed; left:-9999px; top:0; z-index:200; }
.skip-link:focus{ left:16px; top:16px; background:var(--amber); color:var(--ink-900);
  padding:11px 18px; border-radius:6px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.3);
  outline:2px solid #fff; outline-offset:2px; }

/* easing intencional (reemplaza el ease por defecto) */
.btn,.card,.cap,.pstep,.site-header,.split__media .ph,.assurance{
  transition-timing-function:var(--ease)!important;
}

/* viudas/huérfanas en titulares */
h1,.section-head h2,.split__body h2,.cta-final h2{ text-wrap:balance; }

/* glass en Safari + viewport estable en iOS */
.assurances--glass .assurance{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero--photo .hero__inner{ min-height:88vh; min-height:88svh; }

/* ---- reveal de entrada (solo con JS y sin reduce-motion; no-JS = visible) ---- */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  html.js .reveal.is-in{ opacity:1; transform:none; }
  html.js .reveal-item{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  html.js .reveal.is-in .reveal-item,html.js .reveal-item.is-in{ opacity:1; transform:none; }
  /* diagrama del hero: trazo que se dibuja */
  html.js .flow path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease-out); }
  html.js .flow.is-in path{ stroke-dashoffset:0; }
  html.js .flow.is-in path:nth-child(2){ transition-delay:.10s } html.js .flow.is-in path:nth-child(3){ transition-delay:.18s }
  html.js .flow.is-in path:nth-child(4){ transition-delay:.26s } html.js .flow.is-in path:nth-child(5){ transition-delay:.40s }
  html.js .flow.is-in path:nth-child(6){ transition-delay:.48s } html.js .flow.is-in path:nth-child(7){ transition-delay:.56s }
}

/* ---- grid editorial: rotura con la card Núcleo a doble ancho + índice mono ---- */
.card{ position:relative; overflow:hidden; }
.card__ix{ position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:46px; line-height:1;
  font-weight:500; color:var(--ink-900); opacity:.05; letter-spacing:-.02em; pointer-events:none; user-select:none; }
.card--feature{
  grid-column:1 / -1; background:var(--ink-900); color:#DAD6D0;
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); align-items:center;
  border-color:#332F2A;
}
.card--feature::before{ background:var(--amber); transform:scaleX(1); height:4px; }
.card--feature .card__tier{ color:var(--amber-bright)!important; }
.card--feature h3{ color:#fff; font-size:clamp(22px,2.4vw,30px); min-height:0; }
.card--feature .card__desc{ color:#A8A39C; }
.card--feature .card__ix{ color:#fff; opacity:.07; font-size:120px; top:auto; bottom:-22px; right:24px; }
.card--feature .card__price{ border-top:1px solid #332F2A; }
.card--feature .card__price .amt{ color:#fff; font-size:30px; }
.card--feature .card__price .iva{ color:#A8A39C; }
.card--feature .card__cta{ margin-top:6px; }
.card--feature .btn--dark{ background:var(--amber); color:#fff; font-weight:600; }
.card--feature .btn--dark:hover{ background:var(--amber-600); color:#fff; }
.card--feature .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.card--feature .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.card--feature .card__feat-foot{ display:flex; flex-direction:column; gap:14px; }
@media (max-width:760px){
  .card--feature{ grid-template-columns:1fr; gap:var(--s5); }
  .card--feature .card__ix{ font-size:90px; }
}

/* portada de la card destacada como banner a todo el ancho */
.card--feature .card__cover{
  grid-column:1 / -1; aspect-ratio:auto; height:200px;
  margin:calc(-1*var(--s6)) calc(-1*var(--s6)) var(--s4); border-radius:10px 10px 0 0;
}
@media (max-width:760px){ .card--feature .card__cover{ height:150px; } }