/* ═══════════════════════════════════════════════════════════════════════
   TECNO-VERTICAL · TEMA COMPARTIDO
   ───────────────────────────────────────────────────────────────────────
   Lo cargan TODAS las páginas del sitio (index, faq, piloto, diagrama,
   privacidad, términos, presentación). Si cambias un color aquí, cambia
   en todo el sitio de una vez.

   LA PALETA ES LA DE LA APP. No es una elección nueva: sale tal cual de
   `www/css/style.css`, donde el acento está comentado como
   "morado TECNO-VERTICAL".

       app  --accent      #9b59b6   →  aquí --morado
       app  --accent-2    #6c3483   →  aquí --morado-hondo
       app  --bg (dark)   #160a26   →  aquí --obsidiana
       app  --surface     #1f1133   →  aquí --cenote
       app  --border      #43285f   →  aquí --canto-solido
       app  --text        #ece3f7   →  aquí --calcita
       app  --text-dim    #b69fd6   →  aquí --humo

   DOS ACENTOS INTERCAMBIABLES: morado (por defecto) y turquesa.
   El turquesa tampoco es inventado: es el --accent-2 del tema neón de
   la app (#00b8d4). Se cambia con el botón de la barra, que escribe
   data-acento="turquesa" en <html>.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Materia: los grises y negros llevan sesgo morado, como la app ── */
  --obsidiana:#120720;        /* fondo profundo */
  --cenote:#1f1133;           /* superficie */
  --cenote-2:#2a1746;         /* superficie elevada */
  --canto-solido:#43285f;     /* borde sólido */
  --calcita:#ece3f7;          /* texto */
  --humo:rgba(236,227,247,.66);
  --tenue:rgba(236,227,247,.40);

  /* ── ACENTO POR DEFECTO: el morado de la app ── */
  --acento:#b06fd4;           /* #9b59b6 aclarado para que contraste sobre oscuro */
  --acento-2:#8e4fb0;
  --acento-hondo:#6c3483;
  --acento-rgb:176,111,212;

  /* Oro de indicador: estado, no decoración */
  --oro:#F2B33D;
  --cinabrio:#FF6B57;         /* solo para "lo que pasa hoy" */

  /* ── Vidrio ── */
  --vidrio:rgba(236,227,247,.05);
  --vidrio-alto:rgba(236,227,247,.085);
  --vidrio-solido:rgba(31,17,51,.72);
  --canto:rgba(236,227,247,.14);
  --canto-vivo:rgba(var(--acento-rgb),.38);
  --desenfoque:blur(24px) saturate(1.7);

  /* ── Tipografía. Más grande que antes: 18px de base y una escala
        con más aire, porque el texto se leía chico. ── */
  --display:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --cuerpo:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --dato:ui-monospace,'Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;

  --t-base:18px;
  --t-lead:1.68;
  --t-entrada:clamp(1.12rem,2vw,1.32rem);
  --t-h1:clamp(2.5rem,5.8vw,4.3rem);
  --t-h2:clamp(2rem,4.1vw,3.05rem);
  --t-h3:clamp(1.2rem,1.9vw,1.34rem);
  --t-carta:1.02rem;

  --ancho:1180px;
  --radio:18px;
  --radio-sm:12px;

  /* Greca escalonada — friso de Uxmal / Mitla. Motivo ARQUITECTÓNICO
     de cenefa, no un glifo sagrado: usarlo como banda respeta su función. */
  --greca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 21H6V15H12V9H18V3H30V9H36V15H42V21H48' fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* ── ACENTO ALTERNO: turquesa (el --accent-2 del tema neón de la app) ── */
:root[data-acento="turquesa"]{
  --acento:#2FD8D8;
  --acento-2:#17B6C4;
  --acento-hondo:#0E7E9E;
  --acento-rgb:47,216,216;
  /* El fondo se enfría un punto para que el turquesa no chille sobre morado */
  --obsidiana:#05131A;
  --cenote:#0A1F28;
  --cenote-2:#0E2A34;
  --canto-solido:#1B4653;
  --calcita:#E6F6F7;
  --humo:rgba(230,246,247,.66);
  --tenue:rgba(230,246,247,.40);
  --vidrio:rgba(230,246,247,.05);
  --vidrio-alto:rgba(230,246,247,.085);
  --vidrio-solido:rgba(10,31,40,.72);
  --canto:rgba(230,246,247,.14);
}

