/* VECTRA — estilo editorial del dossier: marino, dorado y crema, titulares serif */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

:root {
  --navy:#0A3048;
  --navy-2:#0F3A55;
  --gold:#C9A04E;
  --gold-soft:rgba(201,160,78,0.45);
  --cream:#FCFAF6;
  --beige:#F6F1E7;
  --line:#E6DCC4;
  --ink:#0A3048;
  --gray:#6B7280;
  --serif:'Tinos','Times New Roman',Times,serif;
  --wrap:1160px;
}

body { font-family:var(--serif); font-size:17px; line-height:1.6; background:var(--cream); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 40px; }

/* ── NAV ───────────────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; background:rgba(252,250,246,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo svg { color:var(--navy); }
.logo__text { display:flex; flex-direction:column; }
.logo__word { font-weight:700; font-size:21px; letter-spacing:0.04em; line-height:1; color:var(--navy); }
.logo__tag { font-size:8px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-top:5px; white-space:nowrap; }
.nav-links { display:flex; gap:36px; }
.nav-links a { font-size:13px; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; color:var(--navy); padding:6px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.nav-links a:hover, .nav-links a.nav-active { color:var(--gold); border-color:var(--gold); }
.nav-cta { font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; color:var(--cream); background:var(--navy); padding:12px 22px; border-radius:4px; transition:background .2s,color .2s; }
.nav-cta:hover { background:var(--gold); color:var(--navy); }
.ham { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:200; }
.ham span { display:block; width:24px; height:2px; background:var(--navy); transition:all .2s; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mob-menu { position:fixed; top:0; right:0; bottom:0; width:82vw; max-width:340px; background:var(--navy); z-index:150; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; padding:110px 40px 60px; gap:26px; }
.mob-menu.open { transform:translateX(0); }
.mob-menu a { font-size:30px; font-weight:700; color:var(--cream); text-decoration:none; transition:color .2s; }
.mob-menu a:hover, .mob-menu a.nav-active, .mob-menu a.gold { color:var(--gold); }
.mob-overlay { position:fixed; inset:0; background:rgba(10,48,72,0.55); z-index:140; display:none; }
.mob-overlay.open { display:block; }

/* ── BOTONES ───────────────────────────────────── */
.btn { display:inline-block; font-family:var(--serif); font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none; padding:16px 34px; border-radius:4px; border:1px solid var(--gold); cursor:pointer; transition:all .2s; text-align:center; }
.btn--gold { background:var(--gold); color:var(--navy); }
.btn--gold:hover { background:#d6b062; }
.btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.7); }
.btn--ghost:hover { background:rgba(255,255,255,0.12); border-color:#fff; }
.btn--navy { background:var(--navy); color:var(--cream); border-color:var(--navy); }
.btn--navy:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn:disabled { opacity:.6; cursor:wait; }

/* ── PORTADA (hero con marco blanco, como la portada del dossier) ── */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 48px 80px; overflow:hidden; background:var(--navy); }
.hero-bg { position:absolute; inset:0; background:var(--navy) url('media/poster.jpg') center/cover no-repeat; }
.hero-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,48,72,0.62) 0%, rgba(10,48,72,0.52) 50%, rgba(10,48,72,0.78) 100%); }
.hero-frame { position:absolute; inset:36px; border:10px solid #fff; pointer-events:none; z-index:2; }
.hero-content { position:relative; z-index:3; max-width:860px; display:flex; flex-direction:column; align-items:center; color:#fff; }
.hero-mark { margin-bottom:14px; }
.hero-word { font-size:clamp(52px,8vw,92px); font-weight:400; letter-spacing:0.04em; line-height:1; }
.hero-tag { font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-top:10px; }
.hero-rule { width:min(520px,70%); height:2px; background:var(--gold); margin:34px 0; }
.hero-title { font-size:clamp(30px,4.6vw,54px); font-weight:700; line-height:1.12; letter-spacing:0.02em; text-transform:uppercase; text-wrap:balance; }
.hero-sub { font-size:19px; margin-top:22px; color:rgba(255,255,255,0.9); max-width:600px; }
.hero-actions { display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; justify-content:center; }
.hero-foot { position:absolute; z-index:3; bottom:60px; left:0; right:0; text-align:center; font-size:13px; letter-spacing:0.1em; color:var(--gold); }

/* ── CABECERA DE SECCIÓN / PÁGINA ──────────────── */
.eyebrow { display:block; font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.h-title { font-size:clamp(34px,4.6vw,56px); font-weight:700; line-height:1.08; color:var(--navy); }
.h-sub { font-size:clamp(18px,2vw,22px); color:var(--gray); margin-top:10px; max-width:720px; }
.head { padding:28px 0 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:56px; }
.page-top { padding-top:76px; }
.page-top .head { margin-top:48px; }

section { padding:84px 0; }
.sec-tight { padding-top:20px; }

/* ── IMAGEN GRANDE ─────────────────────────────── */
.figure { position:relative; overflow:hidden; border-radius:2px; }
.figure img { width:100%; height:100%; object-fit:cover; }
.figure--wide { aspect-ratio:16/6.5; }
.figure--cap figcaption { position:absolute; left:0; bottom:0; background:rgba(10,48,72,0.88); color:var(--cream); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; padding:10px 16px; }
.figure--cap figcaption b { color:var(--gold); }

/* ── COLUMNAS NUMERADAS ────────────────────────── */
.cols { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.cols--4 { grid-template-columns:repeat(4,1fr); gap:28px; }
.col { border-top:2px solid var(--gold); padding-top:14px; }
.col__num { font-size:22px; font-weight:700; color:var(--gold); }
.col__title { font-size:22px; font-weight:700; color:var(--navy); line-height:1.2; margin:4px 0 8px; }
.col__text { font-size:16px; color:var(--gray); }

/* ── ESTADÍSTICAS ──────────────────────────────── */
.stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.stat { display:flex; align-items:center; gap:24px; background:var(--beige); border-radius:10px; padding:26px 30px; }
.stat svg { flex:none; color:var(--gold); }
.stat__body { border-left:1px solid var(--gold-soft); padding-left:24px; }
.stat__num { font-size:46px; font-weight:700; line-height:1; color:var(--navy); }
.stat__label { font-size:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); margin-top:4px; }

/* ── BANDA MARINO (callout) ────────────────────── */
.callout { display:flex; align-items:center; gap:36px; background:var(--navy); color:#fff; border-radius:10px; padding:30px 36px; }
.callout__title { flex:none; width:230px; font-size:26px; font-weight:700; line-height:1.15; color:var(--gold); }
.callout__text { border-left:1px solid var(--gold-soft); padding-left:36px; font-size:18px; }
.callout + .callout { margin-top:20px; }

/* ── DOS LÍNEAS DE NEGOCIO ─────────────────────── */
.lines { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.line-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:440px; padding:34px; color:#fff; text-decoration:none; overflow:hidden; border-radius:2px; }
.line-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.line-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,48,72,0.05) 25%, rgba(10,48,72,0.9) 100%); }
.line-card:hover img { transform:scale(1.04); }
.line-card > *:not(img) { position:relative; z-index:1; }
.line-card__num { font-size:20px; font-weight:700; color:var(--gold); }
.line-card__title { font-size:32px; font-weight:700; line-height:1.1; margin:4px 0 10px; }
.line-card__text { font-size:17px; color:rgba(255,255,255,0.9); max-width:440px; }
.line-card__more { margin-top:18px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }

/* ── GALERÍA DE EVIDENCIA ──────────────────────── */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gallery figure { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px; }
.gallery img { width:100%; height:100%; object-fit:cover; }
.gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,transparent,rgba(10,48,72,0.92)); }

