/* =============================================================
   MikaPort v2 — styles.css
   Cinematográfico con video de fondo · claridad para mayores
   ============================================================= */

/* =============================================================
   1. Tokens (paleta extraída del agua del video del barco)
   ============================================================= */
:root {
  --teal: #1E4152;
  --teal-2: #2F5565;
  --navy: #0A2540;
  --deep: #051922;
  --gold: #F5A623;
  --gold-soft: #F1D6A9;
  --text: #FFFFFF;
  --text-2: #E8EDF0;
  --text-dim: rgba(232, 237, 240, 0.62);
  --ink: #0A2540;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --navh: 76px;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-i18n-pending] body{visibility:hidden}.language-switch{display:flex;align-items:center;gap:7px;margin-left:28px;color:rgba(255,255,255,.55);font-size:.78rem;font-weight:700;letter-spacing:.04em}.language-switch a{color:rgba(255,255,255,.58);text-decoration:none;padding:6px 2px}.language-switch a.active{color:#fff;border-bottom:2px solid var(--gold)}

/* =============================================================
   2. Reset & base — texto grande y legible
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: clip;
  background: var(--teal);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 1.05rem + 0.2vw, 1.17rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
html.p2-open body, html.p2-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(245, 166, 35, 0.4); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 0.6rem 1rem; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.container { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }

/* =============================================================
   3. Fondos de video (loop horneado) + overlay de legibilidad
   ============================================================= */
.bg-media {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--teal);
}
.bg-media video,
.bg-media .bg-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.bg-poster { z-index: 0; }
.bg-media video { z-index: 1; }
.bg-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 25, 34, 0.62) 0%, rgba(10, 37, 64, 0.36) 26%,
                            rgba(10, 37, 64, 0.34) 62%, rgba(5, 25, 34, 0.68) 100%),
    radial-gradient(70% 90% at 24% 46%, rgba(5, 25, 34, 0.42), transparent 70%);
}
#page2 .bg-media { position: absolute; }
#page2 .bg-overlay {
  background:
    linear-gradient(180deg, rgba(5, 25, 34, 0.66) 0%, rgba(10, 37, 64, 0.42) 30%,
                            rgba(10, 37, 64, 0.40) 64%, rgba(5, 25, 34, 0.74) 100%);
}

main { position: relative; z-index: 10; }

/* =============================================================
   4. Tipografía
   ============================================================= */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; text-wrap: balance; }

.kicker {
  display: inline-block;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-soft);
}
.section-title { font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 24ch; margin-top: 0.8rem; }
.section-lead { color: var(--text-2); max-width: 62ch; margin-top: 1.2rem; }
.t-shadow { text-shadow: 0 2px 22px rgba(3, 14, 20, 0.8), 0 1px 3px rgba(3, 14, 20, 0.9); }

/* =============================================================
   5. Botones — grandes, obvios, para todas las edades
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  font-weight: 700; font-size: 1.05rem;
  padding: 1.05rem 1.9rem; border-radius: 999px;
  text-decoration: none; text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, filter 0.3s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-gold {
  background: linear-gradient(135deg, #FFC14D 0%, var(--gold) 55%, #E08F0F 100%);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(245, 166, 35, 0.35), inset 0 1px 0 rgba(255, 235, 200, 0.6);
}
.btn-gold:hover { box-shadow: 0 18px 42px rgba(245, 166, 35, 0.45), inset 0 1px 0 rgba(255, 235, 200, 0.6); filter: brightness(1.04); }

.btn-ghost {
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: var(--text);
  background: rgba(5, 25, 34, 0.32);
}
@supports (backdrop-filter: blur(8px)) { .btn-ghost { backdrop-filter: blur(8px); } }
.btn-ghost:hover { border-color: var(--gold-soft); background: rgba(5, 25, 34, 0.5); }

.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(5, 25, 34, 0.45); }
.btn-lg { padding: 1.25rem 2.4rem; font-size: 1.14rem; }

/* Señal de confianza pegada al CTA */
.trust-line {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 1.1rem;
  color: var(--text-2); font-size: 1rem; font-weight: 600;
}
.trust-line svg { flex: 0 0 auto; margin-top: 0.22rem; }

