/* ============================================================================
   MARCA SIEMON · hoja compartida de Siemon Studio
   ----------------------------------------------------------------------------
   Fuente: Sistema de diseño de Siemon Digital, edición 01 (2026), ya ingerido al
   RAG como `marca-siemon-sistema-diseno`. Los tokens son LOS MISMOS de
   siemondigital.com/styles.css, para que la portada, la app y los legales se
   sientan de la misma mano que la web.

   Doctrina que hay que respetar al tocar esto:
   - Aether #B1A3E1 es el color principal. Obsidiana es el lienzo.
   - Proporción 60 / 30 / 10: obsidiana 60, neutros 30, aether 10.
     El lavanda NUNCA satura la composición: acentúa los momentos clave.
   - Jerarquía por TAMAÑO y AIRE, no por estridencia.
   - Contenido primero, animación después. Menos, pero mejor.
   - Mont es la familia de marca; Montserrat es su sustituta libre.
   ============================================================================ */

:root{
  --obsidian:#0A0B0D; --carbon:#15161A; --graphite:#23252B;
  --ash:#8B8D98; --mist:#C9CAD2; --white:#FFFFFF;
  --cream:#E9E5DD; --charcoal:#38383A;
  --aether-100:#E2DCF5; --aether-200:#CBC0EC; --aether:#B1A3E1;
  --aether-500:#8474BE; --aether-700:#534673;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.18);
  --on-accent:#0A0B0D;                     /* texto SOBRE el botón lavanda */
  --nav-bg:rgba(10,11,13,.90);
  --surface:rgba(21,22,26,.5); --surface-2:rgba(21,22,26,.7);
  --surface-hover:rgba(35,37,43,.7);
  --ok:#7FB89B; --warn:#E1C45C; --error:#E18A8A;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Montserrat",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  /* espaciado base 4/8, ritmo predecible */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s48:48px; --s64:64px; --s96:96px;
  --r6:6px; --r10:10px; --r14:14px; --r22:22px; --rpill:999px;
}

/* Tema claro: cambian los VALORES, nunca los nombres, para que ninguna regla
   de abajo tenga que saber en qué tema está. Mismos valores que la web. */
[data-theme="light"]{
  --obsidian:#F4F1EA; --carbon:#FFFFFF; --graphite:#E4E0D5; --charcoal:#D8D4C8;
  --ash:#6E6F77; --mist:#45464D; --white:#14151A; --cream:#2A2B31;
  --aether-100:#5B4C90; --aether-200:#8A78C0; --aether:#6E5CA6;
  --aether-500:#6E5CA6; --aether-700:#BCB1DE;
  --line:rgba(20,20,26,0.12); --line-2:rgba(20,20,26,0.20);
  --on-accent:#FFFFFF;
  --nav-bg:rgba(244,241,234,.90);
  --surface:#FFFFFF; --surface-2:#FBFAF6; --surface-hover:#F0EDE4;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);
 font-size:16px;line-height:1.65;font-weight:400;overflow-x:hidden;
 -webkit-font-smoothing:antialiased;
 transition:background-color .25s ease,color .25s ease}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

