/* Omnistudio — sistema visual (Manual de marca v1).
   Tinta es la piel; Hueso el papel; Señal escasa: un solo elemento que manda por pantalla. */
:root {
  --tinta: #0B0D10;
  --tinta-2: #12161C;
  --hueso: #F5F2EC;
  --senal: #FF4D1F;
  --prisma: #00C2A8;
  --grafito: #8A929E;
  --grafito-claro: #5B6270;   /* texto secundario sobre Hueso: el Grafito no llega a 4.5:1 ahí */
  --borde: #1E232B;
  --borde-claro: #DDD8CE;
  --brasa: #E11D48;
  --r: 4px;
  --ancho: 1120px;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tinta); color: var(--hueso);
  font: 400 17px/1.6 var(--cuerpo); text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--senal); }
:focus-visible { outline: 2px solid var(--prisma); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); }
.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 16px; top: 16px; z-index: 50; background: var(--hueso); color: var(--tinta); padding: 8px 12px; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(11, 13, 16, .86);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borde); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 28px; height: 28px; }
.marca span { font: 600 21px/1 var(--display); letter-spacing: -0.03em; }
.marca:hover { color: var(--hueso); }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--grafito); }
.nav a:hover { color: var(--hueso); }
@media (max-width: 860px) { .nav a:not(.boton) { display: none; } }

/* ---------------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 22px; border-radius: var(--r); font: 600 16px/1 var(--cuerpo); text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .15s ease; }
.boton:active { transform: translateY(1px); }
.boton-senal { background: var(--senal); color: var(--tinta) !important; }
.boton-senal:hover { background: #ff643a; }
.boton-linea { border-color: var(--borde); color: var(--hueso); background: transparent; }
.boton-linea:hover { border-color: var(--grafito); color: var(--hueso); }
.nav .boton { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------------------------------------------------------------- secciones */
section { padding: 96px 0; }
.clara { background: var(--hueso); color: var(--tinta); }
.clara .secundario, .clara .eyebrow { color: var(--grafito-claro); }
.eyebrow { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafito); margin-bottom: 18px; }
.titulo { font-size: clamp(30px, 4.4vw, 48px); max-width: 18ch; margin-bottom: 20px; }
.secundario { color: var(--grafito); font-size: 18px; max-width: 62ch; }
@media (max-width: 640px) { section { padding: 72px 0; } }

/* ---------------------------------------------------------------- portada */
.portada { position: relative; overflow: hidden; padding: 120px 0 104px; }
.portada h1 { font-size: clamp(40px, 7.4vw, 84px); max-width: 16ch; margin-bottom: 26px; }
.portada h1 .bloque { display: block; }
.portada .secundario { font-size: clamp(18px, 2.1vw, 21px); margin-bottom: 36px; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.obturador-fondo { position: absolute; right: -140px; top: 50%; width: 620px; height: 620px;
  transform: translateY(-50%) rotate(-15deg); opacity: .07; color: var(--hueso); pointer-events: none; }
.obturador-fondo svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .obturador-fondo svg { animation: gira 90s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }
}
@media (max-width: 760px) { .obturador-fondo { width: 420px; height: 420px; right: -190px; opacity: .06; } }

/* ---------------------------------------------------------------- contraste */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borde-claro);
  border: 1px solid var(--borde-claro); border-radius: var(--r); overflow: hidden; margin-top: 44px; }
.contraste > div { background: var(--hueso); padding: 30px; }
.contraste h3 { font-size: 20px; margin-bottom: 18px; }
.contraste ul { margin: 0; padding: 0; list-style: none; }
.contraste li { padding: 10px 0; border-top: 1px solid var(--borde-claro); font-size: 16px; }
.contraste li:first-child { border-top: 0; }
.contraste .ellos li { color: var(--grafito-claro); }
.contraste .nosotros { background: #fff; }
.contraste .nosotros h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px;
  background: var(--prisma); border-radius: 2px; vertical-align: 2px; }
