:root{color-scheme:light}
html{-webkit-text-size-adjust:100%}
/* Layout: una sola columna angosta, como una partitura apaisada vista en el teléfono; el nombre manda, los links son renglones */
:root{
  --bg:#e6e8dc;        /* limo de río, verde pálido */
  --surface:#f3f4ec;
  --ink:#1f2a24;       /* verde monte casi negro */
  --muted:#5c6a60;
  --line:#c9cdbd;
  --ceibo:#b8263a;     /* flor del ceibo */
  --ceibo-ink:#fff6f4;
  --display:"Gloock", "Georgia", "Times New Roman", serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121a17; --surface:#1a2420; --ink:#e7eadf; --muted:#9aa79e; --line:#2c3a33;
    --ceibo:#e0566a; --ceibo-ink:#1a0d10; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121a17; --surface:#1a2420; --ink:#e7eadf; --muted:#9aa79e; --line:#2c3a33;
  --ceibo:#e0566a; --ceibo-ink:#1a0d10; color-scheme:dark;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:40px 32px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:28px}

/* Cabecera */
header{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.hero{position:relative; width:min(290px, 82vw); aspect-ratio:9/10; max-width:100%}
.hero::before{content:""; position:absolute; left:4%; right:4%; bottom:0; aspect-ratio:1; border-radius:50%; background:var(--ceibo); opacity:.9}
.hero img{position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:bottom;
  -webkit-mask-image:radial-gradient(46% 41.4% at 50% 58.6%, #000 99.5%, transparent 100%), linear-gradient(#000 58.6%, transparent 58.6%);
  mask-image:radial-gradient(46% 41.4% at 50% 58.6%, #000 99.5%, transparent 100%), linear-gradient(#000 58.6%, transparent 58.6%)}
h1{margin:0; line-height:0; width:100%; display:flex; justify-content:center}
.tag{margin:0; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* Destacado */
.feature{
  display:block; text-decoration:none; color:var(--ceibo-ink); background:var(--ceibo);
  border-radius:4px; padding:20px 20px 18px; position:relative; overflow:hidden;
  transition:transform .2s ease;
}
.feature:hover{transform:translateY(-2px)}
.feature .kicker{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.85}
.feature .title{font-family:var(--display); font-size:1.9rem; line-height:1.05; margin:6px 0 4px}
.feature .sub{font-size:.92rem; opacity:.9}
.feature .play{position:absolute; right:18px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center}
.feature .play svg{width:14px; height:14px; margin-left:3px; fill:currentColor}

/* Lista de links */
.group{display:flex; flex-direction:column}
.group h2{margin:0 0 6px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.link{
  display:flex; align-items:center; gap:14px; padding:15px 2px;
  border-top:1px solid var(--line); color:var(--ink); text-decoration:none;
}
.group .link:last-child{border-bottom:1px solid var(--line)}
.link .ico{width:22px; height:22px; flex:none; color:var(--ceibo)}
.link .ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.link .txt{flex:1; min-width:0}
.link .t{display:block; font-weight:600; font-size:1.02rem}
.link .s{display:block; font-size:.86rem; color:var(--muted)}
.link .arr{color:var(--muted); transition:transform .2s ease, color .2s ease; font-size:1.1rem}
.link:hover .arr{transform:translateX(4px); color:var(--ceibo)}
.link:hover .t{color:var(--ceibo)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips a{font-size:.84rem; color:var(--ink); text-decoration:none; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.chips a:hover{border-color:var(--ceibo); color:var(--ceibo)}

/* Botón contratar */
.cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 24px; border-radius:999px;
  background:var(--ink); color:var(--bg); text-decoration:none;
  font-weight:600; font-size:1rem; letter-spacing:.22em; text-transform:uppercase;
  transition:background .2s ease, transform .2s ease;
}
.cta:hover{background:var(--ceibo); color:var(--ceibo-ink); transform:translateY(-2px)}
.cta-note{margin:-18px 0 0; text-align:center; font-size:.82rem; color:var(--muted)}

.logo{display:block; width:min(300px, 80%); height:auto; margin:0 auto; filter:brightness(0) saturate(100%); opacity:.9}
:root[data-theme="dark"] .logo{filter:none; opacity:1}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo{filter:none; opacity:1} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Redes: solo íconos */
.social{display:flex; justify-content:center; gap:12px; margin-top:4px}
.social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--ink); border:1px solid var(--line); background:var(--surface); transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease}
.social a:hover{transform:translateY(-3px); background:var(--ceibo); border-color:var(--ceibo); color:var(--ceibo-ink)}
.social svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Animación de entrada */
@keyframes disc{from{transform:scale(.55); opacity:0} to{transform:scale(1); opacity:.9}}
@keyframes emerge{from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1}}
@keyframes rise{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 14px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes glow{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.12)}}
.hero::before{animation:disc .8s cubic-bezier(.2,.8,.2,1) both, glow 5s ease-in-out 1.2s infinite}
.hero img{animation:emerge .9s cubic-bezier(.2,.8,.2,1) .25s both}
.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(.55s + var(--i, 0) * .08s)}
.feature .play{animation:ring 2.4s ease-out 1.6s infinite}

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

footer{text-align:center; font-size:.8rem; color:var(--muted)}
footer a{color:inherit}

@media (prefers-reduced-motion: reduce){ *, *::before{transition:none!important; animation:none!important} }

/* Mientras cargan los links */
#content[aria-busy="true"]{min-height:60vh}
.error{text-align:center; color:var(--muted); font-size:.9rem}

/* El contenido dinámico ocupa todo el ancho de la columna */
main.wrap{margin:0; max-width:none; width:100%}