/* --navy es el azul de la interfaz de la app (estrellas.codeland.com.ar).
   Se suma a la paleta solo para la sección de la app: le da identidad propia
   sin pelearse con el negro y el amarillo del resto del sitio. */
:root { --yellow:#ffd400; --ink:#11110f; --paper:#f3f0e8; --muted:#77756f; --navy:#141d33; --navy-2:#1e2a49; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:86px; position:absolute; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; color:white; border-bottom:1px solid rgba(255,255,255,.22); }
.brand { display:flex; align-items:center; gap:12px; line-height:.85; letter-spacing:.09em; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; background:var(--yellow); color:var(--ink); border-radius:50%; }
.brand-mark .star { font-size:24px; }
.brand b { font-size:16px; display:block; }.brand small{font-size:10px;font-weight:700;letter-spacing:.28em;}
nav { display:flex; gap:32px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
nav a { opacity:.82; transition:.2s; } nav a:hover{opacity:1;color:var(--yellow);}
.nav-cta { border:1px solid rgba(255,255,255,.45); padding:13px 17px; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.08em; }
.nav-cta span,.button span{margin-left:18px;}
.hero { min-height:760px; height:100vh; position:relative; overflow:hidden; color:white; background:#111; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); opacity:.62; animation:heroIn 1.6s ease-out both; }
@keyframes heroIn { from{transform:scale(1.08);opacity:.25} to{transform:scale(1);opacity:.62} }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,8,7,.9) 0%,rgba(8,8,7,.42) 53%,rgba(8,8,7,.72)),linear-gradient(0deg,rgba(8,8,7,.65),transparent 55%); }
.road-line{position:absolute;width:1px;height:160%;background:rgba(255,212,0,.23);transform:rotate(25deg);top:-20%;}.road-line-one{right:17%}.road-line-two{right:23%}
.hero-content { position:relative; z-index:2; padding:20vh 0 0 8vw; max-width:850px; }
.eyebrow,.kicker { font-size:11px; letter-spacing:.23em; font-weight:800; text-transform:uppercase; }.eyebrow{display:flex;align-items:center;gap:10px;color:#f4f1e8}.eyebrow i{width:28px;height:3px;background:var(--yellow)}
.hero h1 { font-size:clamp(70px,8.8vw,145px); line-height:.83; margin:34px 0 30px; letter-spacing:-.075em; font-weight:900; text-transform:uppercase; }
.hero h1 em { color:var(--yellow); font-style:normal; }
.hero-copy { max-width:600px; font-size:19px; line-height:1.55; color:rgba(255,255,255,.78); }
.hero-actions{display:flex;gap:14px;margin-top:40px}.button{display:inline-flex;align-items:center;justify-content:space-between;min-width:210px;padding:18px 21px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em;transition:.25s}.button:hover{transform:translateY(-3px)}.primary{background:var(--yellow);color:var(--ink)}.ghost{border:1px solid rgba(255,255,255,.5);color:white}.black{background:var(--ink);color:white}
.hero-side-note{position:absolute;z-index:2;right:4vw;top:48%;display:flex;gap:55px;transform:rotate(90deg) translateX(50%);transform-origin:right center;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.6)}
.hero-star{position:absolute;z-index:3;right:8vw;bottom:38px;display:flex;align-items:center;gap:16px;font-size:12px;line-height:1.45;text-transform:uppercase;letter-spacing:.08em}.hero-star>.star{color:var(--yellow);font-size:42px}
.manifesto{padding:135px 8vw 110px;display:grid;grid-template-columns:.25fr 1.05fr .9fr;gap:5vw;position:relative}.section-number{font-size:11px;border-top:1px solid #aaa;padding-top:10px}.manifesto h2,.section-heading h2,.actions h2,.cta-section h2,.symbol-copy h2{font-size:clamp(46px,5.3vw,83px);line-height:.95;letter-spacing:-.06em;margin:20px 0;font-weight:900;text-transform:uppercase}.manifesto h2 span,.section-heading h2 span,.actions h2 span{color:#aaa89f}.manifesto-copy{padding-top:40px}.manifesto-copy p{font-size:17px;line-height:1.75;color:#4e4c47;margin:0 0 18px}.manifesto-copy a{display:inline-flex;margin-top:18px;border-bottom:2px solid var(--yellow);padding-bottom:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.manifesto-copy a span{margin-left:22px}.manifesto-quote{grid-column:2/4;margin-top:70px;border-top:1px solid #cbc7bd;padding:35px 0 0;display:flex;gap:28px;align-items:flex-start}.manifesto-quote .star{color:var(--yellow);font-size:30px}.manifesto-quote blockquote{margin:0;max-width:800px;font-family:Georgia,serif;font-size:31px;line-height:1.35;font-style:italic;color:#302f2b}
.symbol-section{background:var(--yellow);min-height:600px;padding:105px 9vw;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;position:relative;overflow:hidden}.symbol-star{position:relative;width:360px;height:360px;display:grid;place-items:center}.symbol-star>.star{font-size:310px;line-height:1;color:var(--ink);position:relative;z-index:2}.pulse{position:absolute;border:1px solid rgba(17,17,15,.25);border-radius:50%;inset:15px;animation:pulse 3s infinite}.p2{inset:-35px;animation-delay:1.5s}@keyframes pulse{0%{transform:scale(.8);opacity:0}45%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.kicker.dark{color:#28271f}.symbol-copy h2{font-size:clamp(48px,5.6vw,86px)}.symbol-copy>p:not(.kicker){font-size:18px;line-height:1.7;max-width:600px}.symbol-line{border-top:2px solid var(--ink);margin-top:36px;padding-top:20px;display:flex;flex-direction:column;gap:7px}.symbol-line b{text-transform:uppercase;font-size:13px;letter-spacing:.1em}.symbol-line span{font-family:Georgia,serif;font-size:19px;font-style:italic}.symbol-index{position:absolute;right:20px;bottom:32px;transform:rotate(-90deg);font-size:9px;letter-spacing:.18em}
.pillars{padding:130px 6vw;background:#e9e5dc}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:0 2vw 65px}.section-heading>p{max-width:400px;line-height:1.7;color:#65625d}.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);min-height:540px}.pillar{position:relative;padding:35px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.pillar.yellow{background:var(--yellow)}.pillar.yellow>.star{font-size:130px;align-self:center;color:var(--ink);margin-top:30px}.pillar-no{font-size:10px;letter-spacing:.15em;border-top:1px solid currentColor;padding-top:8px}.pillar h3{font-size:42px;margin:0 0 12px;letter-spacing:-.04em}.pillar p{max-width:340px;line-height:1.65;font-size:15px}.pillar a{display:flex;justify-content:space-between;border-top:1px solid currentColor;margin-top:24px;padding-top:16px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:800}.photo-card{color:white}.photo-card img,.card-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.card-overlay{background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.1));filter:none}.photo-card>*:not(img):not(.card-overlay){position:relative}.dark-card{background:#121210;color:white}.signal{font-size:135px;color:var(--yellow);align-self:center;margin-top:40px}
.actions{background:#11110f;color:white;display:grid;grid-template-columns:1.05fr .95fr;min-height:800px}.actions-image{position:relative;min-height:650px}.actions-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.72}.actions-image span{position:absolute;bottom:30px;left:30px;background:var(--yellow);color:#111;padding:11px 15px;font-size:9px;text-transform:uppercase;letter-spacing:.16em}.actions-copy{padding:100px 7vw}.actions h2{font-size:clamp(46px,5vw,78px)}.actions-copy>p:not(.kicker){color:#aaa;font-size:17px;line-height:1.7}.actions ul{list-style:none;padding:0;margin:42px 0}.actions li{border-top:1px solid #3b3b37;padding:17px 0;display:flex;justify-content:space-between}.actions li b{color:var(--yellow);text-transform:uppercase;font-size:12px;letter-spacing:.1em}.actions li span{color:#999;font-size:13px}
/* ============================================================
   LA APP — sección destacada que enlaza a estrellas.codeland.com.ar
   ============================================================ */
.nav-app{display:flex;align-items:center;gap:7px;color:var(--yellow);opacity:1}
.nav-app i{width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:navDot 2.4s infinite}
@keyframes navDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.app-section{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 78% 12%,var(--navy-2) 0%,var(--navy) 55%,#0d1526 100%);color:white;padding:130px 6vw 120px;display:grid;grid-template-columns:1.06fr .94fr;gap:6vw;align-items:center}
/* Trama de calles de fondo: es el mismo lenguaje visual que las .road-line del
   hero, pero en grilla, que es como se ve una ciudad en el mapa de la app. */
.app-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,212,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,212,0,.05) 1px,transparent 1px);background-size:88px 88px;mask-image:radial-gradient(75% 65% at 60% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(75% 65% at 60% 45%,#000 30%,transparent 100%)}
.app-copy{position:relative;z-index:2}
.kicker.light{display:flex;align-items:center;gap:10px;color:var(--yellow)}
.kicker.light i{width:28px;height:3px;background:var(--yellow)}
/* Un poco más chico que los otros h2 del sitio: la columna es más angosta
   (comparte fila con el teléfono) y así "TODOS LOS DÍAS." entra en un renglón. */
.app-section h2{font-size:clamp(44px,4.4vw,70px);line-height:.95;letter-spacing:-.06em;margin:22px 0 24px;font-weight:900;text-transform:uppercase}
.app-section h2 span{color:var(--yellow)}
.app-lead{max-width:600px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.76);margin:0}
.app-features{list-style:none;padding:0;margin:42px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2px 34px}
.app-features li{display:flex;gap:14px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.14);padding:15px 0}
.app-features .ico{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,212,0,.13);color:var(--yellow);font-size:13px}
.app-features b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.app-features span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.58)}
.app-actions{display:flex;align-items:center;gap:32px;margin-top:42px;flex-wrap:wrap}
/* El botón de la app es el único con halo: en una sección llena de datos, es lo
   que tiene que ganar la mirada. */
.app-cta{box-shadow:0 0 0 0 rgba(255,212,0,.5);animation:appPulse 2.8s infinite}
@keyframes appPulse{0%{box-shadow:0 0 0 0 rgba(255,212,0,.45)}70%{box-shadow:0 0 0 18px rgba(255,212,0,0)}100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}}
.text-link.light{color:var(--yellow);border-color:rgba(255,212,0,.5);text-transform:none;letter-spacing:.02em;font-size:13px}
.app-note{margin:34px 0 0;max-width:520px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.45)}
/* --- el teléfono (CSS puro, sin imágenes) --- */
.app-device{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.phone{width:290px;height:580px;border-radius:38px;padding:11px;background:linear-gradient(160deg,#33405f,#0d1424);box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone-screen{height:100%;border-radius:28px;background:#0f1729;overflow:hidden;display:flex;flex-direction:column;padding:16px 14px;gap:12px}
.ph-top{display:flex;align-items:center;gap:9px}
.ph-star{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:13px}
.ph-title{font-size:8px;font-weight:800;letter-spacing:.16em;color:rgba(255,255,255,.75)}
.ph-map{position:relative;flex:1;border-radius:16px;background:#16203a;overflow:hidden}
.ph-road{position:absolute;background:rgba(255,255,255,.07)}
.ph-road.r1{left:0;right:0;top:26%;height:2px}.ph-road.r2{left:0;right:0;top:58%;height:2px}.ph-road.r3{left:0;right:0;top:82%;height:2px}
.ph-road.v1{top:0;bottom:0;left:32%;width:2px}.ph-road.v2{top:0;bottom:0;left:71%;width:2px}
.ph-zone{position:absolute;left:23%;top:47%;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(255,72,72,.35),transparent 70%);border:1px solid rgba(255,110,110,.35)}
.ph-pin{position:absolute;color:var(--yellow);font-size:15px;text-shadow:0 0 12px rgba(255,212,0,.7);animation:pinIn 3.6s infinite}
.ph-pin.p1{left:29%;top:52%}.ph-pin.p2{left:36%;top:60%;animation-delay:.9s}.ph-pin.p3{left:68%;top:29%;animation-delay:1.8s}.ph-pin.p4{left:52%;top:76%;animation-delay:2.7s}
@keyframes pinIn{0%,70%{opacity:1;transform:scale(1)}80%{opacity:.35;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.ph-chip{position:absolute;left:12px;bottom:12px;background:rgba(255,72,72,.16);border:1px solid rgba(255,110,110,.45);color:#ff9b9b;font-size:7px;font-weight:800;letter-spacing:.14em;padding:5px 8px;border-radius:20px}
.ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-stats div{background:rgba(255,255,255,.05);border-radius:12px;padding:11px 6px;text-align:center}
.ph-stats b{display:block;color:var(--yellow);font-size:15px;line-height:1}
.ph-stats span{font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ph-tip{background:var(--yellow);color:var(--ink);border-radius:14px;padding:12px 13px}
.ph-tip b{display:block;font-size:7px;letter-spacing:.16em;margin-bottom:5px}
.ph-tip span{font-size:12px;font-weight:700}
.device-caption{text-align:center;font-size:11px;line-height:1.6;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.device-caption span{color:var(--yellow)}
.footer-app{color:var(--yellow)}

.cta-section{background:var(--yellow);text-align:center;padding:110px 5vw;position:relative}.cta-star .star{font-size:58px}.cta-section h2{margin:25px auto;max-width:1000px}.cta-section h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400;text-transform:none}.cta-section>p:not(.kicker){font-size:17px}.cta-buttons{display:flex;justify-content:center;align-items:center;gap:35px;margin-top:35px}.text-link{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid;padding-bottom:6px}.text-link span{margin-left:20px}
footer{background:#0b0b0a;color:white;padding:75px 6vw 24px}.footer-main{display:grid;grid-template-columns:1.4fr 1fr .6fr .7fr;gap:60px;padding-bottom:65px}.footer-brand{display:flex;gap:18px}.footer-brand b{font-size:19px;line-height:1.15}.footer-brand p{color:#85857f;line-height:1.6;font-size:13px}.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:13px;color:#c5c4bd}.footer-col h3{color:var(--yellow);font-size:10px;letter-spacing:.17em;margin:0 0 13px}.footer-col a:hover{color:var(--yellow)}.footer-col p{line-height:1.6;margin:4px 0}.footer-bottom{border-top:1px solid #292925;padding-top:20px;display:flex;justify-content:space-between;color:#686862;font-size:9px;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:900px){.topbar{height:72px;padding:0 20px}.topbar nav{display:none}.nav-cta{padding:11px}.hero{min-height:720px}.hero-content{padding:155px 24px 0}.hero h1{font-size:clamp(57px,17vw,95px)}.hero-copy{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-side-note{display:none}.hero-star{right:20px;bottom:24px}.manifesto{padding:90px 25px;grid-template-columns:1fr}.manifesto .section-number{display:none}.manifesto-copy{padding-top:0}.manifesto-quote{grid-column:auto;margin-top:35px}.manifesto-quote blockquote{font-size:24px}.symbol-section{grid-template-columns:1fr;padding:75px 25px}.symbol-star{width:230px;height:230px;margin:auto}.symbol-star>.star{font-size:210px}.pillars{padding:85px 20px}.section-heading{display:block;margin:0 0 40px}.pillar-grid{grid-template-columns:1fr}.pillar{min-height:470px}.actions{grid-template-columns:1fr}.actions-image{min-height:480px}.actions-copy{padding:75px 25px}.actions li{display:block}.actions li span{display:block;margin-top:8px}.app-section{grid-template-columns:1fr;padding:85px 25px 90px;gap:60px}.app-features{grid-template-columns:1fr;margin-top:34px}.app-actions{flex-direction:column;align-items:stretch;gap:20px}.app-actions .text-link{text-align:center}.phone{width:255px;height:520px}.cta-section{padding:80px 22px}.cta-buttons{flex-direction:column}.footer-main{grid-template-columns:1fr;gap:38px}.footer-bottom{flex-direction:column;gap:10px}.brand b{font-size:13px}.brand small{font-size:8px}}
@media(max-width:520px){.nav-cta{font-size:0}.nav-cta:before{content:'PEDÍ TU ESTRELLA';font-size:9px}.nav-cta span{display:none}.hero-star{display:none}.hero h1{font-size:15vw}.button{width:100%}.symbol-copy h2,.manifesto h2,.section-heading h2,.actions h2,.cta-section h2,.app-section h2{font-size:13vw}.phone{width:100%;max-width:270px;height:auto;aspect-ratio:9/18}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}