/* =============================================================
   6. Header fijo
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--navh);
  background: rgba(5, 25, 34, 0.55);
  border-bottom: 1px solid rgba(232, 237, 240, 0.12);
}
@supports (backdrop-filter: blur(14px)) {
  .nav { background: rgba(5, 25, 34, 0.42); backdrop-filter: blur(14px); }
}
.nav-inner { display: flex; align-items: center; gap: 1rem; height: 100%; }
.brand{flex:0 0 auto}.nav-actions{min-width:0}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; letter-spacing: 0.01em; }
.brand-name b { color: var(--gold); font-weight: 700; }
.nav-actions { margin-left: auto; display: flex; gap: 0.7rem; }
.nav .btn { padding: 0.72rem 1.3rem; font-size: 0.97rem; }
html.p2-open .nav-info { display: none; }
html.p2-open .nav-calc { display: none; }
.nav-back { display: none; }
html.p2-open .nav-back { display: inline-flex; }

/* =============================================================
   7. Página 1 — secciones
   ============================================================= */
section { position: relative; }

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--navh) + 3.5rem) 5rem;
}
.hero-content { max-width: 660px; }
.hero-window-link { margin-top: 1.15rem; }
.hero-title { font-size: clamp(2.35rem, 5.4vw, 4.15rem); }
.hero-sub { margin-top: 1.4rem; color: var(--text-2); font-size: clamp(1.1rem, 1.9vw, 1.28rem); max-width: 50ch; }
.hero-claim {
  margin-top: 1.6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  color: var(--gold-soft);
}
.hero-actions { margin-top: 2.1rem; }

/* Tarjetas de contexto */
.origen { padding-block: 7.5rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3rem; }
.stat {
  background: rgba(5, 25, 34, 0.62);
  border: 1px solid rgba(232, 237, 240, 0.14);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 24px 60px rgba(3, 14, 20, 0.4);
}
@supports (backdrop-filter: blur(10px)) {
  .stat { background: rgba(5, 25, 34, 0.5); backdrop-filter: blur(10px); }
}
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 5.2vw, 3.9rem); line-height: 1;
  color: var(--gold);
}
.stat-label { font-weight: 700; margin-top: 0.9rem; font-size: 1.08rem; line-height: 1.45; }
.stat-desc { color: var(--text-2); font-size: 0.97rem; margin-top: 0.55rem; }
.stat-src { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.7rem; }

/* -------- Calculadora translúcida -------- */
.calc-section { padding-block: 6.5rem; display: flex; }
.program-card {
  background: rgba(10, 37, 64, 0.74);
  border: 1px solid rgba(241, 214, 169, 0.32);
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(3, 14, 20, 0.55);
  padding: clamp(1.7rem, 4vw, 2.8rem);
  position: relative; overflow: hidden;
}
.calc-card { width: min(620px, 100%); margin-inline: auto; }
@supports (backdrop-filter: blur(14px)) {
  .program-card { background: rgba(10, 37, 64, 0.62); backdrop-filter: blur(14px) saturate(130%); }
}
.program-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.calc-title { font-size: clamp(1.7rem, 3.4vw, 2.25rem); }
.calc-intro{display:contents}
.calc-note { color: var(--text-dim); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.5rem; }
.calc-forecast-badge{margin:.7rem 0 1rem;padding:.55rem .75rem;border-radius:8px;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.5);font-size:.76rem;font-weight:700;line-height:1.4;color:var(--navy)}

.calc-field { margin-top: 1.9rem; }
.calc-label { display: block; font-size: 1.05rem; font-weight: 600; color: var(--text-2); }
.calc-input-wrap { position: relative; margin-top: 0.7rem; }
.calc-input-wrap::before {
  content: "$"; position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 700; color: var(--gold);
}
#calc-amount {
  width: 100%;
  background: rgba(5, 25, 34, 0.6);
  border: 2px solid rgba(232, 237, 240, 0.25);
  border-radius: 14px;
  color: var(--text);
  font-size: 1.5rem; font-weight: 600;
  padding: 1rem 1.15rem 1rem 2.7rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
#calc-amount:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.22); }
#calc-amount.is-invalid { border-color: #E0644D; box-shadow: 0 0 0 4px rgba(224, 100, 77, 0.22); }
#calc-amount::placeholder { color: var(--text-dim); font-weight: 500; }

