/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO Z7R — v1 (6-nov-2026, ZiR + Jackie)
   Ordenado como Material Design 3 (m3.material.io): VALORES BASE → ROLES → COMPONENTES.
   Regla: las páginas NO escriben colores, tamaños ni esquinas a mano: usan estos nombres.
   Cambiar algo acá lo cambia en toda la web. Muestrario vivo: sistema_diseno.html
   Reglas de marca que el sistema obliga:
     · SIN SOMBRAS en textos ni íconos (Jackie). La profundidad se marca con TONO y vidrio, nunca con sombra.
     · Morado = acento (palabra destacada, números, botón principal, estado activo). Nunca en etiquetas ni íconos.
     · Íconos: Material Symbols Redondeado, grosor 400, con relleno, en blanco.
     · Inter: títulos ExtraLight (200) · texto Light/Regular · destacados Light itálica (300) morada. Nunca bold.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 1. VALORES BASE (paleta de marca) ── */
  --z-ref-negro:#0D0C0A;
  --z-ref-carbon:#1E1E1E;
  --z-ref-grafito:#242326;
  --z-ref-humo:#34323a;
  --z-ref-gris:#8a878d;
  --z-ref-ceniza:#a9a7a6;
  --z-ref-hueso:#D6D5D3;
  --z-ref-blanco:#FFFFFF;
  --z-ref-morado-profundo:#4A2060;
  --z-ref-morado:#8B45D4;
  --z-ref-morado-claro:#9a58df;
  --z-ref-letra:Inter,system-ui,sans-serif;

  /* ── 2. COLOR POR ROLES ── */
  --z-superficie:var(--z-ref-carbon);                 /* fondo general */
  --z-superficie-honda:var(--z-ref-negro);            /* portada y pie, detrás de imágenes */
  --z-contenedor:var(--z-ref-grafito);                /* tarjetas, ventanas */
  --z-sobre-superficie:var(--z-ref-hueso);            /* texto principal, íconos */
  --z-sobre-superficie-fuerte:var(--z-ref-blanco);    /* títulos sobre imagen, texto sobre morado */
  --z-sobre-superficie-variante:var(--z-ref-ceniza);  /* bajadas, texto secundario */
  --z-tenue:var(--z-ref-gris);                        /* notas, pie, texto de apoyo */
  --z-borde:var(--z-ref-humo);                        /* bordes y divisores */
  --z-borde-vidrio:rgba(214,213,211,.14);             /* borde de piezas de vidrio */
  --z-borde-marcado:rgba(214,213,211,.35);            /* botón secundario, líneas de pasos */
  --z-principal:var(--z-ref-morado);                  /* acento */
  --z-principal-hover:var(--z-ref-morado-claro);
  --z-sobre-principal:var(--z-ref-blanco);
  --z-principal-contenedor:rgba(74,32,96,.5);         /* tinte del plan destacado */

  /* ── 3. PROFUNDIDAD POR TONO (en vez de sombra) ── */
  --z-nivel-0:var(--z-superficie);
  --z-nivel-1:var(--z-contenedor);
  --z-vidrio:rgba(30,30,30,.55);          /* menú, logo, botón secundario */
  --z-vidrio-denso:rgba(30,30,30,.62);    /* panel grande */
  --z-vidrio-tarjeta:rgba(36,35,38,.72);  /* tarjeta sobre imagen */
  --z-velo:rgba(13,12,10,.7);             /* detrás de una ventana abierta */
  --z-desenfoque-s:5px;
  --z-desenfoque-m:10px;
  --z-desenfoque-l:16px;

  /* ── 4. ESCALA TIPOGRÁFICA (5 niveles × tamaños, como M3) ── */
  --z-portada:clamp(38px,5.4vw,72px);     /* título de portada */
  --z-titular-l:clamp(34px,6vw,56px);     /* llamado al contacto */
  --z-titular-m:clamp(32px,5vw,46px);     /* título de sección */
  --z-titular-s:clamp(28px,4vw,40px);     /* frase de manifiesto suelta */
  --z-titulo-l:30px;                      /* nombre de plan */
  --z-titulo-m:24px;                      /* tarjeta extra */
  --z-titulo-s:20px;                      /* tarjeta, paso */
  --z-texto-l:17px;
  --z-texto-m:15px;
  --z-texto-s:13px;
  --z-etiqueta-l:14px;                    /* etiqueta de sección */
  --z-etiqueta-m:12px;                    /* etiqueta dentro de tarjeta */
  --z-numero-l:40px;                      /* 1·2·3 */
  --z-numero-m:34px;                      /* 01–04 */
  --z-peso-titulo:200;
  --z-peso-texto:300;
  --z-peso-normal:400;
  --z-peso-destacado:300;                 /* itálica morada */

  /* ── 5. FORMA (esquinas) ── */
  --z-forma-xs:3px;
  --z-forma-s:10px;
  --z-forma-m:14px;
  --z-forma-l:20px;
  --z-forma-completa:999px;

  /* ── 6. ESPACIO (múltiplos de 8, con medios pasos) ── */
  --z-esp-1:4px; --z-esp-2:8px; --z-esp-3:12px; --z-esp-4:16px; --z-esp-5:24px;
  --z-esp-6:32px; --z-esp-7:48px; --z-esp-8:72px; --z-esp-9:104px;
  --z-ancho:1040px;

  /* ── 7. MOVIMIENTO ── */
  --z-dur-corta:200ms;
  --z-dur-media:300ms;
  --z-dur-larga:600ms;
  --z-curva:cubic-bezier(.2,0,0,1);           /* estándar */
  --z-curva-enfatizada:cubic-bezier(.05,.7,.1,1);

  /* ── 8. ESTADOS (capa blanca encima, como M3) ── */
  --z-estado-hover:rgba(214,213,211,.08);
  --z-estado-foco:rgba(214,213,211,.12);
  --z-estado-presionado:rgba(214,213,211,.16);
  --z-anillo-foco:0 0 0 2px var(--z-superficie),0 0 0 4px var(--z-principal);  /* anillo de teclado: no es sombra, es contorno */
}

/* ── BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--z-superficie);color:var(--z-sobre-superficie);font:var(--z-peso-normal) var(--z-texto-l)/1.7 var(--z-ref-letra)}
h1,h2,h3,b,strong{font-weight:var(--z-peso-titulo)}
em{font-family:var(--z-ref-letra);font-style:italic;font-weight:var(--z-peso-destacado);color:var(--z-principal)}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--z-anillo-foco)}
@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;scroll-behavior:auto!important}}

/* ═══ COMPONENTES ═══ */

/* Etiqueta — título de segundo orden (sección o tarjeta). Color variante #a9a7a6 (Jackie, 6-nov), mayúsculas espaciadas. */
.eti{font-size:var(--z-etiqueta-l);letter-spacing:.28em;text-transform:uppercase;color:var(--z-sobre-superficie-variante)}
.eti.chica{font-size:var(--z-etiqueta-m);letter-spacing:.2em}

/* Ícono — 38 px (30 en pasos), línea 1,2, blanco. .f = relleno. */
.ico{width:38px;height:38px;fill:none;stroke:var(--z-sobre-superficie);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:var(--z-esp-4)}
.ico .f{fill:var(--z-sobre-superficie);stroke:none}
.ico.chico{width:30px;height:30px;margin-bottom:10px}
/* Ícono Material Symbols (6-nov, ZiR + Jackie): Redondeado, grosor 400, CON relleno, en blanco. Se escribe el nombre del ícono
   (fonts.google.com/icons) dentro de <span class="ico ms">. Al sumar uno nuevo, agregar su nombre a &icon_names= del <link> en el HTML. */
.ico.ms{width:auto;height:auto;font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:44px;line-height:1;letter-spacing:normal;
  text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  color:var(--z-sobre-superficie);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 40;user-select:none}