/* ═══ BASE ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--obsidiana);
  color:var(--calcita);
  font-family:var(--cuerpo);
  font-size:var(--t-base);
  line-height:var(--t-lead);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:4px}

h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.08;
         letter-spacing:-.022em; margin:0; text-wrap:balance}
h1{font-size:var(--t-h1); font-weight:900}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem}

.contenedor{width:min(100% - 2.6rem,var(--ancho)); margin-inline:auto}
.nivel{padding-block:clamp(4.5rem,10vw,7.5rem); scroll-margin-top:92px}
.nivel__cab{margin-bottom:clamp(2.2rem,4.5vw,3.4rem); max-width:70ch}
.entrada{font-size:var(--t-entrada); color:var(--humo); max-width:60ch}
.tnum{font-variant-numeric:tabular-nums}

.rotulo{
  font-family:var(--dato); font-size:.74rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--acento); margin:0 0 .9rem;
  display:flex; align-items:center; gap:.6rem;
}
.rotulo::before{content:""; width:26px; height:2px; background:var(--acento); flex:none}

/* ═══ EL CAMPO: fondo vivo ═══════════════════════════════════════════
   Sin algo variado detrás que desenfocar, el vidrio se ve como
   plástico opaco. Por eso el campo existe.                          */
#campo{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cenote-2) 0%, transparent 58%),
    linear-gradient(180deg,var(--obsidiana) 0%,var(--cenote) 42%,var(--obsidiana) 100%);
}
.resplandor{position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; will-change:transform}
.r1{width:56vw;height:56vw;left:-14vw;top:-10vw;
    background:radial-gradient(circle,rgba(var(--acento-rgb),.85) 0%,transparent 68%);
    animation:deriva1 26s ease-in-out infinite alternate}
.r2{width:48vw;height:48vw;right:-12vw;top:22vh;
    background:radial-gradient(circle,var(--acento-hondo) 0%,transparent 68%);
    animation:deriva2 32s ease-in-out infinite alternate}
.r3{width:38vw;height:38vw;left:26vw;bottom:-16vw;
    background:radial-gradient(circle,#5B2A7A 0%,transparent 70%);
    opacity:.26; animation:deriva3 38s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes deriva2{to{transform:translate3d(-11vw,-6vh,0) scale(1.1)}}
@keyframes deriva3{to{transform:translate3d(7vw,-9vh,0) scale(1.2)}}

.campo-friso{
  position:absolute; inset:-24px 0;
  background:var(--greca); background-repeat:repeat; background-size:96px 48px;
  opacity:.055; animation:ascenso 24s linear infinite;
}
@keyframes ascenso{to{background-position:0 -48px}}
.campo-grano{
  position:absolute; inset:0; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.capa{position:relative; z-index:1}

/* ═══ VIDRIO — la pieza que define el estilo ═════════════════════════
   No es "una caja con opacidad": lleva desenfoque real del fondo,
   saturación (para que el color de detrás se sienta) y un canto
   superior iluminado que simula el borde físico de un panel.        */
.vidrio{
  position:relative;
  background:var(--vidrio);
  backdrop-filter:var(--desenfoque);
  -webkit-backdrop-filter:var(--desenfoque);
  border:1px solid var(--canto);
  border-radius:var(--radio);
  overflow:hidden;
}
.vidrio::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--acento-rgb),.65),transparent);
}
/* Vidrio más denso, para bloques de lectura larga */
.vidrio--denso{background:var(--vidrio-alto)}

/* Banda de greca (máscara: el color lo pone el degradado) */
.friso{
  height:16px; width:100%;
  background:linear-gradient(90deg,var(--acento),var(--acento-2),var(--acento));
  -webkit-mask-image:var(--greca); mask-image:var(--greca);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:32px 16px; mask-size:32px 16px;
  opacity:.85;
}
.friso--oro{background:linear-gradient(90deg,var(--oro),#FFD98A,var(--oro))}

/* ═══ BARRA SUPERIOR ═════════════════════════════════════════════════ */
.barra{
  position:sticky; top:0; z-index:60;
  background:var(--vidrio-solido);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--canto);
}
.barra__fila{display:flex; align-items:center; gap:1.2rem; padding-block:.85rem}
.marca{display:flex; align-items:center; gap:.66rem; text-decoration:none; margin-right:auto}
.marca__sello{
  width:36px; height:36px; flex:none; border-radius:9px;
  background:linear-gradient(145deg,var(--acento),var(--acento-hondo));
  display:grid; place-items:center; box-shadow:0 0 22px rgba(var(--acento-rgb),.45);
}
.marca__sello svg{width:20px; height:20px}
.marca__texto{font-family:var(--display); font-weight:900; font-size:1.06rem;
               letter-spacing:.015em; line-height:1.1}
.marca__texto span{color:var(--acento)}
.menu{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-size:.95rem; font-weight:500; color:var(--humo); transition:color .18s}
.menu a:hover{color:var(--calcita)}
.barra__cta{
  padding:.6rem 1.2rem; border-radius:99px; text-decoration:none;
  font-size:.92rem; font-weight:600; white-space:nowrap;
  background:var(--acento); color:#1A0A24;
  transition:transform .18s, box-shadow .18s;
}
.barra__cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(var(--acento-rgb),.4)}
.hamburguesa{display:none; background:none; border:0; color:var(--calcita); padding:.4rem}

