/* ============================================================
   JobIn — Aurora · portada y acceso (28/10/2026)
   Sustituye a las reglas de la portada original (.landing .shell .nav .hero .land-* .cv-feature). Los colores salen
   de jobin-tokens.css (claro/oscuro). Las figuras de los paneles son las de la portada original; en claro usan sus
   mismos colores (--fig-*) y en oscuro se vuelven de cristal.

   Proporciones: la maqueta (docs/diseno-futurista/maquetas/direcciones.html, sección B) es un marco de 1440×840.
   Aquí cada medida va en «--u», que vale 1px en ese marco y escala con la ventana (el menor de ancho/1440 y
   alto/840), de modo que la primera pantalla se ve igual que la maqueta en cualquier pantalla de escritorio.
   jobin-globo.js usa el mismo factor para el globo. En móvil (≤760px) --u es 1px y mandan las reglas de abajo.
============================================================ */
.landing{--u:clamp(.66px,min(calc(100vw / 1440),calc(100vh / 840)),1.35px);position:relative;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);overflow:clip;font-family:var(--font)}
.landing .shell{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:transparent;border:0}
.landing{--fig-bg:#f6f7fa;--fig-line:#e5e7eb;--fig-card:#ffffff;--fig-ink:#141414;--fig-dim:#9c9c9c;--fig-faint:#d8d8d8;--fig-faint2:#eef0f4;--fig-accent:var(--blue);--fig-accent2:var(--p2);--fig-accent2b:#9fc21f;--fig-chip-ink:#141414;--fig-chip-line:#141414;--pill-line:rgba(11,16,32,.1);--pill-bg:rgba(255,255,255,.6);--hero-p:#4a556b;--hero-btn-bg:var(--text);--hero-btn-ink:var(--bg)}
:root[data-theme="dark"] .landing{--fig-bg:rgba(255,255,255,.04);--fig-line:rgba(255,255,255,.14);--fig-card:rgba(255,255,255,.08);--fig-ink:#ffffff;--fig-dim:#9aa6bd;--fig-faint:rgba(255,255,255,.16);--fig-faint2:rgba(255,255,255,.16);--fig-accent:var(--p1-light);--fig-accent2b:var(--p2);--fig-chip-ink:#04050a;--fig-chip-line:transparent;--pill-line:rgba(255,255,255,.1);--pill-bg:rgba(255,255,255,.04);--hero-p:#b6c3dc;--hero-btn-bg:var(--p2);--hero-btn-ink:#0b1020}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .landing{--fig-bg:rgba(255,255,255,.04);--fig-line:rgba(255,255,255,.14);--fig-card:rgba(255,255,255,.08);--fig-ink:#ffffff;--fig-dim:#9aa6bd;--fig-faint:rgba(255,255,255,.16);--fig-faint2:rgba(255,255,255,.16);--fig-accent:var(--p1-light);--fig-accent2b:var(--p2);--fig-chip-ink:#04050a;--fig-chip-line:transparent;--pill-line:rgba(255,255,255,.1);--pill-bg:rgba(255,255,255,.04);--hero-p:#b6c3dc;--hero-btn-bg:var(--p2);--hero-btn-ink:#0b1020}}

/* Luz de marca y globo (solo en la primera pantalla) */
.landing .aurora{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(ellipse 48% 42% at 24% 36%,rgba(var(--p1-rgb),.28),transparent 70%),radial-gradient(ellipse 36% 30% at 44% 22%,rgba(var(--p2-rgb),.22),transparent 70%),radial-gradient(ellipse 50% 30% at 92% 104%,rgba(var(--p1-rgb),.16),transparent 70%)}
.landing .aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 30% 26% at 30% 42%,rgba(var(--p2-rgb),.16),transparent 70%);animation:aurora-respira 9s ease-in-out infinite alternate}
:root[data-theme="dark"] .landing .aurora{mix-blend-mode:screen;background:radial-gradient(ellipse 48% 42% at 24% 36%,rgba(var(--p1-rgb),.46),transparent 70%),radial-gradient(ellipse 36% 30% at 44% 22%,rgba(var(--p2-rgb),.26),transparent 70%),radial-gradient(ellipse 50% 30% at 92% 104%,rgba(var(--p1-rgb),.2),transparent 70%)}
:root[data-theme="dark"] .landing .aurora::after{background:radial-gradient(ellipse 30% 26% at 30% 42%,rgba(var(--p2-rgb),.18),transparent 70%)}
@keyframes aurora-respira{to{transform:translate(60px,-30px) scale(1.12)}}
.globo-wrap{position:absolute;left:0;right:0;top:0;height:100vh;height:100dvh;z-index:0;pointer-events:none}
/* El globo se funde con el fondo al final de la primera pantalla (30/10/2026): antes terminaba en seco y el pie
   quedaba como una franja lisa. La máscara vale para los dos temas. */