@media (max-width: 720px) { .contraste { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- línea de producción */
.linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.paso { border: 1px solid var(--borde); border-radius: var(--r); padding: 26px; background: var(--tinta-2); position: relative; }
.paso .n { font: 500 13px/1 var(--mono); color: var(--grafito); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.paso .hoja { width: 22px; height: 22px; color: var(--grafito); }
.paso h3 { font-size: 21px; margin-bottom: 8px; }
.paso p { color: var(--grafito); font-size: 15.5px; margin: 0; }
.paso .quien { display: block; margin-top: 16px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--prisma); }
.paso:hover .hoja { color: var(--hueso); }
@media (max-width: 900px) { .linea { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .linea { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- productos */
.productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.producto { background: #fff; border: 1px solid var(--borde-claro); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; }
.producto .etiqueta { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grafito-claro); margin-bottom: 14px; }
.producto h3 { font-size: 25px; margin-bottom: 12px; }
.producto p { color: var(--grafito-claro); font-size: 16px; }
.producto ul { margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--borde-claro); font-size: 15px; }
.producto li { padding: 4px 0 4px 18px; position: relative; }
.producto li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 2px; background: var(--tinta); }
.producto.destacado { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.producto.destacado .etiqueta { color: var(--tinta); }
.nota-precio { margin-top: 26px; font-size: 15px; color: var(--grafito-claro); max-width: 70ch; }
@media (max-width: 900px) { .productos { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- licencia */
.dos { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.licencia { font: 400 13.5px/1.75 var(--mono); background: var(--tinta-2); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 26px 28px; color: var(--grafito); overflow-x: auto; }
.licencia b { color: var(--hueso); font-weight: 500; }
.licencia .ok { color: var(--prisma); }
.licencia .no { color: #ff8aa2; }
.licencia .ejemplo { display: inline-block; margin-bottom: 14px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); background: var(--grafito); padding: 3px 7px; border-radius: 2px; }
.lista-simple { margin: 24px 0 0; padding: 0; list-style: none; }
.lista-simple li { padding: 12px 0; border-top: 1px solid var(--borde); color: var(--grafito); }
.lista-simple li b { color: var(--hueso); font-weight: 600; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; gap: 36px; } }

/* ---------------------------------------------------------------- tres razones */
.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
.razones h3 { font-size: 21px; margin-bottom: 10px; }
.razones p { color: var(--grafito-claro); font-size: 16px; margin: 0; }
.razones .num { font: 500 13px/1 var(--mono); color: var(--grafito-claro); display: block; margin-bottom: 14px; }
@media (max-width: 820px) { .razones { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------------------------------------------------------- preguntas */
.preguntas { margin-top: 36px; border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; position: relative;
  font: 600 19px/1.35 var(--display); letter-spacing: -0.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 400 26px/1 var(--mono); color: var(--grafito); }
.preguntas details[open] summary::after { content: "−"; }
.preguntas .respuesta { color: var(--grafito); padding: 0 0 22px; max-width: 72ch; }

/* ---------------------------------------------------------------- brief */
.brief { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.brief .aside p { color: var(--grafito-claro); }
.brief .aside ol { padding-left: 20px; color: var(--grafito-claro); font-size: 16px; }
.brief .aside li { margin-bottom: 8px; }
.formulario { background: #fff; border: 1px solid var(--borde-claro); border-radius: var(--r); padding: 30px; }
.campo { margin-bottom: 18px; }
.campo label, .campo legend { display: block; font: 600 15px/1.3 var(--cuerpo); margin-bottom: 7px; color: var(--tinta); }
.campo .ayuda { display: block; font-weight: 400; font-size: 13.5px; color: var(--grafito-claro); margin-top: 2px; }
.campo input[type=text], .campo textarea, .campo select {
  width: 100%; font: 400 16px/1.4 var(--cuerpo); color: var(--tinta); background: var(--hueso);
  border: 1px solid var(--borde-claro); border-radius: var(--r); padding: 11px 12px; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--prisma); outline-offset: 0; border-color: transparent; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border: 1px solid var(--borde-claro);
  border-radius: 999px; font-weight: 500; font-size: 14.5px; cursor: pointer; background: var(--hueso); }
.chips input { accent-color: var(--tinta); margin: 0; }
.chips label:has(input:checked) { border-color: var(--tinta); background: #fff; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.envios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.envios .boton-linea { color: var(--tinta); border-color: var(--borde-claro); }
.envios .boton-linea:hover { color: var(--tinta); border-color: var(--tinta); }
.aviso { font-size: 13.5px; color: var(--grafito-claro); margin: 14px 0 0; }
.estado { font-size: 14.5px; margin: 12px 0 0; min-height: 1.4em; }
.estado.error { color: var(--brasa); }
.estado.ok { color: #067a6b; }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .fila { grid-template-columns: 1fr; } .formulario { padding: 22px; } }

/* ---------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--borde); padding: 44px 0 36px; font-size: 14.5px; color: var(--grafito); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pie a { color: var(--grafito); }
.pie a:hover { color: var(--hueso); }
.pie nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------------- páginas de texto */
.documento { padding: 72px 0 96px; }
.documento .envoltura { max-width: 760px; }
.documento h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 12px; }
.documento h2 { font-size: 23px; margin: 40px 0 12px; }
.documento p, .documento li { color: #c9ccd2; }
.documento ul { padding-left: 20px; }
.documento li { margin-bottom: 6px; }
.documento .fecha { color: var(--grafito); font: 400 14px/1 var(--mono); margin-bottom: 36px; }
.caja { border: 1px solid var(--borde); border-radius: var(--r); padding: 20px 22px; background: var(--tinta-2); margin: 24px 0; }

/* utilidades sin estilos en línea (la CSP no permite 'unsafe-inline') */
.mas { margin-top: 22px; }
.pantalla { min-height: 100vh; display: flex; align-items: center; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }