/* ============================================================
   Franz Lao — marca personal
   Paleta: grafito profundo + dorado ASINGTOPO (#c8921f) + azul AQUASURV
   ============================================================ */

:root{
  --tinta:        #12151a;
  --tinta-2:      #1b1f27;
  --tinta-3:      #262b35;
  --papel:        #ffffff;
  --papel-2:      #f6f4f0;
  --papel-3:      #ece8e1;

  --texto:        #1a1d23;
  --texto-2:      #4d545f;
  --texto-3:      #7c838f;
  --texto-inv:    #f2f0ec;
  --texto-inv-2:  #a7aeba;

  --oro:          #c8921f;
  --oro-claro:    #e0aa3a;
  --oro-suave:    #f7edd8;
  --agua:         #1d7a99;
  --agua-suave:   #e0f0f5;

  --borde:        #e2ded7;
  --borde-osc:    #2f3540;

  --radio:        14px;
  --radio-lg:     22px;
  --ancho:        1180px;
  --sombra:       0 1px 2px rgba(18,21,26,.04), 0 8px 30px rgba(18,21,26,.07);
  --sombra-alta:  0 2px 4px rgba(18,21,26,.05), 0 18px 50px rgba(18,21,26,.13);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--texto);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:24px; }
.wrap.narrow{ max-width:790px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--oro); color:#fff; padding:12px 20px; border-radius:0 0 var(--radio) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--oro); outline-offset:3px; border-radius:4px; }

/* ─────────────── Navegación ─────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand-mark{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background:var(--tinta); color:var(--oro-claro);
  font-family:var(--serif); font-weight:600; font-size:15px; letter-spacing:.02em;
}
.brand-name{ font-weight:700; font-size:16.5px; letter-spacing:-.01em; }

.nav nav{ display:flex; align-items:center; gap:26px; }
.nav nav a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--texto-2);
  transition:color .16s ease; white-space:nowrap;
}
.nav nav a:hover{ color:var(--texto); }
.nav-cta{
  background:var(--tinta); color:#fff !important;
  padding:9px 17px; border-radius:999px; font-weight:600 !important;
  transition:background .18s ease, transform .18s ease;
}
.nav-cta:hover{ background:var(--oro); transform:translateY(-1px); }

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:42px; height:42px; padding:0; border:1px solid var(--borde);
  border-radius:10px; background:transparent; cursor:pointer;
}
.burger span{ display:block; height:2px; width:18px; margin-inline:auto; background:var(--texto); border-radius:2px; transition:.2s; }

/* ─────────────── Hero ─────────────── */
.hero{
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(200,146,31,.13), transparent 62%),
    linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  padding:clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px);
  border-bottom:1px solid var(--borde);
}
.hero-in{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(32px, 6vw, 76px); align-items:center;
}

.eyebrow{
  margin:0 0 18px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro);
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px;
  background:var(--oro); vertical-align:middle; margin-right:11px; border-radius:2px;
}

.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.15rem, 5.1vw, 3.65rem);
  line-height:1.1; letter-spacing:-.022em; font-weight:600;
  margin:0 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--oro); }

.lede{ font-size:clamp(1.02rem, 1.6vw, 1.16rem); color:var(--texto-2); margin:0 0 32px; max-width:56ch; }
.lede strong{ color:var(--texto); font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--sans); font-size:15.5px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn-primary{ background:var(--oro); color:#fff; box-shadow:0 8px 22px rgba(200,146,31,.3); }
.btn-primary:hover{ background:#b07f16; transform:translateY(-2px); box-shadow:0 12px 30px rgba(200,146,31,.38); }
.btn-ghost{ border-color:var(--texto); color:var(--texto); background:transparent; }
.btn-ghost:hover{ background:var(--texto); color:#fff; transform:translateY(-2px); }
.btn-full{ width:100%; }

.hero-foto{ margin:0; }
.foto-ph{
  aspect-ratio:4/5; width:100%;
  border:2px dashed var(--oro); border-radius:var(--radio-lg);
  background:
    repeating-linear-gradient(45deg, rgba(200,146,31,.05) 0 12px, transparent 12px 24px),
    var(--oro-suave);
  display:grid; place-content:center; gap:6px; text-align:center;
  color:#9a7418;
}
.foto-ph span{ font-weight:700; font-size:17px; }
.foto-ph small{ font-size:12.5px; opacity:.8; }

/* ─────────────── Cifras ─────────────── */
.cifras{ background:var(--tinta); color:var(--texto-inv); padding:34px 0; }
.cifras-in{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:26px 40px; text-align:center; }
.cifra b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.05rem); color:var(--oro-claro); line-height:1.15;
}
.cifra span{ display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-inv-2); margin-top:5px; }

/* ─────────────── Secciones ─────────────── */
.sec{ padding:clamp(58px, 8vw, 104px) 0; }
.sec-alt{ background:var(--papel-2); border-block:1px solid var(--borde); }

.kicker{
  margin:0 0 14px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro);
}
.kicker-light{ color:var(--oro-claro); }

.sec h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem, 3.6vw, 2.5rem); line-height:1.18;
  letter-spacing:-.018em; margin:0 0 20px; max-width:22ch;
}
.webinar h2{ max-width:24ch; margin-inline:auto; text-align:center; }

.sub{ font-size:1.04rem; color:var(--texto-2); max-width:62ch; margin:0 0 42px; }
.sub-light{ color:var(--texto-inv-2); text-align:center; margin-inline:auto; }
.sub em{ color:var(--texto-inv); font-style:italic; }

.prosa p{ font-size:1.07rem; color:var(--texto-2); margin:0 0 20px; }
.prosa strong{ color:var(--texto); font-weight:600; }

/* ─────────────── Empresas ─────────────── */
.empresas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:26px; }

.empresa{
  display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio-lg);
  padding:30px; text-decoration:none; box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.empresa:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--oro); }

.empresa-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }

.logo-ph{
  display:grid; place-items:center; min-width:118px; height:46px; padding-inline:14px;
  border:1.5px dashed var(--oro); border-radius:10px;
  background:var(--oro-suave); color:#9a7418;
  font-weight:700; font-size:12.5px; letter-spacing:.06em;
}
.logo-ph-agua{ border-color:var(--agua); background:var(--agua-suave); color:#14586e; }

.medio{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#9a7418; background:var(--oro-suave); padding:6px 12px; border-radius:999px;
}
.medio-agua{ color:#14586e; background:var(--agua-suave); }

.empresa h3{ font-family:var(--serif); font-size:1.5rem; font-weight:600; margin:0 0 12px; letter-spacing:-.01em; }
.empresa p{ color:var(--texto-2); margin:0 0 20px; font-size:.99rem; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 24px; }
.chips li{
  font-size:12.5px; font-weight:500; color:var(--texto-2);
  background:var(--papel-3); padding:5px 11px; border-radius:999px;
}

.ir{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:14.5px; color:var(--oro);
}
.ir svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.empresa:hover .ir svg{ transform:translate(2px,-2px); }

/* ─────────────── Tesis del curso ─────────────── */
.tesis{ margin:0 0 40px; }
.tesis blockquote{
  margin:0; padding:26px 30px;
  border-left:4px solid var(--oro); background:var(--oro-suave);
  border-radius:0 var(--radio) var(--radio) 0;
  font-family:var(--serif); font-size:clamp(1.25rem, 2.6vw, 1.72rem);
  line-height:1.35; font-weight:600; color:#6b4f0d;
}
.tesis blockquote em{ font-style:italic; }
.tesis-nota{ margin:18px 0 0; color:var(--texto-2); font-size:1.02rem; }

.circulo{ list-style:none; counter-reset:paso; padding:0; margin:0 0 40px; display:grid; gap:12px; }
.circulo li{
  counter-increment:paso; position:relative;
  padding:18px 22px 18px 66px;
  background:var(--papel-2); border:1px solid var(--borde); border-radius:var(--radio);
}
.circulo li::before{
  content:counter(paso);
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--tinta); color:var(--oro-claro);
  border-radius:50%; font-size:14px; font-weight:700; font-family:var(--serif);
}
.circulo li b{ display:block; font-size:1.02rem; font-weight:650; }
.circulo li span{ display:block; color:var(--texto-2); font-size:.95rem; margin-top:2px; }

.tesis-cierre p{ font-size:1.06rem; color:var(--texto-2); margin:0 0 18px; max-width:66ch; }
.tesis-cierre strong{ color:var(--texto); font-weight:650; }

/* ─────────────── Webinar ─────────────── */
.webinar{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(200,146,31,.16), transparent 68%),
    var(--tinta);
  color:var(--texto-inv);
}
.webinar h2{ color:var(--texto-inv); }

.form{
  margin-top:38px; background:var(--tinta-2);
  border:1px solid var(--borde-osc); border-radius:var(--radio-lg);
  padding:clamp(24px, 4vw, 36px);
}
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.campo:first-child, .campo:nth-child(2){ grid-column:span 1; }
.campo:last-child{ grid-column:1 / -1; }

.campo{ display:block; }
.campo span{
  display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texto-inv-2); margin-bottom:8px;
}
.campo input{
  width:100%; padding:13px 15px; font-family:var(--sans); font-size:15.5px;
  color:var(--texto-inv); background:var(--tinta-3);
  border:1.5px solid var(--borde-osc); border-radius:11px;
  transition:border-color .16s ease, background .16s ease;
}
.campo input::placeholder{ color:#69707c; }
.campo input:focus{ outline:none; border-color:var(--oro); background:#2c323d; }
.campo input[aria-invalid="true"]{ border-color:#e2626c; }

.legal{ font-size:13px; color:var(--texto-inv-2); text-align:center; margin:16px 0 0; }
.form-msg{ margin:14px 0 0; text-align:center; font-size:14.5px; font-weight:600; min-height:1.2em; }
.form-msg.ok{ color:#5ec98a; }
.form-msg.err{ color:#f08c94; }

/* ─────────────── Contenido ─────────────── */
.grid3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
.tarjeta{
  background:var(--papel); border:1px solid var(--borde);
  border-radius:var(--radio-lg); padding:28px; box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.tag{
  align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#9a7418; background:var(--oro-suave);
  padding:5px 11px; border-radius:999px; margin-bottom:16px;
}
.tarjeta h3{ font-family:var(--serif); font-size:1.28rem; font-weight:600; margin:0 0 10px; }
.tarjeta p{ color:var(--texto-2); font-size:.97rem; margin:0 0 20px; }
.pronto{
  margin-top:auto; font-size:13px; font-weight:600; color:var(--texto-3);
  display:inline-flex; align-items:center; gap:7px;
}
.pronto::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--oro); }

/* ─────────────── Pie ─────────────── */
.pie{ background:var(--tinta); color:var(--texto-inv-2); padding:58px 0 0; }
.pie-in{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px; padding-bottom:44px;
}
.pie-col{ display:flex; flex-direction:column; gap:9px; }
.pie-col h4{
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--texto-inv); margin:0 0 5px;
}
.pie-col a{ color:var(--texto-inv-2); text-decoration:none; font-size:14.5px; transition:color .16s ease; }
.pie-col a:hover{ color:var(--oro-claro); }
.pie-col a[data-pendiente]{ opacity:.45; cursor:not-allowed; }
.pie-col .brand-mark{ margin-bottom:6px; }
.pie-nombre{ margin:0; font-weight:700; color:var(--texto-inv); font-size:16.5px; }
.pie-rol{ margin:0; font-size:14px; }

.pie-legal{ border-top:1px solid var(--borde-osc); padding-block:22px; }
.pie-legal p{ margin:0; font-size:13.5px; color:#6d747f; }

/* ─────────────── Responsive ─────────────── */
@media (max-width:960px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-foto{ order:-1; max-width:330px; }
  .pie-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16.5px; }
  .nav nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel); border-bottom:1px solid var(--borde);
    padding:10px 24px 20px; box-shadow:var(--sombra);
    display:none;
  }
  .nav nav.abierto{ display:flex; }
  .nav nav a{ padding:13px 0; border-bottom:1px solid var(--borde); font-size:16px; }
  .nav nav a:last-child{ border-bottom:none; }
  .nav-cta{ text-align:center; margin-top:12px; padding:13px 17px; }
  .burger{ display:flex; }
  .campos{ grid-template-columns:1fr; }
  .sec h2{ max-width:none; }
}
@media (max-width:520px){
  .pie-in{ grid-template-columns:1fr; }
  .cifras-in{ gap:20px; }
  .cifra{ flex:1 1 40%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}