/* Botón que cambia morado ⇄ turquesa */
.tono{
  width:38px; height:38px; flex:none; border-radius:10px;
  background:var(--vidrio); border:1px solid var(--canto);
  color:var(--acento); display:grid; place-items:center; font-size:1rem;
  transition:border-color .18s, transform .18s;
}
.tono:hover{border-color:var(--canto-vivo); transform:translateY(-1px)}

/* ═══ BOTONES ════════════════════════════════════════════════════════ */
.boton{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:99px; border:1px solid transparent;
  text-decoration:none; font-weight:600; font-size:1.02rem;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.boton--principal{
  background:linear-gradient(100deg,var(--acento),var(--acento-2));
  color:#1A0A24; box-shadow:0 10px 34px rgba(var(--acento-rgb),.34);
}
.boton--principal:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(var(--acento-rgb),.48)}
.boton--fantasma{
  background:var(--vidrio); border-color:var(--canto); color:var(--calcita);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.boton--fantasma:hover{background:var(--vidrio-alto); transform:translateY(-2px)}

/* ═══ TARJETAS ═══════════════════════════════════════════════════════ */
.carta{padding:1.7rem 1.55rem; transition:transform .26s, border-color .26s}
.carta:hover{transform:translateY(-4px); border-color:var(--canto-vivo)}
.carta h3{margin-bottom:.55rem}
.carta p{color:var(--humo); font-size:var(--t-carta); margin:0}
.carta__icono{
  width:44px; height:44px; border-radius:11px; margin-bottom:1rem;
  display:grid; place-items:center; font-size:1.3rem;
  background:rgba(var(--acento-rgb),.12); border:1px solid rgba(var(--acento-rgb),.24);
}
.rejilla{display:grid; gap:1.05rem}
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ═══ PREGUNTAS (pliegues) ═══════════════════════════════════════════ */
.pliegue{border-bottom:1px solid var(--canto)}
.pliegue summary{
  padding:1.35rem 2.4rem 1.35rem .2rem; cursor:pointer; position:relative;
  font-weight:600; font-size:1.08rem; list-style:none; transition:color .18s;
}
.pliegue summary::-webkit-details-marker{display:none}
.pliegue summary:hover{color:var(--acento)}
.pliegue summary::after{
  content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--acento); font-weight:400; transition:transform .24s;
}
.pliegue[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.pliegue p{padding:0 2.4rem 1.4rem .2rem; margin:0; color:var(--humo); font-size:1rem}

/* ═══ PIE ════════════════════════════════════════════════════════════ */
.pie{padding-block:2.4rem; border-top:1px solid var(--canto);
     font-size:.9rem; color:var(--tenue)}
.pie__fila{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center}
.pie__enlaces{display:flex; flex-wrap:wrap; gap:1.1rem}
.pie__enlaces a{text-decoration:none; color:var(--humo)}
.pie__enlaces a:hover{color:var(--acento)}

/* ═══ APARICIÓN AL DESPLAZAR ═════════════════════════════════════════ */
.revela{opacity:0; transform:translateY(22px); transition:opacity .68s ease, transform .68s ease}
.revela.visible{opacity:1; transform:none}

/* ═══ PANTALLAS PEQUEÑAS ═════════════════════════════════════════════ */
@media (max-width:980px){
  .rejilla--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--t-base:17px}
  .menu{
    position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:0; padding:.6rem 1.3rem 1.2rem;
    background:var(--obsidiana);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--canto); display:none;
  }
  .menu.abierto{display:flex}
  .menu a{display:block; padding:.78rem 0; border-bottom:1px solid var(--canto)}
  .hamburguesa{display:block; order:4}
  .barra__cta{display:none}
  .rejilla--3,.rejilla--2{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  .revela{opacity:1; transform:none}
}