DEBE llevar text-decoration: none, y no
por estetica: el subrayado de un enlace lo pinta el propio enlace a lo largo
de todo su contenido, asi que sin esta linea el titulo y el parrafo salen
subrayados aunque su text-decoration computado siga diciendo "none". Los
descendientes no pueden quitarselo. El subrayado se reserva al pie de la
tarjeta, y solo al pasar por encima o al enfocar. */
.recurso { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.recurso__ilustracion {
display: block;
aspect-ratio: 16 / 10;
margin-bottom: 1.15rem;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 10px;
overflow: hidden;
}
.recurso__ilustracion svg { display: block; width: 100%; height: 100%; }
.recurso__titulo {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
line-height: 1.3;
color: var(--slate);
margin-bottom: 0.55rem;
transition: color 0.15s ease;
}
.recurso__apoyo { display: block; margin-bottom: 0.9rem; color: var(--grey); font-size: 1rem; line-height: 1.6; }
.recurso__enlace { display: block; margin-top: auto; font-weight: 600; color: var(--teal); }
.recurso:hover .recurso__titulo, .recurso:focus-visible .recurso__titulo { color: var(--teal); }
.recurso:hover .recurso__enlace, .recurso:focus-visible .recurso__enlace { text-decoration: underline; }
/* ----- Carrusel -----
El desplazamiento es scroll nativo con scroll-snap, no un translate en JS.
Eso da gratis el arrastre tactil, la rueda horizontal y el comportamiento
correcto al hacer zoom, y deja a JS solo tres tareas: mover de pagina,
pintar el estado y sacar del Tab lo que no se ve.
El numero de tarjetas por pagina no esta escrito en ningun sitio: sale del
ancho de la pista y del de una tarjeta, asi que pasar de 3 articulos a 10 no
toca ni una linea de codigo. */
.carrusel { position: relative; }
.carrusel__pista {
list-style: none;
margin: 0;
padding: 0 0 0.5rem;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * 2rem) / 3);
gap: 2rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .carrusel__pista { grid-auto-columns: calc((100% - 2rem) / 2); } }
@media (max-width: 639px) { .carrusel__pista { grid-auto-columns: 100%; gap: 1.5rem; } }
.carrusel__item { scroll-snap-align: start; min-width: 0; }
.carrusel__controles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.carrusel__flecha {
width: 2.75rem; height: 2.75rem;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem; line-height: 1;
border: 1px solid var(--slate);
border-radius: 50%;
background: transparent;
color: var(--slate);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carrusel__flecha:hover:not([aria-disabled="true"]) { background: var(--slate); color: #fff; }
/* En el extremo la flecha se apaga, no se va: si desapareciera, los controles
se moverian de sitio a cada pagina. */
.carrusel__flecha[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.carrusel__puntos { display: flex; align-items: center; gap: 0.5rem; }
.carrusel__punto {
width: 0.6rem; height: 0.6rem;
padding: 0; border: 0; border-radius: 50%;
background: var(--rule);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.carrusel__punto[aria-current="true"] { background: var(--teal); transform: scale(1.25); }
/* El punto mide 0.6rem, pero el objetivo tactil es el area de 44px que le da
este acolchado, por encima del minimo de la WCAG 2.5.8. */
.carrusel__puntos { padding: 0.75rem 0; }
.carrusel__punto { box-shadow: 0 0 0 0.65rem transparent; }
@media (prefers-reduced-motion: reduce) {
.carrusel__pista { scroll-behavior: auto; }
.carrusel__punto, .carrusel__flecha, .recurso__titulo { transition: none; }
}
/* Salida a /recursos/ en enlace de texto, no en boton: el CTA de esta seccion
no puede competir con la conversion principal de la pagina. */
.recursos__salida { margin: 2.75rem 0 0; text-align: center; }
/* El boton de "Explorelas usted mismo" quedaba pegado al ultimo renglon del
parrafo: el patron parrafo+boton usa en todo el sitio el margen base de
parrafo (1rem, de "p { margin: 0 0 1rem }") y no hay otra variable de
espaciado parrafo-boton que replicar. Toma prestado el unico precedente de
aire extra antes de un boton aislado que existe en el sistema, el de
.modalidades__cta en /soluciones/ (2.5rem) -alli separa una rejilla de
tarjetas de su boton, no un parrafo, pero es el mismo gesto: mas aire antes
del unico CTA de la seccion. Acotado a esta seccion: el resto de pares
parrafo+boton del sitio se quedan en 1rem. */
#demostraciones .grupo-botones { margin-top: 2.5rem; }
/* Mismo problema en los 4 articulos de /recursos/blog/ que llevan el CTA
"Acceder a las demostraciones" dentro de una .tarjeta: el boton quedaba a
1rem del parrafo. Una sola regla para los 4 (por el href, no por pagina),
sin tocar los otros 2 articulos que en la misma estructura enlazan a
/nexorisk/ en vez de a /demostraciones/.
.boton-primario es inline-flex -outer display "inline"-, y los margenes de
una caja inline no colapsan con los de un bloque vecino, se suman: por eso
este margin-top es 1.5rem y no 2.5rem, para sumar al 1rem del parrafo y
llegar a los mismos 2.5rem que el resto de CTA sueltos del sitio. */
.tarjeta > a.boton-primario[href="/demostraciones/#acceso"] { margin-top: 1.5rem; }
/* ----- Lista de articulos de /recursos/ -----
Antes eran seis tarjetas-enlace del mismo peso que las dos de demostracion:
ocho llamadas identicas en 219 palabras, sin ninguna dominante. Los
articulos pasan a enlaces de texto para que el unico boton de la pagina sea
el de las demostraciones, que es el primer paso real del embudo. */
/* De seis filas con filete en una columna de 68ch a rejilla de tarjetas. El
68ch era medida de lectura aplicada a una pieza estructural: dejaba media
pantalla vacia a la derecha y la lista ocupaba media pantalla de alto.
No hace falta clase nueva: .lista-articulos ya es exclusiva de esta pagina y
pasa de lista a rejilla. Las tarjetas son .tarjeta .tarjeta--enlace, que ya
existian sin usarse y estan hechas justo para esto: toda la caja es enlace,
con su elevacion y su titulo en teal al pasar el raton.
No se usa .rejilla-iconos porque sus cortes son 640 y 1024, y aqui hacen
falta 700 y 1100. */
.lista-articulos {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
.lista-articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.lista-articulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* La descripcion se pega al fondo de la tarjeta para que las de una fila
cierren igual aunque el titulo ocupe una linea mas. */
/* :not(.eyebrow) porque la etiqueta de tema tambien es un dentro de la
tarjeta, y esta regla, con dos clases, ganaba a .eyebrow y la pintaba de
gris en vez de teal. */
.lista-articulos .tarjeta p:not(.eyebrow) { margin: 0.5rem 0 0; color: var(--grey); font-size: 0.95rem; line-height: 1.55; }
/* A una columna el relleno de 1.75rem se paga cinco veces seguidas y alargaba
la seccion. Acotado a esta rejilla: .tarjeta la usan otras seis paginas. */
@media (max-width: 699px) {
.lista-articulos .tarjeta { padding: 1rem; }
}
/* ----- Capacidades de /soluciones/ -----
Indice a la IZQUIERDA y panel a la derecha, al reves que antes. Con el
titular a la izquierda y la lista a la derecha, la columna izquierda se
quedaba vacia 900px mientras el panel se estiraba: ahora la izquierda lleva
el titular Y la lista, que es lo que la llena, y el panel manda en la
derecha, que es donde hay sitio para dos columnas de texto.
Mismo corte que el resto de composiciones de dos columnas del sitio. */
.capacidades { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .capacidades { grid-template-columns: 340px minmax(0, 1fr); gap: 3rem; } }
.capacidades > * { min-width: 0; }
.capacidades__indice p { color: var(--grey); }
.capacidades__lista { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.capacidad + .capacidad { border-top: 1px solid var(--rule); }
/* La barra de acento vive en el boton, no en el contenedor, para que aparezca
tambien al enfocar con teclado y no solo al abrir. */
.capacidad__boton {
width: 100%; display: block; text-align: left;
padding: 1rem 0 1rem 1.1rem;
border: 0; border-left: 3px solid transparent; background: none; cursor: pointer;
font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; font-weight: 500;
color: var(--grey);
transition: color 0.15s ease, border-color 0.15s ease;
}
.capacidad__boton:hover, .capacidad__boton:focus-visible { color: var(--teal); }
.capacidad__boton[aria-expanded="true"] { color: var(--slate); font-weight: 700; border-left-color: var(--teal); }
/* ALTURA FIJA CON DESPLAZAMIENTO INTERNO. Sin ella la pagina cambiaba de largo
al abrir y cerrar y el visitante perdia el sitio. Los 540px salen de la
cuenta al reves: en una ventana de 900 con la cabecera fija de 72 quedan 828
utiles, y la seccion gasta 202 en su propio ritmo vertical (--section-y a
1440), asi que el panel puede llegar a 626. Se toman 540 para dejar aire.
tabindex="0" en el panel: un contenedor con scroll tiene que poder recibir
el foco o no hay forma de desplazarlo con el teclado. */
.capacidades__paneles { position: relative; }
.capacidad__panel {
background: var(--paper);
border: 1px solid rgba(31, 51, 80, 0.10);
border-radius: var(--radius-md);
box-shadow: 0 2px 4px rgba(22, 32, 46, 0.04), 0 12px 32px -12px rgba(22, 32, 46, 0.16);
padding: 1.75rem clamp(1.25rem, 0.1rem + 2vw, 2rem);
overflow-wrap: break-word;
}
@media (min-width: 1024px) {
/* Antes era height fija con overflow-y: auto, y la primera capacidad obligaba
a desplazar dentro del panel sin que se notara que habia mas debajo. Al
sacar el enlace de contacto fuera, el contenido se acorta y de 1440 en
adelante las cuatro caben en 540 (la mas alta pide 515). Se deja como
minimo, no como maximo: por debajo de 1440 el texto reflowa y el panel
crece en vez de recortar. Asi no hay desplazamiento interno a ningun ancho
y el bloque sigue entrando en 1440x900. */
.capacidad__panel { min-height: 540px; }
}
.capacidad__panel:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.capacidad__panel h3 { margin-top: 0; font-size: 1.3rem; }
.capacidad__panel h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin: 0 0 0.6rem; }
.capacidad__entrada { color: var(--grey); }
.capacidad__columnas { display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
@media (min-width: 700px) { .capacidad__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.capacidad__columnas ul { margin: 0; padding-left: 1.1rem; }
.capacidad__columnas li { margin-bottom: 0.45rem; font-size: 0.95rem; line-height: 1.5; }
.capacidad__nota { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--grey); }
/* Un unico enlace de contacto para las cuatro capacidades, centrado bajo la
tarjeta. Antes iba repetido dentro de cada panel, lo que obligaba a
desplazar el panel para llegar a el. */
.capacidades__cierre { margin: 1.75rem 0 0; text-align: center; font-weight: 600; }
.capacidades__cierre a { text-decoration: none; }
.capacidades__cierre a:hover, .capacidades__cierre a:focus-visible { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .capacidad__boton { transition: none; } }
/* ----- Barra minima de los tableros de /demos/ -----
Esas paginas se sirven dentro de un iframe, pero tambien son alcanzables por
URL directa, y hasta ahora no tenian ni cabecera ni un solo enlace: quien
abria el tablero en una pestana nueva se quedaba sin ninguna salida.
La barra es deliberadamente minima para no competir con el tablero. */
.barra-demo {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
padding: 0.6rem clamp(1rem, 3vw, 2rem);
background: var(--slate);
color: #E7ECF2;
font-size: 0.85rem;
font-family: var(--font-text);
}
.barra-demo a { color: #E7ECF2; text-decoration: none; }
.barra-demo a:hover, .barra-demo a:focus-visible { color: var(--gold); text-decoration: underline; }
.barra-demo__logo { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.barra-demo__etiqueta {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #B9C3CF;
}
/* ----- Seccion puente de NexoRisk (portada y /soluciones/) -----
Argumento a la izquierda, las tres cifras del caso de validacion a la
derecha, dentro de la banda oscura. El reparto es 45/55: la derecha pide un
poco mas porque sus rotulos son frases, no etiquetas de una palabra.
Se apila en 1120px, el mismo punto que .hero__rejilla, .bloque-quienes y
.dolores. Son las cuatro composiciones de dos columnas de la portada y
comparten corte a proposito, para que la pagina se reordene una sola vez. */
/* La banda hospeda la textura de grafo: position para anclarla y overflow para
que los nodos que caen fuera del lienzo no alarguen la pagina. El contenido
sube a z-index 1 para quedar por encima. */
.seccion--puente { position: relative; overflow: hidden; }
.seccion--puente > .section__inner { position: relative; z-index: 1; }
/* La textura ocupa la mitad derecha larga y se desvanece hacia el centro con
la mascara de degradado que lleva dentro. El tope de 900px evita que en
pantallas muy anchas los nodos crezcan hasta parecer una ilustracion.
Se esconde por debajo de 1120: ahi la seccion se apila, "la mitad derecha"
deja de existir como sitio libre, y el lienzo apaisado tendria que ampliarse
1.7 veces para cubrir una banda alta y estrecha, con lo que los nodos
pasarian de textura a dibujo. */
.textura-grafo {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(62%, 900px);
height: 100%;
max-width: none;
pointer-events: none;
display: block;
}
@media (max-width: 1119px) { .textura-grafo { display: none; } }
.puente { display: grid; gap: 2.75rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1120px) {
.puente { grid-template-columns: 0.45fr 0.55fr; gap: 4rem; }
}
/* Los 620px son los que mide la columna izquierda en dos columnas a 1920, asi
que el tope solo actua apilado: sin el, a 1119 el bloque mide 1030px de
ancho y el parrafo de entrada se iba a 100 caracteres por linea. */
.puente__texto { max-width: 620px; }
.cifra + .cifra { margin-top: 2rem; }
/* La cifra en mono y grande, el rotulo debajo en cuerpo normal. Sin animacion
de contador: son datos con etiqueta de validacion, y animarlos los convierte
en un efecto. */
.cifra__valor {
display: block;
font-family: var(--font-mono);
font-weight: 600;
font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: #FFFFFF;
}
/* El rotulo se para en 52ch aunque la columna de mas: a 1920 mide 757px y sin
tope la frase mas larga se iba a una sola linea de 98 caracteres. */
.cifra__rotulo {
display: block;
max-width: 52ch;
margin-top: 0.5rem;
font-size: 1rem;
line-height: 1.5;
color: #B9C3CF;
}
/* La etiqueta de validacion cierra el bloque de las tres cifras, no cada una:
es la salvedad del caso completo. */
.puente__cifras .etiqueta-caso { margin: 2rem 0 0; }
/* Atribucion de la fuente, pegada al parrafo que sustenta. El margen negativo
se come parte del 1rem que deja ese parrafo: la cita tiene que leerse como
un pie de ese dato y no como un parrafo mas. --grey sobre --paper da 5,7:1,
holgado para AA aun a este cuerpo. */
.fuente-dato { margin: -0.6rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--grey); }
.rejilla { display: grid; gap: 1.5rem; }
/* min-width:0 defensivo para las tres variantes (y para .section .rejilla-N,
el reparto fluido de mas abajo): mismo riesgo de fondo que ya obligo a
corregir .tratamientos-fila__bloque, aunque hoy ningun contenido de
.rejilla lo dispare. */
.rejilla > * { min-width: 0; }
.rejilla-2 { grid-template-columns: repeat(1, 1fr); }
.rejilla-3 { grid-template-columns: repeat(1, 1fr); }
.rejilla-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}
.franja-marca-oro { height: 3px; background: var(--gold); border: 0; width: 64px; margin: 0 0 1.5rem; }
.centrado { text-align: center; }
.texto-gris { color: var(--grey); }
/* Fila de tecnologias: cinco nombres separados por un filete vertical, al eje
izquierdo como el resto de la pagina. Sin color de marca, todo en --ink y
--grey. Se apila solo cuando no cabe. */
.tecnologias {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.55rem 0.9rem; margin-top: 1.5rem;
font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em;
}
.tecnologias__rotulo { color: var(--grey); }
.tecnologias__item { display: flex; align-items: center; gap: 0.9rem; color: var(--ink); }
.tecnologias__item::before {
content: ""; width: 1px; height: 0.95rem; background: var(--rule);
}
.mt-0 { margin-top: 0; }
/* ----- 4. Eyebrow / etiqueta ----- */
.eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 0.75rem;
}
/* ----- 5. Botones ----- */
.boton-primario, .boton-secundario, .boton-acento {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-text);
font-weight: 600;
font-size: 0.98rem;
padding: 0.85rem 1.5rem;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
border: 1.5px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
line-height: 1.2;
}
/* ----- Contorno de los botones dorados -----
El oro es un color claro: su relleno da 1.86:1 contra --paper, 1.75 contra
--soft y 1.66 contra --band, siempre por debajo del 3:1 que pide la WCAG
1.4.11 para el limite de un control. Medido sobre el render, 95 de los 126
botones dorados del sitio incumplian, en las 24 paginas publicas. No era un
problema de una seccion sino del color, asi que la correccion va en la clase.
Cambiar el fondo no servia: sobre blanco el relleno solo sube a 1.86.
Se PINTA el borde en lugar de anadirlo: la regla base ya reserva
"border: 1.5px solid transparent", asi que solo cambia el color y las
dimensiones exteriores no se mueven ni un pixel en ninguna pagina.
El contorno --ink da 8.80:1 contra el oro y de 14.58 a 16.40 contra los tres
fondos claros, asi que cumple por los dos lados, que es lo que exige 1.4.11.
En hover, contra --gold-hover, da 6.98:1.
Sobre banda oscura el borde se funde con el fondo y no cambia nada: alli el
relleno ya cumplia solo, 6.84:1 contra --slate y 8.80 contra --ink. */
.boton-primario {
background: var(--gold);
color: var(--ink);
border-color: var(--ink);
}
.boton-primario:hover { background: var(--gold-hover); color: var(--ink); }
.boton-primario:active { transform: translateY(1px); }
.boton-secundario {
background: transparent;
border-color: var(--slate);
color: var(--slate);
}
.boton-secundario:hover { background: var(--slate); color: #fff; }
.seccion--slate .boton-secundario { border-color: #fff; color: #fff; }
.seccion--slate .boton-secundario:hover { background: #fff; color: var(--slate); }
/* Tercer boton del sistema: solido, para el unico CTA de una banda oscura. Va
un escalon por encima del tamano normal (0.85/1.5rem de acolchado y 0.98rem
de letra) porque es el unico elemento clicable de una banda a pantalla
completa y al tamano corriente se quedaba timido.
Va en --gold, que es el unico color del sistema que grita "aqui se hace
clic", y aqui no compite con nada: el CTA del hero ya salio de pantalla
mucho antes de que esta banda entre, y el CTA final todavia no aparece.
El oro rinde ademas mucho mejor sobre azul oscuro que sobre blanco, que era
el problema de origen: medido sobre el render, el relleno da 6.84:1 contra
la banda --slate, frente a 1.86:1 del mismo boton sobre --paper. La
etiqueta --ink sobre el oro da 8.80:1.
Se descartaron el blanco (12.75:1 de relleno, tambien valido, pero el
blanco pesa mas de lo que este punto de la pagina necesita) y el teal
solido, que se quedaba en 2.11:1 de relleno, por debajo del 3:1 que pide la
WCAG 1.4.11 para el limite de un control. */
.boton-acento { padding: 1.1rem 2.1rem; font-size: 1.08rem; background: var(--gold); color: var(--ink); border-color: var(--ink); }
.boton-acento:hover { background: var(--gold-hover); color: var(--ink); }
.boton-acento:active { transform: translateY(1px); }
.boton-primario:disabled, .boton-secundario:disabled, .boton-acento:disabled { opacity: 0.6; cursor: not-allowed; }
.boton-ancho-completo { width: 100%; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
/* Par de CTA del hero de la portada. Los dos botones piden 505px con el hueco;
por debajo de 560px de ventana la columna ya no da para tanto y caen en dos
filas. Cuando eso pasa se apilan a ancho completo, en vez de quedar sueltos
y de anchos distintos. Acolchado y cuerpo de letra quedan en sus valores
normales: con las etiquetas de 24 y 25 caracteres el boton mas ancho mide
247px y entra de sobra en los 320px de contenido de una ventana de 360.
Va en una clase propia y no en .grupo-botones para no alcanzar a los heroes
de las otras 17 paginas. */
@media (max-width: 560px) {
.grupo-botones--largos { flex-direction: column; align-items: stretch; }
.grupo-botones--largos .boton-primario,
.grupo-botones--largos .boton-secundario { width: 100%; }
}
/* ----- 6. Tarjetas ----- */
.tarjeta {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
height: 100%;
}
.tarjeta--suave { background: var(--soft); }
.tarjeta--enlace { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.tarjeta--enlace:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tarjeta h3 { margin-top: 0; }
/* ----- Escala de titulo en contexto estrecho -----
La escala fluida global de h3 esta pensada para encabezados que viven en el
ancho del contenedor. Dentro de una rejilla la caja es mucho mas estrecha:
la tarjeta mas angosta de la banda mide 300px (el suelo del minmax) y deja
244px de texto util. Ahi el h3 global llegaba a 28px y partia el titulo mas
largo del sitio en 5 lineas de 8 caracteres, mientras el cuerpo ocupaba 2:
la jerarquia quedaba invertida.
LA REGLA NO ES UN MINIMO DE CARACTERES POR LINEA. Un titulo corto partido
en dos lineas de 15 caracteres no es un defecto. Lo que hay que evitar es
la jerarquia invertida: que el titulo ocupe mas renglones que el cuerpo
que lo explica. Ese era el caso a 28px, con titulos de 3 a 5 lineas sobre
cuerpos de 2, y ademas dejaba huecos muertos en las tarjetas cortas.
El criterio operativo es el titulo mas largo del sitio en 3 lineas o menos.
Medido sobre los 47 titulos reales: 21px es el maximo que mantiene el mas
largo en 3 lineas; se usa un techo de 20px para dejar holgura. La amplitud
fluida baja de 8px (20->28) a 3px (17->20), porque en una caja que apenas
crece no tiene sentido que la letra crezca mucho. */
.tarjeta h3,
.rejilla h3,
.mockup-navegador__imagen-cont h3 {
font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
line-height: 1.3;
/* Color de texto principal, no teal: el teal significa "esto es
interactivo" y estas tarjetas no son clicables. El teal se reserva para
los enlaces reales, como el "Conocer mas" del pie de la tarjeta. */
color: var(--slate);
}
/* Tarjetas que SI son un enlace: el titulo forma parte del . Mantiene el
color de texto, porque la afordancia ya la da la flecha, y pasa a teal solo
al interactuar. */
.tarjeta--enlace:hover h3,
.tarjeta--enlace:focus-visible h3 { color: var(--teal); }
/* Sobre banda oscura, solo las tarjetas: conservan fondo blanco, asi que el
titulo sigue en --slate. Un h3 suelto sobre la banda debe quedarse blanco,
asi que NO se incluye .rejilla h3 aqui: seria texto slate sobre slate. */
.seccion--slate .tarjeta h3 { color: var(--slate); }
.tarjeta__icono { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--teal); }
.tarjeta__enlace-texto { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--teal); }
/* Reparto en tres columnas exactas para los bloques de seis piezas. Con el
auto-fit general (minimo 300px) seis caben en cuatro columnas a partir de
~1300px de contenido y la segunda fila queda con dos sueltas; tres y tres
reparte el peso por igual. */
.rejilla--tres { grid-template-columns: 1fr; }
@media (min-width: 640px) { .section .rejilla--tres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .section .rejilla--tres { grid-template-columns: repeat(3, 1fr); } }
/* Lista de acciones concretas dentro de una tarjeta ("que va a poder hacer"). */
/* Marco neutro para una captura de producto. Sustituye al mockup-navegador en
la seccion de demostraciones: aquel imitaba una ventana de macOS (barra,
tres circulos de colores, barra de direccion) y eso ataba el producto a un
sistema operativo que no es el del cliente. Aqui solo la captura.
MANDA EL MARCO, NO EL ARCHIVO. Las dos capturas conservan su proporcion
nativa (1.5131 la gerencial, 1.7778 la de redes) y es el contenedor, con
aspect-ratio fijo 110:67, quien recorta lo que sobra via object-fit: cover.
Antes se rellenaban los archivos hasta cuadrar con el marco, y eso dejaba
bandas vacias que se notaban: ninguna de las dos capturas se puede tomar
con la proporcion exacta del marco sin recapturarlas.
Cada una se recorta por un eje distinto, y no es una eleccion: se deduce de
comparar su proporcion con la del marco. La gerencial es mas estrecha, asi
que cover la escala por ancho y le recorta 68px de alto (7.8%). La de redes
es mas apaisada, asi que se escala por alto y le recorta 109px de ancho
(7.6%); su eje vertical queda exacto y no pierde ni arriba ni abajo.
De ahi que el object-position de cada una actue sobre un eje diferente.
Reserva el alto antes de que la imagen cargue, asi que no hay salto de
maquetacion. El margen inferior de 1.75rem (28px) es lo que separa la
captura del titulo: pegados al borde de la imagen se leian como pie de foto. */
.captura {
aspect-ratio: 110 / 67;
margin: 0 0 1.75rem;
border: 1px solid var(--rule);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
box-shadow: 0 8px 20px -12px rgba(22, 32, 46, 0.28);
}
.captura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* La gerencial se ancla arriba para conservar la cabecera con el nombre de la
cooperativa y las pestanas; lo que se va es la fila de controles de abajo,
que no aporta nada a 593px. */
.captura--arriba img { object-position: center top; }
/* La de redes se ancla a la izquierda para conservar entero el panel de
filtros, que es donde se leen los nucleos detectados, las calificaciones y
los roles; lo que se recorta es el borde derecho de la ficha del socio, que
a este tamano ya no era legible. */
.captura--izquierda img { object-position: left center; }
/* Un escalon mas de aire entre el titulo y su parrafo que el 0.75rem global:
con la captura encima, el bloque de texto necesita separarse como grupo. */
.tarjeta .captura + h3 { margin-bottom: 0.85rem; }
/* Cierre de la seccion de demostraciones: una sola llamada a la accion para
las dos tarjetas, centrada bajo la rejilla. Las tarjetas ya no son enlaces,
asi que este boton es el unico camino y por eso va en --gold: es el CTA
principal de esta seccion, no un enlace secundario.
La nota va en --grey sobre --paper, 5.72:1, holgado para AA a 0.85rem. */
.cierre-demos { text-align: center; margin-top: 2.5rem; }
.cierre-demos__linea { margin: 0 0 1rem; }
.cierre-demos__nota {
max-width: 56ch;
margin: 1rem auto 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--grey);
}
.lista-acciones { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.5rem; }
.lista-acciones li { position: relative; padding-left: 1.1rem; font-size: 0.95rem; }
.lista-acciones li::before {
content: "";
position: absolute; left: 0; top: 0.6em;
width: 5px; height: 5px; border-radius: 50%;
background: var(--rule);
}
/* Precision honesta al pie de una tarjeta (por ejemplo, que un tablero esta
pensado para pantalla ancha). Va en gris y sin icono: es una condicion de
uso, no una advertencia. */
.tarjeta__nota {
margin: 0.9rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--rule);
font-size: 0.85rem;
line-height: 1.5;
color: var(--grey);
}
/* ----- 7. Caja semantica (callout) ----- */
.callout {
border-left: 3px solid;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 1.1rem 1.35rem;
margin: 1.5rem 0;
}
.callout__titulo {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.98rem;
margin: 0 0 0.35rem;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.8rem;
}
.callout p { color: var(--ink); margin: 0; }
.callout--critico { background: var(--bg-red); border-color: var(--crimson); }
.callout--critico .callout__titulo { color: var(--crimson); }
.callout--aviso { background: var(--bg-amber); border-color: var(--amber); }
.callout--aviso .callout__titulo { color: var(--amber); }
.callout--nota { background: var(--bg-grey); border-color: var(--grey); }
.callout--nota .callout__titulo { color: var(--grey); }
.callout--metodo { background: var(--soft); border-color: var(--teal); }
.callout--metodo .callout__titulo { color: var(--teal); }
.callout--positivo { background: var(--bg-green); border-color: var(--forest); }
.callout--positivo .callout__titulo { color: var(--forest); }
/* Modificador de compactacion (columna izquierda de /contacto/, iteracion
2): mismo callout, menos aire arriba y menos acolchado interno. */
.callout--compacto { margin-top: 1rem; padding: 0.9rem 1.1rem; }
/* ----- 7b. Insignia de nivel de riesgo (CRITICO/ALTO/MEDIO/BAJO) ----- */
.nivel-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.3rem 0.7rem 0.3rem 0.55rem;
border-radius: 999px;
}
.nivel-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nivel-badge--critico { background: var(--nivel-critico-bg); color: var(--nivel-critico); }
.nivel-badge--alto { background: var(--nivel-alto-bg); color: var(--nivel-alto); }
.nivel-badge--medio { background: var(--nivel-medio-bg); color: var(--nivel-medio); }
.nivel-badge--bajo { background: var(--nivel-bajo-bg); color: var(--nivel-bajo); }
/* ----- 8. Franja de indicadores (kpi-strip) ----- */
.kpi-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem 2rem;
margin: 1.75rem 0;
}
@media (min-width: 640px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); } }
/* min-width:0 defensivo: hoy las etiquetas caben, pero es el mismo item
de grid con texto que ya obligo a corregir .tratamientos-fila__bloque. */
.kpi-strip__item { min-width: 0; border-top: 3px solid var(--gold); padding-top: 0.6rem; }
.kpi-strip__valor {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--slate);
line-height: 1.1;
}
.seccion--slate .kpi-strip__valor { color: #fff; }
.kpi-strip__valor--critico { color: var(--crimson); }
.kpi-strip__etiqueta {
display: block;
font-size: 0.8rem;
color: var(--grey);
margin-top: 0.35rem;
line-height: 1.35;
}
.seccion--slate .kpi-strip__etiqueta { color: #B9C3CF; }
.etiqueta-caso {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--grey);
text-transform: uppercase;
letter-spacing: 0.04em;
display: inline-block;
margin: 0.5rem 0 1rem;
}
.seccion--slate .etiqueta-caso { color: #9FAEBD; }
/* ----- 9. Cintillo de seccion (section-bar) ----- */
.section-bar {
background: var(--slate);
color: #fff;
border-left: 4px solid var(--gold);
padding: 1.75rem 2rem;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin-bottom: 2.5rem;
}
.section-bar .eyebrow { color: #7FD4CE; }
.section-bar h2 { color: #fff; margin-bottom: 0; }
/* ----- 10. Acordeon FAQ ----- */
.faq { max-width: 820px; }
.faq details {
border-bottom: 1px solid var(--rule);
padding: 1.1rem 0;
}
.faq summary {
cursor: pointer;
font-family: var(--font-display);
font-weight: 600;
color: var(--slate);
font-size: 1.05rem;
padding-right: 2rem;
position: relative;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute;
right: 0;
top: -0.15rem;
font-size: 1.5rem;
color: var(--teal);
transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { margin-bottom: 0.75rem; }
.faq__respuesta { color: var(--ink); }
.faq__respuesta p:first-child { margin-top: 0; }
/* ----- 11. Tabla comparativa ----- */
.tabla-comparativa {
border: 1px solid var(--rule);
border-radius: var(--radius-md);
overflow: hidden;
}
.tabla-comparativa th, .tabla-comparativa td {
padding: 0.9rem 1.1rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--rule);
font-size: 0.98rem;
}
.tabla-comparativa thead th {
background: var(--slate);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
}
.tabla-comparativa tbody tr:nth-child(even) { background: var(--band); }
.tabla-comparativa td:first-child, .tabla-comparativa th:first-child { border-right: 1px solid var(--rule); }
.tabla-comparativa ul { margin: 0; padding-left: 1.1rem; }
.contenedor-tabla { overflow-x: auto; }
/* ----- 12. Header ----- */
.cabecera {
position: sticky;
top: 0;
z-index: 500;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cabecera.con-sombra { box-shadow: var(--shadow-sm); border-color: var(--rule); }
.cabecera__barra {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
gap: 1rem;
}
.cabecera__logo { display: flex; align-items: center; flex-shrink: 0; }
/* Sin regla sobre `.cabecera__logo img`: al ser (0,1,1) le ganaria a las clases
de abajo y romperia el intercambio por breakpoint. El contenedor es flex, asi
que las imagenes ya se blockifican solas. */
/* Base (< 640px): lockup horizontal completo, mismo SVG que en escritorio,
pero acotado por ancho (no por alto) para que quepa junto a la hamburguesa.
150-180px cubre 320-390px de viewport con margen; clamp() lo deja fijo en
180px del resto para arriba, hasta que a 640px el bloque de abajo retoma
el criterio de escritorio (altura fija). El isotipo deja de mostrarse. */
.cabecera__logo-completo { display: block; width: clamp(150px, 46vw, 180px); height: auto; }
.cabecera__logo-isotipo { display: none; }
/* Altura unica del lockup en todas las bandas de escritorio (>= 640px).
26px -> 280.5px de ancho y 16.7px de altura de x.
No se reduce en tableta: entre 640px y el corte del nav la barra solo lleva
logo, hamburguesa y (desde 1024px) el CTA, asi que sobra sitio y encogerlo
solo restaba legibilidad. */
.cabecera__nav-escritorio { display: none; }
.cabecera__acciones { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* El CTA de la barra no parte nunca su texto. No tenia max-width ni un padding
culpable: se partia por ser el unico item flexible de la barra, asi que
absorbia toda la presion y se encogia por debajo de su ancho de contenido.
Con nowrap su ancho minimo automatico pasa a ser el del texto completo. */
.cabecera__acciones .boton-primario { display: none; white-space: nowrap; }
/* El bloque base de la hamburguesa va antes de la consulta de 1024px: si va
despues, su `display: inline-flex` anula por cascada al `display: none` de
escritorio y el boton aparece junto al menu completo. */
.cabecera__hamburguesa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: transparent;
border: 1.5px solid var(--rule);
border-radius: var(--radius-sm);
cursor: pointer;
}
.cabecera__hamburguesa svg { width: 22px; height: 22px; }
@media (min-width: 640px) {
.cabecera__logo-completo { width: auto; height: 26px; }
}
/* El CTA aparece antes que el nav: entre 1024px y el corte del nav la barra
lleva logo + CTA + hamburguesa, que suman ~558px y caben de sobra. */
@media (min-width: 1024px) {
.cabecera__acciones .boton-primario { display: inline-flex; }
}
/* ---- Corte de la navegacion completa: 1200px ----
NO son 1024px. El conjunto logo + nav + CTA + separaciones mide 1060.7px
(280.5 + 16 + 542.7 + 16 + 205.5), medido sobre la pagina renderizada. El
ancho util es min(ventana,1180) - 64 hoy, y ventana - 2*clamp(20px,4vw,64px)
cuando llegue el gutter del Paso 1. El minimo que satisface ambos es 1153px;
se elige 1200px, que deja 55.3px de holgura con el contenedor actual y
43.3px con el del Paso 1, en vez de los 24.9px que dejaba 1180px. Ese
margen extra cubre que la fuente del nav se dibuje mas ancha de lo medido.
Mostrar el nav a 1024px era pedirle que cupiera en 960px. */
@media (min-width: 1200px) {
/* Compensacion optica, solo donde hay nav con la que alinearse.
VALOR DERIVADO, no ajustado a ojo. Sale de dos alturas de x concretas: la
del wordmark (17.25px sobre 24.38px de tinta) y la del nav (8.50px sobre
11.75px, o sea Inter a 0.96rem). Una banda de altura de x esta desplazada
respecto al centro de su caja de tinta en alto*(1-altura_x/alto)/2:
logo 24.38*(1-0.708)/2 = 3.56px
nav 11.75*(1-0.723)/2 = 1.63px
La diferencia es 1.93px teoricos y 2.25px medidos sobre la pagina.
DEPENDE DE: la altura del logo (26px), el tamano de fuente del nav
(0.96rem) y la familia (Inter, cuya altura de x es 0.546em). Si cambia
cualquiera de los tres, este numero deja de ser correcto: hay que volver a
medir ambas bandas y recalcular la diferencia, no retocarlo a ojo. */
.cabecera__logo-completo { transform: translateY(-2.25px); }
.cabecera__nav-escritorio {
display: flex;
gap: 1.85rem;
list-style: none;
margin: 0;
padding: 0;
}
.cabecera__nav-escritorio a {
color: var(--ink);
text-decoration: none;
font-weight: 600;
font-size: 0.96rem;
padding: 0.35rem 0.1rem;
/* El borde va arriba y abajo aunque solo se pinte el de abajo: si solo
existe el inferior, la caja crece 2px por un lado y `align-items:center`
centra una caja asimetrica, dejando el texto 1px por encima del centro
real de la barra. Medido: 1.06px de desfase contra el logo. */
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.cabecera__nav-escritorio a:hover { color: var(--teal); }
.cabecera__nav-escritorio a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--gold); }
.cabecera__hamburguesa { display: none; }
}
.menu-movil {
position: fixed;
inset: 0;
top: var(--header-h);
background: var(--paper);
z-index: 490;
padding: 1.5rem 1.25rem 2rem;
overflow-y: auto;
display: none;
}
.menu-movil.abierto { display: block; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil li { border-bottom: 1px solid var(--rule); }
.menu-movil a {
display: block;
padding: 1.1rem 0.25rem;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--slate);
text-decoration: none;
}
.menu-movil a[aria-current="page"] { color: var(--teal); }
.menu-movil .boton-primario { margin-top: 1.5rem; width: 100%; }
/* Mismo corte que la hamburguesa que lo abre: si este se queda en 1024px, entre
1024 y 1200 el boton se ve pero el menu no puede desplegarse. */
@media (min-width: 1200px) { .menu-movil { display: none !important; } }
.cabecera--landing .cabecera__barra { justify-content: center; }
/* ----- 13. Footer ----- */
.pie {
background: var(--ink);
color: #C7D0DA;
padding: 3.5rem 0 0;
font-size: 0.95rem;
}
/* Sin subrayado en reposo: en el pie hay 16 enlaces seguidos y subrayarlos
todos convierte la columna en ruido. El subrayado aparece al interactuar. */
.pie a { color: #E7ECF2; text-decoration: none; }
.pie a:hover,
.pie a:focus-visible { color: var(--gold); text-decoration: underline; }
.pie__rejilla {
display: grid;
gap: 2.25rem;
grid-template-columns: 1fr;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 640px) { .pie__rejilla { grid-template-columns: repeat(2, 1fr); } }
/* min-width:0 defensivo para el tramo 640-1199px, el unico donde las
columnas son fracciones (1fr) y no max-content: por debajo y por encima
de ese tramo el pie ya esta protegido (una columna, o columnas que se
miden por su propio contenido). Las cuatro columnas del pie no tienen
clase propia mas alla de .pie__marca, asi que el selector es el hijo
directo. */
.pie__rejilla > * { min-width: 0; }
/* Cuatro columnas de ancho de contenido, con el sobrante repartido a partes
iguales entre ellas. Con fracciones fijas (1.4fr 1fr 1fr 1fr) las columnas
median 424/303/303/303 y sus contenidos 244/252/162/118, asi que cada una
arrastraba un sobrante distinto y los huecos salian de 215, 87 y 177px.
Con max-content + space-between el hueco es el mismo entre todas y las
columnas quedan ancladas a los dos bordes en vez de a la deriva.
Entra a 1200px, no a 1024: por debajo no cabrian los cuatro contenidos
(776px) mas un hueco decente. */
@media (min-width: 1200px) {
.pie__rejilla {
grid-template-columns: repeat(4, max-content);
justify-content: space-between;
column-gap: 2rem;
}
}
/* Linea de apoyo del CTA de cierre. Va entre el titular y el boton, y en el
gris claro de la banda oscura para que el titular siga mandando. */
.cta-final__apoyo { max-width: 56ch; margin-inline: auto; color: #C7D0DA; }
/* El correo del pie SI va subrayado en reposo, al reves que el resto de
enlaces de la columna: no es navegacion, es un dato de contacto, y conviene
que se lea como algo sobre lo que se puede pulsar. */
.pie__correo a { text-decoration: underline; }
.pie__marca img { height: 72px; width: auto; margin-bottom: 1rem; }
.pie__marca p { color: #B9C3CF; max-width: 30ch; }
/* h3, no h4: el pie encadenaba Soluciones/NexoRisk/Empresa
sin ningun
h3 intermedio, un salto real en las paginas donde la ultima cabecera del
cuerpo es h2. El tamano visual no cambia: esta regla fija cada propiedad
que separa a un h3 de serie del rotulo del pie, igual que antes lo hacia
para h4. Se suma el selector h2: en 404.html el pie es la primera cabecera
despues del h1 (no hay h2 de por medio), asi que ahi el rotulo usa h2 en
vez de h3 para no repetir el mismo salto de nivel. font-weight y
line-height van explicitos porque el h2 base del sitio no coincide con los
del h3 (700/1.12 frente a 600/1.2) y sin fijarlos aqui el rotulo de
404.html se veria mas grueso y con mas interlineado que en el resto de
paginas. */
.pie h3, .pie h2 { color: #fff; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.65rem; }
.pie__inferior {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: space-between;
align-items: center;
/* padding-block, no la forma abreviada: en los pies minimos esta clase
comparte elemento con .section__inner, y `padding: 1.5rem 0` le ponia el
padding-inline a cero, dejando el texto pegado a los bordes de la ventana. */
padding-block: 1.5rem;
font-size: 0.85rem;
color: #9FAEBD;
}
.pie__inferior nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pie--minimo { padding: 2.5rem 0; }
.pie--minimo .pie__inferior { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2rem; }
/* ----- 14. Hero ----- */
/* El hero lleva su propio ritmo vertical: mas corto por arriba porque va
pegado al header. SUSTITUYE al padding-block de .section, no se suma: misma
especificidad y declarado despues en el archivo. */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
/* Limite del H1 del hero, solo en las paginas ya migradas a .section. */
.section.hero h1 { max-width: 640px; }
/* Titular de la portada. 560px medidos, no elegidos: con su texto actual el
unico tramo que da 4 lineas y ninguna por debajo del 60% del ancho en 1280,
1440 y 1920 a la vez es 520-580px. Desde 590 la cuarta linea cae al 48%; de
610 en adelante bajaria a 3 lineas, pero solo desde 1440, porque a 1280 la
columna de texto mide 593px y no llega. Se toma el centro del tramo para
dejar margen a los dos lados. */
.section.hero h1.titular-portada { max-width: 560px; }
.hero__rejilla {
display: grid;
gap: 2.5rem;
align-items: center;
grid-template-columns: 1fr;
}
/* El hero se parte en dos columnas solo desde 1120px. Por debajo, la columna
de texto baja del ancho que el titular necesita para romper bien: medido,
necesita ~10.67 veces su tamano de letra, y desde 847px de ventana la letra
ya esta en su techo de 48px, o sea 512px de columna. Con el reparto 1.05fr
de 2fr sobre el contenido menos el gap, eso se alcanza en
0.525*(0.92V - 48) >= 512 -> V >= 1112.6px. Se redondea a 1120.
Apilado, el H1 lo limita su max-width de 640px y rompe como a 1920px. */
@media (min-width: 1120px) { .hero__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; } }
.hero__visual { order: -1; }
@media (min-width: 1024px) { .hero__visual { order: 2; } }
/* Parrafo de entrada. .lead es la clase del Paso 1; .hero__parrafo es el
nombre que ya usaban las 18 paginas con hero, y comparte escala para no
dejar dos tamanos de entradilla conviviendo. */
.lead,
.hero p.hero__parrafo { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); line-height: 1.5; }
.hero p.hero__parrafo { color: var(--grey); max-width: 54ch; }
/* Sirve para las dos formas: la banda como ancestro del hero y la banda puesta
sobre el propio hero, que es como esta /nexorisk/. Sin la segunda, el parrafo
se quedaba en --grey sobre --slate: 2.23:1. */
.seccion--slate .hero p.hero__parrafo,
.seccion--slate.hero p.hero__parrafo { color: #C7D0DA; }
/* ----- Composicion de imagen del hero (solo la portada) -----
Dos piezas superpuestas: el tablero entero detras y, delante, un nucleo de
garantias cruzadas desplazado sobre su esquina inferior derecha, que se sale
del borde para que se despegue. El lienzo reserva su alto con aspect-ratio,
asi que las imagenes no empujan nada al terminar de cargar.
Las proporciones salen de la caja: el fondo ocupa el 88% del ancho y el
frente el 46%, o sea el 52,3% del fondo. Con el fondo en 16:9 y el frente en
1,926:1, el alto del lienzo queda en 1/1.8 del ancho: 0,4950 del fondo mas
0,0606 que el frente asoma por debajo. */
.composicion-hero { margin: 0; }
.composicion-hero__lienzo { position: relative; width: 100%; aspect-ratio: 1.8; }
.composicion-hero__fondo,
.composicion-hero__frente {
position: absolute;
display: block;
height: auto;
border: 1px solid var(--rule);
border-radius: 12px;
background: var(--paper);
}
.composicion-hero__fondo {
top: 0; left: 0; width: 88%;
box-shadow: 0 40px 80px -40px rgba(22, 32, 46, 0.35);
}
/* Sombra mas cerrada y mas oscura que la del fondo: es lo que despega la pieza
de delante, porque las dos comparten borde y radio. */
.composicion-hero__frente {
right: 0; bottom: 0; width: 46%;
box-shadow: 0 28px 48px -18px rgba(22, 32, 46, 0.45);
}
.composicion-hero__rotulo {
margin: 1.1rem 0 0;
font-family: var(--font-mono);
font-size: 0.72rem;
line-height: 1.5;
color: var(--grey);
}
/* Por debajo de 1120px el hero se apila a una columna y la superposicion deja
de tener sentido: el frente bajaria de 300px de ancho. Se esconde el fondo y
queda solo el nucleo, que es la pieza que se lee en poco ancho. Es el mismo
punto de corte de .hero__rejilla, para que los dos cambios ocurran a la vez.
El tope de 720px evita que en una tableta se sirva mas imagen de la que hay:
el recorte fuente mide 1560px y 720 x 2 = 1440 sigue por debajo. */
@media (max-width: 1119px) {
.composicion-hero__lienzo { aspect-ratio: auto; }
.composicion-hero__fondo { display: none; }
.composicion-hero__frente {
position: static;
width: 100%;
max-width: 720px;
margin-inline: auto;
box-shadow: 0 24px 48px -24px rgba(22, 32, 46, 0.32);
}
}
/* ----- Abanico del informe de ejemplo (portada #informe-ejemplo y
/nexorisk/ #informe) -----
Variante de tres piezas de .composicion-hero, no una copia: la geometria
de dos capas (fondo 88%/frente 46%, esquina a esquina) no sirve para tres,
asi que las proporciones y el lienzo se recalculan aqui, pero se conservan
el criterio (borde, radio, sombras diferenciadas, colapso por debajo de
1120px) y el token de las tres paginas SVG son A4 (0.7072 = 210/297mm), de
ahi que las tres compartan el mismo aspect-ratio.
Escritorio: tres piezas en abanico, la frontal (p.27, la mas visual) sin
rotar y las de atras giradas -4/-2deg. El lienzo reserva 0.82 de
aspect-ratio: con la pieza frontal al 68% de ancho y 18% de top, su borde
inferior queda en 0.18+0.68/0.7072=0.9617 de la altura del lienzo, dentro
del 1/0.82=1.2195 disponible. */
.composicion-informe { margin: 0; }
.composicion-informe__lienzo { position: relative; width: 100%; aspect-ratio: 0.82; }
.composicion-informe__pieza {
position: absolute; display: block; height: auto;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper);
}
.composicion-informe__pieza--fondo {
top: 0; left: 0; width: 56%;
transform: rotate(-4deg);
box-shadow: 0 30px 60px -30px rgba(22, 32, 46, 0.30);
z-index: 1;
}
.composicion-informe__pieza--medio {
top: 9%; left: 16%; width: 62%;
transform: rotate(-2deg);
box-shadow: 0 34px 64px -28px rgba(22, 32, 46, 0.38);
z-index: 2;
}
.composicion-informe__pieza--frente {
top: 18%; left: 32%; width: 68%;
box-shadow: 0 28px 48px -18px rgba(22, 32, 46, 0.45);
z-index: 3;
}
/* Entre 700 y 1119px no hay sitio para tres piezas desplegadas -la de atras
bajaria de 300px de ancho, el mismo limite que usa .composicion-hero-, asi
que se esconde el fondo y quedan dos: la del medio pasa a hacer de fondo
(rotacion reducida) y la frontal gana algo de sitio. */
@media (max-width: 1119px) {
.composicion-informe__pieza--fondo { display: none; }
.composicion-informe__pieza--medio { top: 0; left: 0; width: 66%; transform: rotate(-2deg); }
.composicion-informe__pieza--frente { top: 10%; left: 22%; width: 72%; }
}
/* Por debajo de 700px solo queda la protagonista (p.27): centrada, sin
rotar, sin el lienzo absoluto -que ya no hace falta con una sola pieza-.
Mismo criterio que el colapso de .composicion-hero. */
@media (max-width: 699px) {
.composicion-informe__lienzo { aspect-ratio: auto; }
.composicion-informe__pieza--medio { display: none; }
.composicion-informe__pieza--frente {
position: static;
width: 80%;
max-width: 300px;
margin-inline: auto;
box-shadow: 0 20px 40px -20px rgba(22, 32, 46, 0.30);
}
}
/* ----- Seccion #informe de /nexorisk/ (iteracion 3) -----
Rediseño completo: dos filas de grid en vez de bloques verticales
apilados (el problema de la iteracion 2 era ese: texto corto + abanico
alto dejaban un hueco enorme debajo del texto antes de la fila
siguiente, y el flujo -a ancho completo con solo 3 de sus 6 columnas
ocupadas- dejaba otro hueco a su derecha). Ahora texto+abanico viven en
la MISMA fila (fila superior) y flujo+acceso en la MISMA fila (fila
inferior), asi no hay bloques que "sobren" en altura.
Breakpoint en 1120px, no 1024: coincide con el punto en el que
.composicion-informe ya muestra las tres piezas del abanico (ver
@media max-width:1119px mas arriba); partir el grid en un punto donde el
abanico todavia esta en su version de 2 piezas se veia descompensado. */
.informe-nexorisk__superior { display: grid; gap: 1.75rem; margin-top: 1.25rem; }
@media (min-width: 1120px) {
.informe-nexorisk__superior {
/* 55/45 aproximado: 11fr/9fr. align-items:center para que el abanico -mas
alto que el bloque de texto por su aspect-ratio 0.82- quede centrado
respecto al texto en vez de colgar por abajo dejando aire encima. */
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
gap: clamp(2rem, 3vw, 3.5rem);
align-items: center;
}
}
.informe-nexorisk__texto .eyebrow { margin-bottom: 0.4rem; }
.informe-nexorisk__texto h2 { margin: 0 0 0.75rem; font-size: clamp(1.45rem, 1.1vw + 1.15rem, 1.85rem); line-height: 1.22; }
.informe-nexorisk__intro { margin: 0 0 1.25rem; max-width: 54ch; }
.informe-nexorisk__texto h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.informe-nexorisk__texto .lista-acciones { gap: 0.5rem; margin-bottom: 0; }
.informe-nexorisk__texto .lista-acciones li { font-size: 0.93rem; line-height: 1.45; }
.informe-nexorisk__visual { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.informe-nexorisk__visual .composicion-informe { width: 100%; max-width: 300px; margin-inline: auto; }
@media (min-width: 1120px) {
/* 380px: el extremo inferior del rango pedido (380-460px). El lienzo
lleva aspect-ratio 0.82 fijo -no se toca, es el que evita que la pieza
frontal se recorte-, asi que un ancho mayor solo hace crecer la altura
en la misma proporcion; a 380px la altura del abanico (~490px con la
capsula) ya queda razonablemente cerca de la del bloque de texto
(~417px) sin bajar del piso pedido. */
.informe-nexorisk__visual .composicion-informe { max-width: 380px; }
}
/* Capsula compacta, exclusiva de este contexto: la generica .etiqueta-sintetico
(usada tambien como pie de figura en Inicio y como badge en la barra del
tablero) se queda grande para ir pegada al abanico dentro de una columna
angosta. No se toca la clase base -tiene otros usos-, se añade un
modificador solo con lo que cambia. */
.etiqueta-sintetico--micro { font-size: 0.68rem; padding: 0.2rem 0.55rem; margin: 0; }
/* Fila inferior: flujo (60%) + tarjeta de acceso (40%), en la misma fila en
vez de una fila para el flujo y otra debajo para el cierre -que es lo que
dejaba el flujo con medio ancho de columna vacio a su derecha, porque a
ancho completo de seccion .secuencia ya cae en su variante de 6
columnas aunque solo tenga 3 pasos-. */
.informe-nexorisk__inferior { display: grid; gap: 1.75rem; margin-top: 1.25rem; }
@media (min-width: 1120px) {
.informe-nexorisk__inferior {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: clamp(2rem, 3vw, 3.5rem);
align-items: start;
}
}
.informe-nexorisk__flujo { margin: 0; --sec-ico: 40px; --sec-n: 15px; --sec-sep: 0.45rem; gap: 1.25rem 0.75rem; }
.informe-nexorisk__flujo .secuencia__icono img { width: 22px; height: 22px; }
.informe-nexorisk__flujo .secuencia__paso h3 { font-size: 1rem; margin-top: 0.1rem; }
.informe-nexorisk__flujo .secuencia__paso p { font-size: 0.88rem; margin-top: 0.15rem; }
/* Por encima de 1280px .secuencia pasa a 6 columnas -pensada para el uso de
6 pasos en /nosotros/-, lo que con solo 3 pasos aqui los deja apretados
contra la izquierda y medio ancho de fila en blanco a la derecha. Se
fuerza de vuelta a 3: selector compuesto para ganarle por especificidad a
la regla base, que esta mas abajo en el archivo. */
@media (min-width: 1280px) {
.secuencia.informe-nexorisk__flujo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.informe-nexorisk__frase { margin: 0.7rem 0 0.25rem; }
.informe-nexorisk__nota { margin: 0; font-size: 0.85rem; }
/* Tarjeta de acceso vertical: mismo .tarjeta del sistema, con menos
acolchado -es una tarjeta de acceso, no de contenido largo- y el mismo
criterio de .tarjeta--formulario. El titulo va mas pegado a la lista de
pasos que el h3 por defecto, y el boton queda separado del ultimo paso
sin sumarse al gap que ya deja .pasos--vertical entre pasos. */
.acceso-informe { padding: 0.9rem 1.4rem 1rem; }
.acceso-informe h3 { margin-top: 0.15rem; margin-bottom: 0.6rem; }
.acceso-informe .pasos--vertical { gap: 0.7rem; margin-bottom: 0.6rem; }
.acceso-informe .pasos--vertical .paso:not(:last-child)::after { bottom: -0.7rem; }
/* ----- Seccion "Que es Indicadores Clave" (solo la portada) ----- */
.bloque-quienes { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
/* Mismo punto de corte que .hero__rejilla: las dos secciones de arriba de la
portada pasan a una columna a la vez, y el esquema cae debajo del texto. */
@media (min-width: 1120px) {
.bloque-quienes { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}
/* La medida manda sobre el ancho de la columna: aunque la rejilla le de mas
sitio, el texto se queda en 68ch. */
.bloque-quienes__texto { max-width: 68ch; }
.bloque-quienes__texto > p:last-child { margin-bottom: 0; }
/* ----- Seccion "El informe" (portada, despues de demostraciones) -----
45/55 a favor del abanico, no el 50/50 de .rejilla-2 ni el 40/60 de
.contacto__rejilla: aqui el texto es mas corto (parrafo + 3 apoyos + 2
botones) y la pieza visual necesita el espacio extra para que la pagina
27 en primer plano no se lea apretada. Mismo punto de corte que
.bloque-quienes y .hero__rejilla, 1120px. */
.informe-inicio__rejilla { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
.informe-inicio__rejilla > * { min-width: 0; }
@media (min-width: 1120px) {
.informe-inicio__rejilla { grid-template-columns: 0.45fr 0.55fr; gap: 3rem; }
/* El abanico llenaba toda su columna del 55% y dominaba la seccion sobre
el texto. Se acota a 75% de esa columna (~25% menos de ancho renderizado)
y se pega al borde derecho, que es donde ya cae la pieza frontal: reduce
el alto total (el lienzo escala proporcional, mismo aspect-ratio) sin
tocar los WebP ni las proporciones internas de las tres piezas. Solo en
este punto de corte: por debajo de 1120px el abanico ya colapsa a 1-2
piezas via .composicion-informe y no hace falta encogerlo mas. */
.informe-inicio__rejilla .composicion-informe { max-width: 75%; margin-inline-start: auto; }
}
/* Esquema comparativo. Ni oro ni carmesi: el oro significa "aqui se hace clic"
y el carmesi "aqui hay riesgo", y esto no es ninguna de las dos cosas. El
viewBox mas preserveAspectRatio por defecto lo escalan sin deformarlo. */
.esquema-comparativo { margin: 0; }
/* La ilustracion es vertical (320x410). Sin tope creceria con la columna
—606px a 1440 darian 776px de alto— y pasaria a mandar sobre la altura de
la seccion. Con 360px se queda por debajo del texto que acompana. */
.esquema-comparativo svg { display: block; width: 100%; height: auto; max-width: 360px; margin-inline: auto; }
/* El esquema no lleva reglas de color aqui a proposito: cada forma escribe su
fill en el propio SVG, con var(--x, #hex). Si el color vive solo en esta
hoja, cualquier contexto que no la cargue (el archivo abierto suelto, un
copiado a otro documento) pinta todas las formas de negro, que es el valor
inicial de fill en SVG. */
.esquema-comparativo__pie { margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--grey); }
/* ----- Aparicion al entrar en pantalla -----
El estado inicial cuelga de .js-aparece, que solo pone el propio script: si
el JavaScript no llega a ejecutarse, el CSS no esconde nada y la seccion se
ve siempre. Y todo va dentro de no-preference, asi que a quien pide menos
movimiento no se le oculta nada que luego haya que revelar. */
@media (prefers-reduced-motion: no-preference) {
.js-aparece [data-aparece] {
opacity: 0;
transform: translateY(10px);
transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.js-aparece [data-aparece].esta-visible { opacity: 1; transform: none; }
}
/* ----- 15. Senales de confianza ----- */
.lista-senales { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lista-senales { grid-template-columns: repeat(2, 1fr); } }
.lista-senales li { display: flex; gap: 0.85rem; align-items: flex-start; }
.lista-senales img { flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; }
/* ----- 16. Pasos / proceso ----- */
.pasos { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: paso; }
@media (min-width: 640px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pasos { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.pasos--5 { }
@media (min-width: 1024px) { .pasos--5 { grid-template-columns: repeat(5, 1fr); } }
.paso { counter-increment: paso; position: relative; padding-top: 2.75rem; }
.paso::before {
content: counter(paso);
position: absolute; top: 0; left: 0;
width: 2.25rem; height: 2.25rem;
border-radius: 50%;
background: var(--slate);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700;
}
.paso h4 { margin-bottom: 0.35rem; }
.paso p { color: var(--grey); font-size: 0.95rem; }
/* Variante vertical de .pasos/.paso: el circulo pasa de estar arriba del
texto a estar a su izquierda, con un filete que conecta un paso con el
siguiente. Mismo lenguaje visual que la horizontal (circulo numerado con
contador CSS, mismo h4/p) para no crear un componente nuevo: solo cambia
la direccion del apilado. Pensada para una tarjeta angosta (el acceso al
informe en /nexorisk/), donde tres columnas habrian repetido el patron
horizontal de .secuencia en la misma seccion. */
.pasos--vertical { display: flex; flex-direction: column; gap: 1.1rem; }
.pasos--vertical .paso { padding-top: 0; padding-left: 3rem; min-height: 2.25rem; }
.pasos--vertical .paso::before { top: 0; left: 0; }
.pasos--vertical .paso:not(:last-child)::after {
content: "";
position: absolute;
left: 1.125rem;
top: 2.25rem;
bottom: -1.1rem;
width: 1px;
background: var(--rule);
}
/* ----- Secuencia de pasos con icono (/nosotros/) -----
Componente propio, independiente de .pasos y .paso. --sec-n ya no es el
diametro de un circulo relleno -se quito, competia con el del icono-: es
el alto de fila que reserva la cifra, y el filete de union sigue
dependiendo de el sin que su formula cambie. La cifra crece a 1.75rem
(28px) en la tipografia de datos del sitio (--font-mono, la misma de
.cifra-evidencia), y un margen negativo en .secuencia__n compensa ese
crecimiento para que el alto de fila -y con el, la posicion del filete-
no se mueva ni un pixel.
Las tres medidas de arriba viven en variables porque de ellas depende la
altura a la que pasa el filete: el centro del circulo del icono. */
.secuencia {
--sec-n: 22px; --sec-ico: 64px; --sec-sep: 0.6rem;
list-style: none; margin: 2.5rem 0 0; padding: 0;
display: grid; gap: 2rem 1.25rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) { .secuencia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .secuencia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .secuencia { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; } }
.secuencia__paso {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--sec-sep);
}
/* El filete va de centro a centro del circulo: asi no sobresale por fuera del
primero ni del ultimo. Se corta al final de cada fila segun el reparto. */
.secuencia__paso::after {
content: ""; position: absolute; z-index: 0;
left: 50%; right: -50%; height: 1px; background: var(--rule);
top: calc(var(--sec-n) + var(--sec-sep) + var(--sec-ico) / 2 - 0.5px);
}
.secuencia__paso:last-child::after { display: none; }
@media (max-width: 599px) { .secuencia__paso::after { display: none; } }
@media (min-width: 600px) and (max-width: 899px) {
.secuencia__paso:nth-child(2n)::after { display: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
.secuencia__paso:nth-child(3n)::after { display: none; }
}
.secuencia__n {
position: relative; z-index: 1;
flex: none;
/* --sec-n (22px) se queda igual, es el alto de fila del filete: este
margen negativo absorbe justo los 6px que la cifra crece (1.75rem =
28px) para que ese alto neto -y el filete- no varien. */
margin-bottom: calc(var(--sec-n) - 1.75rem);
font-family: var(--font-mono); font-weight: 600; font-size: 1.75rem; line-height: 1;
color: var(--teal);
}
/* Fondo opaco del color de la banda: es lo que impide que el filete cruce el
circulo por dentro. */
.secuencia__icono {
position: relative; z-index: 1;
width: var(--sec-ico); height: var(--sec-ico); flex: none;
display: grid; place-items: center; border-radius: 50%;
/* --rule contra --soft daba 1.44:1, casi invisible: el circulo no se leia
como un aro. --grey sube a 5.38:1, muy cerca del propio icono teal
(5.67:1 sobre el mismo fondo): visible sin ganarle protagonismo al
dibujo de dentro. */
background: var(--soft); border: 1px solid var(--grey);
transition: border-color 0.15s ease;
}
.secuencia__paso:hover .secuencia__icono { border-color: var(--teal); }
.secuencia__icono img { display: block; width: 32px; height: 32px; }
/* h3, no h4: ver el comentario de .pie h3 sobre el salto de nivel corregido
en /nosotros/. font-size fijo en 1.05rem porque el h3 base del sitio es
bastante mas grande (clamp hasta 1.75rem) y a ese tamano los seis pasos no
caben en una fila de la rejilla; conserva el tamano que ya tenia como h4. */
.secuencia__paso h3 { margin: 0.25rem 0 0; font-size: 1.05rem; }
.secuencia__paso p { margin: 0.35rem 0 0; color: var(--grey); font-size: 0.95rem; }
/* ----- 17. Formularios ----- */
.formulario { display: grid; gap: 1.25rem; max-width: 640px; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 600; color: var(--slate); font-size: 0.95rem; }
.campo .ayuda { font-size: 0.82rem; color: var(--grey); }
.campo input, .campo select, .campo textarea {
font-family: var(--font-text);
font-size: 1rem;
padding: 0.75rem 0.9rem;
border: 1.5px solid var(--rule);
border-radius: var(--radius-sm);
background: #fff;
color: var(--ink);
width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
border-color: var(--teal);
outline: none;
box-shadow: 0 0 0 3px rgba(15,110,110,0.15);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo[data-invalido="true"] input, .campo[data-invalido="true"] textarea { border-color: var(--crimson); }
.campo__error { color: var(--crimson); font-size: 0.85rem; min-height: 1.1em; }
/* "(opcional)" visible en la propia etiqueta. Va dentro del