/* ═══════════════════════════════════════════════════════════════════
VOLUMA · la hoja de la casa
Sale de /lab/home-c: papel blanco, tinta casi negra, brasa como
único acento y las dos Geist. Todo lo interno -paneles, hojas de
mano, herramientas- se viste de aquí y deja de inventar su paleta.
Se usa así:
La página que la muestra y explica vive en /estilo/.
Sobre brasa va TINTA. La brasa es un color claro -luminancia .287-,
así que la tinta le da 5.9:1 de contraste y el blanco solo 3.1:1.
El blanco no es ilegible; es la mitad de contraste, y en tamaños
chicos se lava. Medido con WCAG 2.1.
═══════════════════════════════════════════════════════════════════ */
@import '/estilo/tokens.css';
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--papel);color:var(--tinta);
font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* ── voz ──────────────────────────────────────────────────────────
Títulos en 700 muy apretado, que es como habla la marca. El sistema
original los trae en 300; aquí no. */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(30px,4.6vw,46px)}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:19px;letter-spacing:-.025em}
h4{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 var(--e3);font-size:15px;line-height:1.65;color:var(--sub)}
p b,strong{color:var(--tinta);font-weight:600}
a{color:var(--sordo)}
/* el rótulo mono: la etiqueta que abre cada bloque */
.ojo{margin:0 0 var(--e3);font-family:var(--mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--sordo);font-weight:500}
.ojo.tenue{color:var(--note)}
/* el pie de una cifra, de una foto, de una fila */
.nota{margin:var(--e2) 0 0;font-family:var(--mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--soft);line-height:1.5}
.sub{font-size:15.5px;line-height:1.65;color:var(--sub)}
/* ── caja ─────────────────────────────────────────────────────────── */
.hoja{max-width:940px;margin:0 auto;padding:var(--e7) var(--e5) var(--e8)}
.hoja.ancha{max-width:1180px}
.cabeza{display:flex;justify-content:space-between;align-items:center;gap:var(--e4);
font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--note);margin-bottom:var(--e7)}
.cabeza a,.cabeza button{color:var(--note);text-decoration:none;background:none;
border:0;font:inherit;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0}
.cabeza a:hover,.cabeza button:hover{color:var(--sordo)}
/* La marca de la cabecera es la FIRMA REAL, servida desde la carpeta de
marca. Antes era un tetra dibujado a mano -de una pose vieja, distinta
a la del logo- con la palabra en monoespaciada: un logo que no existe.
Se resuelve aquí y se arregla en las veinte páginas de golpe.
366.76 × 67.44 del maestro → razón 5.438, de ahí el 109 × 20. */
.cabeza > span:first-child{display:inline-block;width:109px;height:20px;
background:url('/marca/archivos/voluma-firma-bicolor.svg') left center/contain no-repeat;
font-size:0;color:transparent;line-height:0}
.cabeza > span:first-child .iso{display:none}
.cabeza .iso{width:16px;height:16px;color:var(--brasa);vertical-align:-3px;margin-right:8px}
/* ── tarjeta ──────────────────────────────────────────────────────── */
/* La tarjeta es BLANCA sobre el papel, no gris: el gris la hundía en la
página y era el fondo, no la sombra, lo que la separaba. Con el
relieve el que separa es la luz, que es como se ve una cosa apoyada
encima de otra. */
.tarjeta{background:var(--papel);border-radius:var(--r3);padding:var(--e5);
box-shadow:var(--relieve);
transition:box-shadow var(--paso),transform var(--paso)}
.tarjeta.piel{background:var(--brasa-piel)}
/* solo levanta lo que se puede tocar; una tarjeta de puro texto que se
mueve al pasar el mouse es ruido */
a.tarjeta:hover,.tarjeta.viva:hover{box-shadow:var(--relieve-alto);
transform:translateY(-2px)}
a.tarjeta:active,.tarjeta.viva:active{transform:translateY(0);
box-shadow:var(--relieve)}
/* el lecho: el fondo tenue bajo un grupo de tarjetas, para que el
blanco tenga contra qué recortarse */
.lecho{background:var(--sup);border-radius:var(--r3);padding:var(--e5)}
/* La barra de vidrio. Sin `backdrop-filter` el fondo sube a casi opaco
para que el texto siga leyéndose; es la única manera de que no
dependa de que el navegador lo soporte. */
.vidrio{background:rgba(255,255,255,.94);border-radius:var(--r4);
box-shadow:var(--vidrio-aro)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.vidrio{background:var(--vidrio);
-webkit-backdrop-filter:var(--vidrio-borroso);
backdrop-filter:var(--vidrio-borroso)}
}
/* lo hundido va dentro de una tarjeta, como el «Add media» de ui.camera */
.hundido{background:#EFEEEB;border-radius:var(--r4);box-shadow:var(--relieve-hondo);
border:0;color:var(--sub)}
.hundido:hover{background:#E9E8E4;color:var(--tinta)}
.rejilla{display:grid;gap:var(--e2)}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rejilla.cifras{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* la cifra grande con su pie en mono */
.cifra{background:var(--papel);border-radius:var(--r3);padding:var(--e4) var(--e5);
box-shadow:var(--relieve)}
.cifra b{display:block;font-size:30px;font-weight:650;letter-spacing:-.035em;
line-height:1;margin-bottom:var(--e2);white-space:nowrap}
.cifra span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--soft);line-height:1.4}
.cifra .ap{font-size:.72em;color:var(--sordo);vertical-align:.06em;margin-right:.04em}
/* ── píldora ──────────────────────────────────────────────────────── */
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
padding:.55em 1.1em;border:0;border-radius:var(--r4);background:var(--papel);
box-shadow:var(--relieve);text-decoration:none;white-space:nowrap;
transition:box-shadow var(--paso),transform var(--paso),color var(--paso)}
.chip:not(.solida):hover{color:var(--tinta);box-shadow:var(--relieve-alto);
transform:translateY(-1px)}
.chip.solida{background:var(--brasa);color:var(--franja-tinta);
box-shadow:0 0 0 1px rgba(20,20,22,.06),0 1px 2px rgba(176,61,12,.28),
0 8px 18px -6px rgba(255,90,31,.45),inset 0 1px 0 rgba(255,255,255,.28)}
.chip.solida:hover{transform:translateY(-1px);background:var(--brasa-alta);
box-shadow:0 0 0 1px rgba(20,20,22,.08),0 2px 4px rgba(176,61,12,.3),
0 16px 30px -8px rgba(255,90,31,.55),inset 0 1px 0 rgba(255,255,255,.34)}
.chips{display:flex;flex-wrap:wrap;gap:var(--e2)}
/* ── botón ────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;font-weight:500;text-align:center;text-decoration:none;
padding:var(--e4) var(--e6);border-radius:var(--r4);cursor:pointer;
border:0;background:var(--brasa);color:var(--franja-tinta);
box-shadow:0 0 0 1px rgba(20,20,22,.06),0 1px 2px rgba(176,61,12,.28),
0 8px 18px -6px rgba(255,90,31,.45),inset 0 1px 0 rgba(255,255,255,.28);
transition:box-shadow var(--paso),transform var(--paso),background var(--paso)}
/* El hover sube el brillo y agranda el halo; NO cambia a `--sordo`, que
apagaba el botón justo al tocarlo, ni pone el texto en blanco: sobre
brasa va tinta, está medido. */
.btn:hover{background:var(--brasa-alta);transform:translateY(-1px);
box-shadow:0 0 0 1px rgba(20,20,22,.07),0 2px 4px rgba(176,61,12,.26),
0 16px 32px -8px rgba(255,90,31,.62),inset 0 1px 0 rgba(255,255,255,.38)}
.btn:active{transform:translateY(0);background:var(--brasa);
box-shadow:0 0 0 1px rgba(20,20,22,.09),0 1px 2px rgba(176,61,12,.2),
inset 0 2px 5px rgba(120,40,8,.26)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.fantasma{background:transparent;color:var(--sordo)}
.btn.fantasma:hover{background:var(--brasa-piel);color:var(--sordo)}
.btn.ancho{display:block;width:100%}
/* ── formulario ───────────────────────────────────────────────────── */
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--soft);margin-bottom:var(--e2)}
input,textarea,select{display:block;width:100%;font-family:var(--mono);font-size:15px;
padding:var(--e3) var(--e4);background:var(--papel);border:1px solid var(--linea-fuerte);
border-radius:var(--r1);color:var(--tinta);margin-bottom:var(--e4)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brasa)}
input::placeholder,textarea::placeholder{color:var(--apagado)}
textarea{min-height:190px;resize:vertical;line-height:1.55;font-size:13.5px}
.err{margin:var(--e2) 0 0;font-family:var(--mono);font-size:12px;color:var(--alerta);min-height:16px}
/* ── tabla ────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--note);font-weight:500;
padding:0 var(--e3) var(--e2) 0;border-bottom:1px solid var(--linea)}
td{padding:10px var(--e3) 10px 0;border-bottom:1px solid var(--linea);vertical-align:top}
td b{font-weight:600}
td.m,.m{font-family:var(--mono);font-size:12.5px;color:var(--soft)}
td:last-child.der,th:last-child.der{text-align:right;padding-right:0;white-space:nowrap}
/* ── fila de enlace ───────────────────────────────────────────────── */
a.liga{display:flex;align-items:baseline;gap:var(--e3);text-decoration:none;
color:var(--tinta);padding:var(--e3) var(--e4);border-radius:var(--r2);
background:var(--papel);margin-bottom:6px;box-shadow:var(--relieve);
transition:box-shadow var(--paso),transform var(--paso);
transition:background .15s,color .15s}
a.liga:hover{background:var(--papel);box-shadow:var(--relieve-alto);
transform:translateY(-1px)}
a.liga:active{transform:translateY(0);box-shadow:var(--relieve)}
a.liga b{font-weight:600;font-size:14.5px}
a.liga i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--soft);
margin-left:auto;text-align:right;letter-spacing:.04em}
/* ── franja brasa ─────────────────────────────────────────────────
El bloque que se lleva el color. Va con tinta encima, nunca blanco. */
/* La sombra de la franja es de BRASA, no de tinta: un bloque naranja
que proyecta gris se ve pegado con recorte. */
.franja{background:var(--brasa);color:var(--franja-tinta);border-radius:var(--r3);
padding:var(--e6);
box-shadow:0 0 0 1px rgba(20,20,22,.05),0 2px 5px rgba(176,61,12,.20),
0 20px 44px -14px rgba(255,90,31,.42),inset 0 1px 0 rgba(255,255,255,.24)}
.franja .ojo,.franja a{color:var(--franja-tinta)}
.franja p{color:rgba(20,10,6,.78)}
.franja .chip{background:rgba(255,255,255,.22);color:rgba(20,10,6,.82);
box-shadow:inset 0 0 0 1px rgba(20,10,6,.16)}
.franja .chip:not(.solida):hover{background:rgba(255,255,255,.34);
color:var(--franja-tinta);transform:none}
/* ── lista de datos ───────────────────────────────────────────────── */
.duros{background:var(--papel);border-radius:var(--r3);padding:var(--e2) var(--e5);
box-shadow:var(--relieve)}
.duros div{display:flex;gap:var(--e5);padding:var(--e3) 0;border-top:1px solid var(--linea)}
.duros div:first-child{border-top:0}
.duros span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--soft);flex:0 0 118px;padding-top:3px}
.duros p{margin:0;font-size:14.5px;line-height:1.5;color:var(--tinta)}
/* ── separador de sección ─────────────────────────────────────────── */
.seccion{margin-top:var(--e8)}
.seccion > .ojo{border-top:1px solid var(--linea);padding-top:var(--e4)}
@media (max-width:560px){
.hoja{padding:var(--e5) var(--e4) var(--e8)}
a.liga{flex-wrap:wrap;gap:var(--e1)}
a.liga i{margin-left:0;width:100%;text-align:left}
.duros div{flex-direction:column;gap:var(--e1)}
.duros span{flex:none}
.franja{padding:var(--e5)}
}