.calc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.chip {
  font-size: 0.98rem; font-weight: 600;
  padding: 0.62rem 1.15rem; border-radius: 999px;
  border: 2px solid rgba(232, 237, 240, 0.28);
  color: var(--text-2);
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--gold-soft); color: #fff; }
.chip[aria-pressed="true"] { background: rgba(245, 166, 35, 0.18); border-color: var(--gold); color: #FFE9C2; }

.calc-run { width: 100%; margin-top: 1.5rem; }

.calc-result { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.9s var(--ease), opacity 0.7s 0.1s; }
.calc-result.is-live { max-height: 560px; opacity: 1; }
.calc-result-inner { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid rgba(241, 214, 169, 0.3); }
.calc-result-label { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.calc-range {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.8vw, 2.9rem); line-height: 1.15;
  color: var(--gold); margin-top: 0.45rem;
}
.calc-interest { margin-top: 0.5rem; font-size: 1.08rem; font-weight: 600; color: var(--gold-soft); }
.calc-breakdown { margin-top: 0.8rem; color: var(--text-2); line-height: 1.55; }
.calc-tranches{display:grid;gap:.8rem;margin-top:1rem;color:var(--text-2);line-height:1.5}.calc-tranches div{padding:.8rem 1rem;border-left:3px solid var(--gold);background:rgba(5,25,34,.36)}.calc-tranches b{color:var(--gold-soft)}.calc-how{width:100%;margin-top:.7rem;border:1px solid rgba(241,214,169,.28);border-radius:14px;color:var(--text-2);overflow:hidden}.calc-how summary{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.72rem 1rem;cursor:pointer;color:var(--gold-soft);font-weight:800;font-size:1.05rem;text-align:center}.calc-how ol{display:grid;gap:.8rem;margin:0;padding:1rem 1.2rem 1rem 2.6rem;line-height:1.55;border-top:1px solid rgba(241,214,169,.2)}
.calc-error { min-height: 1.5em; margin-top: 1rem; color: #ffb6a8; font-weight: 700; }
.calc-result.pulse .calc-range { animation: rangePulse 0.9s var(--ease); }
@keyframes rangePulse { 0% { transform: scale(0.96); } 55% { transform: scale(1.02); } 100% { transform: none; } }

/* Botón dinámico: apagado → encendido dorado */
.calc-more {
  width: 100%; margin-top: 1.35rem;
  border-radius: 999px; padding: 1.15rem 1.9rem;
  font-weight: 700; font-size: 1.08rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  transition: transform 0.3s var(--ease), box-shadow 0.4s, background 0.5s, color 0.5s, border-color 0.5s;
}
.calc-more.is-off {
  background: rgba(120, 134, 145, 0.22);
  border: 2px solid rgba(232, 237, 240, 0.18);
  color: rgba(232, 237, 240, 0.45);
  cursor: not-allowed;
}
.calc-more.is-on {
  background: linear-gradient(135deg, #FFC14D 0%, var(--gold) 55%, #E08F0F 100%);
  border: 2px solid transparent;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(245, 166, 35, 0.4);
  animation: ignite 1.4s var(--ease);
}
.calc-more.is-on:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(245, 166, 35, 0.5); }
@keyframes ignite {
  0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.65); }
  45% { box-shadow: 0 0 0 16px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 12px 32px rgba(245, 166, 35, 0.4); }
}

