/* Panoptes: lo clásico (serif romana, numerales, arcos, meandro) con contraste moderno.
   Papel y tinta con el granate del sello; los bloques oscuros, con su versión nocturna. */
:root{
  --noche:#0e0c0c; --noche-2:#171414; --hueso:#ece6dc; --suave-osc:#bdb3a7; --linea-osc:rgba(236,230,220,.14);
  --papel:#f6f4ef; --carta:#fffdf9; --piedra:#efeae1; --tinta:#1a1614; --tinta-2:#4a423d; --gris:#7d736b; --linea:#e3ddd2;
  --sello:#9e1b2c; --sello-vivo:#d4404f; --boton:#a8202f;
  --clasica:'Cormorant Garamond','Times New Roman',serif; --romana:Cinzel,'Times New Roman',serif;
  --texto:'Bricolage Grotesque',system-ui,sans-serif;
  --bg:var(--papel);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.6 var(--texto);color:var(--tinta);background:var(--papel);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
.envoltura{max-width:1180px;margin:0 auto;padding:0 20px}
.oculto-svg{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{font-family:var(--clasica);font-weight:600;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(50px,8.4vw,116px);line-height:.92}
h2{font-size:clamp(38px,5.4vw,70px);line-height:.98;margin-bottom:22px}
h3{font-size:27px;line-height:1.1}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--sello)}
.noche h1 em,.noche h2 em,.noche h3 em{color:var(--sello-vivo)}
.granate h1 em,.granate h2 em{color:var(--hueso)}

/* ── Fondos */
.noche{background:var(--noche);color:var(--hueso)}
.claro{background:var(--papel);color:var(--tinta)}
.piedra{background:var(--piedra);color:var(--tinta)}
.granate{background:var(--sello);color:var(--hueso)}

/* ── Movimiento. Todo se apaga con «reducir movimiento». */
.emblema{color:var(--sello);display:block}
.noche .emblema{color:var(--sello-vivo)}
.granate .emblema{color:var(--hueso)}
.emblema .ojo,#pudu-ojos .ojo,#faro-ojos .ojo,#sisifo-ojos .ojo,#ariadna-ojos .ojo,#argos-ojos .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 7s infinite}
.ojo:nth-child(2){animation-delay:1.3s!important}
.ojo:nth-child(3){animation-delay:2.9s!important}
.ojo:nth-child(4){animation-delay:.6s!important}
.ojo:nth-child(5){animation-delay:4.4s!important}
.ojo:nth-child(6){animation-delay:3.6s!important}
.ojo:nth-child(7){animation-delay:5.5s!important}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.pupilas{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.haz{animation:haz 5s ease-in-out infinite}
@keyframes haz{0%,100%{opacity:.08}50%{opacity:.34}}
.rueda{transform-box:fill-box;transform-origin:center;animation:rueda 9s ease-in-out infinite}
@keyframes rueda{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes flota{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 14px))}}
@keyframes latir{50%{opacity:.25}}
.revela{opacity:0}
.revela.visto{opacity:1;animation:aparece .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes aparece{from{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .revela{opacity:1;transform:none}
}

/* ── Rótulos: capitales romanas, con su numeral */
.rotulo{display:flex;align-items:center;gap:14px;font:600 13px/1 var(--romana);letter-spacing:.26em;text-transform:uppercase;margin:0 0 26px}
.rotulo b{color:var(--sello);font-weight:700}
.noche .rotulo b{color:var(--sello-vivo)}
.granate .rotulo b{color:var(--hueso)}
.vivo{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--romana);letter-spacing:.18em;text-transform:uppercase}
.vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:latir 1.8s ease-in-out infinite}
.lead{font-size:clamp(18px,1.8vw,20.5px);line-height:1.55;max-width:58ch;margin:0}
.noche .lead,.noche .suave{color:var(--suave-osc)}
.claro .lead,.piedra .lead,.claro .suave{color:var(--tinta-2)}
.granate .lead{color:rgba(236,230,220,.86)}

