/* KIVORA · web-01 · base común a las tres propuestas */
:root{
  --ink:#14111F; --paper:#FBFAFF; --mist:#EEEBF6; --line-d:rgba(20,17,31,.10); --line-l:rgba(255,255,255,.12);
  --violet:#5A4BFF; --lav:#D9D2FF; --coral:#FF5E45; --pine:#0F3A2A; --mint:#36B77F; --cream:#EEF6D2;
  --night:#0D0A1C; --plum:#170A12;
  --display:"Space Grotesk",system-ui,sans-serif; --text:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r-xl:32px; --r-l:24px; --r-m:18px;
  --gut:clamp(16px,4vw,56px); --max:1400px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{font:16px/1.6 var(--text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font:500 11px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.mut{opacity:.74}
h1,h2,h3,.disp{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1}
.t-xxl{font-size:clamp(52px,7.4vw,112px)}
.t-xl{font-size:clamp(40px,5vw,76px)}
.t-l{font-size:clamp(30px,3.4vw,50px);line-height:1.02}
.t-m{font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:560px}

/* materia: lienzo que llena su contenedor */
.mat{position:relative;overflow:hidden;isolation:isolate}
.mat>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}

/* componentes «Trato» */
.card{border-radius:var(--r-l);padding:22px}
.card.w{background:var(--paper);color:var(--ink)}
.card.g{background:rgba(255,255,255,.08);color:#F2F0FA;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.shadow{box-shadow:0 30px 70px -30px rgba(10,6,30,.55)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:12px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:99px;font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer;border:0;font-family:var(--text)}
.btn.l{background:#F4F2FA;color:var(--ink)}
.btn.d{background:var(--ink);color:#fff}
.btn.o{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.bub{padding:11px 15px;border-radius:22px;font-size:14px;max-width:84%;line-height:1.38}
.bub.in{border-bottom-left-radius:7px}
.bub.out{border-bottom-right-radius:7px;margin-left:auto}
.li{display:flex;gap:10px;align-items:center;font-size:14px}

/* navegación */
.nav{display:flex;align-items:center;gap:30px;padding:26px 0;font-size:14.5px}
.nav .links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav .links a{opacity:.8}
.nav .btn{padding:9px 18px;font-size:14px}

/* etiqueta honesta para ejemplos */
.ej{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px currentColor;opacity:.82;white-space:nowrap}

.review{position:fixed;left:16px;bottom:16px;z-index:99;font:500 11px var(--mono);background:#000c;color:#ddd;border-radius:99px;padding:7px 12px}
.review a{color:#fff;margin-left:10px;text-decoration:underline}

@media (max-width:900px){.nav{flex-wrap:wrap;row-gap:10px}.nav .links{width:100%;margin-left:0;gap:8px 18px;flex-wrap:wrap}.nav .links a{font-size:14px}}
.page [data-vh]{min-height:860px!important;height:860px}

/* web-08 · ajustes del sistema «Ingeniería»: Space Grotesk es más ancha que Rubik → titulares grandes un 4–6 % menores */
.t-xxl{font-size:clamp(48px,7vw,104px)}.t-xl{font-size:clamp(38px,4.7vw,72px)}.t-l{font-size:clamp(28px,3.2vw,48px);line-height:1.04}
.btn{font-weight:500;letter-spacing:.005em}

/* web-08 · móvil: nada puede ensanchar la página (antes la etiqueta de Ruta 503 y la barra de revisión forzaban 494 px) */
/* web-09 · marcadores internos (pendientes de validación): visibles en revisión, ocultos en la vista previa */
.int{display:inline-block;font:500 10.5px/1.5 var(--mono);letter-spacing:.04em;text-transform:none;background:#ffd84d;color:#1a1400;border:1.5px dashed #1a1400;border-radius:10px;padding:4px 10px;margin:6px 0;max-width:100%}
.int::before{content:'PENDIENTE · '}
html.preview .nar,html.preview .review,html.preview .int,html.preview .int-only,html.preview .tph{display:none!important}
.pv-btn{position:fixed;right:16px;bottom:16px;z-index:100;display:inline-flex;gap:8px;align-items:center;min-height:44px;font:500 13px var(--text);background:#ffd84d;color:#1a1400;border:0;border-radius:99px;padding:10px 18px;cursor:pointer;box-shadow:0 10px 30px -10px #000a}
html.preview .pv-btn{background:rgba(20,17,31,.72);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pv-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:600px){.pv-btn{bottom:104px;right:12px;font-size:12px;padding:8px 14px}html.preview .pv-btn{bottom:16px}}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (max-width:600px){.ej{white-space:normal}.review{right:16px;line-height:1.9}.main-h{flex-direction:column;align-items:flex-start;gap:12px}}

/* web-10 · contacto por correo: CTA mailto + dirección visible y copiable */
.mailbox{display:grid;gap:14px;justify-items:start}
.mail-cta{min-height:52px;font-size:16px}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.mail-addr{font:500 clamp(17px,1.6vw,21px)/1.3 var(--mono);letter-spacing:0;-webkit-user-select:all;user-select:all;cursor:text;overflow-wrap:anywhere}
.mail-copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:99px;border:0;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;font:500 14px var(--text);cursor:pointer}
.mail-copy:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.mail-copy.done::after{content:'✓'}
.mail-copy:focus-visible,.mail-cta:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.mail-st{font-size:13px;min-height:20px;margin:0}
.mail-note{font-size:13px;opacity:.75;max-width:420px}

/* Ocultar controles internos */
.nar,.review,.int,.int-only,.tph,.pv-btn{display:none!important}

.btn{transition:filter .2s,transform .2s}.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.nav .links a:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.btn,.hx .hx-wm,.hx .links,.hx-in{transition:none!important}.btn:hover{transform:none}}