.ico.chico.ms{font-size:35px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Botón — principal (morado lleno) y secundario (.linea, vidrio con borde). Con estados. */
.btn{display:inline-block;position:relative;overflow:hidden;background:var(--z-principal);color:var(--z-sobre-principal);text-decoration:none;
  padding:16px 34px;border-radius:var(--z-forma-completa);letter-spacing:.02em;border:0;font:inherit;cursor:pointer;
  transition:background var(--z-dur-corta) var(--z-curva),border-color var(--z-dur-corta) var(--z-curva),color var(--z-dur-corta) var(--z-curva),transform var(--z-dur-corta) var(--z-curva)}
.btn:hover{background:var(--z-principal-hover)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn.linea{background:var(--z-vidrio);border:1px solid var(--z-borde-marcado);color:var(--z-sobre-superficie);
  -webkit-backdrop-filter:blur(var(--z-desenfoque-m));backdrop-filter:blur(var(--z-desenfoque-m))}
.btn.linea:hover{border-color:var(--z-principal);color:var(--z-sobre-superficie-fuerte);background:var(--z-vidrio)}

/* Cápsula — opción chica (4 · 8 · 12). */
.capsula{display:inline-block;border:1px solid var(--z-borde);border-radius:var(--z-forma-completa);padding:3px 12px;font-size:var(--z-texto-s)}

/* Tarjeta — contenedor nivel 1. .destacada = borde y tinte morado. .vidrio = sobre imagen. */
.tarjeta{background:var(--z-nivel-1);border:1px solid var(--z-borde);border-radius:var(--z-forma-m);
  transition:border-color var(--z-dur-media) var(--z-curva),background var(--z-dur-media) var(--z-curva)}
.tarjeta:hover{border-color:var(--z-borde-marcado)}
.tarjeta.destacada{border-color:var(--z-principal);background:linear-gradient(180deg,var(--z-principal-contenedor),var(--z-nivel-1) 60%)}
.tarjeta.vidrio{background:var(--z-vidrio-tarjeta);-webkit-backdrop-filter:blur(var(--z-desenfoque-s));backdrop-filter:blur(var(--z-desenfoque-s))}
.tarjeta.vidrio.destacada{background:linear-gradient(180deg,rgba(74,32,96,.55),var(--z-vidrio-tarjeta) 60%)}

/* Panel — vidrio grande que separa contenido de una imagen de fondo. */
.panel{border-radius:var(--z-forma-l);background:var(--z-vidrio-denso);border:1px solid rgba(214,213,211,.12);
  -webkit-backdrop-filter:blur(var(--z-desenfoque-m));backdrop-filter:blur(var(--z-desenfoque-m))}

/* Píldora de vidrio — menú y logo flotantes. */
.pildora{border-radius:var(--z-forma-completa);background:var(--z-vidrio);border:1px solid var(--z-borde-vidrio);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Enlace de navegación — dentro del menú. .aqui = sección actual. */
.nav-enlace{text-decoration:none;font-size:var(--z-etiqueta-l);letter-spacing:.02em;padding:9px 18px;border-radius:var(--z-forma-completa);color:var(--z-sobre-superficie-variante);
  transition:color var(--z-dur-corta) var(--z-curva),background var(--z-dur-corta) var(--z-curva)}
.nav-enlace:hover{color:var(--z-sobre-superficie);background:var(--z-estado-hover)}
.nav-enlace.aqui{background:var(--z-principal);color:var(--z-sobre-principal)}
.nav-enlace.aqui:hover{background:var(--z-principal-hover)}

/* Línea guía — trazo vertical que anuncia una frase del manifiesto. */
.linea-sup{width:1px;height:48px;margin:0 auto 26px;background:linear-gradient(180deg,transparent,var(--z-sobre-superficie))}

/* Campo de formulario — texto, correo, lista, área. */
.campo-eti{display:block;font-size:var(--z-texto-s);letter-spacing:.04em;color:var(--z-sobre-superficie-variante);margin:14px 0 6px}
.campo{width:100%;font:var(--z-peso-texto) 16px/1.5 var(--z-ref-letra);color:var(--z-sobre-superficie);background:var(--z-superficie);
  border:1px solid var(--z-borde);border-radius:var(--z-forma-s);padding:12px 14px;transition:border-color var(--z-dur-corta) var(--z-curva)}
.campo:hover{border-color:var(--z-borde-marcado)}
.campo:focus{outline:none;box-shadow:none;border-color:var(--z-principal)}
select.campo{appearance:none;cursor:pointer;padding-right:38px;
  background:var(--z-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D6D5D3' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center no-repeat}
select.campo:invalid{color:var(--z-tenue)}
select.campo option{color:var(--z-sobre-superficie);background:var(--z-contenedor)}
textarea.campo{min-height:130px;resize:vertical}

/* Ventana — diálogo sobre velo desenfocado. */
dialog.ventana{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;padding:36px;
  border:1px solid var(--z-borde);border-radius:var(--z-forma-l);background:var(--z-contenedor);color:var(--z-sobre-superficie)}
dialog.ventana::backdrop{background:var(--z-velo);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.boton-cerrar{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--z-borde);
  background:transparent;color:var(--z-sobre-superficie);font-size:22px;line-height:1;cursor:pointer;transition:background var(--z-dur-corta) var(--z-curva)}
.boton-cerrar:hover{background:var(--z-estado-hover)}

/* Pie de página. */
.pie-pagina{border-top:1px solid var(--z-borde);padding:26px 0 40px;color:var(--z-tenue);font-size:var(--z-texto-s);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.pie-pagina a{text-decoration:none;border-bottom:1px solid rgba(214,213,211,.3);transition:color var(--z-dur-corta) var(--z-curva)}
.pie-pagina a:hover{color:var(--z-sobre-superficie-fuerte);border-bottom-color:var(--z-principal)}