/* ── El meandro griego, como cenefa */
.meandro{height:16px;color:var(--sello);opacity:.9;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 15H24M4.5 15V1.5H19.5V11.5H9.5V6H14.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0/24px 16px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 15H24M4.5 15V1.5H19.5V11.5H9.5V6H14.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0/24px 16px repeat-x}
.noche .meandro{color:var(--sello-vivo);opacity:.55}
.granate .meandro{color:var(--hueso);opacity:.5}

/* ── Botones */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:5px;border:1.5px solid currentColor;
  text-decoration:none;font:600 15px/1 var(--texto);background:transparent;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 currentColor}
.btn.primario{background:var(--boton);border-color:var(--boton);color:var(--hueso)}
.btn.primario:hover,.btn.negro:hover{box-shadow:3px 3px 0 var(--tinta)}
.noche .btn.primario:hover,header .btn.primario:hover,.btn.claro-btn:hover{box-shadow:3px 3px 0 var(--hueso)}
.btn.negro{background:var(--tinta);border-color:var(--tinta);color:var(--hueso)}
.btn.claro-btn{background:var(--hueso);border-color:var(--hueso);color:var(--tinta)}
.granate .btn.claro-btn:hover{box-shadow:3px 3px 0 var(--noche)}
.btn .flecha{transition:transform .15s}
.btn:hover .flecha{transform:translateX(4px)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sello-vivo);outline-offset:3px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}

