@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Montserrat:wght@400;500;600&display=swap"); /* MARCA NUDE 2026-09-28: fuentes nuevas; el @import tiene que ir antes de cualquier otra regla */
/* ===== Novarise Capital - paleta extraida del logo ===== */
:root{
  --navy-900:#021A3D; --navy-800:#042558; --navy-700:#063373;
  --blue-600:#015C91; --blue-500:#00659B;
  --cyan-500:#01A3D4; --cyan-400:#01C4F4; --cyan-300:#4FD8FA;
  --white:#fff; --ink:#0D1B2A; --muted:#5A6B7D; --line:#E3E9F0;
  --bg:#fff; --bg-soft:#F5F8FB;
  --gold:#B8901F; --gold-bg:#FDF6E3;
  --wrap:1180px; --r:14px;
  --shadow:0 4px 24px rgba(4,37,88,.09);
  --shadow-lg:0 18px 50px rgba(4,37,88,.16);
  --grad:linear-gradient(135deg,#042558 0%,#00659B 55%,#01C4F4 100%);

  /* Resplandor cian - el efecto que se sale del cuadro */
  --edge:#C3E9F9;                                   /* borde cian claro, en reposo */
  --edge-on:#01C4F4;                                /* borde cian vivo, al pasar el mouse */
  --glow-sm:0 6px 22px rgba(1,163,212,.13);
  --glow:0 14px 44px rgba(1,163,212,.22);
  --glow-lg:0 22px 60px rgba(1,163,212,.34);
  --glow-dark:0 16px 50px rgba(1,196,244,.26);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk',Inter,system-ui,sans-serif;line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:700}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.tbd{color:var(--gold);background:var(--gold-bg);border:1px dashed var(--gold);
  border-radius:6px;padding:1px 7px;font-size:.82em;font-weight:600;white-space:nowrap}

/* ---- Botones ----
   Mismo lenguaje que los botones flotantes: degradado que se desplaza,
   brillo de cristal, resplandor que crece y rebote al pasar el mouse. */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:10px;font-weight:600;font-size:.97rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease,
             background-position .65s ease, background-color .22s ease,
             color .22s ease, border-color .22s ease}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.985);transition-duration:.09s}
.btn:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}

/* barrido de luz que cruza el boton al pasar el mouse */
.btn::before{content:"";position:absolute;top:0;left:-150%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;z-index:1;
  transition:left .7s cubic-bezier(.4,0,.2,1)}
.btn:hover::before{left:150%}

.btn-primary{color:var(--navy-900);
  background:linear-gradient(135deg,#6FE1FB 0%,#01C4F4 45%,#01A3D4 100%);
  background-size:185% 185%;background-position:10% 10%;
  box-shadow:0 6px 20px rgba(1,196,244,.4), 0 0 0 1px rgba(255,255,255,.3) inset}
.btn-primary:hover{background-position:90% 90%;
  box-shadow:0 12px 32px rgba(1,196,244,.55), 0 0 0 1px rgba(255,255,255,.55) inset,
             0 0 32px rgba(1,196,244,.5)}

.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;
  background:rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 26px rgba(255,255,255,.22)}

