/* ============================================================
   SITE.CSS — capa propia de 72 HORAS (negro / rojo / blanco)
   Va DESPUÉS de app.css: pisa lo que haga falta para el
   reskin sobrio. Reutiliza toda la maquetación heredada de 72 HORAS.
   ============================================================ */

/* ── LOGO ─────────────────────────────────────────────────── */
.logo { gap: 8px; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 7px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: 0.5px; border-radius: 5px; line-height: 1;
}
.logo-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: 2px; color: #fff;
}
.footer-brand .logo-mark { min-width: 30px; height: 26px; font-size: 13px; }

/* ── ACENTO ROJO ──────────────────────────────────────────── */
.hl,
.hero h1 .hl { color: var(--accent); font-style: normal; }

/* eyebrow tipo "manual de campo": mono, versalitas, rojo */
.hero-label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 500;
  color: var(--accent);
}

/* ── CTA: rojo sólido, sobrio, esquinas pequeñas ──────────── */
.btn-cta, .btn-primary, .btn-urgent {
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius); font-weight: 700;
  box-shadow: 0 8px 24px rgba(225, 27, 34, 0.28);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-cta:hover, .btn-primary:hover, .btn-urgent:hover {
  background: var(--accent-urgent-deep); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(225, 27, 34, 0.36);
}
.btn-header {
  background: var(--accent); color: #fff;
  padding: 8px 16px; border-radius: var(--radius);
  font-weight: 700; font-size: 0.82rem;
}
.btn-header:hover { background: var(--accent-urgent-deep); }