/* ── Barra */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--noche) 90%,transparent);color:var(--hueso);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.bajando{border-bottom-color:var(--linea-osc)}
.barra{display:flex;align-items:center;gap:28px;height:70px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;font:700 17px/1 var(--romana);letter-spacing:.2em}
.marca .emblema{width:32px;height:32px;color:var(--sello-vivo)}
.barra nav{display:flex;gap:28px;margin-left:auto;font:500 15px var(--texto)}
.barra nav a{text-decoration:none;opacity:.72;padding:6px 0;border-bottom:1.5px solid transparent;transition:opacity .15s,border-color .15s}
.barra nav a:hover,.barra nav a[aria-current]{opacity:1;border-color:var(--sello-vivo)}
.barra .btn{padding:11px 18px;gap:0}
.soluciones{position:relative}
.soluciones summary{list-style:none;cursor:pointer;opacity:.72;padding:6px 0;border-bottom:1.5px solid transparent;transition:opacity .15s,border-color .15s}
.soluciones summary::-webkit-details-marker{display:none}
.soluciones summary::after{content:"▾";font-size:11px;margin-left:6px}
.soluciones summary:hover,.soluciones[open] summary{opacity:1;border-color:var(--sello-vivo)}
.soluciones summary:focus-visible{outline:2px solid var(--sello-vivo);outline-offset:3px}
.desplegable{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;gap:4px;
  width:420px;padding:10px;background:var(--noche);border:1px solid var(--linea-osc);border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.barra nav .desplegable a{display:grid;grid-template-columns:36px 1fr;gap:0 12px;align-items:center;padding:12px;border:0;border-radius:9px;opacity:1}
.barra nav .desplegable a:hover,.barra nav .desplegable a[aria-current]{background:var(--noche-2)}
.desplegable .emblema{grid-row:span 2;width:36px;height:36px;color:var(--sello-vivo)}
.desplegable b{font:600 20px/1.1 var(--clasica)}
.desplegable span{font-size:13px;color:var(--suave-osc)}

/* ── Portadas */
.portada{position:relative;overflow:hidden;padding:110px 0 100px}
.portada .envoltura{position:relative;z-index:2}
.portada .lead{margin:30px 0 38px}
.portada > .meandro{position:absolute;left:0;right:0;bottom:0}
.campo{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.25) 15%,#000 65%);mask-image:linear-gradient(100deg,rgba(0,0,0,.25) 15%,#000 65%)}
.gran-emblema{position:absolute;right:max(20px,calc(50% - 570px));top:46%;width:min(30vw,340px);height:auto;transform:translateY(-50%);
  filter:drop-shadow(0 30px 70px rgba(212,64,79,.3));animation:flota 7s ease-in-out infinite;z-index:1}
.inicio h1{max-width:12ch}
.portada .partes{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.portada .partes h1{font-size:clamp(46px,6.4vw,88px)}


section{position:relative;padding:120px 0}
.cabeza-sec{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:64px}
.cabeza-sec h2{margin:0}
.cabeza-sec .lead{justify-self:end}

/* ── Tarjetas */
.tarjeta{position:relative;background:var(--carta);border:1px solid var(--linea);border-radius:20px;padding:30px 28px}
.tarjeta p{margin:0;color:var(--tinta-2);font-size:15.5px}
.tarjeta h3{margin:0 0 6px}
.cuando{display:block;font:600 11.5px/1.3 var(--romana);letter-spacing:.2em;text-transform:uppercase;color:var(--sello);margin-bottom:14px}
.noche .cuando{color:var(--sello-vivo)}

/* ── Proyectos: nichos con arco */
.productos{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);align-items:stretch}
.producto{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-height:560px;
  padding:64px 26px 36px;border-radius:999px 999px 22px 22px / 190px 190px 22px 22px;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.producto:hover{transform:translateY(-8px)}
.producto .emblema{width:96px;height:96px;margin-bottom:10px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.producto:hover .emblema{transform:scale(1.08)}
.producto h3{font-size:clamp(40px,3.8vw,52px);line-height:1;margin-top:22px}
.producto p{margin:0;font-size:16px;max-width:34ch;flex:1}
.producto .mas{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:10px;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.producto .mas .flecha{transition:transform .2s}
.producto:hover .mas .flecha{transform:translateX(5px)}
.producto.vigia{background:var(--noche);color:var(--hueso)}
.producto.vigia p{color:var(--suave-osc)}
.producto.vigia .vivo,.producto.vigia .emblema{color:var(--sello-vivo)}
.producto.sisifo{background:var(--sello);color:var(--hueso)}
.producto.sisifo p{color:rgba(236,230,220,.86)}
.producto.sisifo .emblema{color:var(--hueso)}
.producto.ariadna,.producto.admin{background:var(--carta);color:var(--tinta);border:1px solid var(--linea)}
.producto.ariadna p,.producto.admin p{color:var(--tinta-2)}
.etiqueta{font:600 11px/1 var(--romana);letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.fila-dos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.cuenta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:30px 34px}
.cuenta p{max-width:560px}
.cuenta.proximo{background:transparent;border:1.5px dashed var(--gris)}

/* ── Por qué Panoptes */
.historia{text-align:center;padding:130px 0}
.historia .emblema{width:84px;height:84px;margin:0 auto 30px}
.historia h2{max-width:16ch;margin:0 auto 26px}
.historia .lead{margin:0 auto}

/* ── Argos y la banda de acciones sola */
#argos .nota{max-width:60ch}
.acciones.sola{margin-top:26px}

/* ── Conecta tu IA */
.beta{display:inline-block;font:700 11px/1 var(--romana);letter-spacing:.18em;text-transform:uppercase;padding:5px 8px;border:1px solid currentColor;border-radius:4px;color:var(--sello-vivo);vertical-align:middle;margin-left:6px}
.beta.oscuro{color:var(--sello);font-size:10px;margin-left:8px}
.partes-ia{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start}
.partes-ia h2{font-size:clamp(36px,4.6vw,62px)}
.partes-ia .lead + .lead{margin-top:16px}
.partes-ia .acciones{margin-top:34px}
.noche .nota{color:var(--suave-osc)}
.ia-lista{margin:0;display:grid}
.ia-lista div{padding:26px 0;border-top:1px solid var(--linea-osc)}
.ia-lista div:last-child{border-bottom:1px solid var(--linea-osc)}
.ia-lista dt{font:600 30px/1.1 var(--clasica);margin-bottom:8px}
.ia-lista dd{margin:0;color:var(--suave-osc);font-size:16px}
.tarjeta.ia{margin-top:40px}

/* ── Ariadna: el caso de ejemplo */
.caso{position:relative;margin:0;background:var(--carta);color:var(--tinta);border-radius:20px;padding:10px;
  box-shadow:0 40px 90px -40px rgba(212,64,79,.5);transform:rotate(1.2deg)}
.caso-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 16px}
.caso-cab b{display:block;font:700 24px/1.1 var(--clasica);margin-bottom:6px}
.caso-cab small{display:block;font-size:12.5px;line-height:1.4;color:var(--gris)}
.caso-cab .vivo{color:var(--sello);margin-top:6px}
.caso ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.caso li::marker{content:none}
.caso li{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.caso li b{display:block;font:600 15.5px/1.3 var(--texto)}
.caso li small{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}
.caso li.hecha b{text-decoration:line-through;text-decoration-color:var(--gris)}
.marca-hecha{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gris);display:grid;place-items:center;font:700 12px/1 var(--texto);font-style:normal;color:var(--hueso)}
.hecha .marca-hecha{background:var(--sello);border-color:var(--sello)}
.legal{font:700 10px/1 var(--romana);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border:2px double var(--sello);border-radius:6px;color:var(--sello);white-space:nowrap}
.caso .avance{margin:8px 6px 0;padding:14px 12px 4px;border-top:1px solid var(--linea);font-size:14.5px;color:var(--tinta-2)}
.caso .avance small{display:block;font-size:12px;color:var(--gris);margin-bottom:3px}
.caso figcaption{font-size:12.5px;color:var(--gris);padding:10px 16px 8px}

/* ── Vigía: el aviso de ejemplo */
.alerta{position:relative;margin:0;background:var(--carta);color:var(--tinta);border-radius:20px;padding:10px;
  box-shadow:0 40px 90px -40px rgba(212,64,79,.5);transform:rotate(1.2deg)}
.alerta-cab{display:flex;align-items:center;gap:10px;padding:14px 16px 16px;font-size:13.5px;color:var(--tinta-2)}
.alerta-cab .vivo{color:var(--sello)}
.alerta-cab .hora{margin-left:auto}
.alerta ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alerta li::marker{content:none}
.alerta li{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:1fr auto 1fr;gap:4px 14px;align-items:center}
.alerta b{display:block;font:700 23px/1.1 var(--clasica);letter-spacing:.01em}
.alerta small{display:block;font-size:12.5px;color:var(--gris)}
.alerta .vs{font:italic 500 17px var(--clasica);color:var(--gris)}
.alerta .tuya{text-align:right}
.alerta .por{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.alerta .por span{font-size:12px;font-weight:500;padding:5px 10px;border-radius:99px;background:var(--piedra);color:var(--tinta-2)}
.alerta .por .fuerte{background:var(--sello);color:var(--hueso)}
.alerta figcaption{font-size:12.5px;color:var(--gris);padding:14px 16px 8px}
.visto-sello{position:absolute;right:-16px;bottom:-30px;z-index:2;padding:10px 14px;border:3px double var(--sello);border-radius:8px;
  color:var(--sello);font:700 15px/1.05 var(--romana);letter-spacing:.14em;text-transform:uppercase;text-align:center;
  transform:rotate(-11deg);background:color-mix(in srgb,var(--carta) 80%,transparent)}
.visto-sello small{display:block;font:600 10px/1 var(--romana);letter-spacing:.1em;margin-top:5px}

/* ── Hero de producto: su emblema */
.emblema-hero{width:64px;height:64px;margin:0 0 26px}

/* ── Conecta tu IA: el chat de ejemplo */
.ia-lista.tres{grid-template-columns:repeat(3,1fr);gap:0 36px;margin-top:80px}
.ia-lista.tres div:last-child{border-bottom:0}
.ia-lista.tres div{border-bottom:0}
.chat{position:relative;margin:0;background:var(--carta);color:var(--tinta);border-radius:20px;padding:10px;
  box-shadow:0 40px 90px -40px rgba(212,64,79,.5);transform:rotate(-1.2deg)}
.chat-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 16px;font-size:13px;color:var(--gris)}
.chat-cab .vivo{color:var(--sello)}
.chat-cuerpo{display:grid;gap:10px;padding:16px;background:var(--papel);border:1px solid var(--linea);border-radius:14px}
.mio,.suyo{margin:0;max-width:90%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.mio{justify-self:end;background:var(--boton);color:var(--hueso);border-bottom-right-radius:4px}
.suyo{background:var(--carta);border:1px solid var(--linea);border-bottom-left-radius:4px;display:grid;gap:9px;color:var(--tinta)}
.suyo p{margin:0;font-size:inherit;color:inherit}
.lineas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lineas li{display:grid;grid-template-columns:1fr auto;gap:1px 10px;background:var(--papel);border:1px solid var(--linea);border-radius:9px;padding:8px 10px}
.lineas li::marker{content:none}
.lineas b{font-weight:600}
.lineas span{font:600 12.5px/1.4 var(--texto);color:var(--sello);white-space:nowrap}
.lineas small{grid-column:1/-1;font-size:12.5px;color:var(--gris)}
.chat figcaption,.tablero figcaption,.ext figcaption{font-size:12.5px;color:var(--gris);padding:12px 16px 8px}

/* ── Argos: el tablero de ejemplo */
.tablero{position:relative;margin:0;background:var(--carta);color:var(--tinta);border-radius:20px;padding:10px;
  box-shadow:0 40px 90px -40px rgba(212,64,79,.5);transform:rotate(1.2deg)}
.tablero-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 16px;font-size:12.5px;color:var(--gris)}
.tablero-cab b{display:block;font:700 24px/1.1 var(--clasica);color:var(--tinta);margin-bottom:6px}
.tablero-cab .vivo{color:var(--sello);margin-top:6px}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 6px}
.cifras div{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:10px 12px}
.cifras strong{display:block;font:600 18px/1.1 var(--romana);margin-bottom:3px}
.cifras span{font-size:12px;color:var(--gris)}
.cifras .r strong{color:var(--sello)}
.tablero table{width:calc(100% - 12px);margin:14px 6px 0;border-collapse:collapse;font-size:13px}
.tablero caption{text-align:left;font:600 11px/1 var(--romana);letter-spacing:.18em;text-transform:uppercase;color:var(--sello);padding:2px 0 8px}
.tablero th{font-weight:500;color:var(--gris);text-align:right;font-size:11.5px;padding:3px 6px}
.tablero td{padding:7px 6px;border-top:1px solid var(--linea);text-align:right;font-variant-numeric:tabular-nums}
.tablero th:first-child,.tablero td:first-child{text-align:left;padding-left:0}
.tablero td:first-child{font-weight:600}
.tablero .r{color:var(--sello);font-weight:600}

/* ── Vigía: la extensión de ejemplo */
.ext{margin:0 0 56px}
.ext-grilla{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}
.ext-flecha{font:500 30px/1 var(--clasica);color:var(--sello)}
.ext-vent{background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(14,12,12,.5);align-self:stretch;display:flex;flex-direction:column}
.ext-barra{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--piedra);border-bottom:1px solid var(--linea);font-size:12px;color:var(--tinta-2)}
.ext-barra i{width:9px;height:9px;border-radius:50%;background:var(--linea);flex:none}
.ext-barra span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-cuerpo{padding:18px 16px;display:grid;gap:10px;align-content:start;flex:1}
.ext-cuerpo small{font-size:12px;color:var(--gris)}
.ext-cuerpo b.marca-ej{font:700 28px/1 var(--clasica)}
.ext-btn{justify-self:start;font:600 13px/1 var(--texto);padding:9px 14px;border-radius:5px;background:var(--boton);color:var(--hueso)}
.ext-campo{border:1px solid var(--linea);border-radius:6px;padding:9px 12px;font-size:14px;background:var(--papel)}
.ext-pop{border:1.5px solid var(--sello);border-radius:10px;padding:12px 14px;background:var(--carta);display:grid;gap:7px;font-size:13px}
.ext-pop strong{font:700 11px/1 var(--romana);letter-spacing:.16em;text-transform:uppercase;color:var(--sello);margin-bottom:2px}
.ext-pop p{margin:0;font-size:13px;color:var(--tinta-2);display:flex;gap:8px}
.ext-pop p::before{content:"○";color:var(--gris)}
.ext-pop p.ok::before{content:"✓";color:var(--sello);font-weight:700}
.ext-pop p.ahora::before{content:"●";color:var(--sello);animation:latir 1.8s ease-in-out infinite}
.ext-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ext-lista li{background:var(--papel);border:1px solid var(--linea);border-radius:9px;padding:8px 10px;display:flex;justify-content:space-between;gap:10px;font-size:13px}
.ext-lista li::marker{content:none}
.ext-lista li b{font-weight:600}
.ext-lista li span{color:var(--gris);font-size:12px;white-space:nowrap}

.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linea)}
.modos.dos{grid-template-columns:repeat(2,1fr)}
.modos > div{padding:34px 30px 38px 0}
.modos > div + div{padding-left:30px;border-left:1px solid var(--linea)}
.modos h3{font-size:32px;margin-bottom:8px}
.modos p{margin:0;color:var(--tinta-2)}

