/* =============================================================================
PACK TECH S.A.C. — HOJA DE ESTILOS ÚNICA
-----------------------------------------------------------------------------
Concepto visual: "ficha técnica viva". Retícula visible, rótulos técnicos en
versalitas, cifras grandes y fotografías tratadas como documento. No degradados
sobre foto, ni sombras difusas, ni esquinas redondeadas por defecto.
La paleta se declara AQUÍ y en ningún otro sitio. Los seis roles de color de
RF-8 son la única fuente de color del archivo: el resto usa `var()` y deriva
tintes con `color-mix()`, que no añade literales.
Aviso sobre la escala: la tabla de RF-11 es cerrada. Cualquier tamaño que se
añada aquí tiene que ser uno de los doce valores de la tabla, y su equivalente
de móvil también. `node --test` lo comprueba y avisa del archivo y la línea.
========================================================================== */
/* ===== 1. RAÍZ: LOS SEIS ROLES DE COLOR Y LAS MEDIDAS DE LA RETÍCULA =====
`--marca` y `--acento` están muestreados del archivo del logotipo (RF-9).
La superficie clara es #FDFDFB y no un hueso más oscuro: el blanco del logo
está horneado dentro del PNG y RF-15 mide la diferencia de luminancia entre
ese blanco y la superficie que lo rodea. Con #FAFAF7 la diferencia ya no
entraría en el margen de 0,03 y el logo volvería a verse recortado.
El texto principal es tinta sobre hueso; sobre la superficie oscura el color
del texto sale de `color-mix()` y no de un séptimo rol. */
:root{
/* Los seis roles de color. Ni uno más, ni declararlos dos veces. */
--marca:#165E9C; /* azul profundo del logotipo: titulares, enlaces, filete */
--acento:#5FA83D; /* verde del logotipo: acento de cuatro usos (RF-9) */
--superficie-oscura:#14181D; /* carbón: bloques de énfasis */
--superficie-clara:#FDFDFB; /* hueso: fondo de lectura, casi el blanco del logo */
--texto:#101418; /* tinta principal sobre superficie clara */
--texto-secundario:#4A5560; /* tinta de apoyo: bajada, descripciones, notas */
/* Medidas de la retícula. */
--max:1200px; /* ancho máximo de contenido */
--canal:24px; /* canal constante entre columnas */
--paso:8px; /* unidad del ritmo vertical */
/* Las dos familias. RF-12: la voz de titular no es la voz de lectura, y
ninguna de las dos se aplica a la otra. */
--familia-titular:'Archivo',system-ui,sans-serif;
--familia-lectura:'Inter',system-ui,sans-serif;
}
/* ===== 2. REINICIO ========================================================= */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,picture,svg{display:block;max-width:100%;height:auto}
/* ===== 3. BASE: SUPERFICIE, TEXTO Y ENLACES ===============================
El texto de lectura de RF-11 son 17 px con interlineado 1,65. */
body{
font-family:var(--familia-lectura);
font-size:17px;
line-height:1.65;
color:var(--texto);
background:var(--superficie-clara);
-webkit-font-smoothing:antialiased;
/* El `body` es una columna flexible de altura completa. Es lo que hace que el `margin-top:auto`
del pie empuje el pie al fondo de la ventana en las páginas cortas (Maquinaria y Servicio,
que son las más escasas) sin que en las largas quede pegado al contenido. Los hijos estiran
a lo ancho por defecto, así que el ancho máximo del contenedor y el centrado siguen igual. */
min-height:100vh;
display:flex;
flex-direction:column;
}
/* En superficie oscura el texto no es un color nuevo: se mezcla la superficie
clara con la tinta principal, y así llega a más de 15:1 sobre el carbón. */
.on-oscuro{color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto))}
.on-oscuro a{color:color-mix(in srgb,var(--superficie-clara) 88%,var(--marca))}
a{color:var(--marca);text-decoration-thickness:1px;text-underline-offset:2px}
strong{font-weight:700}
/* ===== 4. ESCALA TIPOGRÁFICA CERRADA (RF-11) ==============================
Los ocho niveles de la tabla, con su valor de escritorio. Los de móvil están
en la media query del final del archivo. Ningún tamaño fuera de la tabla:
los permitidos son 12, 15, 16, 17, 19, 24, 28, 32, 34, 40, 44 y 56 px. */
/* Título de página interna: 40 px / peso 800 / 1,10. El titular de portada
(56 px) y su velo los añade el bloque del titular compartido. */
h1{font-family:var(--familia-titular);font-size:40px;line-height:1.10;font-weight:800;color:var(--texto)}
/* Título de sección: 32 px / 700 / 1,15. */
h2{font-family:var(--familia-titular);font-size:32px;line-height:1.15;font-weight:700;color:var(--texto)}
/* Título de ficha: 19 px / 700 / 1,25. Los `h4` del pie también caen aquí. */
h3,h4{font-family:var(--familia-titular);font-size:19px;line-height:1.25;font-weight:700;color:var(--texto)}
/* Rótulo técnico: el texto corto en versalitas que nombra el dato de una ficha.
Las mayúsculas las pone el estilo, nunca el contenido (C-12). */
.rotulo{
font-family:var(--familia-lectura);
font-size:12px;
line-height:1.20;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--texto-secundario);
}
/* Dato destacado: la cifra grande de una ficha de planta. */
.dato{
font-family:var(--familia-titular);
font-size:44px;
line-height:1.00;
font-weight:800;
color:var(--marca);
font-variant-numeric:tabular-nums;
}
/* Bajada y descripción: 16 px / 400 / 1,60, en tinta de apoyo. */
.bajada{font-size:16px;line-height:1.60;color:var(--texto-secundario)}
/* ===== 5. RETÍCULA ========================================================
Todo el contenido vive en la misma retícula de columnas con canal constante,
y el ritmo vertical es múltiplo de 8 px. El mínimo de 260 px hace que la
retícula reparta limpio en 4, 3 o 2 columnas según el ancho disponible. */
.contenedor{max-width:var(--max);margin-inline:auto;padding-inline:var(--canal)}
.rejilla{display:grid;gap:var(--canal);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
section{padding-block:calc(var(--paso)*10)}
.bloque{padding-block:calc(var(--paso)*6)}
/* Formularios: los controles no heredan la familia del sistema, así que se les
dice que hereden la del documento. Aquí no se declara ninguna `font-family`
nueva: la tercera declaración rompería el recuento de RF-12. */
input,textarea,select,button{font:inherit;color:inherit}
/* ===== 6. ENCABEZADO Y MENÚ ================================================
El logotipo va sobre la superficie clara, nunca sobre carbón. El blanco está
horneado dentro del PNG del logo, así que la única forma de que no se vea
recortado es que la superficie que lo rodea sea la misma casi-blanco: esa es
la comprobación de RF-15 (diferencia de luminancia menor de 0,03). Aquí no
hay caja, ni `border-radius`, ni relleno de color: solo superficie.
El menú es una rejilla de 6 enlaces. Por encima de 480 px van en una sola
fila; por debajo se reordenan en 3 columnas × 2 filas (ver bloque 8). Es lo
que hace posible cumplir a la vez los 6 destinos de RF-17 y el área táctil de
44 px de RF-31 sin recortarse. */
header{
position:sticky;
top:0;
z-index:100;
background:var(--superficie-clara);
border-bottom:1px solid color-mix(in srgb,var(--marca) 18%,var(--superficie-clara));
}
/* El logotipo va en su propia fila, con el menú debajo. Es la composición que
hace posible la cuenta de alto de RF-27: fila del logo, 2 filas de enlaces y
relleno. Con el logo en la misma fila que el menú, los 6 destinos no caben en
una sola línea por encima de 480 px sin bajar de los 44 px de área táctil. */
.encabezado{
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--canal);
padding-block:calc(var(--paso)*2) 0;
}
/* El logotipo: superficie clara detrás, sin caja. La imagen ya trae su propio
blanco horneado, así que aquí no se pinta nada. */
.logo{display:flex;align-items:center;padding-block:calc(var(--paso)/2*1.5)}
.logo img{height:36px;width:auto;display:block}
/* Rejilla del menú: los 6 destinos en una sola fila por encima de 480 px. */
.menu{
display:grid;
gap:0 calc(var(--canal)*2);
grid-template-columns:repeat(6,1fr);
list-style:none;
}
.menu a{
display:flex;
align-items:center;
min-height:44px; /* RF-31: área táctil de 44 px */
font-family:var(--familia-lectura);
font-size:12px; /* tamaño de rótulo técnico */
line-height:1.20;
font-weight:600;
letter-spacing:.08em; /* se quita si el menú no cabe a 320 px */
text-transform:uppercase;
color:var(--texto);
text-decoration:none;
border-bottom:2px solid transparent;
}
/* El destino de la página actual se marca con el color de marca, no con el
acento: sobre superficie clara el verde del logo no llega al contraste de
texto que pide RF-28. */
.menu a.activo{color:var(--marca);border-bottom-color:var(--marca)}
/* El destino de cotización es el botón de acción del menú: fondo del color de
marca y texto de contraste alto. El verde de acento no puede ser el color de
un botón (RF-9), así que la acción va con el azul de marca. */
.menu a.cta{
color:color-mix(in srgb,var(--superficie-clara) 92%,var(--marca));
background:var(--marca);
border-bottom-color:var(--marca);
padding-inline:calc(var(--canal)/2);
}
/* Cuando el propio botón es el destino de la página actual, el estado activo se
marca por su filete inferior, no por el color del texto: el texto ya es claro
sobre el azul y cambiarlo quitaría legibilidad al botón.
El filete NO puede ser el verde de acento. Medido, el acento sobre el azul del
botón se queda en 2,30:1 y RF-28 pide 3:1 para un límite de componente; además
el navegador lo rasteriza a menos de 2 px y se perceive peor. Va en la mezcla
clara, que sobre el azul del botón da 6,6:1. Con esto el uso del acento como
"estado activo del enlace" de RF-9 se queda sin destino en el sitio. */
.menu a.cta.activo{border-bottom-width:3px;border-bottom-color:color-mix(in srgb,var(--superficie-clara) 92%,var(--marca))}
/* Indicador de foco visible (RF-30). El color de marca da 6,6:1 contra la
superficie clara, que es lo que RF-30 exige; el verde de acento se queda en
2,88:1 y no llega.
El botón de cotización hereda este mismo contorno a propósito. Con
`outline-offset` el anillo se dibuja FUERA de la caja del botón, o sea sobre la
superficie clara del encabezado, así que no queda un contorno de azul sobre un
fondo de azul: lo que hay entre el botón y su contorno es el hueco del offset. */
.menu a:focus-visible,.logo:focus-visible{
outline:2px solid var(--marca);
outline-offset:2px;
}
/* ===== 7. TITULAR COMPARTIDO ===============================================
El bloque que sigue al menú es el mismo patrón en las 6 páginas: primero un
título de primer nivel y después una bajada (RF-13). Eso es lo que hace que el
sitio se lea como un solo objeto y cada página se identifique por su título.
Las dos cosas que RF-13 mide salen por construcción, no por suerte:
· el borde izquierdo es el del contenedor de 1200 px con su canal de 24 px,
idéntico en las 6 cajas;
· el relleno vertical está aquí y solo aquí, con el mismo valor para las 6.
La portada lleva fotografía y las internas no, pero el relleno no cambia:
si cambiara, las cajas no coincidirían.
El `width:100%` es obligatorio, no cosmético. El titular es hijo directo de
`body`, que es una columna flexible; en una columna, un hijo con
`margin-inline:auto` deja de estirarse y se encoje hasta su contenido. Sin
este ancho, las 5 cajas internas medían entre 479 y 728 px en vez de 1200 y su
borde izquierdo se iba de 137 a 498 px. Con el ancho, las 6 miden 1200. */
.titular{
width:100%;
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--canal);
padding-block:calc(var(--paso)*10);
}
/* Título de página interna: 40 px / 800 / 1,10, el nivel de la escala de RF-11. */
.titular h1{font-size:40px;line-height:1.10;font-weight:800}
.titular .bajada{margin-top:calc(var(--paso)*2);max-width:680px}
/* El titular de portada: la misma caja, con la fotografía debajo y un velo
encima. Es el único sitio del sitio donde la fotografía es recurso de diseño
principal (RF-16). En ningún otro bloque del archivo hay un `url()`.
El `background-color` va declarado y no depende de la imagen: es el color
sólido de respaldo de RF-3. Si la fotografía no llegara a cargar, el texto
queda sobre el carbón sólido y sigue siendo legible, y no aparece ningún ícono
de imagen rota porque el fondo no es un `![]()
`.
El velo va del 72 % al 88 % de carbón. Con el 82 % al 94 % que había antes, la
fotografía quedaba tapada: el bloque se leía como una mancha carbón y la foto no
aparecía, que es justo lo contrario de lo que RF-16 pide. Bajarlo a 72 % deja
ver la foto sin perder el contraste.
El número sale de la medición, no de la intuición: tomando como peor caso que
la parte más clara de la fotografía fuera blanco puro, el 72 % deja el texto en
5,40:1, que es lo que exige la bajada (15 px, texto normal, 4,5:1) y de sobra
para el titular de 56 px, que es texto grande y solo pide 3:1. El extremo más
claro del degradado es el que manda, y por eso el 72 % va arriba. La prueba
`el velo del titular de portada deja el texto por encima de 4,5:1` recalcula
este número desde el CSS, así que si alguien vuelve a subir el velo, la prueba
lo dice con su ratio. */
.titular--fondo{
background-color:var(--superficie-oscura);
background-image:
linear-gradient(color-mix(in srgb,var(--superficie-oscura) 72%,transparent),color-mix(in srgb,var(--superficie-oscura) 88%,transparent)),
url('/Imagenes/bolsas.jpg');
background-size:cover;
background-position:center;
}
/* Titular de portada: 56 px / 800 / 1,05, el nivel más alto de la escala. */
.titular--fondo h1{font-size:56px;line-height:1.05}
/* Sobre el velo, el título y la bajada se tiñen con la mezcla de la superficie
clara y la tinta principal: la misma regla de superficie oscura del archivo. */
.titular--fondo h1,
.titular--fondo .bajada{color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto))}
/* ===== 8. BANDA DE LLAMADO A LA ACCIÓN ====================================
Superficie sólida, sin fotografía. La fotografía como recurso de diseño se
queda en el titular de portada y en la banda de planta de abajo (RF-16). */
.banda{
background:var(--superficie-oscura);
color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto));
padding-block:calc(var(--paso)*12);
text-align:center;
}
.banda h2{color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto))}
.banda p{max-width:720px;margin:calc(var(--paso)*2) auto 0}
/* ===== 8b. BANDA DE PLANTA A PANTALLA COMPLETA ==============================
La banda de Maquinaria lleva la fotografía de la planta de Krones detrás del
texto. Es el segundo sitio donde la fotografía entra como recurso de diseño
(RF-16) y, a diferencia del titular de portada, va como elemento `![]()
` y no
como fondo CSS. El motivo está en el plan: la puerta de RF-16 comprueba los
`url()` del archivo de estilos y un fondo nuevo la haría fallar, obligando a
relajar un criterio ya verificado. Con la imagen como elemento, la foto lleva
`alt`, que es donde tiene que vivir la declaración de que la planta es de
otra empresa (RF-43).
El carbón sólido NO se quita: es el respaldo de RF-3. Si la imagen no carga se
ve la banda de carbón de siempre con su texto legible, y no un ícono de
imagen rota. Por eso el orden de las capas es carbón, foto, velo y texto: la
foto va ENCIMA del fondo, nunca detrás, porque detrás de un fondo opaco no se
vería. */
.banda--planta{
position:relative;
isolation:isolate; /* la banda es su propio contexto de apilamiento: las tres
capas de abajo no se salen a pisar el pie que viene después */
padding-block:calc(var(--paso)*14)
}
.banda--planta img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover; /* en pantallas anchas se recorta en vez de deformarse */
object-position:center;
z-index:0;
}
/* El velo es el mismo que el del titular de portada, con los mismos dos valores:
72 % arriba y 88 % abajo. Manda el extremo más claro, y da 5,4:1 para el texto
de la banda. C-18 pide que el velo NO baje en móvil: bajarlo haría la foto más
visible y el texto ilegible. */
.banda--planta::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background-image:linear-gradient(
color-mix(in srgb,var(--superficie-oscura) 72%,transparent),
color-mix(in srgb,var(--superficie-oscura) 88%,transparent));
}
/* El texto va por encima del velo. La imagen se excluye a propósito: también es
hija directa de la banda, y esta regla la cambiaría de `absolute` a
`relative` y la sacaría de la esquina. */
.banda--planta > :not(img){position:relative;z-index:2}
/* ===== 9. BOTONES DE ACCIÓN ================================================
Fondo del color de marca. El verde de acento no puede ser el color de un
botón (RF-9), así que el modificador que se llamaba "verde" se resuelve
también con el azul de marca. Los separadores son filetes, nunca sombras. */
.boton{
display:inline-flex;
align-items:center;
min-height:44px;
border:1px solid var(--marca);
padding-inline:calc(var(--canal)*1.5);
background:var(--marca);
color:color-mix(in srgb,var(--superficie-clara) 92%,var(--marca));
font-family:var(--familia-lectura);
font-size:12px;
line-height:1.20;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
text-decoration:none;
}
.boton--borde{background:transparent;color:var(--marca)}
/* El foco del botón sigue al resto de indicadores del sitio y usa el azul de
marca, que sobre la superficie clara del formulario da 6,6:1.
El verde de acento se queda en 2,88:1 sobre esa misma superficie clara, por
debajo del 3:1 de RF-30. */
.boton:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* Sobre la banda y sobre el titular de portada el azul de marca NO sirve: da
2,64:1 sobre el carbón y cerca de 1:1 sobre el punto más claro del velo,
porque el velo se acerca mucho al propio azul. Ahí el anillo pasa a la misma
mezcla clara de 88 % que usan el texto y el filete del borde de botón: 13,6:1
sobre el carbón de la banda y 5,4:1 sobre el punto más claro del velo. Los
tres fondos donde aparece un `.boton` quedan por encima de 3:1. */
.banda .boton:focus-visible,
.titular--fondo .boton:focus-visible{
outline-color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto));
}
/* Sobre la banda y sobre el velo, el botón de borde necesita texto claro Y filete
claro: medido, el azul de marca como límite de componente se queda en 2,64:1
sobre el carbón de la banda y en menos todavía sobre el velo, y RF-28 pide 3:1.
La mezcla clara da 17,5:1 sobre el carbón y más de 9:1 sobre el velo. */
.banda .boton--borde,
.titular--fondo .boton--borde{
color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto));
border-color:color-mix(in srgb,var(--superficie-clara) 88%,var(--texto));
}
/* ===== 10. FICHAS ==========================================================
El bloque de contenido repetido del sitio: ficha de producto, dato de planta,
motivo de servicio. Es una ficha técnica, así que su jerarquía la hace el
filete y el contraste de superficie, no una sombra.
RF-14 es explícito en lo que no entra: nada de degradados, nada de sombras
difusas, nada de radios de esquina, nada de ícono o ilustración en cada
ficha. Aquí no hay un solo `background-image`, ni `box-shadow`, ni
`border-radius`.
Los cuatro huecos de la ficha, del más pequeño al más grande:
· `.rotulo` 12 px en versalitas: el texto corto que nombra el dato;
· `.dato` 44 px: la cifra;
· el `h3` 19 px: el título;
· el `p` 16 px: el texto.
Los dos primeros solo se rellenan cuando el dato ya está escrito en la
página. Poner un rótulo donde no hay dato sería inventar copy, y el copy
nuevo está fuera de alcance. */
.ficha{
border-left:3px solid var(--marca);
padding-left:calc(var(--canal));
}
.ficha h3{margin-top:0}
.ficha p{
font-size:16px;
line-height:1.60;
color:var(--texto-secundario);
margin-top:calc(var(--paso)/2*1.5);
}
/* La cifra va antes del título: es lo primero que se lee de una ficha de
planta, y es el dato que la página ya tenía escrito. */
.ficha .dato{margin-bottom:calc(var(--paso)/2*1.5)}
/* Dos fichas seguidas comparten filete, así que la de en medio se separa por
espacio y no por otro filete. */
.rejilla > .ficha + .ficha{border-left-color:color-mix(in srgb,var(--marca) 55%,var(--superficie-clara))}
/* El título de sección y su bajada, alineados a la misma retícula que las
rejillas que vienen debajo. */
.titulo{max-width:680px;margin-bottom:calc(var(--paso)*5)}
.titulo p{
font-size:16px;
line-height:1.60;
color:var(--texto-secundario);
margin-top:calc(var(--paso)/2*1.5);
}
/* ===== 11. GALERÍAS, MARCOS DE FOTO Y FIGURAS DE APOYO =====================
Las fotografías de producto y de máquina no son PNG con transparencia: traen el
blanco horneado dentro del archivo, y en este proyecto no hay herramienta para
recortarlas ni para pasarlas a transparencia (eso sería un proceso de
compilación, y RNF-8 deja la compilación fuera de alcance).
La solución es el marco: las fotos van dentro de una caja del color de la
superficie clara, con la foto contenida dentro y un relleno fijo. Como el marco
es casi blanco y la foto también, el borde horneado se confunde con el marco.
Ese es el criterio de RF-6, y la diferencia de luminancia entre el blanco
horneado (L=1,0) y la superficie clara (L≈0,981) es de 0,019, por debajo del
0,03 que admite la spec. El blanco no se ve porque el marco es el mismo blanco.
LAS SEIS son marco. El plan llegó a autorizar una excepción de encuadre para la
foto de plástico general, pero la spec es la autoridad y RF-6 habla de "cada
fotografía" y de "los 6 marcos del mismo color": una sexta caja sin fondo, sin
relleno y con `cover` no es un marco. Las seis van iguales.
Las seis cajas comparten ancho, alto y relleno, que es lo que RF-6 compara. El
ancho se queda en 300 px a propósito: dos de las fotos de máquina son un
recorte pequeño y una trae un borde de color, y a 300 px el recorte no se
nota. Ampliarlas no es una salida. El relleno es de 24 px, no de 16: más aire
alrededor de la foto hace que el rectángulo se lea como un soporte y no como un
recorte pegado encima. */
.galeria{margin-top:calc(var(--paso)*8)}
/* La rejilla de la galería acota el ancho de celda al del marco, 300 px. Con el
`auto-fit` de `.rejilla` y celdas elásticas, las columnas vacías se colapsan y
las que quedan se repartían el ancho entero, dejando los marcos de 300 px
pegados a la izquierda y aire a su derecha. Al fijar la celda en 300 px el
marco la llena, el canal de 24 px los separa y el sobrante queda como una sola
franja al final, en el borde del canal, no repartido entre fotos.
El `auto-fit` sigue creando una pista de más que colapsa a 0 px y no se ve:
eliminarla exigiría contar las fotos en el CSS, una regla por página. */
.galeria .rejilla{grid-template-columns:repeat(auto-fit,minmax(260px,300px));justify-content:start}
.marco-foto{
display:block;
width:100%;
max-width:300px;
aspect-ratio:4/3;
background:var(--superficie-clara);
padding:calc(var(--canal));
object-fit:contain;
}
/* Figuras de apoyo: ilustraciones planas monocromas, no fotografías. No
llevan texto alternativo porque son decorativas: una descripción obligaría a
afirmar para qué sirven, y RF-7 solo las autoriza cuando la sección ya lo dice
con sus palabras. Todas al mismo tamaño visual, como pide RF-7. */
.figura-apoyo{display:block;width:100%;max-width:200px;height:auto;margin-bottom:var(--paso)}
/* ===== 12. FORMULARIO DE COTIZACIÓN =======================================
Rejilla de dos columnas, con cada campo envuelto en su grupo etiqueta + control.
El grupo es la unidad de la rejilla, no el campo suelto: así la etiqueta nunca queda
huérfana arriba de una columna. El campo de requerimiento y el botón ocupan las dos
columnas, que es el caso C-6 de la spec.
Las etiquetas van en el color de marca y en tamaño de rótulo técnico, no en el
acento: sobre la superficie clara el verde del logo no llega al contraste de texto
que pide RF-28. El texto de ejemplo de dentro del campo se conserva, porque RF-23
dice que puede mantenerse y en el campo de requerimiento aporta información que la
etiqueta sola no da; la etiqueta no lo sustituye. */
#form-cotiza{
display:grid;
grid-template-columns:1fr 1fr;
gap:calc(var(--canal));
max-width:800px;
}
.campo-grupo{display:flex;flex-direction:column;gap:calc(var(--paso)/2*1.5)}
.campo-grupo--ancho,
.campo-ancho{grid-column:1 / -1}
.campo-grupo label{
font-family:var(--familia-lectura);
font-size:12px;
line-height:1.20;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--marca);
}
.campo{
width:100%;
min-height:44px;
padding:calc(var(--paso)*1.5);
border:1px solid color-mix(in srgb,var(--texto) 24%,var(--superficie-clara));
background:var(--superficie-clara);
color:var(--texto);
}
.campo:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
textarea.campo{min-height:130px;resize:vertical}
.aviso{
font-size:12px;
line-height:1.60;
color:var(--texto-secundario);
border-left:3px solid var(--marca);
padding-left:calc(var(--canal)/2*1.5);
}
/* El botón de envío es la acción principal del formulario, así que ocupa el ancho
completo y sube un nivel en la escala respecto a los botones de navegación. Es lo
que lo distingue del "Cotizar" del menú sin recurrir a un color distinto. */
.boton--envio{width:100%;justify-content:center;font-size:15px;line-height:1.60}
/* ===== 13. PIE DE PÁGINA ===================================================
Cuatro columnas: marca, páginas, ubicación y contacto. La superficie es la
clara, por el mismo motivo que el encabezado (RF-15): el blanco del logo está
horneado dentro del PNG y el logotipo del pie no puede verse recortado sobre
una caja. Aquí no hay caja, ni radios, ni sombras: solo superficie y filetes.
El texto va en la tinta principal y los rótulos de columna en el tamaño de
rótulo técnico. Ningún uso del acento verde sobrevive aquí: sobre superficie
clara el verde del logo se queda por debajo del contraste de texto que pide
RF-28, así que los detalles que lo highlightan usan el color de marca. */
footer{
background:var(--superficie-clara);
border-top:1px solid color-mix(in srgb,var(--marca) 18%,var(--superficie-clara));
padding-block:calc(var(--paso)*8) 0;
margin-top:auto;
}
.pie-rejilla{
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--canal);
display:grid;
gap:calc(var(--canal)*2);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
padding-bottom:calc(var(--paso)*6);
}
/* El logotipo del pie: misma marca que en el encabezado, sin estilo en línea.
Los `display:inline-flex` y `margin-bottom` que llevaba en el HTML pasaron
aquí, que es lo que pide RF-36. */
.pie-logo{display:flex;align-items:center;min-height:44px;margin-bottom:calc(var(--paso)/2)}
.pie-logo img{height:32px;width:auto;display:block}
.pie-col p{color:var(--texto-secundario);font-size:16px;line-height:1.60}
.pie-col h3{
font-family:var(--familia-lectura);
font-size:12px;
line-height:1.20;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--marca);
margin-bottom:var(--paso);
}
.pie-col ul li{margin-bottom:0}
/* La lista "Páginas" es navegación, así que sus enlaces caen bajo RF-31: 44 px de
alto mínimo. Con el texto solo mideían 19,2 px. El alto lo da el propio enlace,
no un margen en el `li`, para que el área táctil sea continua. El pie queda
bastante más alto a cambio, y es el precio de un objetivo táctil que en móvil
se nota. */
.pie-col a{
display:flex;
align-items:center;
min-height:44px;
color:var(--texto);
text-decoration:none;
}
.pie-col a:hover{color:var(--marca);text-decoration:underline}
.pie-col a:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.pie-derechos{
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--canal);
padding-block:calc(var(--paso)*2);
border-top:1px solid color-mix(in srgb,var(--marca) 18%,var(--superficie-clara));
color:var(--texto-secundario);
font-size:12px;
line-height:1.20;
}
/* El crédito de la fotografía de planta (RF-44) va debajo del aviso de derechos,
en su propia línea y fuera de las 4 columnas. El enlace necesita color
propio: las reglas de los enlaces del pie son de `.pie-col` y no llegan
aquí, así que sin esto saldría con el azul por defecto del navegador, que no
es de la paleta. Con el color de marca el enlace mide 6,6:1 sobre la
superficie clara. */
.credito-foto{margin-top:calc(var(--paso)*1.5)}
.credito-foto a{color:var(--marca)}
/* ===== 14. ENCABEZADO INTERMEDIO OCULTO ====================================
RF-20 no permite saltar de nivel, y la spec autoriza expresamente añadir un
encabezado intermedio que existe en el contenido y no se pinta, justo para
que la secuencia no salte.
La técnica NO es `display:none` ni `visibility:hidden`: con esas el headedirectivo
sigue en el árbol de accesibilidad pero deja de anunciarse, y hay lectores de
pantalla que lo saltan, que es justo lo que RF-20 quiere evitar. Aquí el
encabezado conserva su caja en el flujo y su texto es announced con normalidad;
lo que se recorta es el tamaño renderizado a un píxel con `clip-path`, la forma
que los lectores de pantalla siguen leyendo como texto. El texto sale de
palabras que ya están escritas en la página, nunca es copy nuevo. */
.encabezado-oculto{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
/* ===== 15. EL MENÚ DEJA DE CABER EN UNA FILA ANTES DE 768 px ==============
Con `repeat(6,1fr)` y canal de 48 px, los 6 destinos no caben en una fila por
debajo de unos 740 px: la rejilla no baja del ancho mínimo de su contenido y la
página se iba a 702 px de scroll con ventanas de 481 a 700. Medido así, el
desbordamiento era de unos 220 px.
La fila única solo se sostiene por encima de 768 px. Entre 481 y 767 el menú
pasa a la misma retícula de 3 columnas × 2 filas que usa por debajo de 480 px:
con 3 columnas, el ancho mínimo de la rejilla es la suma de tres palabras más
cortas, que sí cabe a partir de 320 px. RF-34 se cierra con lo mismo, porque al
200 % el viewport efectivo cae a 640 px y ahí volvía a aparecer el mismo
desbordamiento.
Esta consulta va ANTES de la de 480 px a propósito: en cascada manda la última,
y así los valores medidos como correctos a 320 px (logo de 32 px, interletraje,
relleno) siguen mandando en su rango y no los toca esta. */
@media (max-width:767px){
.menu{grid-template-columns:repeat(3,1fr);gap:0 calc(var(--canal)/2)}
}
/* ===== 16. PANTALLAS ESTRECHAS: POR DEBAJO DE 480 px ======================
Por debajo de 480 px el encabezado deja de ser fijo y se comporta como una
franja que se va con el desplazamiento (RF-27). Con el menú quieto, el
desplazamiento empuja el encabezado y el contenido queda accesible.
Los 6 destinos entran en una retícula de 3 columnas × 2 filas, con el tamaño
de rótulo técnico (12 px) y "Servicio al cliente" ocupando dos líneas dentro
de su celda.
La fila del logo baja a 44 px, el área táctil que pide RF-31: a 32 px era el
único elemento enfocable por debajo de 44 px en las 6 páginas. Los 12 px que
se le suman salen del relleno de la cabecera, que en este rango pasa a 0, así
que el encabezado solo crece 6 px. Sobre la medida de navegador de la vuelta
anterior (126,8 px a 320 px) queda en 132,8 px, con 7,2 px de margen sobre el
techo de 140 px de RF-27. Si al medir en Chrome se pasa de 140, el orden de
ajuste es quitar el interletraje del rótulo. No se tocan ni el número de
destinos ni el alto mínimo de las filas. */
@media (max-width:480px){
header{position:static}
.encabezado{padding-block:0;padding-inline:calc(var(--paso)*3)}
.logo{padding-block:0;min-height:44px} /* RF-31: área táctil de 44 px */
.logo img{height:32px}
.menu{grid-template-columns:repeat(3,1fr);gap:0 calc(var(--canal)/2)}
.menu a{
min-height:44px;
font-size:12px;
line-height:1.15;
padding-inline:2px;
}
}
/* ===== 17. MÓVIL: LOS MISMOS NIVELES A MENOS DE 768 px ===================
Mismos ocho niveles de la tabla de RF-11, con su valor de móvil. */
@media (max-width:768px){
body{font-size:16px}
h1{font-size:28px}
h2{font-size:24px}
h3,h4{font-size:17px}
.dato{font-size:34px}
.bajada{font-size:15px}
section{padding-block:calc(var(--paso)*6)}
.bloque{padding-block:calc(var(--paso)*4)}
.contenedor{padding-inline:calc(var(--paso)*3)}
/* El titular baja a su valor de móvil en las 6 cajas, portada incluida. El
relleno se queda en el mismo valor para las seis, porque RF-13 lo mide. */
.titular{padding-inline:calc(var(--paso)*3);padding-block:calc(var(--paso)*7)}
.titular h1{font-size:28px}
.titular--fondo h1{font-size:32px}
.banda{padding-block:calc(var(--paso)*8)}
/* Caso C-6: la rejilla de dos columnas del formulario pasa a una columna en
pantallas estrechas. El campo de requerimiento y el botón siguen con el ancho
completo, que es lo que el caso límite pide. */
#form-cotiza{grid-template-columns:1fr}
/* Caso C-18: en un teléfono estrecho la banda de planta tiene que seguir
leyéndose como una imagen de planta y no como una franja baja con texto
encima, así que le da un alto mínimo propio. El velo no se toca. */
.banda--planta{min-height:calc(var(--paso)*52)}
}
/* ===== 18. MOVIMIENTO REDUCIDO =============================================
RF-32: con la preferencia de movimiento reducido activa, el sistema no ejecuta
transiciones ni animaciones no esenciales.
Al revisar el archivo no hay ni una transición, ni una animación, ni un
`@keyframes`: el sitio no se mueve. La consulta se declara igualmente y de
forma explícita, para que quede constancia de que se revisó y para que el día
que alguien añada una transición no se le pase por alto que aquí está el sitio
donde neutralizarla. La regla que neutraliza es `*`, con las propiedades que
pueden animar, y pone duración cero en vez de `none`, para que no queden
dependencias de terceros animando. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
transition-duration:0s !important;
animation-duration:0s !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
}