.globo-wrap{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.globo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.globo.listo{opacity:1}
.globo canvas{display:block}
.globo-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,247,251,0) 86%,rgba(245,247,251,.22) 100%)}
:root[data-theme="dark"] .globo-fade{background:linear-gradient(180deg,rgba(4,5,10,0) 50%,rgba(4,5,10,.55) 100%)}

/* Barra superior */
.landing .nav{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(34 * var(--u));height:calc(76 * var(--u));padding:0 calc(40 * var(--u))}
.landing .nav .logo{position:absolute;left:calc(40 * var(--u));top:50%;transform:translateY(-50%);gap:calc(10 * var(--u))}
.landing .nav .logo .mark{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.landing .nav .logo .word{height:calc(14.5 * var(--u))}
.landing .nav-links{display:flex;align-items:center;gap:calc(26 * var(--u));height:calc(46 * var(--u));padding:0 calc(22 * var(--u));border-radius:999px;border:1px solid var(--pill-line);background:var(--pill-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.landing .nav-links button{border:0;background:none;padding:0;font:500 calc(14 * var(--u)) var(--font);color:var(--muted);cursor:pointer}
.landing .nav-links button:first-child{color:var(--text)}@media (hover:hover) and (pointer:fine){.landing .nav-links button:hover{color:var(--text)}}
.landing .nav .tema-btn,.landing .nav #temaBtnLanding{position:absolute;right:calc(40 * var(--u));top:50%;transform:translateY(-50%)}
/* Como el texto discreto de la derecha en la maqueta: sin caja ni icono. */
.landing .nav button.tema-btn{height:auto;padding:0;border:0;background:none;box-shadow:none;font:500 calc(13 * var(--u))/1 var(--font);color:var(--muted);cursor:pointer}
@media (hover:hover) and (pointer:fine){.landing .nav button.tema-btn:hover{color:var(--text)}}
.landing .nav button.tema-btn .ico{display:none}

/* Titular. La primera pantalla mide exactamente la ventana (barra + portada); si sobra alto, se reparte entre
   el titular y los paneles (márgenes auto). Lo que venga después queda bajo el pliegue. */
.landing .hero{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;max-width:none;margin:0;padding:0 calc(40 * var(--u)) calc(32 * var(--u));min-height:calc(100vh - 76 * var(--u));min-height:calc(100dvh - 76 * var(--u))}
.hero-copy{margin-top:auto;padding:calc(96 * var(--u)) 0 0;max-width:calc(1000 * var(--u))}
.landing .hero h1{margin:calc(24 * var(--u)) 0 calc(18 * var(--u));font:800 calc(92 * var(--u))/.95 var(--font);letter-spacing:-.05em;color:var(--text)}
.landing .hero h1 .w{display:inline-block;opacity:0;transform:translateY(30px);animation:palabra .9s var(--ease) forwards}
.landing .hero h1 .w:nth-child(2){animation-delay:.08s}.landing .hero h1 .w:nth-child(3){animation-delay:.16s}.landing .hero h1 .w:nth-child(5){animation-delay:.24s}.landing .hero h1 .w:nth-child(6){animation-delay:.32s}.landing .hero h1 .w:nth-child(7){animation-delay:.4s}
/* Dos palabras con degradado de marca (--g1 → --g2 → --g3, jobin-tokens.css), como en la maqueta. */
.landing .hero h1 .soft{color:transparent;background:linear-gradient(90deg,var(--g1),var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;padding-bottom:.16em;margin-bottom:-.16em}
@keyframes palabra{to{opacity:1;transform:none}}
.landing .hero p{margin:0 0 calc(30 * var(--u));font-size:calc(19 * var(--u));line-height:1.5;color:var(--hero-p);max-width:54ch}
.landing .hero-cta{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(11 * var(--u))}
/* Botón de la maqueta: negro en claro, lima en oscuro, sin sombra. */
.landing .hero-cta button{min-width:0;height:calc(48 * var(--u));padding:0 calc(22 * var(--u));border:0;border-radius:999px;background:var(--hero-btn-bg);color:var(--hero-btn-ink);font:600 calc(15 * var(--u)) var(--font);letter-spacing:-.01em;box-shadow:none;cursor:pointer;transition:transform .15s ease,filter .2s ease}
@media (hover:hover) and (pointer:fine){.landing .hero-cta button:hover{filter:brightness(1.12);transform:none;box-shadow:none}}
.landing .hero-cta button:active{transform:scale(.98)}

/* Paneles de cristal (las cuatro figuras de la portada original). El título de cada panel va grande: es lo que
   tiene que leerse (Summer Internships, prácticas, CV, reunión). */
.landing .land-cards{position:relative;z-index:2;width:auto;margin:auto 0 0;padding-top:calc(40 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(12 * var(--u))}
.landing .cv-feature{display:flex;flex-direction:column;gap:calc(12 * var(--u));padding:calc(14 * var(--u)) calc(16 * var(--u));border-radius:calc(16 * var(--u));border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);min-width:0}
:root[data-theme="light"] .landing .cv-feature,.landing .cv-feature{box-shadow:0 10px 30px rgba(11,16,32,.06)}
:root[data-theme="dark"] .landing .cv-feature{box-shadow:none}
.landing .cv-feature>:first-child{flex:1;display:flex;align-items:center}
/* Palabra clave de cada recuadro en verde de marca (29/10/2026). */
.landing .cv-feature strong .land-k{color:var(--blue)}
.landing .cv-feature strong{font:700 calc(17 * var(--u))/1.3 var(--font);color:var(--text);letter-spacing:-.02em}
.landing .meet-img{width:auto;max-width:100%;height:calc(84 * var(--u));display:block;border-radius:0}
.landing .land-stat{aspect-ratio:auto;display:flex;justify-content:center;gap:calc(36 * var(--u));align-items:flex-end;width:100%}
.landing .land-stat div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(5 * var(--u))}
.landing .land-stat div+div{border-left:0}
.landing .land-stat b{font:600 calc(30 * var(--u))/1 var(--font-mono);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.landing .land-stat span{font:500 calc(10 * var(--u)) var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.landing .land-seo{position:relative;z-index:2;margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:12px}
.landing .land-seo a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}


/* Acceso: el mismo formulario, como panel de cristal sobre el globo */
.modal-wrap{background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{border:1px solid var(--glass-line);border-radius:24px;background:rgba(255,255,255,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 40px 120px rgba(var(--p1-rgb),.18)}
:root[data-theme="dark"] .modal{background:rgba(10,12,20,.55);box-shadow:0 40px 120px rgba(var(--p1-rgb),.25)}
.modal .close{border-color:var(--line);background:transparent}
.modal .primary,.modal button.primary{border-radius:999px;box-shadow:var(--btn-shadow)}
.modal .google-btn{border:1px solid var(--line);border-radius:999px;box-shadow:none;background:var(--glass)}

/* Móvil y tableta: sin globo, titular más pequeño, paneles apilados */
/* Tableta (2 columnas): los cuatro paneles del mismo tamaño, el de las cifras (2/11/2026, iPad). La figura deja de
   estirarse con el ancho del panel y toma la altura del bloque de cifras. */
@media (max-width:1100px),(pointer:coarse) and (max-height:1100px){
  .landing .land-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .landing .cv-feature>svg.meet-img:first-child{flex:none;align-self:center;width:auto;height:calc(48 * var(--u))}
}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  .landing{--u:1px}
  .globo-wrap{display:none}
  .landing .nav{height:64px;padding:0 16px}
  .landing .nav .logo{left:16px}
  .landing .nav-links{display:none}
  .landing .nav .tema-btn,.landing .nav #temaBtnLanding{right:16px}
  .landing .hero{padding:0 16px 24px;min-height:0}
  .hero-copy{margin-top:0;padding-top:40px}
  .landing .hero h1{font-size:44px}
  .landing .hero p{font-size:16px}
  .landing .hero-cta{align-items:stretch}
  .landing .hero-cta button{width:100%}
  .landing .land-cards{grid-template-columns:1fr;padding-top:28px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .landing .hero h1 .w{opacity:1;transform:none;animation:none}
  .landing .aurora::after{animation:none}
}

/* 28/10/2026 · Primera pantalla completa también en Chrome y Edge a 1366 × 768: un único botón, «Entrar a JobIn»
   (Google y LinkedIn están en la ventana de acceso), --u puede bajar hasta .66px y el titular sube un poco. */
/* Verde corporativo (--blue en la paleta «verde»): «Summer Internship», «Prácticas» y «CV» resaltados. */
.landing .hl{color:var(--blue);font-weight:800}
:root[data-theme="dark"] .landing .hl{color:var(--p1-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .landing .hl{color:var(--p1-light)}}

/* ============================================================
   Portada en el móvil (2/11/2026): menú en el centro, «Entrar» discreto arriba a la derecha y, debajo,
   «Así es JobIn por dentro» en tres pasos con capturas reales. En escritorio y tableta nada de esto se ve.
============================================================ */
.landing .enter-movil,.landing .hero-menu{display:none}
.landing[data-vista] .land-pasos{display:none}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  /* Barra: logo a la izquierda; tema (solo icono) y «Entrar» a la derecha. El menú de arriba solo aparece dentro
     de una presentación, para poder cambiar de una a otra o volver. */
  .landing:not([data-vista]) .nav-links{display:none}
  .landing[data-vista] .nav-links{display:flex}
  #landing .nav{grid-template-columns:1fr auto auto}
  .landing .nav .enter-movil{display:inline-flex;align-items:center;grid-column:3;grid-row:1;height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--text);font:600 14px var(--font);box-shadow:none;cursor:pointer}
  .landing .nav button.tema-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:999px}
  .landing .nav button.tema-btn .txt{display:none}
  .landing .nav button.tema-btn .ico{display:inline-flex}
  /* El botón grande de entrar deja de ser lo primero: su sitio lo ocupa el menú. */
  .landing .hero-cta{display:none}
  .landing .hero h1{margin-bottom:26px}
  .landing .hero-menu{display:flex;flex-direction:column;gap:10px}
  .landing .hero-menu button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:16px 52px 16px 18px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:0 10px 30px rgba(11,16,32,.06);text-align:left;cursor:pointer;color:var(--text);transition:transform .12s ease}
  .landing .hero-menu button:active{transform:scale(.98)}
  .landing .hero-menu b{font:700 18px/1.2 var(--font);letter-spacing:-.02em}
  .landing .hero-menu span{font:500 13.5px/1.3 var(--font);color:var(--muted)}
  .landing .hero-menu i{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:999px;background:var(--acid);color:var(--on-acid);font:700 15px/1 var(--font);font-style:normal}
  .landing .hero-menu button:first-child{background:var(--blue);border-color:var(--blue);color:#fff}
  .landing .hero-menu button:first-child span{color:rgba(255,255,255,.82)}
  :root[data-theme="dark"] .landing .hero-menu button{box-shadow:none}

  /* Así es JobIn por dentro */
  .landing .land-pasos{display:block;margin:56px 0 8px;padding:0 16px}
  .landing .pasos-k{margin:0 0 6px;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
  .landing .land-pasos h2{margin:0 0 22px;font:800 28px/1.1 var(--font);letter-spacing:-.035em;color:var(--text)}
  .landing .land-pasos ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
  .landing .paso-txt{display:flex;align-items:center;gap:12px;margin:0 0 12px}
  .landing .paso-n{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:var(--acid);color:var(--on-acid);font:800 16px/1 var(--font)}
  .landing .paso-txt h3{margin:0;font:700 18px/1.2 var(--font);letter-spacing:-.02em;color:var(--text)}
  .landing .paso-txt p{margin:2px 0 0;font:500 14px/1.35 var(--font);color:var(--muted)}
  .landing .paso-img{margin:0 -6px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 14px 34px rgba(11,16,32,.08)}
  :root[data-theme="dark"] .landing .paso-img{box-shadow:none}
  .landing .paso-img img{display:block;width:100%;height:auto}
  .landing .paso-img .oscuro{display:none}
  :root[data-theme="dark"] .landing .paso-img .claro{display:none}
  :root[data-theme="dark"] .landing .paso-img .oscuro{display:block}
  .landing .pasos-cta{display:block;width:100%;height:52px;margin:30px 0 0;border:0;border-radius:999px;background:var(--hero-btn-bg);color:var(--hero-btn-ink);font:600 16px var(--font);cursor:pointer}
}

/* Así es JobIn por dentro en ordenador y tableta (2/11/2026): bajo la primera pantalla, cada paso en una fila con el
   texto a un lado y la captura de la página completa al otro, alternando. */
@media (min-width:761px) and (pointer:fine),(min-width:761px) and (min-height:761px){
  .landing .land-pasos{position:relative;z-index:2;width:100%;max-width:1600px;margin:0;padding:110px calc(40 * var(--u)) 40px;box-sizing:border-box}
  .landing .pasos-k{margin:0 0 10px;font:500 12px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
  .landing .land-pasos h2{margin:0 0 64px;font:800 clamp(34px,4vw,52px)/1.05 var(--font);letter-spacing:-.04em;color:var(--text);max-width:16ch}
  .landing .land-pasos ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:96px}
  .landing .land-pasos li{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);gap:56px;align-items:center}
  .landing .land-pasos li:nth-child(2){grid-template-columns:minmax(0,1.6fr) minmax(0,.62fr)}
  .landing .land-pasos li:nth-child(2) .paso-txt{order:2}
  .landing .paso-txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .landing .paso-n{width:52px;height:52px;display:grid;place-items:center;border-radius:999px;background:var(--acid);color:var(--on-acid);font:800 24px/1 var(--font)}
  .landing .paso-txt h3{margin:0;font:800 clamp(24px,2.4vw,32px)/1.1 var(--font);letter-spacing:-.03em;color:var(--text)}
  .landing .paso-txt p{margin:8px 0 0;font:500 17px/1.45 var(--font);color:var(--muted)}
  .landing .paso-img{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 30px 70px rgba(11,16,32,.12),0 6px 18px rgba(11,16,32,.06)}
  :root[data-theme="dark"] .landing .paso-img{box-shadow:0 30px 70px rgba(0,0,0,.45)}
  .landing .paso-img img{display:block;width:100%;height:auto}
  .landing .paso-img .oscuro{display:none}
  :root[data-theme="dark"] .landing .paso-img .claro{display:none}
  :root[data-theme="dark"] .landing .paso-img .oscuro{display:block}
  .landing .pasos-cta{display:inline-flex;align-items:center;height:52px;margin:88px 0 0;padding:0 28px;border:0;border-radius:999px;background:var(--hero-btn-bg);color:var(--hero-btn-ink);font:600 16px var(--font);cursor:pointer;transition:filter .2s ease}
  @media (hover:hover) and (pointer:fine){.landing .pasos-cta:hover{filter:brightness(1.12)}}
}
/* Tableta (y ventanas estrechas): texto encima y captura a todo el ancho. */
@media (min-width:761px) and (max-width:1100px) and (pointer:fine),(min-width:761px) and (max-width:1100px) and (min-height:761px){
  .landing .land-pasos{padding:80px calc(40 * var(--u)) 32px}
  .landing .land-pasos li,.landing .land-pasos li:nth-child(2){grid-template-columns:1fr;gap:22px}
  .landing .land-pasos li:nth-child(2) .paso-txt{order:0}
  .landing .paso-txt{flex-direction:row;align-items:center}
  .landing .paso-txt p{margin-top:4px}
  .landing .land-pasos ol{gap:64px}
}