.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:90px 0 0}
.cabeza-sec + .pasos{margin-top:0}
.pasos li{counter-increment:paso;padding:0 22px 0 0}
.pasos li + li{padding-left:22px;border-left:1px solid var(--linea)}
.pasos li::before{content:counter(paso,upper-roman);display:block;font:600 48px/1 var(--clasica);color:var(--sello);margin-bottom:14px}
.pasos strong{display:block;font-size:18px;margin-bottom:4px}
.pasos span{color:var(--tinta-2);font-size:15px}

/* ── Planes */
.planes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.planes.tres{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.plan{display:flex;flex-direction:column;padding:32px 26px}
.plan h3{font:700 13px/1 var(--romana);letter-spacing:.22em;text-transform:uppercase;margin:0}
/* Las cifras de Cormorant son de estilo antiguo (el 0 parece una o): precios y datos van en Cinzel. */
.precio{font:600 46px/1 var(--romana);letter-spacing:-.01em;margin:20px 0 2px}
.precio small{display:block;font:400 14px/1.4 var(--texto);letter-spacing:0;color:var(--gris);margin-top:6px}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;font-size:15px}
.plan li{padding:9px 0;border-top:1px solid var(--linea);display:flex;gap:10px}
.plan li::before{content:"✦";font-size:10px;line-height:2.3;color:var(--sello)}
.plan li.no{color:var(--gris);text-decoration:line-through;text-decoration-color:var(--linea)}
.plan li.no::before{content:"–";font-size:15px;line-height:1.6;color:var(--gris)}
.plan .btn{margin-top:auto;justify-content:center}
.plan.destacado{background:var(--noche);color:var(--hueso);border-color:var(--noche);transform:translateY(-12px)}
.plan.destacado li{border-color:var(--linea-osc)}
.plan.destacado li::before{color:var(--sello-vivo)}
.plan.destacado li.no{color:var(--suave-osc)}
.plan.destacado .precio small{color:var(--suave-osc)}
.empresa{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 28px}
.nota{font-size:14px;color:var(--gris);margin:30px 0 0;max-width:720px}
.incluido{max-width:560px}
.incluido table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.incluido th{text-align:left;font:600 11px/1 var(--romana);letter-spacing:.18em;text-transform:uppercase;color:var(--sello);padding:0 14px 10px 0}
.incluido td{padding:10px 14px 10px 0;border-top:1px solid var(--linea)}
.incluido td:first-child{font-weight:600}
.incluido small{color:var(--gris);font-size:13.5px}
.sub-precios{margin:96px 0 34px;max-width:720px}
.sub-precios h3{font-size:clamp(30px,3vw,40px);margin:0 0 10px}
.sub-precios p{margin:0;color:var(--tinta-2)}
.plan li.gratis{color:var(--sello);font-weight:600}

