/* ═══════════════════════════════════════════════════════════
   RUEDA DE NEGOCIOS — Home CSS
   Paleta: Carbón #0f1117 | Esmeralda #059669 | White | Dark #060810
   (NOTA: las variables --navy/--gold conservan el nombre viejo pero
    apuntan a la paleta nueva carbón/esmeralda — no renombrar sin barrer todo el archivo)
   Tipografía: Lora (serif, una sola familia para todo)
═══════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden; max-width:100% }
body { font-family:'Lora',serif; background:#fff; color:#1a1a1a; overflow-x:hidden; width:100%; max-width:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:#f0ece4 }
::-webkit-scrollbar-thumb { background:#059669; border-radius:3px }

/* ── VARIABLES ── */
:root {
  --navy:#0f1117;
  --navy-dark:#080b0f;
  --gold:#059669;
  --gold-light:#10b981;
  --cream:#f4faf7;
  --text:#111827;
  --text-muted:#5a6878;
  --border:#d1e8df;
}

/* ── UTILS ── */
.hl { font-style:italic; color:var(--gold) }
.section-eyebrow { font-size:.7rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.7rem }
.section-title { font-family:'Lora',serif; font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.15; color:var(--text); letter-spacing:-.5px; margin-bottom:1rem }
.section-desc { font-size:.95rem; color:var(--text-muted); line-height:1.8; font-weight:300; max-width:580px; margin:0 auto }
.about-tag { display:inline-block; background:rgba(5,150,105,.1); color:#047857; font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:.3rem .9rem; border-radius:2px; margin-bottom:1.2rem }

/* ── BUTTONS ── */
.btn-gold {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:#1a1a1a;
  font-family:'Lora',serif; font-weight:700; font-size:.88rem;
  padding:.85rem 2.2rem; border-radius:2px; border:none;
  text-decoration:none; letter-spacing:.5px; text-transform:uppercase;
  transition:background .3s,transform .2s; cursor:pointer;
}
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px) }

.btn-outline-light {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.4); font-family:'Lora',serif;
  font-weight:500; font-size:.88rem; padding:.85rem 2rem; border-radius:2px;
  text-decoration:none; letter-spacing:.3px;
  transition:border-color .3s,background .3s;
}
.btn-outline-light:hover { border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.08) }

.btn-outline-dark {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--text);
  border:1px solid var(--text); font-family:'Lora',serif;
  font-weight:500; font-size:.82rem; padding:.75rem 1.8rem; border-radius:2px;
  text-decoration:none; letter-spacing:.5px; text-transform:uppercase;
  transition:background .3s,color .3s;
}
.btn-outline-dark:hover { background:var(--text); color:#fff }

/* ── REVEAL ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .75s ease,transform .75s ease }
.from-left { opacity:0; transform:translateX(-40px); transition:opacity .8s ease,transform .8s ease }
.from-right { opacity:0; transform:translateX(40px); transition:opacity .8s ease,transform .8s ease }
.reveal.visible, .from-left.visible, .from-right.visible { opacity:1; transform:translate(0) }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .4s,box-shadow .4s;
}
.nav-wrap {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:80px;
}
#navbar.scrolled { background:rgba(15,17,23,.97); box-shadow:0 2px 24px rgba(0,0,0,.4) }
.nav-brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:#fff; transition:color .4s }
#navbar.scrolled .nav-brand { color:#fff }
.nav-logos { display:flex; align-items:center; gap:.6rem }
/* Arriba (sobre el hero): blanco. Al hacer scroll: se pasa a sus colores con transición suave */
.nav-logo-img { height:62px; width:auto; object-fit:contain; filter:brightness(10); opacity:.95; transition:filter .45s ease, opacity .45s ease, transform .3s }
.nav-logo-img:hover { transform:scale(1.04) }
/* navbar oscuro siempre → el logo va a su color real (texto blanco + ícono azul + dorado) */
#navbar.scrolled .nav-logo-img { filter:brightness(1.3); opacity:1 }
.nav-sep { width:1px; height:28px; background:rgba(255,255,255,.3); margin:0 .4rem; transition:background .4s }
#navbar.scrolled .nav-sep { background:rgba(255,255,255,.3) }
.nav-name { font-family:'Lora',serif; font-size:1.1rem; font-weight:700; line-height:1.2 }
.nav-name strong { display:block }
.nav-name small { display:block; font-size:.75rem; font-weight:300; opacity:.7 }
/* El logo ya contiene el nombre "Rueda de Negocios": ocultamos el texto lateral para no repetir */
.nav-sep, .nav-name { display:none }

.nav-links { display:flex; gap:1.6rem; list-style:none; align-items:center }
.nav-links a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.82rem; font-weight:400; letter-spacing:.5px; text-transform:uppercase; transition:color .3s }
#navbar.scrolled .nav-links a { color:rgba(255,255,255,.85) }
.nav-links a:hover { color:var(--gold) }
#navbar.scrolled .nav-links a:hover { color:var(--gold) }