/* ---------------- tipografía, la escala del sistema ---------------- */
.display{font-size:clamp(40px,7.4vw,76px);line-height:1.0;font-weight:300;letter-spacing:-.025em}
h1,.h1{font-size:clamp(32px,5.2vw,48px);line-height:1.04;font-weight:700;letter-spacing:-.018em}
h2,.h2{font-size:clamp(26px,3.8vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.012em}
h3,.h3{font-size:20px;line-height:1.2;font-weight:600}
.body-l{font-size:18px;line-height:1.6;font-weight:300;color:var(--mist)}
.caption{font-size:13px;line-height:1.5;font-weight:500;color:var(--ash)}

/* Micro-etiqueta de sección: mono, y el prefijo // en aether-500. Es lo que da
   el acento técnico y ordena la lectura. */
.micro{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
 color:var(--ash);display:inline-flex;gap:.6em;align-items:center}
.micro::before{content:"//";color:var(--aether-500);letter-spacing:0}

/* ---------------- rejilla ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s24)}
section{padding:var(--s96) 0;border-top:1px solid var(--line)}
.sec-top{max-width:62ch;margin-bottom:var(--s48)}
.sec-top .micro{margin-bottom:var(--s16)}
.sec-top p{margin-top:var(--s16);font-size:18px;line-height:1.6;font-weight:300;color:var(--mist)}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
 font-family:inherit;font-size:15px;font-weight:600;border-radius:var(--rpill);
 padding:13px 24px;border:1px solid var(--line-2);background:transparent;color:var(--cream);
 cursor:pointer;transition:.2s;white-space:nowrap;text-align:center}
.btn:hover{border-color:var(--aether);color:var(--white);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--aether);outline-offset:2px}
.btn:disabled{opacity:.5;transform:none;cursor:default}
.btn.pri{background:var(--aether);color:var(--on-accent);border-color:transparent}
.btn.pri:hover{background:var(--aether-200);color:var(--on-accent)}
.btn.grande{font-size:16px;padding:16px 30px}
.btn.ancho{width:100%}
.enlace{background:none;border:none;color:var(--aether);font-size:14px;font-weight:600;
 padding:10px 2px;cursor:pointer;font-family:inherit;width:auto;min-height:auto}
.enlace:hover{text-decoration:underline}

/* ---------------- superficies ---------------- */
.caja{background:var(--surface);border:1px solid var(--line);border-radius:var(--r14);
 padding:var(--s32);transition:border-color .2s,transform .2s,background-color .25s}
.caja.chica{padding:var(--s24)}
.caja:hover.hover{border-color:var(--line-2);transform:translateY(-2px)}
.rejilla{display:grid;gap:var(--s16);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

input[type=text],input[type=email],input[type=password],input[type=url],textarea{
 width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--cream);
 border-radius:var(--r10);padding:14px var(--s16);font-family:inherit;font-size:16px;
 outline:none;margin-bottom:var(--s12);transition:border-color .2s,background-color .25s}
input::placeholder,textarea::placeholder{color:var(--ash)}
input:focus,textarea:focus{border-color:var(--aether)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--aether);margin:0}

/* ---------------- interruptor de tema · el mismo de siemondigital.com ------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
 border:1px solid var(--line-2);border-radius:var(--rpill);background:transparent;color:var(--mist);
 cursor:pointer;transition:.2s;flex:none;padding:0}
.theme-toggle:hover{color:var(--white);border-color:var(--aether);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--aether);outline-offset:2px}
.theme-toggle svg{display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
[data-theme="light"] .theme-toggle .ic-moon{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:block}

/* ---------------- barra ---------------- */
.barra{position:sticky;top:0;z-index:30;background:var(--nav-bg);
 backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;
 transition:border-color .3s,background-color .25s}
.barra.pegada{border-bottom-color:var(--line)}
.barra .wrap{display:flex;align-items:center;gap:var(--s12);height:66px}
.barra .logo{height:26px}
.barra .nom{font-weight:700;font-size:15px}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:var(--s8)}

/* ---------------- utilidades ---------------- */
.ok{color:var(--ok)}
.aviso{color:var(--warn)}
.mono{font-family:var(--mono)}
.reveal{opacity:0;transform:translateY(20px);
 transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none !important}
}
@media (max-width:620px){
  section{padding:var(--s64) 0}
  .wrap{padding:0 var(--s16)}
  .caja{padding:var(--s24)}
}

/* ---------------- logotipo, construido como manda el sistema ----------------
   SIEMON en Bold con interletrado 0, y la segunda palabra en Regular con
   interletrado 0.454em. Es la misma construccion de SIEMON DIGITAL: la palabra
   ancha debajo o al lado es lo que hace que se lea como la marca y no como
   dos palabras cualesquiera. */
.marca{display:inline-flex;align-items:center;gap:10px;line-height:1}
/* El isotipo se pinta con el color del tema (en la web es fill:currentColor sobre
   var(--aether)). Como aqui es un archivo aparte, se usa como mascara: asi el simbolo
   toma el lavanda que toque en cada tema en vez de quedarse con el del archivo. */