/* ── Sísifo: la semana de ejemplo */
.semana{margin:0;background:var(--noche);color:var(--hueso);border-radius:20px;padding:24px;box-shadow:0 40px 80px -40px rgba(14,12,12,.8);transform:rotate(-1.2deg)}
.semana-cab{display:flex;justify-content:space-between;font-size:13px;color:var(--suave-osc);margin-bottom:18px}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dia{display:flex;flex-direction:column;gap:5px;min-height:190px}
.dia > span{font:600 11px/1 var(--romana);color:var(--suave-osc);text-align:center;margin-bottom:4px}
.bloque{border-radius:7px;background:var(--sello-vivo);color:var(--noche);font:600 10.5px/1.2 var(--texto);font-style:normal;padding:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bloque.b{background:var(--hueso)}
.bloque.c{background:transparent;border:1px dashed var(--suave-osc);color:var(--suave-osc)}
.semana-pie{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--linea-osc)}
.semana-pie strong{display:block;font:600 26px/1 var(--romana)}
.semana-pie span{font-size:12.5px;color:var(--suave-osc)}
.semana-pie .r{color:var(--sello-vivo)}
.semana .ejemplo{font-size:12.5px;color:var(--suave-osc);margin:16px 0 0}

.funciones{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea)}
.funciones > div{padding:32px 28px 36px 0;border-bottom:1px solid var(--linea)}
.funciones > div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--linea)}
.funciones h3{font-size:32px;margin:0 0 8px}
.funciones p{margin:0;color:var(--tinta-2);font-size:15.5px}