.calc-fine { margin-top: 1.4rem; font-size: 0.88rem; line-height: 1.6; color: var(--text-dim); }
.calc-window-promo{margin-top:1.4rem;text-align:center}.calc-window-button{display:inline-flex;justify-content:center;min-width:min(100%,360px);font-size:1.08rem;animation:window-gold-pulse 2.5s ease-in-out infinite}.calc-window-details{max-width:780px;margin:1rem auto 0;padding:0;text-align:left;border:1px solid rgba(241,214,169,.3);border-radius:12px;background:rgba(5,25,34,.28)}.calc-window-details summary{min-height:44px;padding:.8rem 1rem;cursor:pointer;color:var(--gold-soft);font-weight:700}.calc-window-details p{margin:0;padding:0 1rem 1rem;color:var(--text-2);line-height:1.65}@keyframes window-gold-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.18),0 0 14px rgba(245,166,35,.2)}50%{box-shadow:0 0 0 9px rgba(245,166,35,0),0 0 28px rgba(245,166,35,.48)}}
.calc-7501-help{margin-top:.7rem;border:1px solid rgba(241,214,169,.3);border-radius:12px;background:rgba(5,25,34,.28);color:var(--text-2)}.calc-7501-help summary{min-height:44px;padding:.8rem 1rem;cursor:pointer;color:var(--gold-soft);font-weight:700}.calc-7501-help p{margin:0;padding:0 1rem 1rem;line-height:1.65}.calc-7501-help ul{display:grid;gap:.55rem;margin:0;padding:0 1rem 1rem 2.25rem}.calc-7501-help a{color:var(--gold-soft)}
.calc-zone{min-width:0}.calc-zone-a .calc-field{margin-top:0}.calc-zone-a .calc-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.calc-zone-a .chip{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center}.calc-zone-a .calc-run{margin-top:1rem}.calc-zone-b .calc-more{margin-top:0}.calc-zone-c .calc-window-promo{margin-top:0}.calc-how summary,.calc-7501-help summary,.calc-window-details summary{list-style:none}.calc-how summary::-webkit-details-marker,.calc-7501-help summary::-webkit-details-marker,.calc-window-details summary::-webkit-details-marker{display:none}.calc-how summary::before,.calc-7501-help summary::before,.calc-window-details summary::before{content:"▶";display:inline-block;margin-right:.55rem;font-size:.72em;transition:transform .2s ease}.calc-how[open] summary::before,.calc-7501-help[open] summary::before,.calc-window-details[open] summary::before{transform:rotate(90deg)}
.calc-fine-top { margin-top: 0.9rem; padding: 0.8rem 1rem; border-left: 3px solid var(--gold); background: rgba(5,25,34,.35); }
.date-trigger{width:100%;min-height:52px;margin-top:.7rem;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;border:2px solid rgba(232,237,240,.28);border-radius:12px;color:#fff;font-family:"IBM Plex Mono",monospace;text-align:left}.date-trigger:hover,.date-trigger:focus-visible{border-color:var(--gold);outline:none}.date-open{overflow:hidden}.date-overlay{position:fixed;inset:0;z-index:1000;background:#F4F7F9;color:#0C2D4D;overflow:auto}.date-shell{width:min(1180px,100%);min-height:100%;margin:auto;padding:clamp(18px,4vw,48px);display:grid;grid-template-rows:auto auto 1fr auto auto;gap:20px}.date-shell header{display:flex;justify-content:space-between;gap:20px;align-items:start}.date-shell h2{font-family:"Saira Condensed",sans-serif;font-size:clamp(2rem,5vw,3.5rem);color:#0C2D4D}.date-kicker,.date-live,.chart-grid text,.chart-year,.date-shell input{font-family:"IBM Plex Mono",monospace}.date-kicker{color:#DE9526;font-weight:700;letter-spacing:.08em}.date-close{width:48px;height:48px;border:1px solid #b8c5ce;border-radius:50%;font-size:2rem;color:#0C2D4D}.date-controls{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:18px;align-items:end}.date-controls label{font-weight:700}.date-controls input{display:block;width:100%;height:48px;margin-top:6px;padding:0 12px;border:1px solid #9aabb8;border-radius:7px;background:#fff;color:#0C2D4D;font-size:1rem}.date-live{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:22px;align-items:stretch}.date-bubble{min-width:190px;padding:14px 20px;background:#fff;display:flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap}.date-details{padding:12px 16px;border-left:4px solid #DE9526;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}.date-details strong{font-size:1.8rem;line-height:1}.date-refund:not(:empty){color:#1F7A5C;font-weight:700;line-height:1.35}.chart-wrap{position:relative;min-height:300px;background:#fff;border:1px solid #d5dde3;border-radius:8px;padding:8px}.chart-wrap svg{display:block;width:100%;height:min(42vh,380px);touch-action:none}.chart-grid line{stroke:#dfe6eb;stroke-width:1}.chart-grid text,.chart-year{fill:#637786;font-size:12px}.chart-area{fill:rgba(31,122,92,.09)}.chart-line{fill:none;stroke:#0C2D4D;stroke-width:6;stroke-linejoin:miter}.chart-peak{stroke:#DE9526;stroke-width:9;stroke-linecap:butt;opacity:.34}.chart-milestone{cursor:pointer}.chart-milestone line{stroke:#DE9526;stroke-width:1;stroke-dasharray:2 5;opacity:.42}.chart-milestone circle{fill:#F4F7F9;stroke:#DE9526;stroke-width:2}.chart-milestone text{fill:#0C2D4D;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700}.chart-milestone:focus{outline:none}.chart-milestone:focus circle,.chart-milestone:hover circle{fill:#DE9526}.chart-marker{stroke:#DE9526;stroke-width:2;stroke-dasharray:5 4}.chart-dot{fill:#DE9526;stroke:#fff;stroke-width:3}.date-slider{position:absolute;inset:8px 0 8px 0;width:100%;height:calc(100% - 16px);opacity:.001;cursor:ew-resize;touch-action:none}.date-presets{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px}.date-preset{flex:0 0 auto;min-height:44px;padding:0 16px;border:1px solid #9aabb8;border-radius:999px;font-family:"IBM Plex Mono",monospace;color:#0C2D4D;background:#fff}.date-preset:hover,.date-preset:focus-visible{border-color:#DE9526;outline:none}.date-zero{padding:10px 14px;border-left:4px solid #DE9526;background:#fff;font-weight:700}.date-shell footer{display:flex;justify-content:space-between;gap:24px;align-items:end;border-top:1px solid #ccd6dd;padding-top:18px}.date-shell footer p{max-width:720px;font-size:.9rem}.date-next{min-width:180px;background:#0C2D4D;color:#fff;border-color:#0C2D4D}

/* -------- Proceso implacable -------- */
.proceso { padding-block: 7.5rem; }
.hard-points { display: grid; gap: 1.05rem; margin-top: 2.6rem; max-width: 760px; }
.hard-point {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: rgba(5, 25, 34, 0.55);
  border: 1px solid rgba(232, 237, 240, 0.13);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}
.hard-point svg { margin-top: 0.3rem; }
.hard-point p { color: var(--text-2); }
.hard-point strong { color: #fff; }
.proceso-cierre {
  margin-top: 2.2rem;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--gold-soft); max-width: 30ch;
}

/* -------- Auditoría incluida -------- */
.audit { padding-block: 7.5rem; }
.audit-card { width: min(1000px, 100%); margin-inline: auto; }
.audit .section-title { max-width: 28ch; }
.audit .section-lead { max-width: 78ch; line-height: 1.7; }
.audit-fronts { display: grid; gap: 0.8rem; max-width: 900px; margin-top: 2.6rem; }
.audit-front {
  overflow: hidden;
  border: 1px solid rgba(241,214,169,.3);
  border-radius: 12px;
  background: rgba(5,25,34,.42);
  color: var(--text-2);
}
.audit-front summary {
  min-height: 54px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  color: var(--gold-soft);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}
.audit-front summary::-webkit-details-marker { display: none; }
.audit-front summary::before {
  content: "▶";
  display: inline-block;
  margin-right: .65rem;
  font-size: .72em;
  transition: transform .2s ease;
}
.audit-front[open] summary::before { transform: rotate(90deg); }
.audit-front p { margin: 0; padding: 0 1.1rem 1.15rem 2.45rem; line-height: 1.7; }
.audit-closing { max-width: 78ch; margin-top: 2.2rem; color: var(--text-2); line-height: 1.7; }

/* -------- Estafas -------- */
.estafas { padding-block: 7.5rem; }
.estafas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.8rem; align-items: stretch; }
.card-warn, .card-diff {
  border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.1rem);
  background: rgba(5, 25, 34, 0.62);
  border: 1px solid rgba(232, 237, 240, 0.14);
  box-shadow: 0 24px 60px rgba(3, 14, 20, 0.4);
}
.card-warn { border-top: 4px solid #E0644D; }
.card-diff { border-top: 4px solid var(--gold); }
.card-tag { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.card-warn .card-tag { color: #FFB3A3; }
.card-diff .card-tag { color: var(--gold-soft); }
.card-warn h3, .card-diff h3 { font-size: 1.45rem; margin-top: 0.6rem; }
.check-list { list-style: none; margin-top: 1.1rem; display: grid; gap: 0.85rem; }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: var(--text-2); }
.check-list svg { margin-top: 0.26rem; }
.check-list strong { color: #fff; }

/* -------- Franja dorada -------- */
.goldband {
  background: linear-gradient(130deg, #C77F10 0%, var(--gold) 30%, #FFD489 52%, var(--gold) 74%, #C77F10 100%);
  color: var(--ink);
  padding-block: 5.5rem;
  text-align: center;
  box-shadow: 0 -18px 50px rgba(3, 14, 20, 0.45), 0 18px 50px rgba(3, 14, 20, 0.45);
}
.goldband h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; max-width: 20ch; margin-inline: auto; }
.goldband p { max-width: 56ch; margin: 1.2rem auto 0; font-weight: 600; color: rgba(10, 37, 64, 0.85); font-size: 1.1rem; }
.goldband .btn { margin-top: 2rem; }

/* -------- Footer -------- */
.footer { position: relative; z-index: 10; background: var(--deep); border-top: 1px solid rgba(245, 166, 35, 0.22); padding-block: 3.6rem 2.4rem; }
.footer-logo img { height: 116px; width: auto; }
.footer-legal { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid rgba(232, 237, 240, 0.1); color: var(--text-dim); font-size: 0.88rem; line-height: 1.7; max-width: 84ch; }
.footer-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 1.7rem; font-size: 0.85rem; color: var(--text-dim); }
.footer-base a { color: var(--text-2); text-decoration: none; font-weight: 600; }
.footer-base a:hover { color: var(--gold-soft); }

/* =============================================================
   8. Página 2 — overlay con video del puerto y botón sticky
   ============================================================= */
#page2 {
  position: fixed; inset: 0; z-index: 40;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
}
html.p2-open #page2 { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
.p2-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 5; }
.p2-content { position: relative; z-index: 5; padding-top: calc(var(--navh) + 30vh); padding-bottom: 5rem; }

