/* Registro de la masterclass «De la orilla a la travesía» · Rai Puig · lanzamiento 3.
   Sistema visual de la guía de giros aprobada por Javi (12/10/2026): navy #0A1F2E, oro #DAC546,
   DM Sans + Bebas Neue, logo Navegantes. Composición: modelo de registro aprobado el 09/09/2026
   (barra fija, hero con la fórmula de 1 día, franja del evento con contador, 3 secretos, regalo, bio con
   el párrafo del programa, invitación final). Elemento firma: el RUMBO punteado de la orilla a mar abierto.
   ⛔ Cuando A tenga tráfico, este fichero queda congelado: lo de B va en el <style> propio de B. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/masterclass/assets/fonts/dm-sans-latin-var.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/masterclass/assets/fonts/bebas-neue-latin.woff2') format('woff2')}
:root{--navy:#0A1F2E;--navy2:#0F2C42;--abismo:#06141F;--blue:#1F5981;--sea:#328FCE;--gold:#DAC546;--gold2:#F2C94C;--cream:#FFFEF8;--sand:#F4EFEA;--ink:#13222F;--muted:#4A5B68;--line:#E3DDD3;--bar:44px;
  /* variables que hereda el social proof (proof.js) */
  --tarjeta:#FFFEF8;--borde:#E3DDD3;--tinta:#13222F;--profundo:#1F5981;--radio:14px;--suave:#F4EFEA}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);background:var(--navy)}
body{margin:0;padding-top:var(--bar);font:17px/1.6 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit}
.mc-wrap{width:min(1160px,calc(100% - 48px));margin:0 auto}
.mc-narrow{width:min(780px,calc(100% - 40px));margin:0 auto}
.mc-eyebrow{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.12em;line-height:1.1;color:var(--blue)}
.mc-center{text-align:center}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}

/* ── barra fija ─────────────────────────────────────────────── */
.mc-bar{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--bar);background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(6,20,31,.25)}
.mc-bar a{display:flex;align-items:center;gap:10px;height:100%;padding:0 16px;text-decoration:none;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.07em;line-height:1;white-space:nowrap}
.mc-bar .mc-bar-cta{border-bottom:2px solid currentColor;padding-bottom:1px}

/* ── botones ───────────────────────────────────────────────── */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:14px 26px;border:0;border-radius:12px;background:var(--gold);color:var(--navy);font-weight:800;font-size:17px;letter-spacing:.02em;line-height:1.25;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 10px 26px rgba(218,197,70,.28),inset 0 -3px 0 rgba(0,0,0,.13);transition:transform .14s ease,filter .16s ease,box-shadow .16s ease}
.mc-btn:hover{filter:brightness(1.05);box-shadow:0 12px 30px rgba(218,197,70,.36),inset 0 -3px 0 rgba(0,0,0,.13)}
.mc-btn:active{transform:scale(.97)}
.mc-btn[disabled]{opacity:.72;cursor:wait}
.mc-btn svg{width:20px;height:20px;flex:none}
.mc-micro{display:block;margin-top:12px;font-size:14.5px;color:#C9D7E1;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,201,76,.6)}
.mc-cta-wrap{margin-top:34px;text-align:center}
.mc-cta-wrap .mc-btn{width:100%;max-width:420px}
.mc-cta-note{margin-top:12px;font-size:15px;color:var(--muted)}

/* ── hero ──────────────────────────────────────────────────── */
.mc-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(160deg,#0D2A3F 0%,var(--navy) 50%,var(--abismo) 100%)}
.mc-hero-foto{position:absolute;z-index:-1;inset:0 0 0 46%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.mc-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;filter:saturate(1.05)}
.mc-hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,31,46,.35) 0%,rgba(10,31,46,0) 45%),linear-gradient(0deg,var(--navy) 0%,rgba(10,31,46,0) 30%)}
.mc-mast{padding:22px 0 0}
.mc-logo{display:inline-block;background:var(--cream);border-radius:12px;padding:6px 12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mc-logo img{height:46px;width:auto}
.mc-hero-grid{padding:40px 0 74px}
.mc-hero-copy{width:52%;max-width:600px}
.mc-h1{font-weight:500;font-size:clamp(27px,2.75vw,38px);line-height:1.2;letter-spacing:-.012em;color:#fff}
.mc-h1 strong{font-weight:800;color:#fff}
.mc-h1 strong.mc-dia{color:var(--gold2)}
.mc-sub{margin-top:18px;font-size:18.5px;line-height:1.55;color:#D6E2EA;max-width:560px}
.mc-hero-cta{margin-top:26px;max-width:470px}
.mc-hero-cta .mc-btn{width:100%}
.mc-hero-cta .mc-micro{text-align:center}

/* ── ola separadora (de la guía de giros) ──────────────────── */
.mc-ola{display:block;width:100%;height:34px;margin-top:-1px}

/* ── franja del evento + rumbo (elemento firma) ────────────── */
.mc-evento{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy2) 0%,var(--blue) 100%);color:#fff;text-align:center;padding:46px 0 44px}
.mc-rumbo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;overflow:hidden}
.mc-evento .mc-wrap{position:relative}
.mc-evento-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,4.4vw,48px);letter-spacing:.06em;line-height:1;color:var(--gold2)}
.mc-evento-f{margin:12px auto 0;font-size:18px;font-weight:700;color:#fff;max-width:640px}
.mc-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:400px;margin:24px auto 26px}
.mc-cd>div{padding:10px 4px 9px;border:1.5px dashed rgba(242,201,76,.65);border-radius:10px;background:rgba(6,20,31,.25)}
.mc-cd b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:40px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.mc-cd span{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#C9D7E1}
.mc-evento .mc-btn{width:100%;max-width:400px}
.mc-evento .mc-micro{color:#E4EDF3}

/* ── secretos ──────────────────────────────────────────────── */
.mc-sec{padding:84px 0}
.mc-h2{font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.15;letter-spacing:-.018em;color:var(--navy)}
.mc-secretos .mc-h2{margin:10px auto 40px;max-width:760px}
.mc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(16,31,56,.07)}
.mc-card-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy2)}
.mc-card-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mc-card:hover .mc-card-foto img{transform:scale(1.03)}
.mc-card-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,46,0) 55%,rgba(10,31,46,.35) 100%)}
.mc-card-txt{padding:24px 24px 28px}
.mc-card h3{font-size:20px;font-weight:800;line-height:1.28;color:var(--navy)}
.mc-card h3 .mc-n{display:block;margin-bottom:6px;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:38px;line-height:1;color:var(--sea);letter-spacing:.04em}
.mc-card p{margin-top:12px;font-size:16.5px;line-height:1.62;color:var(--muted)}