.marca .iso{height:26px;width:24px;flex:none;background:var(--aether);
 -webkit-mask:url(/siemon-logo.svg) center/contain no-repeat;
 mask:url(/siemon-logo.svg) center/contain no-repeat}
.marca .letras{display:flex;flex-direction:column;gap:3px}
.marca .n1{font-weight:700;letter-spacing:0;font-size:15px;color:var(--cream);
 text-transform:uppercase}
.marca .n2{font-weight:400;letter-spacing:.454em;font-size:8.5px;color:var(--ash);
 text-transform:uppercase;margin-right:-.454em}
.marca.grande .iso{height:44px;width:40px}
.marca.grande .n1{font-size:25px}
.marca.grande .n2{font-size:13px}

/* ---------------- el juego visual del hero, el mismo de siemondigital.com --- */
@keyframes hero-pan{
  0%{background-position:0% 0%,100% 100%,50% 50%,0 0}
  100%{background-position:100% 100%,0% 0%,50% 50%,0 0}
}
.fondo-vivo{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
   radial-gradient(70% 90% at 80% 30%, rgba(177,163,225,.35), transparent 60%),
   radial-gradient(60% 80% at 20% 70%, rgba(132,116,190,.32), transparent 60%),
   radial-gradient(120% 120% at 50% 50%, rgba(83,70,115,.28), transparent 70%),
   linear-gradient(135deg,#0c0a14 0%,#1a1429 40%,#0a0b0d 100%);
 background-size:200% 200%,220% 220%,180% 180%,100% 100%;
 animation:hero-pan 24s ease-in-out infinite alternate}
/* El velo es lo que deja leer el texto sobre cualquier foto. Sin el, la marca
   se vuelve un cartel de banco de imagenes. */
.velo{position:absolute;inset:0;z-index:2;pointer-events:none;
 background:
   linear-gradient(90deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.80) 36%,
                          rgba(10,11,13,.45) 68%, rgba(10,11,13,.32) 100%),
   linear-gradient(0deg, rgba(10,11,13,.88) 0%, transparent 26%),
   radial-gradient(120% 90% at 50% 0%, rgba(10,11,13,.55), transparent 60%)}
/* Variante suave: se deja ver mas la foto y solo se protege la columna del texto. */
.velo.suave{background:
   linear-gradient(90deg, rgba(10,11,13,.90) 0%, rgba(10,11,13,.66) 42%,
                          rgba(10,11,13,.22) 74%, rgba(10,11,13,.06) 100%),
   radial-gradient(130% 80% at 12% 50%, rgba(10,11,13,.55), transparent 62%)}
[data-theme="light"] .velo.suave{background:
   linear-gradient(90deg, rgba(244,241,234,.93) 0%, rgba(244,241,234,.74) 42%,
                          rgba(244,241,234,.34) 74%, rgba(244,241,234,.12) 100%),
   radial-gradient(130% 80% at 12% 50%, rgba(244,241,234,.6), transparent 62%)}
[data-theme="light"] .velo{
 background:
   linear-gradient(90deg, rgba(244,241,234,.95) 0%, rgba(244,241,234,.86) 36%,
                          rgba(244,241,234,.55) 68%, rgba(244,241,234,.42) 100%),
   linear-gradient(0deg, rgba(244,241,234,.92) 0%, transparent 26%),
   radial-gradient(120% 90% at 50% 0%, rgba(244,241,234,.6), transparent 60%)}
[data-theme="light"] .fondo-vivo{
 background:
   radial-gradient(70% 90% at 80% 30%, rgba(110,92,166,.20), transparent 60%),
   radial-gradient(60% 80% at 20% 70%, rgba(138,120,192,.18), transparent 60%),
   linear-gradient(135deg,#EFEAE0 0%,#E6DFF3 40%,#F4F1EA 100%);
 background-size:200% 200%,220% 220%,100% 100%}