.nav-btn-login {
  border:1px solid rgba(255,255,255,.4) !important;
  padding:.35rem 1rem; border-radius:2px;
}
#navbar.scrolled .nav-btn-login { border-color:rgba(255,255,255,.4) !important; color:rgba(255,255,255,.9) !important }

.nav-btn-signup {
  background:var(--gold) !important; color:#1a1a1a !important;
  padding:.4rem 1.2rem; border-radius:2px; font-weight:700 !important;
  transition:background .3s !important;
}
.nav-btn-signup:hover { background:var(--gold-light) !important }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:.3rem }
.hamburger span { width:22px; height:1.5px; background:#fff; display:block; transition:transform .3s ease, opacity .3s ease, background .3s }
#navbar.scrolled .hamburger span { background:#fff }
/* X state */
.hamburger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ── HERO ── */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 5% 80px;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.hero-overlay { position:absolute; inset:0; background:rgba(5,8,12,.65) }
.hero-content { position:relative; z-index:2; max-width:800px; text-align:center }
.hero-eyebrow {
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.5rem;
  animation:fadeUp .8s ease both;
}
.hero-title {
  font-family:'Lora',serif;
  font-size:clamp(2.8rem,6vw,5rem); font-weight:300;
  color:#fff; line-height:1.12; margin-bottom:1.2rem;
  animation:fadeUp .8s .1s ease both; letter-spacing:-1px;
}
.hero-title strong { font-weight:700; color:#fff }
.hero-title em {
  display:block; font-style:italic; color:var(--gold);
  font-size:clamp(1.15rem,2.4vw,1.9rem); font-weight:400;
  letter-spacing:0; line-height:1.3; margin-top:.7rem;
}
.hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.7); font-weight:300;
  margin-bottom:2.5rem; line-height:1.7; letter-spacing:.3px;
  animation:fadeUp .8s .2s ease both;
}
.hero-sub strong { color:rgba(255,255,255,.9) }
.hero-actions {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  animation:fadeUp .8s .3s ease both; margin-bottom:1.5rem;
}
.hero-note {
  font-size:.8rem; color:rgba(255,255,255,.5); letter-spacing:.3px;
  animation:fadeUp .8s .4s ease both;
}
.hero-note i { color:var(--gold); margin-right:.4rem }
.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:rgba(255,255,255,.35); font-size:.65rem; letter-spacing:2px; text-transform:uppercase;
  animation:fadeUp 1s .7s ease both;
}
.scroll-line { width:1px; height:40px; background:rgba(255,255,255,.2); animation:scrollPulse 2s ease infinite }

/* ── ORG STRIP ── */
.org-strip { background:var(--navy); padding:1rem 5% }
.org-strip-inner { display:flex; align-items:center; gap:2rem; justify-content:center; flex-wrap:wrap }
.strip-label { font-size:.7rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4) }
.strip-logos { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
.s-pill { display:flex; align-items:center }
.s-pill img { height:28px; width:auto; object-fit:contain; filter:brightness(10); opacity:.7 }

/* ── STATS ── */
.stats-sec {
  background:var(--navy); padding:0; position:relative; overflow:hidden;
}
.stats-sec::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(5,150,105,.06) 0%, transparent 60%);
  pointer-events:none;
}
.stats-inner {
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
}
.s-item {
  padding:60px 2rem 55px; text-align:center; position:relative;
  transition:background .3s;
}
.s-item:hover { background:rgba(255,255,255,.03) }
.s-item:not(:last-child)::after {
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:45%; width:1px; background:rgba(255,255,255,.08);
}
.s-accent-line {
  width:28px; height:2px; background:var(--gold);
  margin:0 auto 1.2rem; border-radius:2px;
  transition:width .4s ease;
}
.s-item:hover .s-accent-line { width:48px }
.s-num {
  font-family:'Lora',serif;
  font-size:clamp(3rem,4.5vw,4.5rem); font-weight:700;
  color:#fff; line-height:1; margin-bottom:.5rem;
}
.s-plus { font-size:.55em; color:var(--gold); vertical-align:super; margin-left:1px }
.s-label {
  font-size:.72rem; color:rgba(255,255,255,.45); font-weight:500;
  text-transform:uppercase; letter-spacing:1.5px; line-height:1.6;
}