.informes{display:grid;grid-template-columns:.8fr 1.6fr;gap:48px}
.informes h2{font-size:clamp(34px,4vw,52px)}
.informes > div > p:not(.rotulo){color:var(--tinta-2);margin:0}
.informes dl{display:grid;gap:0 32px;grid-template-columns:1fr 1fr;margin:0}
.informes dl div{padding:16px 0;border-top:1px solid var(--linea)}
.informes dt{font-weight:600;margin-bottom:3px}
.informes dd{margin:0;color:var(--tinta-2);font-size:15px}

/* ── Cierre */
.cierre{padding:130px 0 110px;text-align:center}
.cierre .emblema{width:72px;height:72px;margin:0 auto 26px}
.cierre h2{font-size:clamp(64px,11vw,150px);line-height:.9;margin:0 0 34px}
.cierre .correo{display:inline-block;font:italic 500 clamp(26px,4vw,46px)/1.1 var(--clasica);text-decoration:none;
  border-bottom:1.5px solid var(--sello-vivo);padding-bottom:4px;margin-bottom:30px;transition:color .15s}
.cierre .correo:hover{color:var(--sello-vivo)}
.cierre .lead{margin:0 auto 34px}
.cierre .acciones{justify-content:center}

footer{background:var(--noche);color:var(--suave-osc);padding:34px 0;font-size:14px}
footer .meandro{margin-bottom:34px}
footer .envoltura{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
footer .emblema{width:26px;height:26px;color:var(--sello-vivo)}
footer .nombre{font:700 13px var(--romana);letter-spacing:.2em;color:var(--hueso)}
footer em{font:italic 500 17px var(--clasica)}
footer .derecha{margin-left:auto}
footer .aviso-pie{opacity:.8}
.pie-enlaces{display:flex;gap:6px 24px;flex-wrap:wrap;margin-left:auto}
.pie-enlaces a{text-decoration:none;color:var(--hueso);opacity:.8;font-size:14.5px}
.pie-enlaces a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--sello-vivo);text-underline-offset:5px}
footer .corte{flex-basis:100%;height:0}

