/* Compefy: landing de cristal. Paleta propia del producto, independiente de la marca de cada centro. */
:root{
  --base:#EDF2F9; --ink:#0B1B36; --suave:#4B5B75;
  --navy:#002664; --azul:#0096DB; --cian:#8FDCFF; --oro:#E0B21B;
  --vidrio:rgba(255,255,255,.55); --vidrio-2:rgba(255,255,255,.34); --filo:rgba(255,255,255,.75); --sombra:0 24px 60px -30px rgba(0,38,100,.35);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--base:#06112A;--ink:#EAF1FB;--suave:#A9B8CF;--vidrio:rgba(255,255,255,.07);--vidrio-2:rgba(255,255,255,.04);--filo:rgba(255,255,255,.16);--sombra:0 24px 60px -30px rgba(0,0,0,.6)}
}
:root[data-theme="dark"]{--base:#06112A;--ink:#EAF1FB;--suave:#A9B8CF;--vidrio:rgba(255,255,255,.07);--vidrio-2:rgba(255,255,255,.04);--filo:rgba(255,255,255,.16);--sombra:0 24px 60px -30px rgba(0,0,0,.6)}
html{scroll-padding-top:calc(90px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
h2{font-size:clamp(26px,4vw,40px);margin-bottom:22px;max-width:18ch}
h3{font-size:18px;font-weight:500;letter-spacing:0;margin-bottom:6px}
p{margin:0}

/* Fondo: campo de color difuminado sobre el que flota el cristal */
.fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fondo i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.7}
.fondo .o1{width:52vw;height:52vw;background:var(--azul);top:-18vw;right:-12vw}
.fondo .o2{width:40vw;height:40vw;background:var(--navy);bottom:-14vw;left:-12vw;opacity:.45}
.fondo .o3{width:30vw;height:30vw;background:var(--cian);top:38%;left:40%;opacity:.5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fondo i{opacity:.35}}

/* Cristal */
.panel,.nav,.btn-cristal,.carta-hero{background:var(--vidrio);border:1px solid var(--filo);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--sombra)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel,.nav,.btn-cristal,.carta-hero{background:rgba(255,255,255,.9)}
}
.panel{border-radius:28px}

/* Navegación */
.nav{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:10;margin:12px auto 0;max-width:1120px;width:calc(100% - 24px);border-radius:999px;display:flex;align-items:center;gap:20px;padding:8px 8px 8px 22px}
.marca{font-family:var(--display);font-weight:800;font-size:22px;text-decoration:none;color:var(--navy);letter-spacing:-.03em}
.marca span{color:var(--azul)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marca{color:#fff}}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a,.lnk{text-decoration:none;color:var(--suave);font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px}
.nav-links a:hover,.lnk:hover{color:var(--ink);background:var(--vidrio-2)}
.nav-acceso{display:flex;align-items:center;gap:4px}
@media (max-width:760px){.nav-links{display:none}.nav{gap:8px}.nav-acceso{margin-left:auto}}

/* Botones */
.btn-solido,.btn-cristal{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;font-family:var(--body)}
.btn-solido{background:var(--navy);color:#fff;border:0;box-shadow:0 12px 30px -12px rgba(0,38,100,.7)}
.btn-solido:hover{background:#00337f}
.btn-cristal{color:var(--ink);box-shadow:none}
.btn-cristal:hover{background:var(--filo)}

main{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:64px 0}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:72px;min-height:min(760px,92vh)}
.hero h1{font-size:clamp(40px,7vw,78px);font-weight:800;letter-spacing:-.04em;color:var(--navy);max-width:11ch}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1{color:#fff}}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--suave);margin:24px 0 30px;max-width:44ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.nota{margin-top:26px;font-size:14px;color:var(--suave)}

.hero-vis{position:relative;min-height:470px}
.tabla{position:absolute;inset:0 70px 70px 0;padding:22px}
.tabla-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.tabla-cab b{font-family:var(--display);font-size:17px;font-weight:500}
.tabla-cab span,.tabla-pie span{font-size:13px;color:var(--suave)}
.tabla ol{list-style:none;margin:0;padding:0}
.tabla li{display:grid;grid-template-columns:28px 1fr auto 56px;gap:10px;align-items:center;padding:12px 6px;border-top:1px solid var(--filo)}
.tabla .p{font-family:var(--display);font-weight:700;color:var(--azul)}
.tabla .n{font-weight:600}
.tabla .r,.tabla .s,.tabla .b{font-size:13px;font-weight:700}
.tabla .s{color:#1D8A5A}.tabla .b{color:#C8364A}
.tabla li b{font-family:var(--display);text-align:right;font-size:19px}
.tabla-pie{display:flex;justify-content:flex-start;gap:14px;align-items:baseline;border-top:1px solid var(--filo);padding-top:14px;margin-top:4px}
.tabla-pie b{font-family:var(--display);font-size:26px;color:var(--azul)}

/* La carta: el elemento memorable */
.carta-hero{position:absolute;right:-8px;bottom:-34px;width:200px;border-radius:22px;padding:16px 18px 18px;transform:rotate(-7deg);border:1.5px solid rgba(224,178,27,.8);
  background:linear-gradient(155deg,rgba(255,244,206,.85),rgba(255,255,255,.55) 55%);box-shadow:0 30px 60px -24px rgba(0,38,100,.55),inset 0 0 0 4px rgba(255,255,255,.35);
  animation:llega .9s cubic-bezier(.2,.8,.2,1) .25s both}
.ch-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#8a6a00;margin-bottom:26px}
.carta-hero b{display:block;font-family:var(--display);font-size:26px;color:var(--azul);line-height:1}
.carta-hero p{font-size:14px;color:#3b4760;margin:10px 0 12px}
.carta-hero small{font-size:12px;color:#6b7890}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .carta-hero{background:linear-gradient(155deg,rgba(224,178,27,.28),rgba(255,255,255,.06) 60%)}
  :root:not([data-theme="light"]) .carta-hero p{color:#dfe7f3}:root:not([data-theme="light"]) .carta-hero small{color:#a9b8cf}:root:not([data-theme="light"]) .ch-top{color:var(--oro)}}
@keyframes llega{from{opacity:0;transform:translateY(40px) rotate(4deg)}to{opacity:1;transform:rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){.carta-hero{animation:none}html{scroll-behavior:auto}}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:48px;gap:34px}
  .hero-vis{min-height:400px}
  .hero-vis{min-height:0;display:flex;flex-direction:column}
  .tabla{position:relative;inset:auto;margin-right:24px}
  .carta-hero{position:relative;right:auto;bottom:auto;width:190px;align-self:flex-end;margin-top:-34px;margin-right:6px}
}

/* Pasos: son una secuencia real, de ahí la numeración */
.pasos{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,1fr)}
.pasos li{display:flex;gap:16px;padding:22px 20px}
.pasos li+li{border-left:1px solid var(--filo)}
.num{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#fff;background:var(--azul)}
.pasos p{color:var(--suave);font-size:15px}
@media (max-width:820px){.pasos{grid-template-columns:1fr}.pasos li+li{border-left:0;border-top:1px solid var(--filo)}}

/* Lo que incluye */
.lista{padding:12px 30px}
.lista dl{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.lista dl>div{padding:18px 0;border-bottom:1px solid var(--filo)}
.lista dl>div:nth-last-child(-n+2){border-bottom:0}
.lista dt{font-weight:700;margin-bottom:3px}
.lista dd{margin:0;color:var(--suave);font-size:15px}
@media (max-width:720px){.lista{padding:6px 22px}.lista dl{grid-template-columns:1fr}.lista dl>div:nth-last-child(2){border-bottom:1px solid var(--filo)}}

/* Familias de cartas */
.cartas{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.cartas-txt p{color:var(--suave);max-width:46ch}
.familias{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.familias li{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:16px 20px;border-radius:18px;border:1px solid var(--filo);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),var(--vidrio-2) 45%);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.familias b{font-family:var(--display);font-weight:500;font-size:16px;color:var(--c)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .familias b{color:#fff}}
.familias span{color:var(--suave);font-size:14px}
@media (max-width:820px){.cartas{grid-template-columns:1fr;gap:24px}.familias li{grid-template-columns:1fr;gap:2px}}

/* Demo */
.demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;padding-bottom:90px}
.demo-txt p{color:var(--suave);max-width:36ch}
.formulario{padding:28px;display:grid;gap:14px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulario label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--suave)}
.formulario input,.formulario textarea{font:inherit;color:var(--ink);background:var(--vidrio-2);border:1px solid var(--filo);border-radius:14px;padding:12px 14px;width:100%}
.formulario input:focus,.formulario textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 25%,transparent)}
.formulario .btn-solido{justify-self:start}
.oculto{position:absolute!important;left:-9999px}
.ok{font-weight:600;color:#1D8A5A}
.err{font-weight:600;color:#C8364A}
@media (max-width:820px){.demo{grid-template-columns:1fr;gap:20px}.fila{grid-template-columns:1fr}}

.pie{max-width:1120px;margin:0 auto;padding:28px 20px 40px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:var(--suave);font-size:14px;border-top:1px solid var(--filo)}
.pie .marca{font-size:17px}
.pie nav{margin-left:auto;display:flex;gap:16px}
.pie nav a{text-decoration:none}
.pie nav a:hover{color:var(--ink)}
@media (max-width:440px){
  .nav{padding-left:16px;gap:4px}
  .marca{font-size:19px}
  .lnk{padding:8px 8px;font-size:14px}
  .nav .btn-cristal{padding:0 14px;min-height:40px;font-size:14px}
}
body{overflow-x:clip}