/* ── ABOUT ── */
.about-sec { display:grid; grid-template-columns:1fr 1fr; min-height:600px }
.about-img-col {
  background-size:cover; background-position:center;
  min-height:500px; position:relative; overflow:hidden;
  transition:transform 6s ease;
}
.about-img-col:hover { transform:scale(1.03) }
.about-text-col {
  padding:90px 8%; display:flex; flex-direction:column; justify-content:center;
  background:#fff;
}
.about-lead { font-family:'Lora',serif; font-size:1.2rem; font-style:normal; color:var(--gold); margin-bottom:1.2rem; font-weight:400 }
.about-p { font-size:.95rem; color:#555; line-height:1.85; font-weight:300; margin-bottom:1.5rem }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; margin-bottom:2rem }
.ck { font-size:.85rem; color:#444; display:flex; align-items:center; gap:.5rem }
.ck i { color:var(--gold); font-size:.8rem }
.about-btns { display:flex; gap:1rem; flex-wrap:wrap }

/* ── POR QUÉ ── */
.porque-sec { padding:100px 5%; background:var(--navy); position:relative; overflow:hidden }
.porque-sec::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(5,150,105,.08) 0%, transparent 65%);
  pointer-events:none;
}
.porque-sec::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,rgba(5,150,105,.4),transparent);
}
.porque-head { margin-bottom:3.5rem; text-align:center; position:relative; z-index:1 }
.porque-head .section-title { color:#fff }
.porque-head .section-desc { color:rgba(255,255,255,.45) }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1100px; margin:0 auto; position:relative; z-index:1 }
.why-card {
  padding:2.5rem 2rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:3px; position:relative; overflow:hidden;
  transition:transform .35s,box-shadow .35s,background .35s,border-color .35s;
}
.why-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s;
}
.why-card:hover::after { transform:scaleX(1) }
.why-card:hover {
  transform:translateY(-5px);
  background:rgba(255,255,255,.07);
  border-color:rgba(5,150,105,.25);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.why-icon { width:48px; height:48px; margin-bottom:1.4rem }
.why-icon svg { width:100%; height:100%; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.why-title { font-family:'Lora',serif; font-size:1.35rem; font-weight:700; color:#fff; margin-bottom:.7rem }
.why-text { font-size:.88rem; color:rgba(255,255,255,.5); line-height:1.75; font-weight:300 }

/* ── DETALLES ── */
.det-sec { padding:100px 5%; background:#fff }
.det-head { text-align:center; margin-bottom:3.5rem }
.det-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:1100px; margin:0 auto }
.det-card {
  text-align:center; padding:2.5rem 1.5rem;
  background:var(--cream); border:1px solid var(--border); border-radius:2px;
  position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s;
}
.det-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .4s }
.det-card:hover::before { opacity:1 }
.det-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.06) }
.det-icon { width:52px; height:52px; background:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; color:var(--gold); font-size:1.1rem }
.det-card h3 { font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:.6rem }
.det-val { font-family:'Lora',serif; font-size:2rem; font-weight:700; color:var(--navy); margin-bottom:.3rem }
.det-card p { font-size:.82rem; color:var(--text-muted); line-height:1.6 }

/* ── QUOTE ── */
#quote {
  position:relative; padding:130px 5%; text-align:center;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.quote-overlay { position:absolute; inset:0; background:rgba(5,8,12,.68) }