/* ── Términos y privacidad */
.portada.corta{padding:90px 0 80px}
.texto-legal{max-width:780px}
.texto-legal .version{font:600 12px/1.5 var(--romana);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:0 0 30px}
.texto-legal h2{font-size:clamp(28px,3.4vw,36px);margin:56px 0 14px;scroll-margin-top:90px}
.texto-legal ul,.texto-legal ol{padding-left:22px}
.texto-legal li{margin:6px 0}
.texto-legal a{text-decoration-color:var(--sello);text-underline-offset:3px}
.texto-legal .tabla{overflow-x:auto;margin:18px 0}
.texto-legal table{width:100%;border-collapse:collapse;font-size:15px}
.texto-legal th{text-align:left;font-weight:600;color:var(--tinta-2);padding:8px 14px 8px 0;border-bottom:1px solid var(--linea)}
.texto-legal td{padding:10px 14px 10px 0;border-bottom:1px solid var(--linea);vertical-align:top}
footer .aviso-pie a,footer .derecha a{text-decoration:none;color:var(--hueso)}
footer .aviso-pie a:hover,footer .derecha a:hover{text-decoration:underline;text-decoration-color:var(--sello-vivo);text-underline-offset:5px}

/* Minirrocas de un ojo, como la de Sísifo, regadas al azar por detrás del contenido: parpadean y
   siguen el cursor. */