/* ── SUPERFICIES: negro puro y neutro (sin tinte navy heredado) ── */
.fixed-stack .header { background: rgba(10,10,11,0.92); border-bottom-color: var(--border); }
.ticker-wrap { background: #050506; border-block: 1px solid rgba(225,27,34,0.28); }
.ticker-item { color: #fff; }
.ticker-item svg { color: var(--accent); }
.mobile-nav { background: #0A0A0B; }
.footer { background: #050506; }
.cookie-modal { background: var(--bg-surface); }
.lightbox-backdrop { background: rgba(0,0,0,0.9); }

/* ── SECCIONES: contraste claro entre alterna y base ──────── */
.section { background: var(--bg); }
.section-alt { background: var(--bg-2); }
.section h2 { color: #fff; }
.section p { color: var(--text-muted); }
.section p strong { color: #fff; }

/* ── CARDS ────────────────────────────────────────────────── */
.cards-grid .card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.cards-grid .card:hover { border-color: var(--border-accent); }
.cards-grid .card .card-num,
.card--numbered .card-num {
  background: var(--accent); color: #fff;
  border: none; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800;
}
.card-seal { color: var(--accent); }
.grid-11 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── PRECIO ───────────────────────────────────────────────── */
.price-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.price { color: #fff; font-family: var(--font-display); font-weight: 800; }
.price sup { color: var(--accent); }
.delivery-note { color: var(--text-muted); }
.billing-note { color: var(--text-dim); }
.pay-methods {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: .9rem auto .2rem; padding: .4rem .9rem;
  font-size: .82rem; color: var(--text-muted);
  background: var(--surface-2, rgba(255,255,255,.03));
  border: 1px solid var(--border); border-radius: 50px;
}
.pay-methods strong { color: #fff; font-weight: 600; }
.pay-methods svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { color: #fff; }
.faq-item[open] summary { color: var(--accent); }
.faq-item p { color: var(--text-muted); }

/* ── DISCLAIMER ───────────────────────────────────────────── */
.disclaimer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1.7;
}
.disclaimer strong { color: #fff; }

/* ── IMÁGENES: portada + muestra enmarcadas en oscuro ─────── */
.hero-photo img, .sample-figure img {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  cursor: zoom-in;
}
.hero-photo figcaption, .sample-figure figcaption { color: var(--text-dim); }

/* ── TRUST STRIP + TIMELINE (hero) ────────────────────────── */
.trust-strip-item { color: var(--text-muted); }
.trust-strip-item svg { color: var(--accent); }
.htl-num { background: var(--accent); color: #fff; }
.htl-label { color: var(--text-muted); }

/* ── QUITAR MARCAS DE AGUA DE TEXTURA heredadas de 72 HORAS ───── */
.hero::before, .footer::after { background-image: none !important; }

/* ── FLOTANTE COMPRA (pastilla con texto) ─────────────────── */
.buy-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff; font-family: var(--font-body);
  font-weight: 700; font-size: .9rem; text-decoration: none;
  padding: .8rem 1.3rem; border-radius: 50px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(225, 27, 34, 0.42);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.buy-float svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) { .buy-float:hover { background: var(--accent-urgent-deep); transform: translateY(-2px); } }
@media (max-width: 600px) { .buy-float { bottom: 1rem; right: 1rem; padding: .72rem 1.05rem; font-size: .84rem; } }

/* ── SECCIÓN "QUÉ INCLUYE" EN 3 PARTES ────────────────────── */
.parts { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
         gap:1.4rem; margin-top:2.4rem; }
.part-card { background:var(--bg-surface); border:1px solid var(--border);
             border-top:3px solid var(--accent); border-radius:var(--radius-lg);
             padding:1.6rem 1.5rem; }
.part-tag { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
            font-size:.68rem; color:var(--accent); }
.part-card h3 { font-family:var(--font-display); font-weight:800; color:#fff;
                font-size:1.25rem; margin:.3rem 0 .2rem; }
.part-desc { color:var(--text-dim); font-size:.85rem; margin-bottom:1rem; }
.chap-list { list-style:none; margin:0; padding:0; counter-reset:chap; }
.chap-list li { position:relative; padding:.42rem 0 .42rem 2rem; font-size:.92rem;
                color:var(--text-muted); border-top:1px solid var(--border); }
.chap-list li::before { counter-increment:chap; content:counter(chap,decimal-leading-zero);
                        position:absolute; left:0; top:.42rem; font-family:var(--font-mono);
                        font-size:.72rem; color:var(--accent); font-weight:500; }
.part-2 .chap-list { counter-reset:chap 9; }
.part-3 .chap-list { counter-reset:chap 20; }

/* ═══ TEXTURA — grano de película sutil (estático, no parpadea) ═══ */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Halo rojo muy tenue tras el hero, para dar profundidad */
.hero-banner-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 45% at 50% 12%, rgba(225,27,34,0.10), transparent 70%);
}
.hero-banner-sec .hero-inner { position: relative; z-index: 1; }

/* Anclas: que el salto no quede tapado por el header fijo */
section[id] { scroll-margin-top: calc(var(--header-h) + var(--ticker-h) + 10px); }

/* Botón CTA dentro de artículos/legales: texto blanco (lo pisaba .legal-wrap a) */
.legal-wrap .btn-cta, .legal-wrap .btn-cta:visited { color: #fff; }

/* ═══ SELLOS DE CONFIANZA ═══ */
#sellos .section-inner { padding-block: 2.4rem; }
.seals { display:grid; grid-template-columns:repeat(5,1fr); gap:2rem 1.2rem;
  max-width:960px; margin:0 auto; }
.seal { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
.seal svg { width:30px; height:30px; color:var(--accent); }
.seal span { display:flex; flex-direction:column; font-size:.78rem; color:var(--text-muted); line-height:1.35; }
.seal strong { color:#fff; font-size:.9rem; margin-bottom:2px; }
@media (max-width:860px){ .seals { grid-template-columns:repeat(3,1fr); gap:2.2rem 1rem; max-width:520px; } }
@media (max-width:520px){ .seals { grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }

/* ═══ HERO-BANNER (imagen responsive con texto ya incrustado) ═══ */
.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; }
.hero-banner-sec { display:block; min-height:auto;
  padding: calc(var(--header-h) + var(--ticker-h) + 1.6rem) 1.25rem 2.6rem; text-align:center; }
/* el .hero-inner heredado añadía otro padding-top (~143px) → doble hueco */
.hero-banner-sec .hero-inner { padding-top: 0; margin-top: 0; }
@media (max-width: 600px) {
  .hero-banner-sec { padding-top: calc(var(--header-h) + var(--ticker-h) + 2.2rem); }
}
.geo-badge { display:inline-flex; align-items:center; gap:.45rem;
  background:var(--accent-dim); color:var(--accent); border:1px solid var(--border-accent);
  border-radius:50px; padding:.42rem 1rem; font-size:.78rem; font-weight:700; margin-bottom:1.2rem; }
.geo-badge svg { width:15px; height:15px; flex-shrink:0; }
.hero-banner { display:block; margin:0 auto; }
.hero-banner img { width:100%; max-width:1060px; height:auto; margin:0 auto; display:block;
  border-radius: var(--radius-lg); box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
@media (max-width:600px){ .hero-banner img { max-width:460px; } }
.hero-banner-sec .hero-actions { margin-top:1.8rem; justify-content:center; }
.hero-banner-sec .hero-cta-note { color:var(--text-dim); font-size:.85rem; margin-top:.6rem; }
.hero-banner-sec .trust-strip { margin-top:1.4rem; display:flex; gap:1.2rem 1.6rem;
  justify-content:center; flex-wrap:wrap; }

/* ═══ FIX TÍTULOS BORROSOS ═══
   El reveal acababa en transform:translateY(0) → el elemento se quedaba en una
   capa GPU y el texto pequeño (los eyebrows rojos: "Un vistazo por dentro"…)
   se rasterizaba borroso. Terminando en transform:none vuelve a nitidez total. */
.reveal.visible, .reveal-left.visible, .reveal-right.visible { transform: none; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hero-label { text-rendering: geometricPrecision; }

/* ═══ INTERACCIONES — hover seguro, shimmer y sin longpress móvil ═══ */

/* 1. Quitar el menú de longpress (guardar imagen / copiar enlace) y el
      flash gris al tocar; sin selección accidental en controles. */
a, button, .btn, .wa-float, img, .logo-mark {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .btn-header, .wa-float, .footer-social, .logo-mark,
a[role="button"], .lightbox-trigger { -webkit-user-select: none; user-select: none; }

/* 2. Anular el relleno deslizante heredado (::after) que en estos CTA era
      BLANCO (var(--accent-luxe)) y tapaba el rojo → texto invisible al hover. */
.btn-cta::after, .btn-header::after, .btn-urgent::after,
.fixed-stack .header .btn-header::after { content: none !important; }

/* 3. CTA rojos: base sólida garantizada (fondo rojo + texto blanco siempre) */
.btn-cta, .btn-header,
.fixed-stack .header .btn-header {
  background: var(--accent); color: #fff; border-color: var(--accent);
  position: relative; overflow: hidden;
}
.buy-float { overflow: hidden; }  /* position:fixed lo define el bloque FLOTANTE de arriba */

/* 4. SHIMMER: barrido de luz al pasar el ratón (solo en dispositivos con
      hover real → en móvil el longpress NO lo dispara). */
.btn-cta::before, .btn-header::before, .buy-float::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -160%; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events: none; z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover, .btn-header:hover,
  .fixed-stack .header .btn-header:hover {
    background: var(--accent-urgent-deep); color: #fff; border-color: var(--accent-urgent-deep);
    transform: translateY(-2px);
  }
  .btn-cta:hover::before, .btn-header:hover::before, .buy-float:hover::before {
    animation: h72-shimmer 0.7s ease;
  }
  .buy-float:hover { background: var(--accent-urgent-deep); }
}
@keyframes h72-shimmer { from { left: -160%; } to { left: 170%; } }

/* ── FOOTER: Instagram (@handle) + crédito discreto ───────── */
.footer-social { color: var(--text-muted); background: rgba(255,255,255,0.08); }
/* fix: antes el hover ponía blanco sobre blanco (icono invisible) */
.footer-social:hover,
.footer-ig:hover .footer-social { background: var(--accent); color: #fff; }
.footer-ig { display:inline-flex; align-items:center; gap:10px; margin-top: var(--space-2); }
.footer-ig .footer-social { margin-top: 0; }
.footer-handle { font-weight:600; color: var(--text-muted); transition: color .15s ease; }
.footer-ig:hover .footer-handle { color: var(--accent); }
.footer-credit { display:block; margin-top:.55rem; color:#3a3a40; font-size:.7rem; letter-spacing:.02em; transition: color .15s ease; }
.footer-credit:hover { color:#5a5a62; }

/* ═══ CARRUSEL "VISTAZO POR DENTRO" ═══ */
.peek { position:relative; max-width:500px; margin:0 auto; }
.peek-viewport { overflow:hidden; border-radius:var(--radius-lg); box-shadow:0 26px 60px rgba(0,0,0,.5); }
.peek-track { display:flex; transition:transform .45s var(--ease); }
.peek-slide { min-width:100%; margin:0; }
.peek-slide img { width:100%; display:block; cursor:zoom-in; background:#fff; }
.peek-arrow { position:absolute; top:44%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; border:none;
  font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45); transition:background .2s var(--ease); }
.peek-arrow.prev { left:-14px; } .peek-arrow.next { right:-14px; }
@media (hover:hover){ .peek-arrow:hover { background:var(--accent-urgent-deep); } }
.peek-cap { text-align:center; color:var(--text-dim); font-size:.85rem; margin-top:1rem; min-height:1.2em; }
.peek-dots { display:flex; gap:.5rem; justify-content:center; margin-top:.8rem; }
.peek-dot { width:8px; height:8px; border-radius:50%; background:var(--border-mid); border:none; padding:0; cursor:pointer; transition:background .2s,width .2s; }
.peek-dot.active { background:var(--accent); width:22px; border-radius:4px; }
@media (max-width:520px){ .peek-arrow { width:40px; height:40px; font-size:1.4rem; } .peek-arrow.prev{left:-4px} .peek-arrow.next{right:-4px} }

/* ── BLOG + ARTÍCULOS ─────────────────────────────────────── */
.article-eyebrow { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--accent); display:block; margin-bottom:.8rem; }
.legal-wrap .lead { font-size:1.12rem; color:var(--text); line-height:1.7; margin-bottom:2rem; }
.article-meta { color:var(--text-dim); font-size:.85rem; margin-bottom:2rem; }
.article-cta { background:var(--bg-surface); border:1px solid var(--border-mid);
  border-top:3px solid var(--accent); border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem; margin:2.6rem 0 1rem; text-align:center; }
.article-cta h3 { font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.2rem; margin-bottom:.4rem; }
.article-cta p { color:var(--text-muted); margin-bottom:1.1rem; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:2.4rem; }
.blog-card { display:flex; flex-direction:column; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.blog-card:hover { border-color:var(--border-accent); transform:translateY(-2px); }
.blog-card .tag { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:var(--accent); }
.blog-card h2 { font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem; margin:.5rem 0 .5rem; line-height:1.25; }
.blog-card p { color:var(--text-muted); font-size:.92rem; flex:1; }
.blog-card .more { color:var(--accent); font-weight:600; font-size:.88rem; margin-top:.9rem; }

/* ── PÁGINAS LEGALES ──────────────────────────────────────── */
.legal-wrap {
  max-width: 780px; margin: 0 auto;
  padding: calc(var(--header-h) + var(--ticker-h) + 3rem) var(--gutter, 1.25rem) 5rem;
}
.legal-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); margin-bottom: 1.6rem;
}
.legal-wrap h1 {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin-bottom: .4rem;
}
.legal-updated { color: var(--text-dim); font-size: .85rem; margin-bottom: 2.4rem; }
.legal-wrap h2 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 1.25rem; margin: 2.4rem 0 .8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.legal-wrap h3 { color: #fff; font-size: 1rem; margin: 1.4rem 0 .5rem; }
.legal-wrap p, .legal-wrap li { color: var(--text-muted); line-height: 1.75; }
.legal-wrap ul { margin: .6rem 0 1rem 1.2rem; }
.legal-wrap li { margin-bottom: .35rem; }
.legal-wrap a { color: var(--accent); }
.legal-wrap strong { color: #fff; }
.legal-fill { color: var(--accent); font-weight: 600; }
.legal-note {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 1.4rem 0; font-size: .9rem;
}