/* ==================================================================
ADNIUS · Pie global · v2 PANTALLAS GRANDES (27/09/2026)
v2: medidas de px a rem para que el pie crezca parejo en pantallas
grandes (ver PANTALLAS-GRANDES.md), incluidos los iconos de redes y
el espacio que la linea legal le deja a los botones flotantes, que
ahora tambien crecen. Hasta 1600px se ve exactamente igual.
------------------------------------------------------------------
Portado de adnius-home-v59.html, lineas 2057 a 2155 para el marcado
y 1251 a 1443 para el estilo.
CUELGA DE .adn-foot Y NO DE .adn-home. El pie sale en TODAS las
paginas del sitio, y .adn-home es una clase de body que
functions.php pone solo en el inicio, linea 207. Mismo criterio que
el header con .adn-hdr.
Las variables tampoco se heredan: --yellow, --display y las demas
viven en .adn-home dentro de home.css, asi que en el blog o en una
legal no existirian. Se declaran aqui otra vez sobre .adn-foot.
El prototipo tiene un reset global (*{margin:0;padding:0}) que aqui
no existe. Por eso h2, h3, ul, li y p llevan sus ceros explicitos.
DIVERGENCIA DECIDIDA: el pie NO lleva id. En el prototipo lleva
id="contact", pero ese ancla se la quedo el cierre, bloque 19 de
home.css, y dos elementos con el mismo id harian que el navegador
saltara al primero.
Orden del archivo:
1 · Variables y puente con Divi
2 · La parte de arriba: rejilla de dos columnas
3 · La columna izquierda: el optin
4 · Las tres listas de enlaces
5 · La caja de contacto
6 · La cinta
7 · El logotipo y la linea legal
8 · Pantalla angosta
================================================================== */
/* ══════════════════ 1 · VARIABLES Y PUENTE CON DIVI ══════════════════ */
.adn-foot{
--black:#000;
--white:#fff;
--yellow:#ffc600;
--orange:#ff7000;
--green:#29d264;
--display:'Hanken Grotesk',Helvetica,Arial,sans-serif;
--body:'Inter',Helvetica,Arial,sans-serif;
--pad:clamp(1.5rem,5vw,5rem);
}
/* Las dos secciones van a sangre. Divi les pone relleno propio, ancho
maximo de 1080px y margenes automaticos. */
.adn-foot{
position:relative;
padding:0;
background:var(--black);
color:var(--white);
font-family:var(--body);
overflow:hidden;
gap:0;
}
.adn-foot .et_pb_row{
width:100%;max-width:none;margin:0;padding:0;
gap:0;
}
.adn-foot .et_pb_column{
width:auto;float:none;margin:0;padding:0;
gap:0;
}
.adn-foot .et_pb_module{
margin:0;
}
/* Divi envuelve el contenido de cada modulo de texto en varios div y
un , y cada capa trae color, tamano y margen propios. Aqui todo
eso pasa a heredar, para que las reglas de mas abajo manden desde
el modulo hacia adentro sin repetirse.
font es abreviatura: resetea familia, tamano, peso, estilo e
interlineado de un solo golpe. Ojo, tambien borra el margen del
mismo elemento, y por eso mas abajo hay !important en varios
margin-bottom. */
.adn-foot .et_pb_text,
.adn-foot .et_pb_text_inner,
.adn-foot .et_pb_text p{
color:inherit;
font:inherit;
letter-spacing:inherit;
text-align:inherit;
margin:0;
}
/* Divi le pone et_pb_bg_layout_light a cada modulo y con esa clase
pinta el texto en gris, porque da por sentado un fondo claro. */
.adn-foot .et_pb_bg_layout_light,
.adn-foot .et_pb_bg_layout_light p{
color:inherit;
}
/* El primer borde del pie: lo separa del cierre. */
.adn-foot.adn-ftop{
border-top:1px solid rgba(255,255,255,.1);
}
/* ══════════════════ 2 · LA PARTE DE ARRIBA ══════════════════
Prototipo, lineas 1255 a 1260.
La rejilla va en el Row y no en la seccion: la seccion tiene que
quedarse a lo ancho para que su fondo negro llegue a los bordes en
pantallas grandes. Mismo patron que las 7 areas y Nosotros. */
.adn-foot .ftop{
display:grid;
grid-template-columns:minmax(18.75rem,46%) 1fr;
gap:clamp(2.5rem,7vw,7rem);
padding:clamp(4rem,10vh,7rem) var(--pad) clamp(3rem,7vh,5rem);
max-width:93.75rem;
margin:0 auto;
}
/* La columna derecha lleva dos bloques: las tres listas y la caja de
contacto. Prototipo, linea 1330. */
.adn-foot .fright{
display:flex;flex-direction:column;
gap:clamp(2.2rem,5vh,3.4rem);
}
/* ══════════════════ 3 · LA COLUMNA IZQUIERDA ══════════════════
Prototipo, lineas 1263 a 1273.
Los margin-bottom llevan !important por lo del bloque 1: la
abreviatura font:inherit cae sobre el MISMO elemento que lleva la
clase, porque en Divi la clase va en el modulo, y font borra el
margen en la misma declaracion. No es especificidad: es que la
abreviatura resetea. Misma leccion que en home.css, bloque 11. */
/* El eyebrow es flex y no block porque cada letra va en su propio
span. Los crea footer.js. */
.adn-foot .optin .eyebrow{
display:flex;flex-wrap:wrap;
font-family:var(--display);font-weight:300;
font-size:clamp(.6rem,1vw,.76rem);
letter-spacing:.6em;
text-transform:uppercase;
margin-bottom:1.6rem !important;
}
/* El --i le da a cada letra su turno: multiplicado por el retardo
negativo, cada una arranca la animacion en un punto distinto del
ciclo y el color se ve correr de izquierda a derecha en vez de
cambiar todo a la vez.
La animacion se declara aqui otra vez y no se hereda de home.css:
una @keyframes vive en la hoja donde se escribe, y home.css solo
carga en el inicio. */
.adn-foot .eyebrow span{
display:inline-block;
animation:footSpectrum 9s linear infinite;
animation-delay:calc(var(--i) * -.42s);
}
@keyframes footSpectrum{
0%,100%{color:var(--white)}
20%{color:var(--yellow)}
40%{color:var(--orange)}
60%{color:var(--green)}
80%{color:var(--white)}
}
/* El h2 vive dentro del modulo, no es el modulo. WordPress y Divi le
dan tamano, peso y margen propios a los encabezados, asi que aqui
se escribe el estilo completo. */
.adn-foot .fbig{margin-bottom:1rem !important}
.adn-foot .fbig h2{
font-family:var(--display);font-weight:600;
font-size:clamp(1.7rem,3.4vw,2.7rem);
line-height:1.03;letter-spacing:-.03em;
color:var(--white);
margin:0;padding:0;
}
/* La cursiva que pongas en el editor sale derecha y amarilla, igual
que en los titulares del inicio. */
.adn-foot .fbig em{font-style:normal;color:var(--yellow)}
.adn-foot .why{
font-weight:200;font-size:1rem;line-height:1.55;
color:rgba(255,255,255,.62);
max-width:44ch;
margin-bottom:2rem !important;
}
/* ══════════════════ 4 · LAS TRES LISTAS ══════════════════
Prototipo, lineas 1396 a 1409.
En el prototipo .foot-cols es UN contenedor con tres div dentro.
Aqui son tres modulos Text hermanos con clase .fcol, asi que la
rejilla de tres columnas no puede ir sobre ellos: tiene que ir
sobre su padre. Y su padre es la Column .fright, que ya es flex en
columna por el bloque 2.
Se resuelve con un envoltorio que crea footer.js, .fcols, igual que
.inner en el hero y .set en el gancho de home.css: el builder no
deja envolver varios modulos en un contenedor propio. */
.adn-foot .fcols{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2rem;
align-content:start;
padding-top:.4rem;
}
/* El h3 vive dentro del modulo. En el prototipo es un h4, aqui sube a
h3 para no saltarse un nivel: el pie sale en todas las paginas y su
jerarquia tiene que aguantar sola. */
.adn-foot .fcol h3{
font-family:var(--display);font-weight:600;font-size:.66rem;
letter-spacing:.24em;text-transform:uppercase;
color:rgba(255,255,255,.34);
margin:0 0 1.2rem;padding:0;
}
.adn-foot .fcol ul{
list-style:none;
display:flex;flex-direction:column;gap:.72rem;
margin:0;padding:0;
}
.adn-foot .fcol li{
margin:0;padding:0;
list-style:none;
}
.adn-foot .fcol a{
font-weight:300;font-size:.9rem;text-decoration:none;
color:rgba(255,255,255,.68);
transition:color .3s ease;
}
.adn-foot .fcol a:hover{color:var(--yellow)}
/* Lo que todavia no existe no se enlaza: un enlace muerto en el pie
se repite en cada pagina del sitio. */
.adn-foot .fcol .soon{
font-weight:300;font-size:.9rem;
color:rgba(255,255,255,.26);
}
/* ══════════════════ 5 · LA CAJA DE CONTACTO ══════════════════
Prototipo, lineas 1334 a 1394.
La columna derecha llevaba tres listas cortas y despues un vacio
enorme. Ese espacio ahora trabaja: son tres puntos de conversion
justo donde el visitante termina de leer.
El .fcta que envuelve los cinco modulos lo crea footer.js, por lo
mismo que .fcols. */
.adn-foot .fcta{
position:relative;overflow:hidden;
border:1px solid rgba(255,255,255,.11);
border-radius:0.875rem;
padding:clamp(1.4rem,3vw,2rem);
background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
/* El barrido de luz al pasar el mouse. Es el mismo lenguaje del boton
y de Nosotros en el inicio, sin repetirlo. */
.adn-foot .fcta::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.05) 50%,transparent 62%);
background-size:280% 100%;background-position:130% 0;
transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.adn-foot .fcta:hover::after{background-position:-50% 0}
.adn-foot .fctah{margin-bottom:1.3rem !important}
.adn-foot .fctah h3{
font-family:var(--display);font-weight:600;font-size:.66rem;
letter-spacing:.24em;text-transform:uppercase;
color:rgba(255,255,255,.34);
margin:0;padding:0;
}
/* --- Cada via de contacto ---
Medido en consola, el modulo queda asi:
DIV.fway > DIV.et_pb_text_inner > P > SPAN.ic + SPAN.tx
Por eso el flex NO va sobre .fway sino sobre ese
: el icono y el
texto son hijos del parrafo, no del modulo. Mismo caso que .dgo en
el bloque 17 de home.css y que .fact en el 15.
El enlace lo pone Divi con Module Link URL, que envuelve el modulo
entero. Por eso .fway es un DIV y no un , y el borde y el
relleno van aqui y no en un enlace interno. */
.adn-foot .fway{
position:relative;z-index:1;
border-top:1px solid rgba(255,255,255,.08);
transition:padding-left .45s cubic-bezier(.16,1,.3,1);
cursor:pointer;
}
.adn-foot .fway:first-of-type{border-top:0}
.adn-foot .fway:hover{padding-left:.5rem}
.adn-foot .fway p{
display:flex;flex-direction:row;align-items:center;
gap:1rem;
padding:.85rem 0;
margin:0;
}
.adn-foot .fway:first-of-type p{padding-top:0}
/* El salto que mete WordPress entre elementos en lineas separadas.
Dentro de un flex seria una caja mas y partiria la fila. */
.adn-foot .fway br{display:none}
.adn-foot .fway .ic{
width:2.375rem;height:2.375rem;flex:none;border-radius:50%;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.13);
background:rgba(255,255,255,.03);
transition:border-color .4s ease,background .4s ease;
}
/* Sin ancho, sin trazo y sin fill:none un SVG sale invisible. Misma
leccion que la flecha del boton del formulario. */
.adn-foot .fway .ic svg{
width:1rem;height:1rem;
stroke:rgba(255,255,255,.6);stroke-width:1.7;fill:none;
transition:stroke .4s ease;
}
.adn-foot .fway:hover .ic{
border-color:rgba(255,198,0,.5);
background:rgba(255,198,0,.09);
}
.adn-foot .fway:hover .ic svg{stroke:var(--yellow)}
.adn-foot .fway .tx{min-width:0}
.adn-foot .fway .tx b{
display:block;
font-family:var(--display);font-weight:600;font-size:.92rem;
color:rgba(255,255,255,.9);
transition:color .35s ease;
}
.adn-foot .fway:hover .tx b{color:var(--yellow)}
.adn-foot .fway .tx span{
display:block;
font-size:.74rem;font-weight:200;
color:rgba(255,255,255,.42);
margin-top:.14rem;
}
.adn-foot .fnote{
position:relative;z-index:1;
margin-top:1.3rem !important;
padding-top:1.1rem;
border-top:1px solid rgba(255,255,255,.08);
font-size:.72rem;font-weight:200;line-height:1.5;
color:rgba(255,255,255,.36);
}
.adn-foot .fnote b{color:rgba(255,255,255,.6);font-weight:600}
/* ══════════════════ 6 · LA CINTA ══════════════════
Prototipo, lineas 1412 a 1425.
La misma idea que ya usas en /ven. El contenido lo arma footer.js
dentro del .run, que es lo unico que se escribio en Divi.
El overflow oculto del .ticker es lo que la recorta: el .run mide
lo que suman sus frases, mucho mas que la pantalla.
NO SE MUEVE CON GSAP. El pie carga en todo el sitio, y meter GSAP
como dependencia serian 70 KB en cada pagina por una animacion de
una linea. Se mueve con requestAnimationFrame y un transform, que
es lo que hace footer.js. Mismo criterio que el header. */
.adn-foot .ticker{
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
overflow:hidden;
padding:1.1rem 0;
}
.adn-foot .ticker .run{
display:flex;gap:2.6rem;
width:max-content;
will-change:transform;
}
.adn-foot .ticker a,
.adn-foot .ticker i{
font-family:var(--display);font-weight:600;font-style:normal;
font-size:clamp(.9rem,1.5vw,1.15rem);
letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.5);
text-decoration:none;white-space:nowrap;
transition:color .3s ease;
}
.adn-foot .ticker a:hover{color:var(--yellow)}
.adn-foot .ticker .dot{color:var(--yellow);opacity:.55}
/* ══════════════════ 7 · LOGOTIPO Y LINEA LEGAL ══════════════════
Prototipo, lineas 1428 a 1442.
El logotipo enorme cierra la pagina sin decir nada de mas. Va al
5.5% de opacidad: es textura, no un mensaje. footer.js le pone
aria-hidden para que un lector de pantalla no lo lea. */
.adn-foot .wordmark{
padding:clamp(2.5rem,6vh,4.5rem) var(--pad) 0;
max-width:93.75rem;margin:0 auto;
font-family:var(--display);font-weight:800;
font-size:clamp(3.4rem,17vw,14rem);
line-height:.8;letter-spacing:-.055em;
color:rgba(255,255,255,.055);
user-select:none;
}
.adn-foot .legal{
padding:2rem var(--pad);
max-width:93.75rem;margin:0 auto;
font-size:.7rem;font-weight:300;letter-spacing:.05em;
color:rgba(255,255,255,.3);
}
/* El flex va en el parrafo interno, que es donde viven de verdad los
dos span. Mismo caso que .fway y que .dgo. */
.adn-foot .legal p{
display:flex;flex-direction:row;
justify-content:space-between;align-items:center;
gap:1.2rem;flex-wrap:wrap;
margin:0;
}
.adn-foot .legal br{display:none}
.adn-foot .legal a{
text-decoration:none;
color:rgba(255,255,255,.4);
transition:color .3s ease;
}
.adn-foot .legal a:hover{color:var(--white)}
.adn-foot .legal .set{display:flex;gap:1.4rem;flex-wrap:wrap}
/* ══════════════════ 8 · PANTALLA ANGOSTA ══════════════════
Prototipo, lineas 1261 y 1395.
Va al final a proposito. Una media query NO suma especificidad: si
se escribe antes que una regla general con el mismo selector, la
general gana por venir despues y el ajuste no se aplica nunca. Es
la misma nota que abre el bloque de movil de home.css. */
@media (max-width:900px){
.adn-foot .ftop{grid-template-columns:1fr}
}
@media (max-width:620px){
.adn-foot .fcols{grid-template-columns:1fr 1fr}
.adn-foot .legal p{
flex-direction:column;align-items:flex-start;
gap:.8rem;
}
}
@media (prefers-reduced-motion:reduce){
.adn-foot .eyebrow span{animation:none;color:var(--white)}
.adn-foot .fcta::after{transition:none}
}
/* ─── Correcciones medidas sobre el HTML real de Divi ───
LA COLUMNA DE ABAJO REPARTIA EN FILA. Medido en beta: la cinta con
3641px de ancho, que es lo que miden sus frases duplicadas y no lo
que mide la pantalla, y el logotipo en left 1375 con la linea legal
en 1525, uno al lado del otro. Apilados los tres darian left 0.
Son dos cosas y las dos hacen falta:
1. La direccion explicita. Divi 5 trae la columna en column por
defecto, pero eso no se hereda por suerte: la regla tiene que
decir cual es la direccion correcta. Es la misma leccion del
bloque 16 de home.css.
2. min-width:0. Un elemento flex trae min-width:auto de fabrica y
eso le impide encogerse por debajo del ancho de su contenido.
La cinta pedia 3641px, la columna no podia achicarse, y todo lo
demas salia empujado. El overflow:hidden del .ticker no salva
nada aqui: recorta lo de adentro, pero no decide su propio
ancho. Mismo caso que la .mqv del bloque 12a de home.css. */
.adn-foot .fbot{
display:flex;flex-direction:column;
width:100%;max-width:none;min-width:0;
}
.adn-foot .fbot .et_pb_column{
display:flex;flex-direction:column;
width:100%;flex:0 0 100%;min-width:0;
}
.adn-foot .fbot .et_pb_module{
width:100%;min-width:0;
}
/* ─── El logotipo salia estirado ───
Medido en beta: el texto ADNIUS ocupando 1341px cuando con Hanken
Grotesk 800 a 224px mide 797. No era la fuente, que si estaba
cargada: era que el parrafo se pintaba como flex y cada letra
quedaba como una caja suelta, repartida a lo ancho del contenedor.
El wordmark es una sola linea de texto, no una fila de piezas: el
parrafo vuelve a block y el texto fluye. */
.adn-foot .wordmark,
.adn-foot .wordmark .et_pb_text_inner,
.adn-foot .wordmark p{
display:block;
white-space:nowrap;
}
/* ─── Las secciones traian el relleno de fabrica de Divi ───
Medido en beta: padding 54px arriba y abajo en las DOS secciones,
o sea 216px de aire que el prototipo no tiene. Los valores buenos
ya estaban escritos, en el Row de arriba y en cada modulo de abajo,
asi que este relleno se sumaba encima de todo.
El bloque 1 ya declaraba padding:0 sobre .adn-foot y perdio: Divi
lo cuelga de una cadena mas pesada, con la clase numerada de la
instancia. Aqui se sube el peso con la clase de seccion de Divi,
que es la que el navegador ya esta viendo.
Los huecos entre modulos ya estaban en cero: medido, ticker a
wordmark en 0 y wordmark a legal en 0. Este relleno era lo unico
que sobraba. */
.adn-foot.et_pb_section,
.adn-foot.et_pb_with_background{
padding-top:0;
padding-bottom:0;
}
/* ─── El body de beta es blanco ───
Medido en incognito: getComputedStyle(document.body).backgroundColor
devuelve rgb(255,255,255) en beta y rgb(0,0,0) en el prototipo.
Todo el sitio es oscuro, asi que el blanco del body no aporta nada
y si se asoma en cualquier hueco: al rebotar el scroll, mientras
carga la pagina, y por debajo del pie en pantallas altas.
Va en footer.css y no en home.css porque el pie sale en todas las
paginas, igual que este fondo tiene que salir en todas. */
html,
body{
background-color:#000;
}
/* ─── El logotipo salia mas apagado que en el prototipo ───
Medido con cuentagotas sobre las dos paginas: beta daba #0e0e0e,
rgb(14,14,14), y el prototipo #1a1a1a, rgb(26,26,26). Casi el doble
de luz.
La declaracion era la misma en los dos, rgba(255,255,255,.055), y
ahi esta el asunto: es un blanco translucido, asi que el resultado
depende de lo que tenga debajo. El prototipo lo pinta sobre un
fondo que no es negro puro y beta si.
Se deja de calcular con opacidad y se escribe el color final, que
es el que ya sabemos que se quiere ver.
Y el tamaño se desancla del ancho de la ventana: en 17vw cambiaba
con cada pantalla y en beta salia mas grande que en el prototipo. */
.adn-foot .wordmark{
color:#1a1a1a;
font-size:clamp(3.4rem,15.5vw,13rem);
}
/* ══════════════════ 9 · EL FORMULARIO DE SUSCRIPCION ══════════════════
Prototipo, lineas 1275 a 1326.
ESTE BLOQUE NO SE PORTO COPIANDO, SE REESCRIBIO, igual que el 20 de
home.css. Alli el HTML lo poniamos nosotros con las clases del
prototipo; aqui lo genera el modulo Contact Form de Divi con las
suyas. Cada regla apunta a lo que Divi produce, y los VALORES si
son los del prototipo, uno por uno.
prototipo Divi 5
.fields form.et_pb_contact_form
.fld .et_pb_contact_field
.fld input .input
.consent el campo de casillas
.join .et_pb_contact_submit
.fineprint el modulo .ffine, detras del formulario
.done .et-pb-contact-message
Las lecciones del bloque 20 de home.css se aplican todas aqui:
· El :not([type=checkbox]) es obligatorio. Divi le pone
class="input" TAMBIEN a los checkbox, y sin excluirlos los
pinta como campos de texto.
· El gap de Divi aparece dentro de cada campo, entre la etiqueta
y el input.
· Divi pinta las casillas con un selector de cuatro clases mas
hijo directo. Hay que igualar el peso.
· El boton hereda borde y flecha de reglas colgadas de un id, y
ahi si van !important.
· El titulo del campo de casillas sale dos veces, en el label y
en el options_title. Se esconde uno.
DIVERGENCIA DECIDIDA: el destino es info@adnius.com por correo,
no un CRM. Cuando se elija la herramienta se cambia el destino sin
tocar una linea de este bloque. */
/* El modulo trae su propio envoltorio con margen */
.adn-foot .joinform,
.adn-foot .joinform .et_pb_contact_form_container{
margin:0;padding:0;gap:0;
}
.adn-foot .joinform .et_pb_contact_main_title{display:none}
/* La rejilla. Prototipo, linea 1275: columna, .7rem entre campos y
440px de ancho maximo. */
.adn-foot .joinform form.et_pb_contact_form{
display:flex;flex-direction:column;
gap:.7rem;
max-width:27.5rem;
}
/* El gap de Divi otra vez: cada campo es un flex en columna y separa
la etiqueta del input. Aqui no hay etiquetas visibles, asi que solo
sobra espacio. */
.adn-foot .joinform .et_pb_contact_field{
padding:0;margin:0;gap:0;
width:100%;flex:0 0 100%;
line-height:0;
}
.adn-foot .joinform .et_pb_contact_field > *{line-height:normal}
/* Divi usa el titulo del campo como marcador de posicion, que es
justo lo que hace el prototipo: aqui no hay etiquetas encima del
campo, el ejemplo va dentro. */
.adn-foot .joinform .et_pb_contact_form_label{display:none}
/* --- Los campos ---
Prototipo, lineas 1279 a 1286. */
.adn-foot .joinform .input:not([type=checkbox]){
width:100%;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
border-radius:0.25rem;
padding:1rem 1.1rem;
color:var(--white);
font-family:var(--body);font-weight:300;font-size:.92rem;
transition:border-color .35s ease,background .35s ease;
}
.adn-foot .joinform .input::placeholder{color:rgba(255,255,255,.34)}
.adn-foot .joinform .input:not([type=checkbox]):focus{
outline:none;
border-color:var(--yellow);
background:rgba(255,255,255,.06);
}
/* --- El consentimiento ---
Prototipo, lineas 1294 a 1305. Divi arma cada casilla asi:
SPAN.et_pb_contact_field_checkbox > INPUT.input + LABEL > I
La es el cuadrito que dibuja Divi. El input se esconde en su
sitio y NO con display:none, que lo sacaria del orden de
tabulacion. */
/* El titulo sale dos veces, en el label y aqui. Se queda el label,
que ya esta escondido, asi que este tambien se va: el texto del
consentimiento va al lado de la casilla. */
.adn-foot .joinform .et_pb_contact_field_options_title{display:none}
.adn-foot .joinform .et_pb_contact_field_options_list{
display:block;
}
/* Cuatro clases y el hijo directo, para igualar el peso del selector
con el que Divi usa. Es la leccion del bloque 20. */
.adn-foot .joinform .et_pb_contact_field .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox{
display:block;position:relative;
width:100%;flex:0 0 100%;
margin-top:.5rem;
}
.adn-foot .joinform .et_pb_contact_field_checkbox input{
position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;
}
.adn-foot .joinform .et_pb_contact_field_checkbox label{
display:flex;align-items:flex-start;gap:.7rem;
margin:0;cursor:pointer;
font-family:var(--body);
font-size:.76rem;font-weight:300;line-height:1.45;
letter-spacing:0;text-transform:none;
color:rgba(255,255,255,.5);
background:none;border:0;padding:0;
transition:color .35s ease;
}
.adn-foot .joinform .et_pb_contact_field_checkbox label:hover{
color:rgba(255,255,255,.7);
}
/* La casilla. Prototipo, linea 1296: 17px y borde al 30%. */
.adn-foot .joinform .et_pb_contact_field_checkbox label i{
display:block;flex:none;
width:1.0625rem;height:1.0625rem;margin-top:.15rem;
background:none;
appearance:none;-webkit-appearance:none;
border:1px solid rgba(255,255,255,.3);
border-radius:0.1875rem;
transition:background .3s ease,border-color .3s ease;
}
.adn-foot .joinform .et_pb_contact_field_checkbox:has(input:checked) label i{
background:var(--yellow);border-color:var(--yellow);
}
/* El palito de la marca, linea 1302 */
.adn-foot .joinform .et_pb_contact_field_checkbox:has(input:checked) label i::after{
content:'';display:block;width:0.3125rem;height:0.5625rem;margin:1px auto 0;
border:solid var(--black);border-width:0 2px 2px 0;
transform:rotate(42deg);
}
.adn-foot .joinform .et_pb_contact_field_checkbox:has(input:focus-visible) label i{
outline:1px solid var(--yellow);outline-offset:2px;
}
/* --- El pie del formulario ---
Sin captcha, el contenedor se queda con un solo hijo y Divi lo
empuja a la derecha con su propio margen. El prototipo, linea 1310,
usa align-self:flex-start. Misma leccion que el boton del bloque 14
de home.css: el margen sobrante estaba en el boton, no en su
envoltorio. */
.adn-foot .joinform .et_contact_bottom_container{
display:flex;justify-content:flex-start;
width:100%;margin:0;
}
.adn-foot .joinform .et_pb_button_wrapper{
margin:0;margin-inline-start:0;text-align:left;flex:0 0 auto;
}
/* --- El boton ---
Prototipo, lineas 1309 a 1317. Es un boton de Divi, asi que hereda
borde, flecha y relleno de reglas colgadas de #page-container. Un
id gana a cualquier cadena de clases: ahi si van !important. */
.adn-foot .joinform .et_pb_contact_submit{
display:inline-block !important;
margin:.9rem 0 0 !important;
font-family:var(--display) !important;
font-weight:600 !important;font-size:.9rem !important;
color:var(--black) !important;
background:var(--yellow) !important;
border:0 !important;border-radius:999px !important;
padding:1.05rem 2.3rem !important;
white-space:nowrap;width:auto;
cursor:pointer;
transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-foot .joinform .et_pb_contact_submit:hover{
transform:translateY(-2px);
box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3);
}
.adn-foot .joinform .et_pb_contact_submit::after,
.adn-foot .joinform .et_pb_contact_submit::before{display:none !important}
/* --- El mensaje de gracias ---
Prototipo, lineas 1320 a 1323. Lo pinta Divi al enviar. El :empty
es la leccion del bloque 20: mientras no tenga texto, no se ve. */
.adn-foot .joinform .et-pb-contact-message{
padding:1.6rem 0;
font-family:var(--display);font-weight:600;font-size:1.1rem;
color:var(--green);
}
.adn-foot .joinform .et-pb-contact-message:empty{display:none}
.adn-foot .joinform .et-pb-contact-message p{margin:0}
.adn-foot .joinform .et-pb-contact-message ul{
list-style:none;margin:0;padding:0;
}
/* --- Pantalla angosta --- */
@media (max-width:720px){
.adn-foot .joinform form.et_pb_contact_form{max-width:100%}
.adn-foot .joinform .et_pb_contact_submit{width:100% !important;text-align:center}
}
/* ─── La casilla salia rellena de blanco ───
Divi le pinta un fondo #eee a la del checkbox con un selector
que incluye la clase numerada de la instancia, asi que nuestro
background:none de dos clases perdia. Es la misma leccion del
bloque 20 de home.css, donde paso identico con el consentimiento
del formulario grande.
Aqui se iguala el peso subiendo a cuatro clases y usando el hijo
directo, que es como Divi lo escribe. */
.adn-foot .joinform .et_pb_contact_field .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox > label i{
background:none;
background-color:transparent;
appearance:none;-webkit-appearance:none;
border:1px solid rgba(255,255,255,.3);
}
.adn-foot .joinform .et_pb_contact_field .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox:has(input:checked) > label i{
background-color:var(--yellow);
border-color:var(--yellow);
}
/* ══════════════════ 10 · LAS REDES, JUNTO AL LOGOTIPO ══════════════════
DIVERGENCIA DECIDIDA DEL PROTOTIPO. El pie del prototipo NO lleva
iconos de redes: ahi .social vive solo en el cierre, linea 604, y
en el pie las redes van como texto dentro de la lista "Talk to us".
Se agregan aqui porque la fila del logotipo tenia la mitad derecha
vacia y ese hueco no hacia nada. Van al mismo peso visual que el
resto del pie, no como un llamado: son el remate de la pagina, no
un boton mas.
El estilo NO se hereda del bloque 19 de home.css: ahi .social
cuelga de .adn-sec y home.css solo carga en el inicio. Aqui se
escribe con los mismos valores, mas discretos.
Los SVG los mete footer.js: no tienen una palabra que traducir. El
nombre de la red va en el aria-label, que WPML si traduce desde su
interfaz sin tocar el archivo. */
/* El logotipo y las redes comparten fila. El wordmark se queda con
su sitio y las redes se anclan al borde derecho, a la altura de la
base de las letras. */
.adn-foot .fbot .et_pb_column{position:relative}
.adn-foot .fsocial{
position:absolute;right:var(--pad);bottom:0;
width:auto;min-width:0;
z-index:2;
}
.adn-foot .fsocial p{
display:flex;flex-direction:row;align-items:center;
gap:.6rem;margin:0;
}
.adn-foot .fsocial br{display:none}
.adn-foot .fsocial a{
width:2.375rem;height:2.375rem;border-radius:50%;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.02);
transition:border-color .4s ease,background .4s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.adn-foot .fsocial a:hover{
border-color:rgba(255,198,0,.45);
background:rgba(255,198,0,.07);
transform:translateY(-0.1875rem);
}
/* Mas apagados que los del cierre: aqui son remate, no llamado. */
.adn-foot .fsocial svg{
width:0.9375rem;height:0.9375rem;
fill:rgba(255,255,255,.4);
transition:fill .4s ease;
}
.adn-foot .fsocial a:hover svg{fill:var(--yellow)}
/* Apilado, el absoluto no tiene sentido: el logotipo llena el ancho
y las redes se le montarian encima. */
@media (max-width:620px){
.adn-foot .fsocial{
position:static;
padding:1.4rem var(--pad) 0;
}
.adn-foot .fsocial p{justify-content:flex-start}
}
/* ─── Las redes salian estiradas y fuera de pantalla ───
Medido en beta: .fsocial con 1601px de ancho y arrancando en
left:-80, o sea saliendose por la izquierda. Los tres iconos si
estaban, pero repartidos a lo ancho de esa caja gigante.
La causa es una regla nuestra de mas arriba: al arreglar la
columna de abajo se le puso width:100% a TODOS los modulos de
.fbot, y ese ancho tambien le cayo al .fsocial, que es posterior.
Como las dos reglas empatan en peso, gana la que llega despues.
Aqui se devuelve al ancho de su contenido. Va al final para llegar
despues que aquella. */
.adn-foot .fbot .fsocial{
width:auto;
max-width:none;
left:auto;
}
.adn-foot .fbot .fsocial p{
width:auto;
justify-content:flex-end;
}
/* ─── Las redes, a la altura del logotipo ───
Estaban ancladas al fondo de la columna, asi que caian por debajo
de la linea legal. Suben a la base del logotipo, que es donde
tienen sentido: el ADNIUS ocupa la mitad izquierda de esa fila y
las redes rematan la derecha.
El bottom se mide desde abajo de la columna. La linea legal ocupa
88px, asi que las redes se colocan justo encima. */
.adn-foot .fbot .fsocial{
bottom:auto;
top:auto;
right:var(--pad);
margin-top:-4.2rem;
position:relative;
}
.adn-foot .fbot .fsocial p{
justify-content:flex-end;
padding-right:var(--pad);
}
/* Un poco mas grandes: en esa fila compiten con un logotipo enorme */
.adn-foot .fsocial a{width:2.75rem;height:2.75rem}
.adn-foot .fsocial svg{width:1.0625rem;height:1.0625rem}
/* ─── Las redes, un 30% mas grandes ───
En esa fila compiten con un logotipo enorme y sobra negro a los
lados. A 44px se leian como una nota al pie; a 57 son el remate
que cierra la pagina. */
.adn-foot .fsocial a{width:3.5625rem;height:3.5625rem}
.adn-foot .fsocial svg{width:1.375rem;height:1.375rem}
.adn-foot .fbot .fsocial p{gap:.8rem}
.adn-foot .fbot .fsocial{margin-top:-5rem}
/* ─── Las redes, alineadas con la base del logotipo ───
Estaban centradas contra el bloque del logotipo, asi que flotaban
por encima de su linea de base. Con el margen negativo justo, el
centro de los circulos cae donde apoyan las letras. */
.adn-foot .fbot .fsocial{margin-top:-3.4rem}
/* ─── Las redes en telefono ───
En escritorio van al lado del logotipo, que ocupa la mitad
izquierda de esa fila. En un telefono el ADNIUS llena el ancho
entero y los iconos le caian encima.
El margen negativo que los sube a la base del logotipo es de
escritorio: aqui se anula y bajan a su propia linea, centrados,
entre el logotipo y la linea legal.
El corte es 620px, el mismo de las otras reglas de pantalla
angosta del archivo. Va al final por lo de siempre: una media query
no suma especificidad, y las reglas de tamaño y de margen negativo
estan escritas mas arriba. */
@media (max-width:620px){
.adn-foot .fbot .fsocial{
margin-top:1.6rem;
right:auto;
}
.adn-foot .fbot .fsocial p{
justify-content:center;
padding-right:0;
}
/* Mas chicos: en telefono son remate, no llamado */
.adn-foot .fsocial a{width:2.875rem;height:2.875rem}
.adn-foot .fsocial svg{width:1.125rem;height:1.125rem}
/* El logotipo tiene que respirar por debajo, que es donde ahora
viven los iconos */
.adn-foot .wordmark{padding-bottom:.4rem}
}
/* ─── El cierre en telefono, mas agrupado ───
El logotipo se centra y crece, y los iconos suben pegados a el.
Apilados y con tanto aire entre medio se leian como tres piezas
sueltas; juntos y centrados son un solo remate.
El corte es 620px, igual que el bloque anterior, y va despues por
lo de siempre: entre reglas del mismo peso gana la ultima. */
@media (max-width:620px){
.adn-foot .wordmark{
text-align:center;
font-size:clamp(4.6rem,22vw,7rem);
padding-top:2rem;
padding-bottom:0;
}
.adn-foot .fbot .fsocial{margin-top:.5rem}
.adn-foot .legal{padding-top:1.4rem}
}
/* ─── Las redes suben a su propia linea ───
DIVERGENCIA DECIDIDA. Antes iban despues del modulo legal y se
subian con un margen negativo hasta la base del logotipo, y ahi
terminaban rozando Privacy policy y Terms.
El modulo se movio en Divi para que vaya ANTES del legal, asi que
ya no hay que subirlo a la fuerza: aqui se anulan el
posicionamiento absoluto y el margen negativo que venian de los
bloques de mas arriba.
Y crecen. En esa fila compiten con un logotipo enorme y sobra negro
a los lados: a 57px se leian como una nota al pie.
Va al final del archivo a proposito. Pelea contra reglas del mismo
peso escritas mas arriba, y entre selectores iguales gana el
ultimo. Si se escribe antes, no se aplica nada. */
.adn-foot .fbot .fsocial{
position:static;
margin-top:0;
margin-bottom:1.4rem;
right:auto;
bottom:auto;
top:auto;
}
.adn-foot .fbot .fsocial p{
justify-content:flex-end;
padding-right:var(--pad);
gap:1.1rem;
}
.adn-foot .fsocial a{width:4rem;height:4rem}
.adn-foot .fsocial svg{width:1.5625rem;height:1.5625rem}
/* El logotipo ya no tiene que dejarle sitio abajo a los iconos */
.adn-foot .wordmark{padding-bottom:1.2rem}
@media (max-width:620px){
.adn-foot .fbot .fsocial{
margin-top:0;
margin-bottom:1rem;
}
.adn-foot .fbot .fsocial p{
justify-content:center;
padding-right:0;
}
.adn-foot .fsocial a{width:3.25rem;height:3.25rem}
.adn-foot .fsocial svg{width:1.3125rem;height:1.3125rem}
.adn-foot .wordmark{padding-bottom:.6rem}
}
/* ─── Las redes, a la base del ADNIUS y libres de los flotantes ───
MEDIDO en beta a 1599px de ancho: la base de las letras cae en
y=53 y el centro de los iconos en y=270, o sea 218px mas abajo. El
ultimo icono terminaba en x=1504 y los botones flotantes de
WhatsApp y del calendario empiezan justo ahi al lado.
SE SUBE CON position:relative Y top, NO CON margin-top. Un margen
negativo arrastraria tambien la linea legal hacia arriba y se
montaria sobre las letras. Con relative los iconos se mueven solos
y el resto del pie se queda en su sitio.
El margen inferior negativo cierra el hueco que dejan al subir,
pero solo su propio alto: asi la legal sube lo justo y no se pega
a las letras.
EL DESPLAZAMIENTO VA EN calc Y NO EN PIXELES FIJOS porque el
ADNIUS es fluido y su base se mueve con el ancho de la ventana. La
parte proporcional, 0.80 de su tamano de fuente, es lo que hay de
la base al borde inferior de su caja. Los 51px fijos son el
relleno de abajo mas la mitad de un icono, que no dependen del
ancho. */
.adn-foot .fbot .fsocial{
position:relative;
top:calc(-0.025 * clamp(3.4rem,15.5vw,13rem) - 5.1875rem);
margin-top:0;
margin-bottom:-4rem;
right:auto;
bottom:auto;
}
.adn-foot .fbot .fsocial p{
justify-content:flex-end;
padding-right:calc(var(--pad) + 7.5rem);
gap:1.1rem;
}
/* Apilado el calculo no aplica: el ADNIUS se centra y llena el ancho,
asi que los iconos bajan a su propia linea debajo. */
@media (max-width:620px){
.adn-foot .fbot .fsocial{
position:static;
top:auto;
margin-top:0;
margin-bottom:1rem;
}
.adn-foot .fbot .fsocial p{
justify-content:center;
padding-right:0;
}
}
/* ─── Los iconos, a escala con el logotipo ───
EL PROBLEMA: el ADNIUS ocupa siempre la mitad del ancho de la
ventana, porque su tamano va en vw y la palabra no se parte. Los
iconos median 64px fijos hasta el corte de 620, asi que al
angostar la ventana el logotipo encogia y ellos no, y terminaban
chocando con las letras.
Ahora miden en vw igual que el logotipo, con tope minimo y maximo,
y el aire de la derecha tambien. Asi la proporcion entre los tres
circulos y la palabra se mantiene a cualquier ancho.
El corte donde bajan a su propia linea sube de 620 a 900: por
debajo de eso el logotipo ya llena el ancho util y no queda sitio
a su lado, por chicos que sean los iconos.
Y el desplazamiento vertical deja de llevar el 64 escrito a mano:
ahora resta la misma medida fluida del icono, para que el borde de
abajo siga cayendo al ras de las letras en cualquier pantalla. */
@media (min-width:901px){
.adn-foot .fbot .fsocial{
top:calc(-0.025 * clamp(3.4rem,15.5vw,13rem) - 1.1875rem - clamp(2.625rem,4vw,4rem));
}
.adn-foot .fsocial a{
width:clamp(2.625rem,4vw,4rem);
height:clamp(2.625rem,4vw,4rem);
}
.adn-foot .fsocial svg{
width:clamp(1.0625rem,1.6vw,1.5625rem);
height:clamp(1.0625rem,1.6vw,1.5625rem);
}
.adn-foot .fbot .fsocial p{
gap:clamp(.6rem,1vw,1.1rem);
padding-right:calc(var(--pad) + clamp(2.5rem,7.5vw,7.5rem));
}
}
@media (max-width:900px){
.adn-foot .fbot .fsocial{
position:static;
top:auto;
margin-top:0;
margin-bottom:1rem;
}
.adn-foot .fbot .fsocial p{
justify-content:center;
padding-right:0;
gap:.9rem;
}
.adn-foot .fsocial a{width:3.25rem;height:3.25rem}
.adn-foot .fsocial svg{width:1.3125rem;height:1.3125rem}
}
/* ─── La linea legal esquiva los botones flotantes ───
MEDIDO en consola: el bloque .adn-dock es position:fixed, mide
123px de alto y 58 de ancho, y se queda a 32px del borde derecho y
del inferior de la VENTANA. Encima lleva la flecha de volver
arriba, .et_pb_scroll_top, que ocupa otros 40px en esa misma
esquina.
DARLE SOLO AIRE ABAJO NO FUNCIONA, y se intento tres veces. Ese
colchon depende de donde quede el scroll y del alto de la ventana:
con DevTools abierto la ventana baja a 387px y no hay colchon que
alcance.
Se resuelve por ANCHO, que no depende del scroll ni del alto: la
linea legal deja libre la columna derecha donde viven esos
botones, asi que no se pueden cruzar pase lo que pase. El aire de
abajo se queda igual, pero solo para que el ultimo renglon no
toque el borde, no para esquivar nada. */
.adn-foot .legal{
padding-right:calc(var(--pad) + 6.875rem);
padding-bottom:calc(2rem + 3rem);
}
/* Apilada y alineada a la izquierda, con menos ancho que ceder */
@media (max-width:620px){
.adn-foot .legal{
padding-right:calc(var(--pad) + 5rem);
}
}