.btn-outline{border-color:var(--navy-800);color:var(--navy-800);
  background:linear-gradient(135deg,#042558 0%,#015C91 55%,#01A3D4 100%);
  background-size:185% 185%;background-position:10% 10%;
  /* el degradado empieza oculto: se revela al pasar el mouse */
  box-shadow:inset 0 0 0 100px #fff}
.btn-outline:hover{color:#fff;border-color:transparent;background-position:90% 90%;
  box-shadow:inset 0 0 0 0 #fff, 0 12px 30px rgba(1,90,145,.4), 0 0 30px rgba(1,163,212,.4)}

@media(prefers-reduced-motion:reduce){
  .btn{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
  .btn:hover,.btn:active{transform:none}
  .btn::before{display:none}
}

/* ---- Header ---- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;background:rgba(2,26,61,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.09);transition:background .25s}
.hdr.scrolled{background:rgba(2,26,61,.985);box-shadow:0 4px 22px rgba(0,0,0,.28)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:72px;max-width:1340px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex-shrink:0}
.brand img{width:38px;height:38px}
.brand span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:.01em}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:#D9E6F2;text-decoration:none;font-size:.9rem;font-weight:500;
  padding:9px 11px;border-radius:8px;white-space:nowrap;
  transition:color .16s,background .16s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.hdr-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{display:flex;background:rgba(255,255,255,.1);border-radius:8px;padding:3px}
.lang button{background:none;border:0;color:#9FB8D0;font-weight:700;font-size:.78rem;
  padding:5px 10px;border-radius:6px;cursor:pointer;transition:.16s}
/* El idioma elegido late en voz baja: solo luz, nada se mueve de sitio.
   Es el hermano tranquilo de la luz orbital del eslogan. */
.lang button.on{background:var(--cyan-400);color:var(--navy-900);
  animation:idioma-late 2.9s ease-in-out infinite}
@keyframes idioma-late{
  0%,100%{box-shadow:0 0 0 0 rgba(1,196,244,.45), 0 0 9px rgba(1,196,244,.35)}
  50%    {box-shadow:0 0 0 5px rgba(1,196,244,0),  0 0 20px rgba(1,196,244,.75)}
}
@media(prefers-reduced-motion:reduce){ .lang button.on{animation:none} }
.hdr .btn{padding:10px 18px;font-size:.9rem}
/* Entre 1241 y 1419 px el menú completo se aprieta un poco para que
   el botón de la consulta no se salga por la derecha (28 sep 2026). */
@media(min-width:1241px) and (max-width:1419px){
  .hdr .wrap{gap:12px}
  .nav{gap:2px}
  .nav a{padding:9px 7px;font-size:.86rem}
  .brand span{font-size:.98rem}
  .lang button{padding:5px 8px}
  .hdr .btn{padding:10px 14px}
}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:4px 8px;line-height:1}

/* ---- Hero ---- */
.hero{background:var(--grad);color:#fff;padding:150px 0 96px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-14%;top:-24%;width:640px;height:640px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;max-width:920px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:7px 17px;
  font-size:.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.hero p.lead{font-size:1.18rem;max-width:660px;color:#E3F1FB;margin-bottom:30px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:42px}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.22);padding-top:26px}
.hero-stats b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:700}
.hero-stats span{font-size:.86rem;color:#B9D6EA}

/* ---- Secciones ---- */
section{padding:86px 0}
.soft{background:var(--bg-soft)}
.dark{background:var(--navy-800);color:#fff}
.dark p{color:#C6DAEA}
/* Club 720 va justo despues de los certificados: se le da un azul mas claro
   para que no se lean como un solo bloque oscuro continuo. */
#club{background:
  radial-gradient(720px 420px at 84% 8%, rgba(1,196,244,.12) 0%, transparent 60%),
  linear-gradient(180deg,#06356B 0%,#053061 48%,#042558 100%)}
.head{max-width:720px;margin:0 auto 52px;text-align:center}
.head p{color:var(--muted);font-size:1.06rem}
.dark .head p{color:#B9D6EA}
.kicker{display:block;color:var(--cyan-500);font-weight:700;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:11px}

/* ---- Grids / cards ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.card{background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);
  padding:30px;box-shadow:var(--glow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--glow-lg);border-color:var(--edge-on)}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:0}
/* Tarjetas sobre fondo oscuro: el resplandor se ve aun mejor */
.dark .card{background:rgba(255,255,255,.06);border-color:rgba(1,196,244,.45);
  box-shadow:var(--glow-dark)}
.dark .card:hover{background:rgba(255,255,255,.09);border-color:var(--cyan-400);
  box-shadow:0 24px 68px rgba(1,196,244,.42)}
.dark .card h3{color:#fff}
.dark .card p{color:#C6DAEA}
.ico{width:50px;height:50px;border-radius:12px;background:var(--grad);
  display:grid;place-items:center;margin-bottom:18px;color:#fff;font-size:1.3rem;font-weight:700;
  box-shadow:0 8px 22px rgba(1,163,212,.4)}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  color:var(--blue-600);font-weight:600;font-size:.92rem;text-decoration:none;transition:.16s}
.card-link:hover{color:var(--cyan-500);gap:10px}

/* ---- Rutas ---- */
.route{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1.5px solid var(--edge);
  border-radius:12px;padding:22px;text-decoration:none;box-shadow:var(--glow-sm);transition:.2s}
.route:hover{border-color:var(--edge-on);box-shadow:var(--glow-lg);transform:translateY(-5px)}
.route .n{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--grad);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;
  box-shadow:0 5px 15px rgba(1,163,212,.4)}
.route h3{font-size:1rem;margin-bottom:3px}
.route p{font-size:.9rem;color:var(--muted);margin:0}

/* ---- Pasos ---- */
.steps{counter-reset:s;display:grid;gap:26px 20px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.step{position:relative;padding:30px 22px 22px;background:#fff;border:1.5px solid var(--edge);
  border-radius:var(--r);box-shadow:var(--glow-sm);transition:.2s}
.step:hover{border-color:var(--edge-on);box-shadow:var(--glow-lg);transform:translateY(-5px)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-17px;left:22px;
  width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;
  box-shadow:0 7px 20px rgba(1,163,212,.45)}
.step h3{margin-top:8px;font-size:1.02rem}
.step p{color:var(--muted);font-size:.92rem;margin:0}

/* ---- Precios ---- */
.toggle{display:flex;justify-content:center;margin-bottom:34px}
.toggle button{background:#fff;border:1.5px solid var(--edge);color:var(--muted);
  padding:11px 24px;font-weight:600;font-size:.93rem;cursor:pointer;transition:.16s;
  box-shadow:var(--glow-sm)}
.toggle button:first-child{border-radius:10px 0 0 10px}
.toggle button:last-child{border-radius:0 10px 10px 0;border-left:0}
.toggle button.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800);
  box-shadow:var(--glow)}
.plans{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));max-width:880px;margin:0 auto}
.plan{background:#fff;border:2px solid var(--edge);border-radius:16px;padding:34px;position:relative;
  display:flex;flex-direction:column;box-shadow:var(--glow-sm);transition:.2s}
.plan:hover{border-color:var(--edge-on);box-shadow:var(--glow-lg);transform:translateY(-4px)}
.plan.feat{border-color:var(--cyan-400);box-shadow:var(--glow)}
.plan.feat:hover{box-shadow:var(--glow-lg)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--cyan-400);
  color:var(--navy-900);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 15px;border-radius:100px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(1,196,244,.5)}
.plan h3{font-size:1.3rem;margin-bottom:4px}
.plan .sub{color:var(--muted);font-size:.9rem;margin-bottom:22px}
.price{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.price b{font-family:'Space Grotesk',sans-serif;font-size:2.7rem;font-weight:700;color:var(--navy-800);line-height:1}
.price span{color:var(--muted);font-size:.93rem}
.price-sub{color:var(--muted);font-size:.9rem;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.plan li{position:relative;padding-left:27px;margin-bottom:11px;font-size:.94rem;color:#3A4A5C}
.plan li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--cyan-500);font-weight:700}
.plan .btn{width:100%}
.legal-note{max-width:780px;margin:32px auto 0;font-size:.86rem;color:var(--muted);
  text-align:center;background:#fff;border:1.5px solid var(--edge);border-radius:12px;
  padding:18px 22px;box-shadow:var(--glow-sm)}

/* ---- Hero de paginas internas ---- */
.subhero{background:var(--grad);color:#fff;padding:132px 0 72px;position:relative;overflow:hidden}
.subhero::after{content:"";position:absolute;right:-12%;top:-30%;width:560px;height:560px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.subhero .wrap{position:relative;z-index:2;max-width:860px}
.subhero h1{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.subhero p{font-size:1.12rem;color:#E3F1FB;max-width:640px;margin-bottom:28px}
.crumb{font-size:.86rem;color:#9FD4EE;margin-bottom:16px}
.crumb a{color:#9FD4EE;text-decoration:none}
.crumb a:hover{color:#fff}

/* ---- Listas con vinetas cian ---- */
.bullets{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.bullets li{position:relative;padding-left:31px;color:#3A4A5C;font-size:.98rem}
.bullets li::before{content:"\2713";position:absolute;left:0;top:-1px;width:21px;height:21px;
  border-radius:6px;background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(1,163,212,.4)}
.dark .bullets li{color:#D6E7F3}

/* ---- Lo que NO hacemos ---- */
.nots{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.nots li{position:relative;padding-left:31px;color:#3A4A5C;font-size:.98rem}
.nots li::before{content:"\00D7";position:absolute;left:0;top:-2px;width:21px;height:21px;
  border-radius:6px;background:#E8EDF3;color:#7A8B9C;font-size:.9rem;font-weight:700;
  display:grid;place-items:center}

/* ---- Bloque a dos columnas ---- */
.split{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));align-items:start}
.split h2{margin-bottom:.6em}

/* ---- Aviso destacado ---- */
.notice{border-left:4px solid var(--cyan-400);background:var(--bg-soft);
  border-radius:0 12px 12px 0;padding:22px 26px;box-shadow:var(--glow-sm);
  border-top:1.5px solid var(--edge);border-right:1.5px solid var(--edge);border-bottom:1.5px solid var(--edge)}
.notice h3{font-size:1.05rem;margin-bottom:8px}
.notice p{color:var(--muted);font-size:.94rem;margin:0}

/* ---- Niveles del Club 720 (sobre fondo oscuro) ---- */
.tiers{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));max-width:1000px;margin:0 auto}
.tier{position:relative;display:flex;flex-direction:column;padding:32px 28px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(1,196,244,.45);
  box-shadow:var(--glow-dark);transition:.2s}
.tier:hover{background:rgba(255,255,255,.1);border-color:var(--cyan-400);
  box-shadow:0 24px 68px rgba(1,196,244,.42);transform:translateY(-5px)}
.tier.feat{border-color:var(--cyan-400);background:rgba(1,196,244,.1);
  box-shadow:0 20px 58px rgba(1,196,244,.4)}
.tier h3{color:#fff;font-size:1.24rem;margin-bottom:3px}
.tier .sub{color:#B9D6EA;font-size:.89rem;margin-bottom:20px}
.tprice{display:flex;align-items:baseline;gap:6px;padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.tprice b{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:700;color:var(--cyan-400);line-height:1}
.tprice span{color:#B9D6EA;font-size:.92rem}
.tier ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.tier li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.93rem;color:#D6E7F3}
.tier li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--cyan-400);font-weight:700}
.tier .btn{width:100%}

/* ---- Fundadores ---- */
.founder{background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);overflow:hidden;
  text-align:center;box-shadow:var(--glow-sm);transition:.2s}
.founder:hover{border-color:var(--edge-on);box-shadow:var(--glow-lg);transform:translateY(-5px)}
.founder .ph{aspect-ratio:1;background:var(--grad);display:grid;place-items:center;
  color:rgba(255,255,255,.75);font-size:.84rem;padding:16px;text-align:center;overflow:hidden}
.founder .ph img{width:100%;height:100%;object-fit:cover;display:block}
.founder:hover .ph img{transform:scale(1.03)}
.founder .ph img{transition:transform .35s ease}

/* ---- Carrusel de certificaciones ---- */
.carousel{position:relative;max-width:1180px;margin:0 auto}
/* ---- Zona de certificados: fondo oscuro de marca ----
   Sobre este azul profundo los resplandores cian si se leen. */
/* Capas: manchas de luz en tres azules distintos de la paleta sobre el
   degradado base. Es lo que evita que se lea como un rectangulo plano. */
.cert-zona{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(880px 520px at 14% 6%,  rgba(1,196,244,.17) 0%, transparent 62%),
    radial-gradient(760px 520px at 90% 34%, rgba(0,160,208,.16) 0%, transparent 60%),
    radial-gradient(900px 560px at 62% 106%,rgba(6,51,115,.75) 0%, transparent 64%),
    linear-gradient(158deg,#010D22 0%,#021A3D 30%,#042558 62%,#01305E 100%);
  border-bottom:1px solid rgba(1,196,244,.3);
  box-shadow:0 1px 34px rgba(1,196,244,.2)}
/* halo cian detras del carrusel */
.cert-zona::before{content:"";position:absolute;left:50%;top:52%;
  width:min(1100px,120%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(1,196,244,.16) 0%,rgba(1,163,212,.06) 40%,transparent 68%);
  pointer-events:none}
/* trama diagonal finisima: da textura sin verse como rayas */
.cert-zona::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 27px)}
.cert-zona .wrap{position:relative;z-index:1}
.cert-zona .head p{color:#B9D6EA}
.cert-zona .kicker{color:var(--cyan-300)}

.cr-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:34px 0 30px;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-inline:50%;cursor:grab}
.cr-track::-webkit-scrollbar{display:none}
.cr-track.grabbing{cursor:grabbing;scroll-snap-type:none}
.cr-track::before,.cr-track::after{content:"";flex:0 0 calc(50% - 165px)}

.cr-item{flex:0 0 330px;scroll-snap-align:center;background:#fff;
  border:1.5px solid var(--edge);border-radius:16px;overflow:hidden;
  box-shadow:var(--glow-sm);opacity:.55;transform:scale(.92);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease,
             box-shadow .45s ease,border-color .45s ease;
  display:flex;flex-direction:column}
.cr-item.on{opacity:1;transform:scale(1) translateY(-8px);
  border-color:var(--edge-on);box-shadow:var(--glow-lg)}
.cr-item img{width:100%;display:block;background:#F7FAFC;
  border-bottom:1px solid var(--line);pointer-events:none;user-select:none}
.cr-item .cb{padding:17px 19px;display:flex;align-items:flex-start;gap:12px}
.cr-item h4{font-family:'Space Grotesk',sans-serif;font-size:.94rem;font-weight:600;
  margin:0 0 4px;color:var(--ink);line-height:1.3}
.cr-item .who{color:var(--cyan-500);font-weight:700;font-size:.8rem;margin:0}
.cr-item .org{color:var(--muted);font-size:.77rem;margin:3px 0 0}
.cr-item .zoom{margin-left:auto;flex-shrink:0;width:32px;height:32px;border-radius:9px;
  background:var(--bg-soft);border:1px solid var(--edge);color:var(--cyan-500);
  display:grid;place-items:center;font-size:.95rem;cursor:pointer;transition:.18s}
.cr-item.on .zoom:hover{background:var(--cyan-400);color:#fff;border-color:var(--cyan-400);
  box-shadow:0 5px 16px rgba(1,196,244,.5)}

/* Flechas */
.cr-nav{position:absolute;top:44%;z-index:5;width:46px;height:46px;border-radius:50%;
  background:#fff;border:1.5px solid var(--edge);color:var(--navy-800);
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--glow);transition:.2s;padding-bottom:3px}
.cr-nav:hover{background:var(--cyan-400);color:#fff;border-color:var(--cyan-400);
  box-shadow:var(--glow-lg);transform:scale(1.08)}
.cr-nav.prev{left:-4px}
.cr-nav.next{right:-4px}

/* Sobre el fondo oscuro las tarjetas flotan con resplandor cian */
.cert-zona .cr-item{border-color:rgba(1,196,244,.28);
  box-shadow:0 10px 34px rgba(1,10,26,.5)}
.cert-zona .cr-item.on{border-color:var(--cyan-400);
  box-shadow:0 22px 60px rgba(1,10,26,.6), 0 0 46px rgba(1,196,244,.42)}
/* flechas de cristal oscuro, como los botones flotantes */
.cert-zona .cr-nav{color:#fff;border-color:rgba(1,196,244,.45);
  background:linear-gradient(135deg,#015C91 0%,#00659B 55%,#01A3D4 100%);
  box-shadow:0 8px 24px rgba(1,10,26,.5), 0 0 20px rgba(1,196,244,.28)}
.cert-zona .cr-nav:hover{background:linear-gradient(135deg,#00A0D0,#01C4F4);
  border-color:var(--cyan-400);
  box-shadow:0 12px 32px rgba(1,10,26,.55), 0 0 34px rgba(1,196,244,.6)}

/* Puntos */
.cr-dots{display:flex;justify-content:center;gap:9px;margin-top:6px}
.cr-dots button{width:9px;height:9px;padding:0;border:0;border-radius:100px;
  background:#C6D3E0;cursor:pointer;transition:.28s}
.cert-zona .cr-dots button{background:rgba(255,255,255,.3)}
.cert-zona .cr-dots button.on{background:var(--cyan-400)}
.cr-dots button.on{width:30px;background:var(--cyan-400);
  box-shadow:0 3px 12px rgba(1,196,244,.65)}

/* Lupa a pantalla completa */
/* Fondo en degradado: claro en el centro, muy oscuro en los bordes.
   Asi el resplandor cian del certificado y de la tarjeta resalta de verdad. */
.lb{position:fixed;inset:0;z-index:200;
  background:radial-gradient(ellipse at 50% 46%,
    rgba(6,51,115,.93) 0%, rgba(4,37,88,.95) 34%,
    rgba(2,18,42,.975) 66%, rgba(1,8,20,.99) 100%);
  display:none;place-items:center;padding:26px;cursor:zoom-out}
.lb.open{display:grid}
/* El certificado y su ficha, uno al lado del otro y a la misma altura */
.lb-caja{display:flex;align-items:stretch;justify-content:center;gap:22px;max-width:100%}
#lb-img{align-self:center;width:auto;height:auto;object-fit:contain;
  max-width:min(940px,60vw);max-height:88vh;border-radius:12px;
  box-shadow:0 0 0 1.5px rgba(1,196,244,.6),0 30px 90px rgba(1,196,244,.35)}
.lb .x{position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(1,196,244,.5);color:#fff;
  font-size:1.4rem;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb .x:hover{background:var(--cyan-400);border-color:var(--cyan-400)}

/* ============ FICHA TECNICA: de quien es el certificado ============
   Panel vertical al lado del certificado, a su misma altura, con la
   foto tipo carnet arriba y los datos debajo. */
.lb-ficha{margin:0;flex-shrink:0;width:clamp(240px,22vw,300px);cursor:auto;
  display:flex;flex-direction:column;
  padding:18px;border-radius:16px;text-align:left;
  background:linear-gradient(160deg,rgba(6,51,115,.9) 0%,rgba(2,26,61,.94) 60%,rgba(1,13,34,.96) 100%);
  border:1.5px solid rgba(1,196,244,.42);
  box-shadow:0 26px 70px rgba(1,10,26,.6), 0 0 42px rgba(1,196,244,.22),
             0 0 0 1px rgba(255,255,255,.06) inset}
/* La lupa pasa de display:none a grid: una transicion no arrancaria. */
.lb.open .lb-ficha{animation:lf-entra .6s cubic-bezier(.34,1.56,.64,1) .14s both}
@keyframes lf-entra{
  from{opacity:0;transform:translateX(42px) scale(.94)}
  to  {opacity:1;transform:none}
}

/* --- la foto, formato carnet --- */
.lf-cara{position:relative;width:100%;aspect-ratio:3/4;flex-shrink:0;
  border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 28px rgba(1,196,244,.45)}
.lf-cara img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;display:block}
/* escaner de luz que recorre la foto + esquinas de mira */
.lf-aro{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lf-aro::before{content:"";position:absolute;left:0;right:0;height:36%;top:-38%;
  background:linear-gradient(180deg,transparent,rgba(1,196,244,.3),
             rgba(190,240,255,.5),rgba(1,196,244,.22),transparent);
  animation:lf-escaner 3.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lf-escaner{0%{top:-38%}58%,100%{top:106%}}
.lf-aro::after{content:"";position:absolute;inset:8px;border-radius:6px;
  border:1.5px solid rgba(1,196,244,.75);
  -webkit-mask:linear-gradient(#000,#000) top left/20px 20px no-repeat,
               linear-gradient(#000,#000) top right/20px 20px no-repeat,
               linear-gradient(#000,#000) bottom left/20px 20px no-repeat,
               linear-gradient(#000,#000) bottom right/20px 20px no-repeat;
          mask:linear-gradient(#000,#000) top left/20px 20px no-repeat,
               linear-gradient(#000,#000) top right/20px 20px no-repeat,
               linear-gradient(#000,#000) bottom left/20px 20px no-repeat,
               linear-gradient(#000,#000) bottom right/20px 20px no-repeat}

/* --- los datos --- */
.lb-ficha figcaption{display:flex;flex-direction:column;min-width:0;padding-top:15px}
.lf-de{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#7FD8F5;margin-bottom:5px}
.lb-ficha b{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:600;
  color:#fff;line-height:1.25;text-shadow:0 0 16px rgba(1,196,244,.45)}
.lf-rol{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#9FD4EE;margin-top:4px}
.lf-linea{height:1px;margin:14px 0 4px;
  background:linear-gradient(90deg,rgba(1,196,244,.8),rgba(1,196,244,.04))}
.lf-etq{font-size:.57rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#6FA8C8;margin-top:11px}
.lf-dato{font-size:.83rem;color:#E3F1FB;line-height:1.35;margin-top:2px}

/* En pantallas estrechas la ficha se pone debajo y en horizontal */
@media(max-width:900px){
  /* el padding de arriba le deja su fila al boton de cerrar */
  .lb{padding:76px 18px 24px;place-items:start center;overflow-y:auto}
  .lb-caja{flex-direction:column;align-items:center;gap:14px}
  #lb-img{max-width:100%;max-height:56vh}
  .lb-ficha{flex-direction:row;align-items:center;gap:15px;
    width:min(430px,100%);padding:14px}
  .lf-cara{width:106px}
  .lb-ficha figcaption{flex:1;padding-top:0}
  .lf-linea{margin:10px 0 2px}
  .lf-etq{margin-top:8px}
  .lb-ficha b{font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  .lb.open .lb-ficha{animation:none}
  .lf-aro::before{animation:none;display:none}
}

@media(max-width:720px){
  .cr-item{flex:0 0 270px}
  .cr-track::before,.cr-track::after{flex:0 0 calc(50% - 135px)}
  .cr-nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cr-item{transition:none}
  .cr-track{scroll-behavior:auto}
}
.founder .bd{padding:24px}
.founder h3{margin-bottom:2px}
.founder .role{color:var(--cyan-500);font-weight:600;font-size:.88rem;margin-bottom:10px}
.founder p{font-size:.92rem;color:var(--muted);margin:0}

/* ---- FAQ ---- */
.faq{max-width:800px;margin:0 auto}
.faq details{background:#fff;border:1.5px solid var(--edge);border-radius:12px;margin-bottom:12px;
  overflow:hidden;box-shadow:var(--glow-sm);transition:border-color .2s,box-shadow .2s}
.faq details:hover{border-color:var(--edge-on);box-shadow:var(--glow)}
.faq details[open]{border-color:var(--edge-on);box-shadow:var(--glow)}
.faq summary{padding:19px 24px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan-500);font-size:1.5rem;font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 24px 20px;color:var(--muted);font-size:.95rem}

/* ---- CTA final ---- */
.cta-final{background:var(--grad);color:#fff;text-align:center;padding:82px 0}
.cta-final p{color:#E3F1FB}
.cta-final .btn{margin:5px}

/* ---- Footer ---- */
.ftr{background:var(--navy-900);color:#9FB8D0;padding:62px 0 26px;font-size:.91rem}
.ftr a{color:#9FB8D0;text-decoration:none}
.ftr a:hover{color:var(--cyan-400)}
.ftr-top{display:grid;gap:34px;grid-template-columns:1.6fr 1fr 1fr 1fr;margin-bottom:42px}
.ftr h4{color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:15px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:9px}
.ftr .brand{margin-bottom:15px}
.disc{border-top:1px solid rgba(255,255,255,.11);padding-top:26px;font-size:.82rem;line-height:1.75;color:#7E97AE}
.disc p{margin-bottom:12px}
/* La ultima linea se alinea a la IZQUIERDA a proposito. Antes iba repartida
   de lado a lado y lo ultimo caia justo en la esquina de abajo a la derecha,
   que es donde viven los botones flotantes de WhatsApp y "volver arriba":
   el enlace al portal quedaba tapado y no habia forma de dar con el. */
.copy{border-top:1px solid rgba(255,255,255,.11);margin-top:22px;padding-top:20px;
  padding-bottom:10px;
  display:flex;justify-content:flex-start;align-items:center;
  gap:12px 22px;flex-wrap:wrap;font-size:.84rem}

/* ---- WhatsApp flotante ---- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;width:56px;height:56px;
  border-radius:50%;display:grid;place-items:center;
  /* degradado verde, mismo tratamiento que el boton de subir */
  background:linear-gradient(135deg,#5BEE97 0%,#25D366 42%,#1EBE5A 76%,#12A150 100%);
  background-size:190% 190%;background-position:12% 12%;
  box-shadow:0 8px 24px rgba(18,161,80,.45),
             0 0 0 1px rgba(255,255,255,.25) inset,
             0 0 26px rgba(37,211,102,.45);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s ease, background-position .7s ease}
/* brillo de cristal arriba a la izquierda */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%);
  pointer-events:none;z-index:1}
/* onda que sale del boton para llamar la atencion */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.65);pointer-events:none;
  animation:waOnda 3s cubic-bezier(.25,.6,.3,1) infinite}
@keyframes waOnda{
  0%   {transform:scale(1);opacity:.75}
  70%  {transform:scale(1.75);opacity:0}
  100% {transform:scale(1.75);opacity:0}
}
.wa-float:hover{background-position:88% 88%;transform:scale(1.08) translateY(-3px);
  box-shadow:0 12px 34px rgba(18,161,80,.55),
             0 0 0 1px rgba(255,255,255,.5) inset,
             0 0 46px rgba(37,211,102,.75)}
.wa-float:hover::before{animation-play-state:paused;opacity:0}
.wa-float:active{transform:scale(.94) translateY(0);transition-duration:.09s}
.wa-float:focus-visible{outline:2px solid #5BEE97;outline-offset:4px}
.wa-float svg{width:29px;height:29px;fill:#fff;position:relative;z-index:2;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wa-float:hover svg{transform:scale(1.1)}

@media(prefers-reduced-motion:reduce){
  .wa-float::before{animation:none;opacity:0}
  .wa-float,.wa-float svg{transition:box-shadow .2s ease}
  .wa-float:hover{transform:none}
  .wa-float:hover svg{transform:none}
}

/* ---- Volver arriba: anillo de progreso + flecha animada ---- */
.top-float{position:fixed;right:20px;bottom:88px;z-index:70;
  width:54px;height:54px;padding:0;border:0;border-radius:50%;cursor:pointer;
  /* degradado del logo, arrancando en el azul medio: mas claro y aireado */
  background:linear-gradient(135deg,#015C91 0%,#00A0D0 42%,#01C4F4 76%,#5CDCFB 100%);
  background-size:190% 190%;background-position:12% 12%;
  color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(1,90,145,.45),
             0 0 0 1px rgba(255,255,255,.22) inset,
             0 0 26px rgba(1,196,244,.45);
  opacity:0;visibility:hidden;transform:scale(.55) translateY(18px);
  transition:opacity .4s ease, visibility .4s ease,
             transform .55s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s ease, background-position .7s ease}
/* brillo de cristal arriba a la izquierda, como en el logo */
.top-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%);
  pointer-events:none;z-index:1}
.top-float.show{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.top-float:hover{background-position:88% 88%;
  box-shadow:0 12px 34px rgba(1,90,145,.55),
             0 0 0 1px rgba(255,255,255,.45) inset,
             0 0 46px rgba(1,196,244,.75);
  transform:scale(1.08) translateY(-3px)}
.top-float:active{transform:scale(.94) translateY(0);transition-duration:.09s}
.top-float:focus-visible{outline:2px solid var(--cyan-400);outline-offset:4px}

/* anillo que marca cuanto llevas leido */
.tf-ring{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg);
  pointer-events:none;z-index:2}
.tf-ring circle{fill:none;stroke-width:2.6;stroke-linecap:round;cx:27;cy:27;r:24.5}
.tf-track{stroke:rgba(255,255,255,.28)}
/* halo hecho con un aro mas grueso y translucido.
   NO usar filter:drop-shadow aqui: Chrome dibuja los filtros SVG dentro de una
   region rectangular y sobre fondo oscuro se ven las 4 esquinas del rectangulo. */
.tf-halo{stroke:rgba(255,255,255,.32);stroke-width:7;
  stroke-dasharray:153.9;stroke-dashoffset:153.9;
  transition:stroke-dashoffset .12s linear,stroke .3s ease}
.tf-bar{stroke:#fff;
  stroke-dasharray:153.9;stroke-dashoffset:153.9;
  transition:stroke-dashoffset .12s linear}
.top-float:hover .tf-halo{stroke:rgba(255,255,255,.55);stroke-width:9}

/* la flecha sale por arriba y entra otra por abajo */
.tf-ico{position:relative;display:block;width:21px;height:21px;overflow:hidden;z-index:3}
.tf-ico svg{position:absolute;left:0;width:21px;height:21px;fill:none;
  stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .42s cubic-bezier(.65,0,.35,1)}
.tf-ico svg:first-child{top:0}
.tf-ico svg:last-child{top:100%}
.top-float:hover .tf-ico svg{transform:translateY(-100%)}

@media(prefers-reduced-motion:reduce){
  .top-float{transition:opacity .2s ease,visibility .2s ease;transform:none}
  .top-float.show{transform:none}
  .top-float:hover{transform:none}
  .tf-ico svg{transition:none}
  .tf-bar{transition:none}
}
@media(max-width:560px){
  .top-float{width:48px;height:48px;bottom:84px;right:18px}
  .tf-ring{width:48px;height:48px}
  .tf-ring circle{cx:24;cy:24;r:21.5}
  .tf-bar{stroke-dasharray:135.1;stroke-dashoffset:135.1}
}

/* ---- Responsive ---- */
/* El menú completo cabe desde 1241 px; por debajo va la hamburguesa. */
@media(max-width:1240px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;background:var(--navy-900);
    padding:16px 22px 26px;gap:2px;align-items:stretch;display:none;
    border-bottom:1px solid rgba(255,255,255,.1);max-height:calc(100vh - 72px);overflow-y:auto}
  .nav.open{display:flex}
  .nav a{padding:13px 12px}
  .hdr .btn{display:none}
}
@media(max-width:1080px){
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  section{padding:60px 0}
  .hero{padding:126px 0 70px}
  .hero-stats{gap:26px}
  .brand span{display:none}
  .ftr-top{grid-template-columns:1fr}
  .plan{padding:28px 24px}
}

/* ============================================================
   LUZ ORBITAL — regla de la casa
   El eslogan "Sin atajos, con sistemas" lleva SIEMPRE un punto de
   luz recorriendo el borde de su pastilla, aparezca donde aparezca.
   Cualquier otro elemento puede pedirlo con la clase .luz-orbital.

   Ojo: el texto lo reescribe el traductor con innerHTML, asi que
   dentro no puede vivir ningun elemento hijo. Por eso las dos rayitas
   de los lados van pintadas en el fondo y los dos pseudo-elementos
   quedan libres para la luz.
   ============================================================ */
@property --giro { syntax:"<angle>"; initial-value:0deg; inherits:false }

.slogan-pie{margin:10px 0 14px;display:inline-flex;align-items:center;
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#8FDFFA;
  padding:6px 40px;border-radius:100px;
  border:1px solid rgba(1,196,244,.3);
  background:
    linear-gradient(90deg,transparent,var(--cyan-400)) no-repeat left 15px center / 16px 1px,
    linear-gradient(90deg,var(--cyan-400),transparent) no-repeat right 15px center / 16px 1px,
    rgba(1,196,244,.07);
  box-shadow:0 0 20px rgba(1,196,244,.14), inset 0 0 16px rgba(1,196,244,.06)}

.slogan-pie,.luz-orbital{position:relative}

/* NO es un punto que corre: eso se lee como juguete. Es un tramo LARGO y
   tenue de luz que se desliza por el borde, como cuando la luz viaja por
   dentro de una fibra. Ocupa casi un cuarto del contorno, no lleva blanco
   puro y tarda 22 segundos en dar la vuelta: se percibe, no se persigue. */
.slogan-pie::before,.luz-orbital::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--giro),
    transparent           0deg 196deg,
    rgba(1,163,212,.22)   236deg,
    rgba(1,196,244,.55)   278deg,
    rgba(120,225,250,.88) 310deg,
    rgba(198,245,255,1)   326deg,
    rgba(120,225,250,.88) 342deg,
    rgba(1,196,244,.55)   352deg,
    rgba(1,163,212,.22)   358deg,
    transparent           360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:luz-da-la-vuelta 14s linear infinite}

/* El mismo tramo, por fuera y muy desenfocado: deja el aire encendido
   por donde pasa, sin dibujar nada reconocible. */
.slogan-pie::after,.luz-orbital::after{
  content:"";position:absolute;inset:-8px;border-radius:inherit;z-index:-1;
  pointer-events:none;filter:blur(10px);
  background:conic-gradient(from var(--giro),
    transparent         0deg 230deg,
    rgba(1,196,244,.14) 278deg,
    rgba(1,196,244,.42) 322deg,
    rgba(1,196,244,.14) 352deg,
    transparent         360deg);
  animation:luz-da-la-vuelta 14s linear infinite}

@keyframes luz-da-la-vuelta{ to { --giro:360deg } }

/* Si el navegador no entiende @property, el angulo no anima: se deja
   quieto el tramo de luz y en su lugar respira el resplandor del borde. */
@supports not (background: conic-gradient(from var(--giro), red, blue)){
  .slogan-pie::before,.luz-orbital::before,
  .slogan-pie::after,.luz-orbital::after{display:none}
  .slogan-pie,.luz-orbital{animation:borde-respira 3.4s ease-in-out infinite}
}
@keyframes borde-respira{
  0%,100%{box-shadow:0 0 20px rgba(1,196,244,.14), inset 0 0 16px rgba(1,196,244,.06)}
  50%    {box-shadow:0 0 30px rgba(1,196,244,.4),  inset 0 0 20px rgba(1,196,244,.14)}
}

@media(prefers-reduced-motion:reduce){
  .slogan-pie::before,.luz-orbital::before,
  .slogan-pie::after,.luz-orbital::after{animation:none}
}

/* ---- Reloj del carrusel: cuenta 3-2-1 mientras la sección está a la vista ---- */
.cr-pie{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
/* dentro del pie los puntos ya no llevan su margen: asi quedan a la misma
   altura que el reloj, que va a la derecha */
.cr-pie .cr-dots{margin-top:0}

.cr-reloj{position:relative;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#015C91 0%,#00A0D0 45%,#01C4F4 100%);
  box-shadow:0 4px 14px rgba(1,90,145,.35),
             0 0 0 1px rgba(255,255,255,.25) inset,
             0 0 16px rgba(1,196,244,.4);
  opacity:0;visibility:hidden;transform:scale(.6);
  transition:opacity .45s ease, visibility .45s ease,
             transform .55s cubic-bezier(.34,1.56,.64,1)}
.cr-reloj.on{opacity:1;visibility:visible;transform:scale(1)}
/* reflejo de cristal, igual que en los botones flotantes */
.cr-reloj::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.45),rgba(255,255,255,0) 58%)}

.cr-reloj svg{position:absolute;inset:0;width:38px;height:38px;transform:rotate(-90deg)}
.cr-reloj circle{fill:none;stroke-width:2.4;stroke-linecap:round}
.rj-pista{stroke:rgba(255,255,255,.3)}
.rj-bar{stroke:#fff;stroke-dasharray:81.7;stroke-dashoffset:0}
.rj-num{position:relative;z-index:2;font-family:'Space Grotesk',sans-serif;
  font-size:.86rem;font-weight:700;color:#fff;line-height:1;
  text-shadow:0 1px 4px rgba(2,26,61,.5)}

/* al pasar el mouse el carrusel se pausa: el reloj lo dice */
.cr-reloj.pausa{background:linear-gradient(135deg,#0A3A78,#042558)}
.cr-reloj.pausa .rj-bar{stroke:rgba(255,255,255,.45)}

@media(prefers-reduced-motion:reduce){
  .cr-reloj{transition:opacity .2s ease;transform:none}
  .cr-reloj.on{transform:none}
}

/* Enlace discreto al portal interno del equipo. No compite con la
   navegacion comercial: vive abajo del todo, junto al copyright. */
.ftr-portal{display:inline-flex;align-items:center;gap:7px;color:#9FC3DC;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 14px;
  font-size:.78rem;letter-spacing:.04em;transition:.22s}
.ftr-portal::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400)}
.ftr-portal:hover{color:#fff;border-color:var(--edge-on);
  box-shadow:0 6px 22px rgba(1,163,212,.28)}

/* El portal del equipo, dentro de la lista "Empresa" del pie. Lleva el mismo
   punto cian que la pastilla de abajo para que se reconozcan como lo mismo,
   y va en cian para que se distinga de los enlaces comerciales. */
.ft-portal-lista{display:inline-flex;align-items:center;gap:8px;color:#7FD8F5}
.ft-portal-lista::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);flex:0 0 auto}
.ft-portal-lista:hover{color:#fff}

/* Portal del equipo, en la barra de arriba. Va en cian y con su punto para
   que se distinga de los enlaces comerciales: no es para clientes. */
.nav .nav-equipo{display:inline-flex;align-items:center;gap:7px;color:#7FD8F5;
  border:1px solid rgba(1,196,244,.3);margin-left:6px}
.nav .nav-equipo::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);flex:0 0 auto}
.nav .nav-equipo:hover{color:#fff;border-color:var(--edge-on);
  background:rgba(1,196,244,.12);box-shadow:0 4px 18px rgba(1,163,212,.3)}

/* ============================================================
   Menu desplegable de Servicios
   ============================================================ */
.nav-drop{position:relative}
.nav-drop::before{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.nav-drop > a{display:inline-flex;align-items:center;gap:7px}
.nav-drop > a::after{content:"";width:6px;height:6px;flex:0 0 6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.nav-drop:hover > a::after,.nav-drop:focus-within > a::after{transform:rotate(-135deg) translateY(1px)}
.nav-drop:hover > a,.nav-drop:focus-within > a{color:#fff;background:rgba(255,255,255,.1)}
.drop{position:absolute;top:calc(100% + 12px);left:0;width:max-content;min-width:0;z-index:80;
  background:var(--navy-900);border:1px solid rgba(255,255,255,.13);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.42);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 18px;border-radius:9px;white-space:nowrap;font-size:.9rem;
  opacity:0;transform:translateX(-10px);
  transition:opacity .24s ease,transform .24s ease,background .16s ease,color .16s ease}
.nav-drop:hover .drop a,.nav-drop:focus-within .drop a{opacity:1;transform:translateX(0)}
.nav-drop:hover .drop a:nth-child(1),.nav-drop:focus-within .drop a:nth-child(1){transition-delay:.05s}
.nav-drop:hover .drop a:nth-child(2),.nav-drop:focus-within .drop a:nth-child(2){transition-delay:.12s}
.nav-drop:hover .drop a:nth-child(3),.nav-drop:focus-within .drop a:nth-child(3){transition-delay:.19s}
.drop a b{display:block;color:#fff;font-size:.93rem;font-weight:600;margin-bottom:3px}
.drop a span{display:block;color:#9FB8D0;font-size:.81rem;line-height:1.5;font-weight:400}
.drop a:hover{background:rgba(1,196,244,.15)}
.drop a:hover b{color:var(--cyan-300)}
@media(prefers-reduced-motion:reduce){
  .drop{transition:opacity .15s ease,visibility .15s}
  .nav-drop > a::after{transition:none}
}
@media(max-width:1240px){
  .nav-drop{position:static}
  .nav-drop::before{display:none}
  .nav-drop > a::after{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:none;border:0;box-shadow:none;padding:0 0 8px 14px}
  .drop a{padding:11px 12px;opacity:1;transform:none;transition-delay:0s}
  .drop a span{display:none}
}

/* --- Club 720: el precio vive en Skool, aqui solo el enlace --- */
a.tprice{text-decoration:none;transition:opacity .18s ease}
a.tprice b{font-size:1.55rem;transition:color .18s ease}
a.tprice:hover b{color:#fff}
a.tprice:hover span{color:#DCE9F4}

/* --- Las tres citas dentro de Servicios --- */
.nav-drop:hover .drop a:nth-child(4),.nav-drop:focus-within .drop a:nth-child(4){transition-delay:.26s}
.nav-drop:hover .drop a:nth-child(5),.nav-drop:focus-within .drop a:nth-child(5){transition-delay:.33s}
.nav-drop:hover .drop a:nth-child(6),.nav-drop:focus-within .drop a:nth-child(6){transition-delay:.40s}
.drop a.drop-sep{margin-top:7px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:1240px){
  .drop a.drop-sep{margin-top:4px;padding-top:12px}
}
/* --- Precios: el precio se da en la consulta, no se publica --- */
a.price{text-decoration:none;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--line);transition:opacity .18s ease}
a.price b{font-size:1.75rem;transition:color .18s ease}
a.price span{transition:color .18s ease}
a.price:hover b{color:var(--cyan-500)}
a.price:hover span{color:var(--navy-800)}


/* === MARCA NUDE 2026-09-28 === */
/* ------------------------------------------------------------------
   Capa de marca "nude" de Novarise Capital (marfil, champán, caramelo,
   oro rosa). Va al FINAL de styles.css y reescribe solo colores, fuentes,
   brillos y las dos fotos de portada. La maquetación, las medidas y el
   comportamiento (menú, carrusel, lupa, botones flotantes) quedan igual.
   Ningún fondo ni sección oscura: lo único oscuro son los botones (espresso),
   que conservan el barrido de luz original a pedido del dueño. Sin luces que
   giran ni resplandores cian: sombras cálidas y suaves.
   Las fuentes nuevas (Cormorant Garamond + Montserrat) se cargan con el
   @import de la PRIMERA línea de este archivo, porque el navegador solo
   acepta @import antes de cualquier otra regla.
   ------------------------------------------------------------------ */

/* ---- Paleta: se reasignan las variables viejas (así también cambian los
   <style> internos de cada página que usan var(--cyan-500), var(--blue-600)…)
   y se añaden las de la marca nueva. ---- */
:root{
  --navy-900:#2B231E; --navy-800:#2B231E; --navy-700:#4A3A31;
  --blue-600:#7E5D45; --blue-500:#8E6A50;
  --cyan-500:#A9835E; --cyan-400:#B48A6A; --cyan-300:#C9A78A;
  --white:#fff; --ink:#2B231E; --muted:#6B5647; --line:#EADBCB;
  --bg:#FBF6F0; --bg-soft:#F4EBE1;
  --gold:#A9835E; --gold-bg:#F5EBE0;
  --shadow:0 4px 24px rgba(107,86,71,.09);
  --shadow-lg:0 18px 50px rgba(107,86,71,.16);
  --grad:linear-gradient(135deg,#B48A6A 0%,#8E6A50 100%);
  --edge:#E6D3BF; --edge-on:#C9A78A;
  --glow-sm:0 6px 20px rgba(107,86,71,.10);
  --glow:0 14px 38px rgba(107,86,71,.14);
  --glow-lg:0 22px 54px rgba(107,86,71,.18);
  --glow-dark:0 14px 38px rgba(107,86,71,.14);
  /* marca nude */
  --marfil:#FBF6F0; --nude:#F4EBE1;
  --champan:#F5EBE0; --champan-2:#F3E7DB; --champan-3:#E6D3BF; --champan-4:#EADBCB;
  --caramelo:#8E6A50; --caramelo-osc:#7E5D45;
  --oro:#A9835E; --oro-2:#B48A6A; --oro-3:#C9A78A;
  --cafe-1:#2B231E; --cafe-2:#4A3A31; --cafe-3:#6B5647; --apagado:#8C7B6E;
  /* oro para TEXTO pequeño (rótulos, "kickers", etiquetas): el mismo tono, un
     punto más oscuro, para que cumpla el contraste AA (4.5:1) sobre marfil y nude */
  --oro-texto:#86634B;
  --verde:#2E9A5C;
  /* solicitud.html pinta el foco de sus campos con var(--brand, cian): aquí se define en oro */
  --brand:#A9835E;
  /* botones: espresso oscuro (pedido del dueño el 28-09-2026, para que luzca el barrido de luz) */
  --espresso:#2B231E;
  --espresso-grad:linear-gradient(135deg,#2B231E 0%,#4A3A31 55%,#6B4E3A 100%);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Base y tipografía ---- */
body{font-family:var(--sans);color:var(--cafe-2);background:var(--marfil)}
::selection{background:var(--champan-3);color:var(--cafe-1)}
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:0;line-height:1.1;color:var(--cafe-1)}
h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;color:var(--cafe-1)}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem)}
h3{font-size:1.14rem}
.tbd{color:var(--caramelo-osc);background:var(--champan);border-color:var(--oro-3)}

/* ---- Botones: pastilla espresso oscura con el BARRIDO DE LUZ que cruza al pasar
   el mouse. El dueño pidió conservarlo: es el .btn::before original (degradado
   blanco que viaja de izquierda a derecha en .7 s) y aquí no se toca. Los de
   contorno y los "fantasma" llevan borde y texto marrón oscuro sobre fondo claro
   y, al pasar el mouse, se rellenan con el mismo degradado espresso bajo el
   barrido (el relleno se revela con la sombra interior, como en el original).
   Los resplandores cian sí se quitan; queda una sombra cálida suave. ---- */
.btn{font-family:var(--sans);font-weight:600;border-radius:999px;letter-spacing:.01em}
.btn:focus-visible{outline:2px solid var(--oro-2)}
.btn-primary{color:#fff;background:var(--espresso-grad);background-size:185% 185%;background-position:10% 10%;
  box-shadow:0 6px 20px rgba(43,35,30,.28),0 0 0 1px rgba(255,255,255,.08) inset}
.btn-primary:hover{background-position:90% 90%;
  box-shadow:0 12px 28px rgba(43,35,30,.34),0 0 0 1px rgba(255,255,255,.14) inset}
.btn-outline{border-color:var(--cafe-2);color:var(--cafe-2);background:var(--espresso-grad);
  background-size:185% 185%;background-position:10% 10%;box-shadow:inset 0 0 0 100px #fff}
.btn-outline:hover{color:#fff;border-color:transparent;background:var(--espresso-grad);
  background-size:185% 185%;background-position:90% 90%;
  box-shadow:inset 0 0 0 0 #fff,0 12px 28px rgba(43,35,30,.3)}
.btn-ghost{border-color:var(--cafe-2);color:var(--cafe-2);background:var(--espresso-grad);
  background-size:185% 185%;background-position:10% 10%;box-shadow:inset 0 0 0 100px var(--marfil)}
.btn-ghost:hover{color:#fff;border-color:transparent;background:var(--espresso-grad);
  background-size:185% 185%;background-position:90% 90%;
  box-shadow:inset 0 0 0 0 var(--marfil),0 12px 28px rgba(43,35,30,.3)}

/* ---- Cabecera clara. El logo T5 va como fondo del <span> de .brand;
   la imagen vieja se oculta y el texto queda accesible pero invisible. ---- */
.hdr{background:rgba(251,246,240,.92);border-bottom:1px solid rgba(169,131,94,.22)}
.hdr.scrolled{background:rgba(251,246,240,.985);box-shadow:0 4px 22px rgba(107,86,71,.12)}
.brand{color:var(--cafe-1)}
.brand img{display:none}
.brand span{display:block;width:182px;height:34px;overflow:hidden;white-space:nowrap;text-indent:-9999px;
  font-size:0;background:url(assets/logo/logo-marca.png) no-repeat left center/contain}
.ftr .brand span{width:204px;height:38px}
.nav a{color:var(--cafe-2);font-weight:600;font-size:.86rem}
.nav a:hover{color:var(--cafe-1);background:rgba(169,131,94,.12)}
.nav a[aria-current="page"]{color:var(--caramelo)}
.lang{background:rgba(169,131,94,.12)}
.lang button{color:var(--cafe-3)}
.lang button.on{background:var(--espresso);color:#fff;animation:none;box-shadow:none}
.burger{color:var(--cafe-1)}
@media(min-width:1241px) and (max-width:1419px){
  .nav a{font-size:.8rem;padding:9px 6px}
}
@media(max-width:1240px){
  .nav{background:var(--marfil);border-bottom:1px solid var(--champan-3);box-shadow:0 18px 40px rgba(107,86,71,.14)}
  /* con el menú escondido tras la hamburguesa, el idioma y la hamburguesa
     van pegados a la derecha (antes quedaban junto al logo) */
  .hdr-act{margin-left:auto}
}
@media(max-width:560px){
  .brand span{display:block;width:150px;height:28px}
  /* la pastilla "Novarise Capital LLC · San Antonio, TX" cabe en una línea */
  .eyebrow{font-size:.72rem;letter-spacing:.04em;padding:6px 14px}
}

/* ---- Desplegable de Servicios: claro ---- */
.nav-drop:hover > a,.nav-drop:focus-within > a{color:var(--cafe-1);background:rgba(169,131,94,.12)}
.drop{background:#FFFDFA;border:1px solid var(--champan-3);box-shadow:0 18px 50px rgba(107,86,71,.18)}
.drop a b{color:var(--cafe-1)}
.drop a span{color:var(--cafe-3)}
.drop a:hover{background:var(--champan)}
.drop a:hover b{color:var(--caramelo)}
.drop a.drop-sep{border-top-color:var(--champan-4)}
@media(max-width:1240px){
  .drop{background:none;border:0;box-shadow:none}
}
.nav .nav-equipo{color:var(--caramelo);border-color:rgba(169,131,94,.4)}
.nav .nav-equipo::before{background:var(--oro-2);box-shadow:none}
.nav .nav-equipo:hover{color:var(--cafe-1);border-color:var(--oro-2);background:rgba(169,131,94,.12);box-shadow:none}

/* ---- Portada de inicio: marfil con la foto de Maylin a la derecha (solo desde
   1024px; en tablet y celular se oculta). La foto es un WebP recortado con
   transparencia (56 KB): no hay recuadro ni mezcla de capas, y los dos arcos
   dorados (.hero::before) pasan POR DETRÁS de ella, como en el correo aprobado.
   Revisión 28-09-2026: se quitaron los arcos de la esquina inferior izquierda,
   que cruzaban las cifras ("Consulta inicial…", "Personas dedicadas…") en todos
   los anchos. Regla de la casa: ningún adorno cruza texto. ---- */
.hero{color:var(--cafe-1);isolation:isolate;
  background:
    radial-gradient(ellipse 720px 560px at 6% 8%, #F3E7DB 0%, rgba(243,231,219,0) 72%),
    linear-gradient(180deg,#FBF6F0 0%,#F8F1E8 100%)}
/* dos aros concéntricos, centrados detrás del busto de la foto. El cuadrado que
   los contiene mide 1,25 veces el ancho de la foto y su centro queda a un tercio
   del ancho de la foto contando desde su borde derecho, a 500 px del borde
   superior de la portada: así el aro nunca entra en la columna de texto
   (comprobado a 1024, 1100, 1280 y 1440 px). */
.hero::before{content:"";position:absolute;display:none;pointer-events:none;
  width:min(55%,650px);aspect-ratio:1;
  /* el centro del cuadrado: a 500 px del borde superior y a un tercio del ancho
     de la foto (14.52% = 0.33 × 44%) desde el borde derecho de la foto */
  top:500px;right:calc(max(0px,(100% - 1180px)/2) + min(14.52%,171.6px));
  transform:translate(50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle closest-side, transparent calc(88% - 1.5px), rgba(201,167,138,.55) calc(88% - .5px), rgba(201,167,138,.55) calc(88% + .5px), transparent calc(88% + 1.5px)),
    radial-gradient(circle closest-side, transparent calc(100% - 2.5px), rgba(180,138,106,.5) calc(100% - 1.5px), rgba(180,138,106,.5) calc(100% - .5px), transparent 100%)}
.hero::after{content:"";position:absolute;left:auto;right:max(0px,calc((100% - 1180px)/2));top:84px;bottom:0;
  width:min(44%,520px);height:auto;pointer-events:none;display:none;
  background:url(assets/photos/maylin-portada.webp) no-repeat right bottom/contain}
.hero .wrap{max-width:var(--wrap)}
@media(min-width:1024px){
  .hero::before,.hero::after{display:block}
  .hero .wrap{padding-right:min(44%,500px)}
  /* con la columna de texto más estrecha, las cuatro cifras van en 2 x 2 */
  .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}
}
.hero h1{color:var(--cafe-1)}
.hero p.lead{color:var(--cafe-2)}
.eyebrow{background:rgba(255,255,255,.6);border:1px solid var(--champan-3);color:var(--oro-texto);font-family:var(--sans);font-weight:600}
.hero-stats{border-top:1px solid var(--champan-3)}
.hero-stats b{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--cafe-1)}
.hero-stats span{color:var(--cafe-3)}

/* ---- Portadas interiores (.subhero): marfil, un arco arriba a la derecha y un
   retrato en arco de Maylin a la derecha desde 1100px.
   Revisión 28-09-2026: fuera los dos arcos de abajo a la izquierda, que
   cruzaban el párrafo, el botón y la pastilla "Vigente desde…" en todas las
   páginas interiores. El arco superior derecho queda: solo asoma en la franja
   de arriba, lejos del texto, en cualquier ancho. ---- */
.subhero{color:var(--cafe-1);
  background:
    radial-gradient(circle at 96% -50%, transparent 378px, rgba(201,167,138,.34) 379px, rgba(201,167,138,.34) 380px, transparent 381.5px),
    radial-gradient(ellipse 640px 420px at 4% 10%, #F3E7DB 0%, rgba(243,231,219,0) 72%),
    linear-gradient(180deg,#FBF6F0 0%,#F7EFE5 100%)}
.subhero::after{content:"";position:absolute;left:auto;right:calc(max(0px,(100% - 1180px)/2) + 22px);
  top:calc(50% + 30px);transform:translateY(-50%);width:210px;height:278px;
  border-radius:105px 105px 18px 18px;pointer-events:none;display:none;
  background:url(assets/photos/maylin-retrato.jpg) no-repeat center top/cover;
  box-shadow:0 0 0 1px rgba(169,131,94,.5),0 0 0 7px rgba(255,255,255,.75),0 0 0 8px rgba(201,167,138,.6),0 20px 44px rgba(107,86,71,.2)}
@media(min-width:1100px){
  .subhero::after{display:block}
  .subhero .wrap{max-width:var(--wrap);padding-right:330px}
  .subhero{min-height:430px}
}
.subhero h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.subhero p{color:var(--cafe-2)}
.crumb{color:var(--cafe-3)}
.crumb a{color:var(--cafe-3)}
.crumb a:hover{color:var(--cafe-1)}

/* ---- Secciones ---- */
.soft{background:var(--nude)}
.dark{background:var(--nude);color:var(--cafe-1)}
.dark p{color:var(--cafe-2)}
#club{background:
  radial-gradient(720px 420px at 84% 8%, rgba(255,255,255,.6) 0%, transparent 60%),
  linear-gradient(180deg,#F5EBE0 0%,#EFE2D3 100%)}
/* la nota del Club lleva su color azul escrito en el HTML: hay que forzarlo */
#club p[style]{color:var(--cafe-2)!important}
.head p{color:var(--cafe-3)}
.dark .head p{color:var(--cafe-3)}
.kicker{color:var(--oro-texto);font-family:var(--sans);font-weight:600}

/* ---- Tarjetas, rutas y pasos ---- */
.card{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.card:hover{box-shadow:var(--glow-lg);border-color:var(--oro-3)}
.card h3{color:var(--cafe-1)}
.card p{color:var(--cafe-3)}
.dark .card{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.dark .card:hover{background:#fff;border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.dark .card h3{color:var(--cafe-1)}
.dark .card p{color:var(--cafe-3)}
.ico{background:var(--champan-2);border:1px solid var(--champan-3);color:var(--caramelo);box-shadow:none;
  font-family:var(--serif);font-weight:700;font-size:1.5rem}
.card-link{color:var(--caramelo)}
.card-link:hover{color:var(--oro)}
.route{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.route:hover{border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.route .n{background:var(--champan-2);border:1px solid var(--champan-3);color:var(--caramelo);box-shadow:none;
  font-family:var(--serif);font-weight:700;font-size:1.15rem}
.route h3{color:var(--cafe-1)}
.route p{color:var(--cafe-3)}
.step{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.step:hover{border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.step::before{background:var(--caramelo);color:#fff;box-shadow:0 6px 16px rgba(142,106,80,.3);
  font-family:var(--serif);font-weight:700;font-size:1.15rem}
.step h3{color:var(--cafe-1)}
.step p{color:var(--cafe-3)}

/* ---- Planes y precios ---- */
.toggle button{background:#fff;border-color:var(--champan-3);color:var(--cafe-3);box-shadow:var(--glow-sm)}
.toggle button.on{background:var(--espresso);color:#fff;border-color:var(--espresso);box-shadow:var(--glow)}
.plan{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.plan:hover{border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.plan.feat{border-color:var(--oro-2);box-shadow:var(--glow)}
.plan.feat:hover{box-shadow:var(--glow-lg)}
.badge{background:var(--caramelo);color:#fff;box-shadow:0 6px 16px rgba(142,106,80,.3);font-family:var(--sans)}
.plan h3{color:var(--cafe-1);font-size:1.32rem}
.plan .sub{color:var(--cafe-3)}
.price b{font-family:var(--serif);font-weight:700;font-size:3rem;color:var(--cafe-1)}
.price span{color:var(--cafe-3)}
.price-sub{color:var(--cafe-3);border-bottom-color:var(--champan-4)}
.plan li{color:var(--cafe-2)}
.plan li::before{color:var(--oro)}
.legal-note{color:var(--cafe-3);background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
a.price{border-bottom-color:var(--champan-4)}
a.price:hover b{color:var(--caramelo)}
a.price:hover span{color:var(--cafe-1)}

/* ---- Listas, avisos ---- */
.bullets li{color:var(--cafe-2)}
.bullets li::before{background:var(--caramelo);color:#fff;box-shadow:none}
.dark .bullets li{color:var(--cafe-2)}
.nots li{color:var(--cafe-2)}
.nots li::before{background:var(--champan-4);color:var(--cafe-3)}
.notice{border-left-color:var(--oro-2);background:#FFFDFA;box-shadow:var(--glow-sm);
  border-top-color:var(--champan-3);border-right-color:var(--champan-3);border-bottom-color:var(--champan-3)}
.notice h3{color:var(--cafe-1)}
.notice p{color:var(--cafe-3)}

/* ---- Niveles del Club 720: tarjetas blancas sobre champán ---- */
.tier{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.tier:hover{background:#fff;border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.tier.feat{border-color:var(--oro-2);background:#FFFDFA;box-shadow:var(--glow)}
.tier h3{color:var(--cafe-1)}
.tier .sub{color:var(--cafe-3)}
.tprice{border-bottom-color:var(--champan-4)}
.tprice b{font-family:var(--serif);color:var(--caramelo)}
.tprice span{color:var(--cafe-3)}
.tier li{color:var(--cafe-2)}
.tier li::before{color:var(--oro)}
a.tprice:hover b{color:var(--cafe-1)}
a.tprice:hover span{color:var(--cafe-2)}

/* ---- Fundadores ---- */
.founder{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.founder:hover{border-color:var(--oro-3);box-shadow:var(--glow-lg)}
.founder .ph{background:var(--champan-2);color:var(--cafe-3)}
.founder h3{color:var(--cafe-1)}
.founder .role{color:var(--oro-texto)}
.founder p{color:var(--cafe-3)}

/* ---- Zona de certificados: champán claro en vez del azul profundo.
   El arco de abajo a la izquierda solo se dibuja desde 1100 px: en celular y
   tablet pasaba por debajo de la tarjeta del certificado y de los puntos. ---- */
.cert-zona{color:var(--cafe-1);border-bottom:1px solid var(--champan-3);box-shadow:none;
  background:
    radial-gradient(880px 520px at 14% 6%, rgba(255,255,255,.7) 0%, transparent 62%),
    linear-gradient(158deg,#F5EBE0 0%,#F3E7DB 45%,#EADBCB 100%)}
@media(min-width:1100px){
  .cert-zona{background:
    radial-gradient(circle at -3% 108%, transparent 298px, rgba(180,138,106,.36) 299px, rgba(180,138,106,.36) 300px, transparent 301.5px),
    radial-gradient(880px 520px at 14% 6%, rgba(255,255,255,.7) 0%, transparent 62%),
    linear-gradient(158deg,#F5EBE0 0%,#F3E7DB 45%,#EADBCB 100%)}
}
.cert-zona::before{background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,.2) 40%,transparent 68%)}
.cert-zona::after{display:none}
.cert-zona .head p{color:var(--cafe-3)}
.cert-zona .kicker{color:var(--oro-texto)}
.cr-item{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.cr-item.on{border-color:var(--oro-2);box-shadow:var(--glow-lg)}
.cr-item img{background:var(--marfil);border-bottom-color:var(--champan-4)}
.cr-item h4{font-family:var(--sans);color:var(--cafe-1)}
.cr-item .who{color:var(--caramelo)}
.cr-item .org{color:var(--cafe-3)}
.cr-item .zoom{background:var(--champan);border-color:var(--champan-3);color:var(--caramelo)}
.cr-item.on .zoom:hover{background:var(--espresso);color:#fff;border-color:var(--espresso);box-shadow:none}
.cr-nav{background:#fff;border-color:var(--champan-3);color:var(--cafe-1);box-shadow:var(--glow)}
.cr-nav:hover{background:var(--espresso);color:#fff;border-color:var(--espresso);box-shadow:var(--glow-lg)}
.cert-zona .cr-item{border-color:var(--champan-3);box-shadow:0 10px 30px rgba(107,86,71,.12)}
.cert-zona .cr-item.on{border-color:var(--oro-2);box-shadow:0 22px 54px rgba(107,86,71,.2)}
.cert-zona .cr-nav{color:var(--cafe-1);border-color:var(--champan-3);background:#fff;box-shadow:0 8px 24px rgba(107,86,71,.16)}
.cert-zona .cr-nav:hover{background:var(--espresso);color:#fff;border-color:var(--espresso);box-shadow:0 12px 30px rgba(43,35,30,.26)}
.cr-dots button{background:var(--champan-3)}
.cert-zona .cr-dots button{background:#DCC7B0}
.cert-zona .cr-dots button.on{background:var(--caramelo)}
.cr-dots button.on{background:var(--caramelo);box-shadow:none}
.cr-reloj{background:var(--caramelo);box-shadow:0 4px 14px rgba(107,86,71,.25)}
.cr-reloj::after{display:none}
.rj-pista{stroke:rgba(255,255,255,.35)}
.rj-num{font-family:var(--sans);text-shadow:none}
.cr-reloj.pausa{background:var(--cafe-2)}

/* ---- Lupa del certificado: velo marfil en vez de azul marino ---- */
.lb{background:rgba(251,246,240,.96)}
#lb-img{box-shadow:0 0 0 1px var(--champan-3),0 30px 80px rgba(107,86,71,.28)}
.lb .x{background:#fff;border-color:var(--champan-3);color:var(--cafe-1)}
.lb .x:hover{background:var(--espresso);border-color:var(--espresso);color:#fff}
.lb-ficha{background:#fff;border-color:var(--champan-3);box-shadow:0 26px 60px rgba(107,86,71,.22)}
.lf-cara{border-color:#fff;box-shadow:0 0 0 1px var(--champan-3),0 10px 24px rgba(107,86,71,.18)}
.lf-aro::before{display:none;animation:none}
.lf-aro::after{border-color:rgba(169,131,94,.8)}
.lf-de{color:var(--oro-texto)}
.lb-ficha b{font-family:var(--sans);color:var(--cafe-1);text-shadow:none}
.lf-rol{color:var(--cafe-3)}
.lf-linea{background:linear-gradient(90deg,rgba(169,131,94,.8),rgba(169,131,94,.05))}
.lf-etq{color:var(--cafe-3)}
.lf-dato{color:var(--cafe-2)}

/* ---- Preguntas frecuentes ---- */
.faq details{background:#fff;border-color:var(--champan-3);box-shadow:var(--glow-sm)}
.faq details:hover,.faq details[open]{border-color:var(--oro-3);box-shadow:var(--glow)}
.faq summary{color:var(--cafe-1);font-weight:600}
.faq summary::after{color:var(--oro)}
.faq .a{color:var(--cafe-3)}

/* ---- Llamado final: champán; los dos arcos de las esquinas solo desde 1240 px
   (en celular cruzaban el título, el botón de WhatsApp y la nota; entre 1100 y
   1240 px el de arriba a la derecha pasaba a menos de 50 px del título) ---- */
.cta-final{color:var(--cafe-1);background:linear-gradient(180deg,#F5EBE0 0%,#EADBCB 100%)}
@media(min-width:1240px){
  .cta-final{background:
    radial-gradient(circle at -3% 110%, transparent 258px, rgba(180,138,106,.4) 259px, rgba(180,138,106,.4) 260px, transparent 261.5px),
    radial-gradient(circle at 103% -30%, transparent 298px, rgba(180,138,106,.4) 299px, rgba(180,138,106,.4) 300px, transparent 301.5px),
    linear-gradient(180deg,#F5EBE0 0%,#EADBCB 100%)}
}
.cta-final h2{color:var(--cafe-1)}
.cta-final p{color:var(--cafe-2)}
.cta-final p.nota{color:var(--cafe-3)}

/* ---- Pie de página claro ---- */
.ftr{background:var(--nude);color:var(--cafe-3);border-top:1px solid var(--champan-3)}
.ftr a{color:var(--cafe-2)}
.ftr a:hover{color:var(--caramelo)}
.ftr h4{color:var(--cafe-1)}
.disc{border-top-color:var(--champan-3);color:var(--cafe-3)}
.copy{border-top-color:var(--champan-3)}
.ftr-portal{color:var(--caramelo);border-color:rgba(169,131,94,.4)}
.ftr-portal::before{background:var(--oro-2);box-shadow:none}
.ftr-portal:hover{color:var(--cafe-1);border-color:var(--oro-2);box-shadow:0 6px 20px rgba(107,86,71,.16)}
.ft-portal-lista{color:var(--caramelo)}
.ft-portal-lista::before{background:var(--oro-2);box-shadow:none}
.ft-portal-lista:hover{color:var(--cafe-1)}

/* ---- Eslogan del pie: pastilla quieta, en cursiva serif como en el logo.
   Se apaga la "luz orbital" (los dos pseudo-elementos que giraban). ---- */
.slogan-pie{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.02rem;letter-spacing:.03em;
  text-transform:none;color:var(--caramelo);border-color:rgba(169,131,94,.4);box-shadow:none;animation:none;
  background:
    linear-gradient(90deg,transparent,var(--oro-2)) no-repeat left 15px center / 16px 1px,
    linear-gradient(90deg,var(--oro-2),transparent) no-repeat right 15px center / 16px 1px,
    rgba(255,255,255,.55)}
.luz-orbital{animation:none}
.slogan-pie::before,.luz-orbital::before,.slogan-pie::after,.luz-orbital::after{display:none;animation:none}

/* ---- Botones flotantes: "subir" en espresso (mismo degradado que los botones)
   y WhatsApp en su verde, liso; sin ondas, resplandores ni reflejo de cristal ---- */
.top-float{background:var(--espresso-grad);background-size:190% 190%;background-position:12% 12%;
  box-shadow:0 8px 22px rgba(43,35,30,.3),0 0 0 1px rgba(255,255,255,.1) inset}
.top-float::after{display:none}
.top-float:hover{background-position:88% 88%;box-shadow:0 12px 30px rgba(43,35,30,.36),0 0 0 1px rgba(255,255,255,.16) inset}
.top-float:focus-visible{outline-color:var(--oro-2)}
.wa-float{background:#25D366;box-shadow:0 8px 20px rgba(37,211,102,.32)}
.wa-float::before{display:none;animation:none}
.wa-float::after{display:none}
.wa-float:hover{background:#1FBF5B;box-shadow:0 10px 26px rgba(37,211,102,.38)}
.wa-float:focus-visible{outline-color:var(--oro-2)}

/* ---- Bloques de contacto (.datos) definidos dentro de cada página: rótulo en
   oro de texto y con menos espaciado para que "TELÉFONO Y WHATSAPP" quepa en
   una línea ---- */
.datos div b{font-family:var(--sans);color:var(--oro-texto);letter-spacing:.12em}
/* ---- Formulario "Empezar mi proyecto" (solicitud.html): los títulos de cada
   bloque llevan Space Grotesk escrito en su propio <style>; aquí van en la
   fuente de la marca, y el asterisco de "obligatorio" en caramelo ---- */
.fset > legend{font-family:var(--sans);color:var(--cafe-1)}
.fset .req,.f .req{color:var(--caramelo)}

/* ---- Botones: texto repartido parejo en dos líneas cuando no cabe (evita una palabra sola abajo, p. ej. «min» en el celular) ---- */
.btn{text-wrap:balance}

/* ---- Lema bajo el logo de la cabecera (pedido del dueño el 28-09-2026). Va como
   texto, no dentro de la imagen, para que se lea; a la derecha, como en el logo T5. ---- */
.hdr .brand{flex-direction:column;align-items:flex-end;gap:2px}
.hdr .brand::after{content:"Sin atajos, con sistemas";font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:.86rem;line-height:1;letter-spacing:.01em;color:var(--cafe-1);white-space:nowrap}
html[lang="en"] .hdr .brand::after{content:"No shortcuts. Systems."}
/* ---- Botones en relieve con degradado (elegidos por el dueño el 28-09-2026: la
   opción A "como se ve al pasar el mouse"). El café oscuro pasa al caramelo claro de
   izquierda a derecha; encima va una capa de luz y sombra que los abomba (claro
   arriba, oscuro abajo). El borde hace de bisel y un canto café debajo les da grosor.
   Al pasar el mouse suben y se aclaran un poco más; al hacer clic se hunden. El
   barrido de luz (.btn::before) sigue igual. Las sombras van siempre en el mismo
   orden para que el paso de un estado a otro sea suave. ---- */
:root{
  --relieve-luz:linear-gradient(180deg,rgba(255,250,244,.3) 0%,rgba(255,250,244,.06) 46%,rgba(40,28,20,.06) 54%,rgba(40,28,20,.2) 100%);
  --relieve-color:linear-gradient(115deg,#5E4839 0%,#8E6A50 50%,#C9A78A 100%);
  --relieve-canto:#5E4839}
/* el degradado cubre también el borde de 2 px (si no, se repite y deja rayas arriba y abajo) */
.btn-primary,.btn-outline,.btn-ghost{background-origin:border-box !important;background-repeat:no-repeat !important;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background-size .5s ease,
             background-position .5s ease,color .22s ease,border-color .22s ease}
.btn-primary{background:var(--relieve-luz),var(--relieve-color);background-size:100% 100%,160% 100%;background-position:0 0,100% 0;
  color:#fff;text-shadow:0 1px 2px rgba(43,35,30,.45);
  border-color:rgba(255,244,232,.5) rgba(255,244,232,.12) rgba(40,28,20,.22);
  box-shadow:inset 0 -2px 4px rgba(40,28,20,.14),0 4px 0 var(--relieve-canto),0 10px 20px rgba(94,72,57,.26)}
.btn-primary:hover{background:var(--relieve-luz),var(--relieve-color);background-size:100% 100%,190% 100%;background-position:0 0,100% 0;
  border-color:rgba(255,244,232,.6) rgba(255,244,232,.14) rgba(40,28,20,.22);
  box-shadow:inset 0 -2px 4px rgba(40,28,20,.12),0 6px 0 var(--relieve-canto),0 16px 28px rgba(94,72,57,.3)}
.btn-primary:active{transform:translateY(3px);
  border-color:rgba(40,28,20,.2) rgba(40,28,20,.06) rgba(255,244,232,.2);
  box-shadow:inset 0 2px 6px rgba(40,28,20,.3),0 1px 0 var(--relieve-canto),0 4px 10px rgba(94,72,57,.22)}
/* los de contorno: claros y levantados sobre un canto champán; al pasar el mouse
   se rellenan con el mismo degradado */
.btn-outline,.btn-ghost{background:var(--relieve-luz),var(--relieve-color);background-size:100% 100%,160% 100%;background-position:0 0,100% 0;
  box-shadow:inset 0 0 0 100px #fff,0 3px 0 #D9BFA4,0 8px 16px rgba(107,86,71,.14)}
.btn-ghost{box-shadow:inset 0 0 0 100px var(--marfil),0 3px 0 #D9BFA4,0 8px 16px rgba(107,86,71,.14)}
.btn-outline:hover,.btn-ghost:hover{background:var(--relieve-luz),var(--relieve-color);background-size:100% 100%,160% 100%;background-position:0 0,100% 0;
  color:#fff;text-shadow:0 1px 2px rgba(43,35,30,.45);
  border-color:rgba(255,244,232,.6) rgba(255,244,232,.14) rgba(40,28,20,.22);
  box-shadow:inset 0 0 0 0 #fff,0 6px 0 var(--relieve-canto),0 16px 28px rgba(94,72,57,.3)}
.btn-outline:active,.btn-ghost:active{transform:translateY(2px);
  border-color:rgba(40,28,20,.2) rgba(40,28,20,.06) rgba(255,244,232,.2);
  box-shadow:inset 0 0 0 0 #fff,0 1px 0 var(--relieve-canto),0 4px 10px rgba(94,72,57,.22)}
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-outline,.btn-ghost{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
  .btn-primary:active,.btn-outline:active,.btn-ghost:active{transform:none}
}