.wa-sticky {
  position: sticky; top: calc(var(--navh) + 12px);
  z-index: 20;
  display: grid; justify-items: center; gap: 0.7rem;
  margin-bottom: 3.4rem;
}
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  background: rgba(10, 37, 64, 0.66);
  border: 2px solid var(--gold);
  color: #fff;
  font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  padding: 1.2rem 2.1rem; border-radius: 999px;
  text-decoration: none; text-align: center;
  box-shadow: 0 20px 55px rgba(3, 14, 20, 0.6), 0 0 0 1px rgba(245, 166, 35, 0.25);
  transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s;
}
@supports (backdrop-filter: blur(12px)) { .wa-btn { background: rgba(10, 37, 64, 0.5); backdrop-filter: blur(12px); } }
.wa-btn:hover { transform: translateY(-3px); background: rgba(10, 37, 64, 0.72); box-shadow: 0 26px 65px rgba(3, 14, 20, 0.7), 0 0 0 1px rgba(245, 166, 35, 0.45); }
.wa-btn svg { flex: 0 0 auto; }
.wa-note {
  font-size: 0.95rem; font-weight: 600; color: var(--text-2);
  background: rgba(5, 25, 34, 0.55); border-radius: 999px; padding: 0.35rem 0.95rem;
}
@supports (backdrop-filter: blur(8px)) { .wa-note { backdrop-filter: blur(8px); } }