/* ── PROCESO ───────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step { text-align:left; padding-right:24px; }
.step__dot { width:64px; height:64px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.steps::before { content:''; position:absolute; top:32px; left:32px; right:32px; height:1px; background:var(--gold); }
.step__num { display:block; margin-top:18px; font-size:22px; font-weight:700; color:var(--gold); }
.step__title { font-size:24px; font-weight:700; color:var(--navy); }
.step__text { font-size:16px; color:var(--gray); margin-top:4px; }

/* ── SERVICIOS ─────────────────────────────────── */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.tier { background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.tier__img { aspect-ratio:16/10; overflow:hidden; background:var(--navy); }
.tier__img img { width:100%; height:100%; object-fit:cover; }
.tier__body { padding:22px 24px 28px; display:flex; flex-direction:column; flex:1; }
.tier__num { font-size:20px; font-weight:700; color:var(--gold); border-bottom:1px solid var(--gold-soft); padding-bottom:8px; }
.tier__name { font-size:24px; font-weight:700; line-height:1.15; color:var(--navy); margin:14px 0 6px; min-height:56px; }
.price { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.price small { font-size:16px; color:var(--gray); }
.price b { font-size:46px; line-height:1; color:var(--gold); font-weight:700; }
.price-iva { font-size:14px; color:var(--gray); margin-bottom:14px; }
.ticks { list-style:none; display:grid; gap:8px; font-size:16px; color:var(--gray); }
.ticks li { position:relative; padding-left:18px; }
.ticks li::before { content:''; position:absolute; left:2px; top:0.65em; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.tier--hl { border-color:var(--gold); box-shadow:0 10px 36px rgba(10,48,72,0.12); }

.terms { display:grid; grid-template-columns:1fr 1fr; background:var(--navy); color:#fff; border-radius:10px; margin-top:32px; }
.terms > div { padding:34px 38px; }
.terms > div + div { border-left:1px solid var(--gold-soft); }
.terms h3 { font-size:15px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.terms p, .terms li { font-size:16px; color:rgba(255,255,255,0.88); }
.terms p + p { margin-top:12px; }
.terms strong { color:#fff; }
.terms ul { list-style:none; margin:6px 0 12px; display:grid; gap:4px; }

.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.svc { background:#fff; border:1px solid var(--line); border-radius:6px; padding:30px 28px 28px; display:flex; flex-direction:column; }
.svc__top { display:flex; justify-content:space-between; align-items:flex-start; }
.svc__icon { color:var(--gold); }
.svc__num { font-size:20px; font-weight:700; color:var(--gold); }
.svc__name { font-size:23px; font-weight:700; line-height:1.15; color:var(--navy); margin:16px 0 8px; }
.svc__desc { font-size:16px; color:var(--gray); margin-bottom:16px; }
.svc .ticks { margin-bottom:20px; }
.svc__price { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:8px; }
.svc__price small { font-size:15px; color:var(--gray); }
.svc__price b { font-size:34px; color:var(--gold); line-height:1; }
.svc__price span { font-size:14px; color:var(--gray); }
.note { font-size:15px; color:var(--gray); margin-top:28px; text-align:center; }

/* ── CTA ───────────────────────────────────────── */
.cta { position:relative; text-align:center; color:#fff; background:var(--navy); padding:96px 0; }
.cta .eyebrow { color:var(--gold); }
.cta__title { font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.1; margin-bottom:32px; text-wrap:balance; }
.cta__rule { width:160px; height:2px; background:var(--gold); margin:0 auto 30px; }
.cta__small { margin-top:26px; font-size:14px; letter-spacing:0.08em; color:rgba(255,255,255,0.75); }
.cta__small span { color:var(--gold); }

/* ── CONTACTO ──────────────────────────────────── */
.contact { display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start; }
.contact-info h2 { font-size:30px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.contact-info > p { color:var(--gray); margin-bottom:26px; }
.c-item { border-top:1px solid var(--line); padding:16px 0; }
.c-item:last-of-type { border-bottom:1px solid var(--line); }
.c-item__label { display:block; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
.c-item__value { font-size:20px; color:var(--navy); text-decoration:none; }
a.c-item__value:hover { color:var(--gold); }
.badge-aesa { margin-top:26px; background:var(--navy); color:rgba(255,255,255,0.88); border-radius:10px; padding:20px 24px; font-size:15px; }
.badge-aesa b { display:block; color:var(--gold); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:4px; }
.badge-aesa code { font-family:var(--serif); letter-spacing:0.04em; color:#fff; word-break:break-all; }

.form { background:var(--beige); border-radius:10px; padding:38px; display:grid; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form label { display:block; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); margin-bottom:6px; }
.form input, .form select, .form textarea { width:100%; font-family:var(--serif); font-size:17px; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:4px; padding:13px 14px; transition:border-color .2s, box-shadow .2s; }
.form textarea { resize:vertical; min-height:120px; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,160,78,0.2); }
.form-submit { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-status { font-size:16px; }
.form-status--ok { color:#2f6b3f; }
.form-status--err { color:#a33a2a; }
.hp { position:absolute; left:-9999px; }

/* ── PIE ───────────────────────────────────────── */
footer { background:var(--cream); border-top:1px solid var(--line); padding:34px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.foot-left { display:flex; align-items:center; gap:14px; color:var(--gray); font-size:14px; }
.foot-left svg { color:var(--gold); }
.foot-links { display:flex; gap:28px; }
.foot-links a { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); text-decoration:none; }
.foot-links a:hover { color:var(--gold); }

.wa-btn { position:fixed; bottom:26px; right:26px; z-index:120; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(10,48,72,0.28); transition:transform .2s; }
.wa-btn:hover { transform:scale(1.08); }

/* ── REVEAL ────────────────────────────────────── */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } .hero-vid { transition:none; } }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width:1000px) {
  nav { padding:0 24px; }
  .nav-links, .nav-cta { display:none; }
  .ham { display:flex; }
  .wrap { padding:0 24px; }
  section { padding:60px 0; }
  .cols, .tiers, .svc-grid { grid-template-columns:1fr; }
  .cols--4 { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; row-gap:36px; }
  .steps::before { display:none; }
  .lines, .terms, .contact { grid-template-columns:1fr; }
  .terms > div + div { border-left:none; border-top:1px solid var(--gold-soft); }
  .gallery { grid-template-columns:1fr 1fr; }
  .contact { gap:40px; }
  .tier__name { min-height:0; }
  .hero-frame { inset:16px; border-width:6px; }
  .hero { padding:110px 32px 80px; }
  .hero-foot { bottom:34px; padding:0 30px; font-size:12px; }
  footer { padding:28px 24px; flex-direction:column; text-align:center; }
}
@media (max-width:640px) {
  .stats, .form-row { grid-template-columns:1fr; }
  .callout { flex-direction:column; align-items:flex-start; gap:14px; padding:26px; }
  .callout__title { width:auto; }
  .callout__text { border-left:none; padding-left:0; border-top:1px solid var(--gold-soft); padding-top:14px; }
  .cols--4, .steps { grid-template-columns:1fr; }
  .figure--wide { aspect-ratio:4/3; }
  .form { padding:24px; }
  .line-card { min-height:360px; padding:26px; }
  .logo__tag { display:none; }
  .hero-actions .btn { width:100%; }
  .stat__num { font-size:38px; }
}