/* ── regalo ────────────────────────────────────────────────── */
.mc-regalo-sec{padding:0 0 84px}
.mc-regalo{background:var(--navy2);border-radius:28px;padding:64px 64px 54px;color:#D3DEE6;text-align:center;position:relative;overflow:hidden}
.mc-regalo .mc-h2{color:#fff;max-width:820px;margin:0 auto}
.mc-regalo-intro{max-width:720px;margin:20px auto 34px;font-size:18px;line-height:1.6}
.mc-regalo-intro strong{color:#fff}
.mc-regalos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.mc-regalo-card{display:flex;flex-direction:column;background:var(--cream);color:var(--ink);border-radius:20px;overflow:hidden}
.mc-regalo-art{position:relative;display:grid;place-items:center;height:250px;background:var(--sand);overflow:hidden}
.mc-regalo-art-8::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:var(--cream);border:2px dashed rgba(31,89,129,.35)}
.mc-ocho{position:relative;font-family:'Bebas Neue',sans-serif;font-size:190px;line-height:.8;color:var(--navy);text-shadow:6px 6px 0 var(--gold)}
.mc-burbuja{position:absolute;left:calc(50% + 46px);top:34px;width:54px;height:54px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 8px 18px rgba(16,31,56,.2)}
.mc-burbuja svg{width:28px;height:28px;color:var(--navy)}
.mc-regalo-art-doc{background:linear-gradient(160deg,#E7EEF3 0%,var(--sand) 100%)}
.mc-regalo-art-doc img{height:212px;width:auto;border-radius:4px;box-shadow:0 14px 30px rgba(10,31,46,.28),0 2px 6px rgba(10,31,46,.18);transform:rotate(-3deg)}
.mc-regalo-card[data-regalo="guia"] .mc-regalo-art-doc img{transform:rotate(3deg)}
.mc-regalo-txt{padding:24px 24px 28px}
.mc-regalo-card h3{font-size:21px;font-weight:800;line-height:1.24;color:var(--navy)}
.mc-regalo-card p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted)}
.mc-regalo .mc-cta-note{color:#C9D7E1;max-width:560px;margin-left:auto;margin-right:auto}

/* ── bio ───────────────────────────────────────────────────── */
.mc-bio-sec{background:var(--sand);padding:84px 0}
.mc-bio{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:center}
.mc-bio-img{position:relative;max-width:420px;margin:0 auto;width:100%}
.mc-bio-img img{width:100%;aspect-ratio:529/789;object-fit:cover;border-radius:22px;box-shadow:0 22px 46px rgba(16,31,56,.2)}
.mc-bio-img::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold);border-radius:22px;z-index:-1}
.mc-bio .mc-h2{margin-top:10px;font-size:clamp(34px,4vw,48px)}
.mc-bio-rol{margin-top:12px;font-weight:800;font-size:18px;color:var(--blue)}
.mc-bio-fund{margin-top:2px;font-weight:600;font-size:16px;color:var(--muted)}
.mc-raya{width:56px;height:3px;background:var(--gold);margin:22px 0;border-radius:2px}
.mc-bio-txt{display:grid;gap:16px;font-size:17px;line-height:1.68;color:#2A3B48}
.mc-bio-remate{font-weight:800;color:var(--navy)}
.mc-puente{display:flex;gap:30px;align-items:center;margin-top:52px;padding:28px 34px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px rgba(16,31,56,.06)}
.mc-puente-vis{flex:0 0 150px;display:grid;place-items:center}
.mc-puente-vis img{width:150px;height:auto}
.mc-puente p{font-size:16.5px;line-height:1.7;color:#2A3B48}
.mc-puente strong{color:var(--navy)}

/* ── cierre ────────────────────────────────────────────────── */
.mc-cierre{background:radial-gradient(110% 120% at 50% 0%,#14405F 0%,var(--navy) 60%,var(--abismo) 100%);color:#fff;text-align:center;padding:70px 0 80px}
.mc-cierre .mc-h2{color:#fff}
.mc-cierre p{max-width:620px;margin:18px auto 0;font-size:19px;line-height:1.6;color:#D6E2EA}
.mc-cierre .mc-cta-note{color:#B8C8D4}

/* ── formulario ────────────────────────────────────────────── */
.mc-form{position:relative}
.mc-form-intro{font-weight:700;font-size:16px;line-height:1.45;color:var(--navy);margin-bottom:14px}
.mc-fields{display:grid;grid-template-columns:1fr;gap:12px}
.mc-field label{display:block;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:5px}
.mc-field input{width:100%;height:52px;border-radius:10px;border:1.5px solid #C8D2DA;background:#fff;color:var(--ink);font-size:17px;padding:0 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.mc-field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(218,197,70,.35)}
.mc-field input[aria-invalid="true"],.mc-check input[aria-invalid="true"]{border-color:#C9503F;box-shadow:0 0 0 3px rgba(201,80,63,.22)}
.mc-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted);cursor:pointer}
.mc-check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--blue)}
.mc-check a{color:var(--blue);text-underline-offset:2px}
.mc-form .mc-btn{width:100%;margin-top:16px}
.mc-form-despues{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.mc-err{margin-top:12px;font-size:14.5px;color:#7A2418;background:#FBE9E5;border:1px solid #E8B3A8;border-radius:8px;padding:9px 12px}
.mc-err[hidden]{display:none}
.mc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* A: el formulario vive en un <dialog> */
.mc-dialog{width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:34px 30px 26px;border:0;border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:0 30px 90px rgba(6,20,31,.5);overflow:auto}
.mc-dialog::backdrop{background:rgba(6,20,31,.72);backdrop-filter:blur(3px)}
.mc-dialog .mc-form-intro{font-size:19px;margin-right:34px}
.mc-dialog-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--sand);color:var(--navy);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
html.mc-modal-abierto{overflow:hidden}
.mc-dialog[open]{animation:mc-entra .22s ease-out}
@keyframes mc-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── pie legal ─────────────────────────────────────────────── */
.mc-pie{background:#071723;color:#9FB3C2;font-size:13.5px;line-height:1.55;padding:34px 0 40px}
.mc-pie h4{margin:0 0 8px;color:#fff;font-size:14.5px}
.mc-pie p{margin:0 0 6px}
.mc-pie a{color:var(--gold2)}
.mc-pie .mc-copy-r{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);text-align:center}

/* ── aparición al hacer scroll (solo si el JS lo activa) ───── */
html.mc-anima [data-revela]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.mc-anima [data-revela].mc-visto{opacity:1;transform:none}
html.mc-anima .mc-cards [data-revela]:nth-child(2){transition-delay:.08s}
html.mc-anima .mc-cards [data-revela]:nth-child(3){transition-delay:.16s}

/* ── tablet ────────────────────────────────────────────────── */
@media (max-width:1040px){
  .mc-hero-copy{width:58%}
  .mc-hero-foto{left:50%}
  .mc-cards{grid-template-columns:1fr 1fr}
  .mc-cards .mc-card:last-child{grid-column:1 / -1;flex-direction:row}
  .mc-cards .mc-card:last-child .mc-card-foto{flex:0 0 42%;aspect-ratio:auto}
  .mc-regalo{padding:52px 34px 44px}
  .mc-regalos{grid-template-columns:1fr;gap:16px}
  .mc-regalo-card{display:grid;grid-template-columns:220px 1fr;align-items:stretch}
  .mc-regalo-art{height:auto;min-height:230px}
  .mc-bio{gap:40px}
}

/* ── móvil: foto arriba, titular centrado sobre su parte de abajo ── */
@media (max-width:760px){
  body{font-size:16.5px}
  .mc-wrap{width:calc(100% - 32px)}
  .mc-bar a{font-size:16.5px;letter-spacing:.05em;gap:7px;padding:0 10px}
  .mc-hero-foto{inset:0 0 auto 0;height:clamp(300px,86vw,440px)}
  .mc-hero-foto{-webkit-mask-image:none;mask-image:none}
  .mc-hero-foto img{object-position:72% 40%}
  .mc-hero-foto::after{background:linear-gradient(180deg,rgba(10,31,46,.15) 0%,rgba(10,31,46,.05) 40%,rgba(10,31,46,.8) 72%,var(--navy) 100%)}
  .mc-mast{padding:14px 0 0}
  .mc-logo{padding:5px 10px;border-radius:10px}
  .mc-logo img{height:36px}
  .mc-hero-grid{padding:clamp(170px,48vw,250px) 0 44px}
  .mc-hero-copy{width:100%;text-align:center;margin:0 auto}
  .mc-h1{font-size:clamp(23px,6.2vw,30px);line-height:1.22}
  .mc-sub{font-size:16.5px;margin:14px auto 0}
  .mc-hero-cta{margin:22px auto 0}
  .mc-btn{font-size:16px;min-height:56px;padding:13px 18px}
  .mc-evento{padding:38px 0 36px}
  .mc-evento-f{font-size:16.5px}
  .mc-cd{gap:8px;max-width:340px}
  .mc-cd b{font-size:34px}
  .mc-cd span{font-size:10.5px;letter-spacing:.08em}
  .mc-sec{padding:60px 0}
  .mc-secretos .mc-h2{margin:8px auto 28px}
  .mc-cards{grid-template-columns:1fr;gap:18px}
  .mc-cards .mc-card:last-child{flex-direction:column}
  .mc-cards .mc-card:last-child .mc-card-foto{aspect-ratio:16/10}
  .mc-card-txt{padding:20px 20px 24px}
  .mc-card h3{font-size:19px}
  .mc-card p{font-size:16px}
  .mc-regalo-sec{padding:0 0 60px}
  .mc-regalo-sec .mc-wrap{width:calc(100% - 20px)}
  .mc-regalo{padding:40px 20px 34px;border-radius:22px}
  .mc-regalo-intro{font-size:16.5px;margin:16px auto 26px}
  .mc-regalo-card{display:flex;flex-direction:column}
  .mc-regalo-art{height:200px;min-height:0}
  .mc-regalo-art-8::before{width:166px;height:166px}
  .mc-ocho{font-size:156px}
  .mc-burbuja{left:calc(50% + 36px);top:22px;width:48px;height:48px}
  .mc-regalo-art-doc img{height:172px}
  .mc-regalo-txt{padding:20px 20px 24px}
  .mc-regalo-card h3{font-size:19.5px}
  .mc-bio-sec{padding:60px 0}
  .mc-bio{grid-template-columns:1fr;gap:34px}
  .mc-bio-img{max-width:min(300px,calc(100% - 16px));margin-left:0}
  .mc-bio-img::before{inset:12px -12px -12px 12px}
  .mc-bio-txt{font-size:16.5px}
  .mc-puente{flex-direction:column;gap:18px;padding:24px 22px;margin-top:38px;text-align:left}
  .mc-puente-vis{flex-basis:auto}
  .mc-puente-vis img{width:130px}
  .mc-cierre{padding:56px 0 64px}
  .mc-cierre p{font-size:17px}
  .mc-dialog{padding:30px 20px 22px}
  .mc-dialog .mc-form-intro{font-size:17px}
  .mc-dialog .mc-btn{font-size:15px;padding-left:10px;padding-right:10px;letter-spacing:.01em}
}
/* móvil de pantalla baja (iPhone SE y similares): el botón del hero tiene que verse sin scroll */
@media (max-width:760px) and (max-height:780px){
  .mc-mast{position:absolute;top:0;left:16px}
  .mc-hero-foto{height:clamp(260px,72vw,330px)}
  .mc-hero-grid{padding:118px 0 34px}
  .mc-h1{font-size:clamp(20px,5.9vw,24px);line-height:1.2}
  .mc-sub{font-size:15px;line-height:1.45;margin-top:10px}
  .mc-hero-cta{margin-top:16px}
  .mc-micro{margin-top:9px}
}
@media (max-width:370px){
  .mc-bar a{font-size:13.5px;letter-spacing:.02em;gap:5px;padding:0 6px}
  .mc-h1{font-size:20px}
  .mc-hero-grid{padding-top:100px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mc-btn,.mc-card-foto img{transition:none}
  .mc-dialog[open]{animation:none}
}