.p2-blocks { display: grid; gap: 1.15rem; max-width: 720px; margin-inline: auto; }
.p2-block {
  background: rgba(5, 25, 34, 0.6);
  border: 1px solid rgba(232, 237, 240, 0.14);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: 0 24px 60px rgba(3, 14, 20, 0.45);
}
@supports (backdrop-filter: blur(10px)) { .p2-block { background: rgba(5, 25, 34, 0.48); backdrop-filter: blur(10px); } }
.p2-block h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); color: #fff; }
.p2-block h3 em { color: var(--gold-soft); font-style: italic; }
.p2-block p { color: var(--text-2); margin-top: 0.7rem; }
.p2-head { text-align: center; margin-bottom: 2.6rem; }
.p2-head .section-title { margin-inline: auto; }
.p2-volver { display: block; text-align: center; margin-top: 3rem; color: var(--text-2); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.p2-volver:hover { color: var(--gold-soft); }

/* =============================================================
   9. Reveals + accesibilidad de movimiento
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* Defensa (gotcha A.4.5): jamás invisible aunque el JS quede cacheado viejo */
.reveal[data-split], [data-reveal][data-split] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition-duration: 0.35s; }
  .calc-more.is-on { animation: none; }
  .calc-window-button { animation: none; }
}

/* =============================================================
   10. Responsive
   ============================================================= */