body{position:relative}
.envoltura{position:relative;z-index:1}
.rocas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.minirroca{position:absolute;color:var(--sello-vivo)}
.minirroca svg{display:block;width:100%;height:100%}
.minirroca .parpado{transform-box:fill-box;transform-origin:center;animation:parpadeo var(--ritmo,5s) infinite}
.minirroca .iris{transition:transform .3s ease-out}

@media (max-width:960px){
  .productos{grid-template-columns:1fr 1fr}
  .fila-dos{grid-template-columns:1fr}
  .barra nav{gap:16px;font-size:14px}
  .portada .partes,.partes-ia,.informes,.cabeza-sec{grid-template-columns:1fr;gap:40px}
  .cabeza-sec .lead{justify-self:start}
  .funciones,.modos{grid-template-columns:1fr 1fr}
  .funciones > div,.modos > div{padding:28px 20px 30px 0!important;border-left:0!important}
  .funciones > div:nth-child(even),.modos > div:nth-child(even){padding-left:20px!important;border-left:1px solid var(--linea)!important}
  .gran-emblema{display:none}
  .ia-lista.tres{grid-template-columns:1fr;margin-top:40px}
  .ext-grilla{grid-template-columns:1fr}
  .ext-flecha{transform:rotate(90deg);justify-self:center}
  .pasos{grid-template-columns:1fr 1fr;gap:36px 0}
  .pasos li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){
  /* El menú pasa a una segunda fila que se desliza, como las pestañas de las apps. */
  .barra{flex-wrap:wrap;height:auto;gap:0 16px;padding-top:12px}
  .barra nav{order:3;flex-basis:100%;margin-left:0;gap:20px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:2px 0 6px}
  .barra nav::-webkit-scrollbar{display:none}
  /* El nav se desliza y recortaría el desplegable: se ancla a la barra entera. */
  .soluciones{position:static}
  .desplegable{left:20px;right:20px;width:auto;transform:none;top:100%;white-space:normal}
  .barra .btn{margin-left:auto}
  .barra .largo{display:none}
  section{padding:84px 0}
  .portada{padding:70px 0 80px}
  .portada.corta{padding:56px 0 64px}
  .productos,.funciones,.modos,.modos.dos,.informes dl{grid-template-columns:1fr}
  .caso li{grid-template-columns:auto 1fr}
  .caso .legal{grid-column:2;justify-self:start}
  .cuenta{padding:26px 24px}
  .funciones > div,.modos > div,.funciones > div:nth-child(even),.modos > div:nth-child(even){padding:26px 0!important;border-left:0!important}
  .producto{min-height:440px;padding:56px 26px 32px;border-radius:999px 999px 20px 20px / 170px 170px 20px 20px}
  .alerta li{grid-template-columns:1fr;gap:2px}
  .cifras{grid-template-columns:1fr 1fr}
  .tablero table{font-size:12px}
  .mio,.suyo{max-width:100%}
  .historia{padding:90px 0}
  .alerta .tuya{text-align:left}
  .plan.destacado{transform:none}
  .dia{min-height:150px}
  .bloque{font-size:0;padding:0;min-height:14px}
  .semana-pie strong{font-size:19px}
  .rotulo{letter-spacing:.18em;font-size:12px;line-height:1.5;flex-wrap:wrap;gap:6px 14px}
}