.quote-inner { position:relative; z-index:2; max-width:720px; margin:0 auto }
.quote-mark { font-family:'Lora',serif; font-size:6rem; color:rgba(5,150,105,.35); line-height:.7; margin-bottom:1rem; display:block }
.quote-text { font-family:'Lora',serif; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:300; font-style:normal; color:#fff; line-height:1.45; letter-spacing:-.3px; margin-bottom:1.5rem }
.quote-author { font-size:.75rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(5,150,105,.85) }

/* ── COUNTDOWN ── */
.countdown-sec { background:#fff; padding:100px 5%; text-align:center; position:relative; overflow:hidden }
.countdown-sec::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.cd-inner { position:relative; z-index:2; max-width:760px; margin:0 auto }
.cd-inner .section-eyebrow { color:var(--gold) }
.cd-title { font-family:'Lora',serif; font-size:clamp(2rem,4vw,3rem); font-weight:400; color:var(--navy); margin-bottom:3rem; line-height:1.2 }
.cd-timer {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:3rem; flex-wrap:wrap;
}
.cd-unit {
  text-align:center; min-width:120px; padding:2rem 1.5rem;
  background:var(--cream); border:1px solid var(--border);
  border-radius:3px; margin:.3rem;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.cd-unit:hover { transform:translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,.09); border-color:var(--gold) }
.cd-num {
  font-family:'Lora',serif; font-size:clamp(2.8rem,5vw,4rem);
  font-weight:700; color:var(--navy); line-height:1; display:block;
}
.cd-lbl { font-size:.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-top:.5rem }
.cd-sep { font-family:'Lora',serif; font-size:2.5rem; color:var(--gold); line-height:1; align-self:center; padding:.3rem .2rem; opacity:.6 }
.cd-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ── PREINSCRIPCIÓN ── */
.preinsc-sec { padding:100px 5%; background:var(--navy); position:relative }
/* textos del encabezado sobre fondo oscuro */
.preinsc-sec .section-title { color:#fff }
.preinsc-sec .section-desc { color:rgba(255,255,255,.6) }
.preinsc-sec .pb-item { color:rgba(255,255,255,.6) }
.preinsc-sec .pb-div { background:rgba(255,255,255,.14) }
.preinsc-sec .badge-gratis { background:rgba(52,211,153,.14); color:#6ee7b7; border-color:rgba(52,211,153,.35) }
.preinsc-sec .preinsc-note { color:rgba(255,255,255,.5) }
.preinsc-head { text-align:center; margin-bottom:3rem }
.badge-gratis { display:inline-flex; align-items:center; gap:.45rem; background:rgba(34,197,94,.12); color:#15803d; border:1.5px solid rgba(34,197,94,.3); padding:.3rem 1rem; border-radius:50px; font-size:.8rem; font-weight:800; letter-spacing:.3px; margin-bottom:1rem }
.preinsc-badges { display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.2rem }
.pb-item { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-muted) }
.pb-item .fab,.pb-item .fas { color:var(--gold); font-size:.9rem }
.pb-item .fab.fa-whatsapp { color:#16a34a }
.pb-tag { font-weight:800; font-size:.75rem; border-radius:8px; padding:.2rem .55rem }
.pb-tag.green { background:rgba(34,197,94,.1); color:#15803d }
.pb-div { width:1px; height:20px; background:#e2e8f0 }

.preinsc-steps { display:flex; gap:2rem; justify-content:center; max-width:900px; margin:0 auto 3rem; flex-wrap:wrap }
.ps-step { flex:1; min-width:200px; max-width:280px; text-align:center; padding:2rem 1.5rem; background:#fff; border:1px solid var(--border); border-radius:2px; transition:box-shadow .3s }
.ps-step:hover { box-shadow:0 10px 30px rgba(0,0,0,.06) }
.ps-num { width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; font-family:'Lora',serif; font-size:1.4rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem }
.ps-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:.5rem }
.ps-tag { font-size:.72rem; font-weight:800; padding:.1rem .45rem; border-radius:4px }
.ps-tag.green { background:rgba(34,197,94,.12); color:#15803d }
.ps-tag.gold { background:rgba(5,150,105,.12); color:var(--gold) }
.ps-desc { font-size:.83rem; color:var(--text-muted); line-height:1.7; font-weight:300 }

.plans-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:1100px; margin:0 auto }
.plan-card {
  background:#fff; border:1.5px solid var(--border); border-radius:3px;
  padding:2rem 1.5rem; position:relative; display:flex; flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.plan-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.08); border-color:var(--gold) }
.plan-featured { border-color:var(--gold); box-shadow:0 8px 30px rgba(5,150,105,.15) }
.plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#1a1a1a; font-size:.7rem; font-weight:800; letter-spacing:.5px; padding:.28rem .85rem; border-radius:50px; white-space:nowrap }
.plan-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1rem }
.ico-std { background:rgba(5,150,105,.12); color:var(--gold) }
.ico-exp { background:rgba(5,150,105,.2); color:#047857 }
.plan-name { font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:.3rem }
.plan-title { font-family:'Lora',serif; font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:.5rem }
.plan-desc { font-size:.83rem; color:var(--text-muted); line-height:1.65; font-weight:300; margin-bottom:.8rem; flex:1 }
.plan-free-badge { display:inline-block; background:rgba(34,197,94,.1); color:#15803d; border-radius:6px; font-size:.7rem; font-weight:800; padding:.18rem .55rem; letter-spacing:.3px; margin-bottom:.8rem }
.plan-price { margin-bottom:1rem }
.plan-price-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; margin-bottom:.2rem }
.plan-amount { font-family:'Lora',serif; font-size:2rem; font-weight:700; color:var(--navy); line-height:1 }
.currency { font-size:1rem; vertical-align:top; margin-top:.3rem; display:inline-block }
.period { font-size:.75rem; color:var(--text-muted); font-family:'Lora',serif; font-weight:400 }
.plan-price-note { font-size:.75rem; color:var(--text-muted); margin-top:.2rem }
.plan-features { list-style:none; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.35rem }
.plan-features li { font-size:.82rem; color:#555; display:flex; align-items:center; gap:.5rem }
.plan-features i { color:var(--gold); font-size:.75rem; flex-shrink:0 }
.plan-cta { display:block; text-align:center; font-family:'Lora',serif; font-size:.83rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:.75rem 1rem; border-radius:2px; text-decoration:none; transition:background .3s,color .3s,transform .2s; margin-top:auto }
.plan-cta:hover { transform:translateY(-2px) }
.cta-solid { background:var(--gold); color:#1a1a1a }
.cta-solid:hover { background:var(--gold-light) }
.cta-outline { background:transparent; color:var(--navy); border:1.5px solid var(--navy) }
.cta-outline:hover { background:var(--navy); color:#fff }
.preinsc-note { text-align:center; font-size:.82rem; color:var(--text-muted); margin-top:2.5rem; line-height:1.7; max-width:680px; margin-left:auto; margin-right:auto }
.preinsc-note i { color:var(--gold); margin-right:.4rem }

/* ── CONTACTO ── */
.contact-sec { display:grid; grid-template-columns:1fr 1fr; min-height:560px; background:#fff }
.map-side { position:relative; overflow:hidden; min-height:480px }
.map-side iframe { width:100%; height:100%; border:none; display:block; filter:grayscale(.15) }
.map-placeholder { width:100%; height:100%; min-height:480px; background:#0d0f14; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; color:rgba(255,255,255,.3) }
.map-placeholder i { font-size:2rem }

/* Botón "Cómo llegar" sobre el mapa */
.map-cta {
  position:absolute; top:1.3rem; right:1.3rem; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  color:var(--navy); font-family:'Lora',serif; font-weight:700;
  font-size:.78rem; letter-spacing:.3px; text-transform:uppercase;
  padding:.6rem 1.1rem; border-radius:50px; text-decoration:none;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  transition:background .3s,color .3s,transform .25s,box-shadow .3s;
}
.map-cta i { color:var(--gold); font-size:.85rem; transition:color .3s }
.map-cta:hover { background:var(--gold); color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(5,150,105,.35) }
.map-cta:hover i { color:#fff }

.map-popup { position:absolute; bottom:1.5rem; left:1.5rem; display:flex; align-items:flex-start; gap:.75rem; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-radius:10px; padding:1rem 1.3rem; max-width:280px; box-shadow:0 8px 30px rgba(0,0,0,.15); border-left:3px solid var(--gold) }
.map-popup-pin { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:rgba(5,150,105,.12); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.9rem; margin-top:.1rem }
.map-popup strong { font-size:.88rem; color:var(--navy); display:block; margin-bottom:.3rem }
.map-popup p { font-size:.78rem; color:var(--text-muted); line-height:1.5 }
.contact-info { padding:80px 8%; display:flex; flex-direction:column; justify-content:center; background:var(--navy) }
.contact-info .section-title { color:#fff }
.contact-info .section-title .hl { color:var(--gold) }
.contact-info .about-tag { background:rgba(5,150,105,.15); color:#34d399 }
.contact-p { font-size:.9rem; color:rgba(255,255,255,.55); line-height:1.8; font-weight:300; margin-bottom:2rem }
.contact-rows { display:flex; flex-direction:column; gap:1.2rem }
.c-row { display:flex; gap:1rem; align-items:flex-start; transition:transform .25s }
.c-row:hover { transform:translateX(4px) }
.c-icon { width:38px; height:38px; background:rgba(255,255,255,.07); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.9rem; flex-shrink:0; transition:background .3s,color .3s }
.c-row:hover .c-icon { background:rgba(5,150,105,.18) }
.c-txt span { font-size:.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); display:block; margin-bottom:.2rem }
.c-txt p,.c-txt a { font-size:.88rem; color:rgba(255,255,255,.7); line-height:1.5; font-weight:300; text-decoration:none }
.c-txt a { transition:color .25s }
.c-txt a:hover { color:var(--gold) }

/* ── HISTORIAL ── */
.historial-sec {
  padding:100px 5%;
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
/* Overlay oscuro sobre la imagen — ajusta la opacidad aquí si quieres más/menos */
.historial-sec::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:rgba(5,8,12,.82);
  pointer-events:none;
}
.historial-head { text-align:center; margin-bottom:3.5rem; position:relative; z-index:2 }
.historial-head .section-title { color:#fff }
.historial-head .section-title .hl { color:var(--gold) }
.historial-head .section-eyebrow { color:var(--gold) }
.historial-head .section-desc { color:rgba(255,255,255,.45) }

.historial-gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  max-width:1200px;
  margin:0 auto;
  position:relative; z-index:2;
}

/* Card — solo imagen */
.hg-card {
  position:relative;
  display:block;
  aspect-ratio:2/3;
  border-radius:4px;
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
}

/* Imagen de fondo */
.hg-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
}
.hg-card:hover .hg-img { transform:scale(1.08) }

/* Año — siempre visible, esquina superior */
.hg-year {
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:'Lora',serif; font-size:1rem; font-weight:700;
  color:#fff; background:var(--gold);
  padding:.2rem .75rem; border-radius:2px;
  transition:opacity .3s;
}
.hg-card:hover .hg-year { opacity:0 }

/* Gradiente base sutil — siempre visible en la parte inferior */
.hg-card::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to top,
    rgba(5,8,12,.35) 0%,
    transparent 45%
  );
  transition:opacity .4s ease;
}

/* Overlay que sube al hacer hover */
.hg-hover {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(
    to top,
    rgba(5,8,12,.97) 0%,
    rgba(5,8,12,.85) 45%,
    rgba(5,8,12,.3) 75%,
    transparent 100%
  );
  display:flex; align-items:flex-end;
  /* estado inicial: oculto abajo */
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}
.hg-card:hover .hg-hover {
  opacity:1;
  transform:translateY(0);
}

/* Contenido dentro del overlay */
.hg-hover-inner {
  padding:1.8rem 1.4rem;
  width:100%;
  display:flex; flex-direction:column; gap:.6rem;
}

/* Eyebrow */
.hg-eyebrow {
  font-size:.62rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(18px);
  transition:opacity .4s ease .05s, transform .4s ease .05s;
}
.hg-card:hover .hg-eyebrow { opacity:1; transform:translateY(0) }

/* Título */
.hg-title {
  font-family:'Lora',serif;
  font-size:1.15rem; font-weight:700; color:#fff;
  line-height:1.3; margin:0;
  opacity:0; transform:translateY(20px);
  transition:opacity .4s ease .12s, transform .4s ease .12s;
}
.hg-card:hover .hg-title { opacity:1; transform:translateY(0) }

/* Stats */
.hg-stats {
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .4s ease .2s, transform .4s ease .2s;
}
.hg-card:hover .hg-stats { opacity:1; transform:translateY(0) }
.hg-stat { display:flex; align-items:center; gap:.35rem; font-size:.75rem; color:rgba(255,255,255,.7) }
.hg-stat i { color:var(--gold); font-size:.7rem }
.hg-stat em { font-style:normal; color:rgba(255,255,255,.45); font-size:.7rem; margin-left:.1rem }

/* Botón */
.hg-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold);
  background:rgba(5,150,105,.12); border:1px solid rgba(5,150,105,.35);
  padding:.45rem 1rem; border-radius:2px;
  align-self:flex-start;
  opacity:0; transform:translateY(20px);
  transition:opacity .4s ease .28s, transform .4s ease .28s, background .25s, border-color .25s;
}
.hg-card:hover .hg-btn { opacity:1; transform:translateY(0) }
.hg-card:hover .hg-btn:hover { background:var(--gold); color:#1a1a1a; border-color:var(--gold) }

/* ── FOOTER ── */
#footer { background:#060810; padding:80px 5% 28px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:3rem; margin-bottom:3.5rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.06) }
.footer-brand { display:flex; flex-direction:column }
.footer-logo-img { height:40px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; margin-bottom:1rem; align-self:flex-start }
.footer-tagline { font-family:'Lora',serif; font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:.5rem }
.footer-desc { font-size:.82rem; color:rgba(255,255,255,.35); line-height:1.8; font-weight:300; max-width:280px; margin-bottom:1.3rem }
.footer-social { display:flex; gap:.8rem; flex-wrap:wrap }
.social-link { width:38px; height:38px; border:1px solid rgba(255,255,255,.14); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; color:rgba(255,255,255,.6); transition:border-color .3s,background .3s,color .3s,transform .25s }
.social-link i { font-size:1rem; line-height:1 }
.social-link:hover { border-color:var(--gold); background:rgba(5,150,105,.12); color:var(--gold); transform:translateY(-3px) }
.footer-col h4 { font-size:.65rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.2rem }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem }
.footer-col a { color:rgba(255,255,255,.45); text-decoration:none; font-size:.83rem; font-weight:300; transition:color .2s }
.footer-col a:hover { color:var(--gold) }
.footer-contact-col .c-label { font-size:.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); display:block; margin-top:1rem; margin-bottom:.25rem }
.footer-contact-col .c-label:first-child { margin-top:0 }
.footer-contact-col p,.footer-contact-col a { font-size:.83rem; color:rgba(255,255,255,.45); line-height:1.6; font-weight:300; text-decoration:none }
.footer-contact-col a:hover { color:var(--gold) }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; font-size:.75rem; color:rgba(255,255,255,.2) }

/* ── KEYFRAMES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.3;height:40px} 50%{opacity:.8;height:28px} }

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .plans-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:1024px) {
  .nav-logo-img { height:54px }
  .why-grid { grid-template-columns:1fr 1fr }
  .det-grid { grid-template-columns:1fr 1fr }
  .historial-gallery { grid-template-columns:repeat(2,1fr) }
  .footer-grid { grid-template-columns:1fr 1fr }
  .about-sec { grid-template-columns:1fr }
  .about-img-col { min-height:380px }
  .contact-sec { grid-template-columns:1fr }
  .contact-info { padding:60px 8% }
  .stats-inner { grid-template-columns:1fr 1fr }
  .s-item:nth-child(2)::after { display:none }
  .s-item:not(:last-child)::after { height:1px; width:45%; top:auto; bottom:0; right:auto; left:50%; transform:translateX(-50%) }
}
@media(max-width:680px) {
  .nav-links { display:none }
  .hamburger { display:flex; flex-shrink:0 }
  /* navbar compacto en móvil: solo logo CAINCO + hamburguesa */
  .nav-wrap { padding:0 4%; gap:.5rem }
  .nav-brand { min-width:0; gap:.5rem; flex-shrink:1 }
  .nav-logo-img { height:48px; max-width:62vw }
  .nav-sep, .nav-name { display:none }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed;
    top:80px; left:0; right:0; background:rgba(15,17,23,.98);
    padding:1.5rem 5%; gap:1rem; border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 30px rgba(0,0,0,.4);
  }
  .nav-links.open a { color:rgba(255,255,255,.9) !important }
  .why-grid,.det-grid,.plans-grid { grid-template-columns:1fr }
  .historial-gallery { grid-template-columns:repeat(2,1fr) }
  .footer-grid { grid-template-columns:1fr; gap:2rem }
  .hero-title { font-size:2.5rem }
  #hero,#quote,.historial-sec { background-attachment:scroll }
  .cd-timer { gap:.3rem }
  .cd-num { font-size:3rem }
  .preinsc-steps { flex-direction:column; align-items:center }
  .ps-step { max-width:100% }
  .stats-inner { grid-template-columns:1fr 1fr }
  .s-item { padding:40px 1rem }
  .s-item::after { display:none }
}