@media (min-width: 1100px) {
  .calc-section{padding-block:1rem}
  .calc-section>.container{width:min(1240px,calc(100% - 40px))}
  .calc-card{width:100%;padding:1.25rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1rem;row-gap:.7rem;align-items:start}
  .calc-intro{display:grid;grid-column:1/5;grid-row:1;grid-template-columns:1fr 1fr;column-gap:1rem;align-items:start}.calc-intro .calc-title{grid-column:1;margin:0}.calc-intro .calc-note{grid-column:2;margin-top:.2rem;text-align:right}.calc-intro .calc-forecast-badge{grid-column:1/3;margin:.55rem 0 0;padding:.45rem .75rem}
  .calc-field{grid-row:2;margin-top:0;align-self:start;min-width:0}
  .calc-field:has(#calc-country){grid-column:1}
  .calc-field:has(#calc-date-open){grid-column:2}
  .calc-chips{gap:.4rem;margin-top:.55rem}.chip{padding:.5rem .75rem}
  .calc-field:has(#calc-country) .calc-chips{display:grid;grid-template-columns:1fr 1fr}.calc-field:has(#calc-country) .chip{width:100%;min-height:42px;padding:.4rem .55rem}
  .date-trigger{margin-top:.55rem}
  .calc-zone-a{grid-column:3/5;grid-row:2;align-self:start;padding-left:1rem;border-left:1px solid rgba(241,214,169,.2)}
  .calc-zone-a .calc-field{display:block}.calc-zone-a .calc-chips{gap:.6rem}.calc-zone-a .chip{min-height:44px;padding:.55rem .75rem;font-size:.9rem}.calc-zone-a #calc-amount{font-size:1.3rem;padding:.85rem 1rem .85rem 2.5rem}.calc-zone-a .calc-run{min-height:52px}.calc-zone-a .calc-how{margin-top:.35rem}.calc-zone-a .calc-result-inner{margin-top:1rem;padding-top:1rem}.calc-zone-a .calc-range{font-size:clamp(1.9rem,3vw,2.55rem)}
  .calc-zone-b{grid-column:1/3;grid-row:3;margin-top:.5rem;padding-right:.5rem;align-self:start}.calc-zone-b .calc-more{padding:.8rem 1rem;text-align:center}
  .calc-zone-c{grid-column:3/5;grid-row:3;margin-top:.5rem;padding-left:.5rem;align-self:start}
  .calc-fine:not(.calc-fine-top){grid-column:1/5;grid-row:4;margin-top:.15rem;padding-top:.65rem;border-top:1px solid rgba(241,214,169,.22);align-self:start}
}
@media (max-width: 960px) {
  .stats { grid-template-columns: 1fr; }
  .estafas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1280px) and (min-width: 761px){.nav-inner{gap:.6rem}.nav-actions{gap:.45rem}.nav .btn{padding:.65rem .85rem;font-size:.84rem}.brand-name{font-size:1.15rem}}
@media (max-width: 760px) {
  :root { --navh: 66px; }
  .nav .container{width:calc(100% - 20px)}
  .brand-name { display:none; }
  .brand img { height:32px; }
  .nav-inner { gap:4px; }
  .nav-actions{display:grid;grid-template-columns:1fr 1.15fr 1fr auto;align-items:center;gap:3px;flex:1;margin-left:16px;min-width:0}
  .nav-actions .language-switch{justify-content:flex-end;gap:3px;margin-left:4px;font-size:.66rem;letter-spacing:0}
  .nav-actions .language-switch a{display:flex;align-items:center;justify-content:center;min-width:22px;min-height:40px;padding:0}
  .nav .btn{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:3px 4px;font-size:clamp(.58rem,2.35vw,.7rem);line-height:1.08;white-space:normal;text-align:center;border-width:1px}
  .nav .nav-back{display:none}
  html.p2-open .nav-actions{grid-template-columns:1fr 1fr auto}
  html.p2-open .nav .nav-back { display:flex; }
  .hero-actions .btn { width: 100%; }
  .goldband .btn { width: min(420px, 100%); }
  .p2-content { padding-top: calc(var(--navh) + 24vh); }
  .wa-btn { width: 100%; }
  .date-shell{padding:16px;gap:14px}.date-controls{grid-template-columns:1fr}.date-live{align-items:center}.chart-wrap{min-height:245px}.chart-wrap svg{height:280px}.date-shell footer{align-items:stretch;flex-direction:column}.date-next{width:100%;min-height:50px}.date-shell h2{line-height:1}.date-close{flex:0 0 auto}
}
@media (max-width: 480px) {
  .brand img { height:30px; }
  .nav-inner { gap:3px; }
  .nav-actions { gap:2px; }
}
@media (max-width: 360px) {
  .brand img { height:28px; }
  .nav .btn { font-size:.57rem; }
}