/* El verde de Unify como color primario, los enlaces a h2aichat y las dos variantes. Va aparte de olaiol.css a proposito: la maqueta original se queda intacta debajo, asi que comparar y volver atras cuesta borrar un fichero. Subfase 1-C. */ :root { --verde: #72c02c; /* el de Unify, tal cual */ --verde-hondo: #4e8c1c; /* para TEXTO sobre blanco: el claro no llega de contraste */ --verde-humo: #f2f9ec; /* Open Sans en todo, decidido por el PO. Sin serif, como el periodico de Unify. */ --serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* EL ACENTO DEL PERIODICO ES EL VERDE. La hoja original lo tenia en rojo (#b32d1f) y lo usa en sitios que yo no habia pisado -- entre ellos `.cabecera .nombre span`, que por especificidad ganaba a mi regla y pintaba el AI de ROJO en la portada. Cambiar la variable lo arregla de raiz y de una vez, en vez de ir persiguiendo selectores. */ --acento: #72c02c; } /* Y por si algun dia vuelve a ganar alguien por especificidad, el AI y sus puntos, atados */ .cabecera .nombre .ai, .cabecera .nombre .sep { color: var(--acento); } /* El acento del periodico pasa a ser el verde */ .antetitulo, .sello.tacha, .cifra { color: var(--verde-hondo); } .barra { background: var(--acento) !important; } .secciones { border-top: 3px solid var(--acento); } .secciones a.aqui { box-shadow: inset 0 -3px 0 var(--acento); } .nombre span { color: var(--acento); } /* ── El enlace a h2aichat, que es la razon de existir del periodico ────────── */ .a-la-mesa { background: var(--acento); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 3px 10px; border-radius: 3px; text-decoration: none; white-space: nowrap; } .a-la-mesa:hover { background: var(--verde-hondo); color: #fff; } /* El sello de credito de cada pieza se convierte en la puerta al debate */ a.sello-debate { text-decoration: none; border-bottom: 1px solid var(--acento); color: var(--verde-hondo); font-weight: 700; } a.sello-debate:hover { background: var(--verde-humo); } /* La franja que invita a lanzar tu propio debate */ .invitacion { background: var(--verde-humo); border-top: 3px solid var(--acento); border-bottom: 1px solid var(--linea); padding: 26px 0; margin: 34px 0; } .invitacion .dentro { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .invitacion h3 { font-family: var(--serif); font-size: 25px; margin: 0 0 4px; color: var(--tinta); } .invitacion p { margin: 0; color: var(--tinta-suave); font-family: var(--sans); font-size: 15px; max-width: 62ch; } .invitacion .boton { background: var(--acento); color: #fff; font-family: var(--sans); font-weight: 800; padding: 11px 20px; border-radius: 4px; text-decoration: none; font-size: 15px; } .invitacion .boton:hover { background: var(--verde-hondo); } /* ── La variante CON FOTOS ───────────────────────────────────────────────── Las imagenes son NUESTRAS y estan generadas: no hay banco de fotos y de internet no se coge nada. Sirven para juzgar el hueco, no para publicar. */ /* 1-L: la foto es una IMAGEN, no un fondo. Un fondo no tiene `alt`, asi que ni lo lee un lector de pantalla ni existe para un buscador. `object-fit: cover` hace exactamente lo que hacia `background-size: cover`, de modo que el marco 16:9 y el diseno adaptable de 1-C no cambian. */ .marco.foto { background-size: cover; background-position: center; position: relative; overflow: hidden; } .marco.foto > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* El pie del articulo: descripcion y firma seguidas (variante A, elegida por el PO el 8-sep). */ .pie-foto { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: #8a827a; margin: 8px 0 26px; } .pie-foto .que-se-ve { color: #57514b; } .pie-foto a { color: #8a827a; text-decoration: underline; text-underline-offset: 2px; } .pie-foto a:hover { color: var(--verde-hondo); } /* Y en la portada, UNA linea para toda la pagina y al final. Doce creditos serian doce ruidos. */ .pie-portada { font-family: var(--sans); font-size: 12px; color: #8a827a; border-top: 1px solid var(--linea); padding-top: 14px; margin: 10px 0 30px; } .pie-portada a { color: #8a827a; text-decoration: underline; } .marco.foto .cifra, .marco.foto .que { display: none; } .marco.foto .barra { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; } /* ── El selector para comparar una contra otra ─────────────────────────────── */ /* ── La franja destacada, en verde y no en negro (PO, 7-sep) ──────────────── `.promo` venia con el color de la tinta, casi negro, cruzando la pagina entera. En un periodico cuyo primario es el verde de Unify, esa franja era la unica pieza grande que no pertenecia a la casa. Se cambia AQUI y no en `olaiol.css`: la maqueta original se queda intacta debajo, y volver atras sigue costando borrar un fichero. */ .promo { background: var(--verde-hondo); } .promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .promo a:hover { color: #eaffd8; } /* ── Los dos verdes, para compararlos (PO, 7-sep) ────────────────────────── Por defecto el texto y los rellenos grandes van en el verde HONDO (#4e8c1c), porque el de Unify a pelo se lee mal en letra pequenia sobre blanco y en blanco sobre el. Con la clase `unify` puesta arriba, TODO pasa al verde original #72c02c. El interruptor esta en el selector de abajo a la derecha y recuerda lo elegido. */ /* El verde de Unify quedo decidido: ya no hay interruptor. */ /* ── La letra, para compararla (PO, 7-sep) ───────────────────────────────── La maqueta va con Playfair Display en los titulares y Source Sans en el texto: una serif de prensa para titular y una sans para leer, que es el reparto clasico de un periodico. El periodico de Unify usa OPEN SANS para todo, sin serif -- comprobado en su plantilla, que carga Open Sans 300/400/600/700 y ninguna otra. Con la clase `letra-unify` arriba, toda la pagina pasa a Open Sans y se ve la diferencia sin cambiar nada mas. */ /* Una serif y una sans no pesan igual al mismo tamanio: sin esto, el titular en Open Sans sale mas gordo que en Playfair y la comparacion mide otra cosa. */ .cabecera .nombre { font-weight: 800; letter-spacing: -.02em; } .titulo { font-weight: 700; letter-spacing: -.01em; } /* ── La salida al debate, en la pagina del articulo ──────────────────────── `.origen` es el bloque que dice de donde sale la pieza, y es LA PUERTA a h2aichat: el lector acaba de leer el articulo y ahi decide si quiere ver la discusion entera. Se le da el peso del verde de la casa, porque es el sitio por el que este periodico gana lo que va a ganar. */ .origen { border-left: 4px solid var(--acento); background: var(--verde-humo); } .origen h3 { color: var(--verde-hondo); } .origen .boton-debate { display: inline-block; margin-top: 10px; background: var(--acento); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 15px; padding: 11px 20px; border-radius: 4px; text-decoration: none; } .origen .boton-debate:hover { filter: brightness(.92); color: #fff; } /* ── EL LOGOTIPO (PO, 7-sep) ─────────────────────────────────────────────── OL·AI·OL con los separadores en verde, el AI encendido, y la lectura debajo. Lo que significa algo es el AI del centro: «lo de OL era relleno que lo hace facil de recordar» (PO). Con las dos lecturas, ese relleno pasa a ser el mensaje -- el periodico esta abierto por los dos extremos. Lo que se reconoce es OL·AI·OL y NO SE MUEVE NUNCA; lo que rota es la linea pequenia, segun la seccion. Rotarla al azar convertiria el guinio en un fallo aparente. */ .nombre .sep { color: var(--acento); font-weight: 400; margin: 0 .06em; } .nombre .ai { color: var(--acento); } .nombre .lectura { display: block; font-family: var(--sans); font-weight: 600; font-size: clamp(9px, 1.5vw, 12px); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-tenue); margin-top: 10px; } .nombre .lectura em { color: var(--verde-hondo); font-style: normal; font-weight: 700; } /* ══ MOVIL Y TABLETAS ══════════════════════════════════════════════════════ La hoja original trae dos cortes, en 991 y 575, y son gruesos: reparten columnas y no tocan ni la tipografia, ni la barra de arriba, ni el ancho de lectura. En un periodico lo que se rompe primero es el mosaico de portada, y justo despues los titulares, que estan pensados para leerse a tres columnas y en un movil ocupan seis lineas. Los tres aparatos que pidio el PO, con sus anchos de verdad: · Movil 360 - 430 px · Tableta de 7 pulgadas 600 px de pie, 960 tumbada · Tableta de 10 pulgadas 800 px de pie, 1280 tumbada Los cortes van entre medias y no encima, para que ninguno caiga en el filo. */ /* ── Hasta 767: tableta de 7 de pie y moviles grandes ───────────────────── */ @media (max-width: 767px) { .cifras-fila { grid-template-columns: repeat(2, 1fr); } /* La barra de arriba lleva fecha, dos idiomas, boletin, correcciones y el enlace a h2aichat: en 600 px no cabe en una linea y la altura fija de 38 px la recorta. */ .barra-alta .container { height: auto; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 8px; justify-content: center; text-align: center; } .a-la-mesa { display: inline-block; } .promo .container { justify-content: flex-start; } /* El lema del logotipo lleva 0.22em de separacion entre letras: a este tamanio se sale. */ .nombre .lectura { letter-spacing: .12em; line-height: 1.5; } } /* ── Hasta 599: movil ──────────────────────────────────────────────────── */ @media (max-width: 599px) { .container { padding: 0 16px; } /* Titulares: en el movil se lee a UNA columna, asi que el titular manda y hay que bajarlo o se come la pantalla. Con clamp no hace falta un tamanio por aparato. */ .entradilla { font-size: 16px; line-height: 1.55; } /* 16 px de cuerpo es el minimo para leer largo, y ademas evita que el navegador haga zoom solo al tocar. */ body { font-size: 16px; } .barra-alta { font-size: 11px; } .barra-alta .container > span:first-child { display: none; } /* la fecha, fuera */ .a-la-mesa { display: block; width: 100%; padding: 9px 10px; font-size: 13px; } /* La navegacion ya rueda de lado desde la hoja original; aqui se le da tamanio de dedo. */ nav.secciones ul { gap: 0 14px; padding: 0 2px; } nav.secciones a { padding: 12px 2px; display: inline-block; } /* 44 px de alto al tacto */ .cifras-fila { grid-template-columns: 1fr; } .invitacion { padding: 20px 0; margin: 26px 0; } .invitacion h3 { font-size: 21px; } .invitacion .boton, .origen .boton-debate { display: block; text-align: center; width: 100%; } .marco { border-radius: 2px; } .credito { flex-wrap: wrap; gap: 6px 10px; } } /* ── El ancho de lectura, en todas partes ────────────────────────────────── Un articulo a 1140 px de ancho no se lee: el ojo pierde el renglon. Sesenta y pico caracteres es lo que aguanta una linea, y en un periodico eso no es un gusto. */ /* La medida de lectura son 68 caracteres, y el sobrante se repartia TODO a la derecha: lo primero que vio el PO al abrir la pagina fue el hueco. La columna se centra. */ article { max-width: 74ch; margin-left: auto; margin-right: auto; } article .entradilla, article p, .origen p { max-width: 68ch; } /* Que ninguna imagen se salga, pase lo que pase */ img, svg, .marco { max-width: 100%; } /* ══ LO QUE HAY QUE DEVOLVER DESPUES DE BOOTSTRAP ══════════════════════════ Se ha traido el Bootstrap 4 que usa Unify (`assets/css/vendor/bootstrap.min.css`), porque su rejilla es lo que hace que sus paginas se vean bien a cualquier anchura. Y no era magia: ELLOS DECLARAN EL ANCHO POR APARATO EN CADA COLUMNA -- `col-lg-4 col-md-6`-- y la maqueta ponia `col-4` a secas, que significa «un tercio SIEMPRE», tambien en un movil de 360 px. Ahi se cortaba. Mis media queries peleaban contra eso y perdian. Bootstrap carga DESPUES de la hoja de la maqueta, para que su rejilla mande. Y como de paso su `reboot` reescribe la tipografia base, aqui se le devuelve el aspecto de periodico. */ body { font-family: var(--sans); color: var(--tinta); background: var(--papel); font-size: 17px; line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--serif); margin-top: 0; } a { color: inherit; text-decoration: none; } a:hover { color: var(--verde-hondo); } .container { max-width: 1140px; } /* ══ EL AIRE ENTRE NOTICIAS ════════════════════════════════════════════════ Lo vio el PO: «entre las noticias de Unify hay mucho mas espacio que el que estamos poniendo; las nuestras parecen apretadas y se molestan unas a otras». Tenia razon, y no era una impresion: la maqueta dejaba 2 px de canal y 4 de fondo entre piezas. Los numeros salen de MEDIR a Unify, no de mi gusto. En su plantilla de noticias: · `g-mb-30` 72 veces -> la separacion normal entre piezas · `g-mb-50` 23 veces -> la separacion entre bloques Y el canal horizontal es el de Bootstrap, 15 px por lado, que ellos no tocan. Un periodico apretado se lee como una lista de resultados; el aire es lo que dice donde acaba una noticia y empieza otra, sin necesidad de una raya. */ .row.mosaico { margin-left: -15px; margin-right: -15px; } .row.mosaico > [class*="col-"] { padding-left: 15px; padding-right: 15px; margin-bottom: 30px; } /* Entre bandas de la portada, el doble: ahi no cambia una noticia, cambia un bloque */ .franja { margin-bottom: 50px; } .franja:last-child { margin-bottom: 20px; } /* Y la pieza respira por dentro: el pie de creditos pegado al titular era parte del apreton */ .mosaico .entradilla { margin-bottom: 10px; } .mosaico .credito { padding-top: 4px; } /* Y el aire entre piezas que Bootstrap no da y un periodico necesita */ .row:not(.mosaico) > [class*="col-"] { margin-bottom: 26px; } /* ══ LA ESCALA DE TITULARES, IGUAL EN TODAS LAS ANCHURAS ═══════════════════ La hoja original tenia el h1 fluido y el h2 y el h3 CLAVADOS en 24 y 17 px. En escritorio colaba, porque cada uno vive en una columna de distinto ancho y el ojo lo entiende. En el movil, con todo a una columna y uno debajo del otro, la pieza de 5.400 millones y la de Bitcoin parecian de dos periodicos distintos: mismo ancho, mismo sitio, dos tamanios sin motivo aparente. La jerarquia se mantiene -- una portada sin jerarquia es una lista -- pero se ESTRECHA al bajar de anchura, que es lo que hace cualquier periodico: en papel grande la diferencia entre la apertura y una secundaria es enorme; en una columna estrecha, un matiz. Con `clamp` no hace falta un tamanio por aparato: minimo, deseado y maximo, y el navegador interpola. Los tres niveles crecen a ritmos distintos a proposito -- 3.6vw, 2.4vw, 1.5vw -- asi que se separan al ensanchar y se juntan al estrechar. */ h1.titulo { font-size: clamp(27px, 3.6vw, 40px); } h2.titulo { font-size: clamp(21px, 2.4vw, 28px); } h3.titulo { font-size: clamp(18px, 1.5vw, 20px); } h4.titulo { font-size: clamp(15px, 1.15vw, 16px); } .titulo { line-height: 1.2; } .entradilla { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; } /* ══ LA HAMBURGUESA ════════════════════════════════════════════════════════ Antes la barra de secciones rodaba de lado. El PO dudo de esa solucion y tenia razon: en un movil se ven cuatro secciones de once y NO HAY NINGUNA SENIAL de que existan las otras siete. Lo que no se ve, no existe. Se copia el gesto de Unify -- el boton de las tres rayas -- pero no su codigo: su menu necesita jQuery y bootstrap.js, 135 KB para abrir y cerrar una lista. De 992 para arriba (`col-lg`, el corte de Bootstrap) no hay boton y la barra se ve entera, que es donde estaba bien desde el principio. */ .hamburguesa { display: none; } @media (max-width: 991px) { .hamburguesa { display: flex; align-items: center; gap: 4px; width: 100%; padding: 13px 2px; /* 44 px al tacto */ background: none; border: 0; cursor: pointer; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); } /* Las tres rayas, apiladas de verdad: una caja con tres hijos y hueco entre ellos. Se probo antes con una sola raya y dos sombras, y quedaba descentrada -- la caja media 2 px y el dibujo 14, asi que el icono se subia respecto al texto. */ .hamburguesa .rayas { display: inline-flex; flex-direction: column; gap: 4px; margin-right: 9px; } .hamburguesa .rayas span { display: block; width: 19px; height: 2px; background: var(--acento); } nav.secciones.abierta .hamburguesa .rayas span:nth-child(2) { opacity: .35; } /* La lista, plegada: en columna y con sitio para el dedo */ nav.secciones ul { display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 10px; overflow: visible; } nav.secciones.abierta ul { display: flex; } nav.secciones li { width: 100%; border-top: 1px solid var(--linea); } nav.secciones a { display: block; width: 100%; padding: 13px 2px; } } /* ── La línea que dice qué es esto (UCO#029) y quién responde (UCO#028) ───────────── Las dos nacen del debate del 12-sep-2026 entre seis IAs sobre cómo conseguir audiencia. La de la portada va ARRIBA, antes de la primera noticia, porque el 92% de los visitantes se iba en la primera página y la explicación estaba debajo del primer bloque. */ .explica { margin: 0 0 26px; padding: 12px 0 0; border-top: 3px solid var(--acento); font: 400 15px/1.55 var(--sans); color: var(--tinta-suave); } .explica a { font-weight: 700; color: var(--acento); white-space: nowrap; } /* Y ésta cierra cada noticia: un cargo, un correo y la puerta a cómo corregimos. Sobria a propósito — es servicio, no reclamo. */ .responsable { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--linea); font: 400 13px/1.5 var(--sans); color: var(--tinta-suave); } .responsable a { color: var(--acento); font-weight: 700; } /* ── Las páginas de tachón (UCO#030) ─────────────────────────────────────────────── Una página por afirmación falsa. La frase NUNCA se lee sola: va tachada y el motivo y la fuente van pegados debajo, sin scroll. Es la condición que pusieron DeepSeek y MiniMax en el debate del 12-sep, y tiene nombre — el efecto de verdad ilusoria: una frase falsa repetida, aunque sea para desmentirla, se le queda a quien lee deprisa. Por eso el desmentido pesa visualmente MÁS que la cita. */ .tachon .titulo.dicho { margin: 10px 0 14px; padding: 18px 20px; background: #fbf3e3; border-left: 4px solid var(--acento); font: 700 clamp(21px, 3.2vw, 30px)/1.35 var(--serif); color: #9a6208; } /* La frase falsa es el titular a proposito: es lo unico que alguien podria estar buscando. Y el veredicto va pegado debajo, antes de cualquier otra cosa, para que no se pueda leer la una sin el otro. */ .tachon .veredicto { margin: 0 0 6px; font: 700 15px/1.5 var(--sans); color: var(--acento); } .tachon .dicho .tachado { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--acento); } .tachon .titulo-menor { margin: 30px 0 8px; font: 700 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); } .tachon .fuente-tachon { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font: 400 14px/1.55 var(--sans); color: var(--tinta-suave); } .tachon .origen { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; } .tachon .origen a { font-weight: 700; color: var(--acento); } .cuando { font: 400 13px/1.5 var(--sans); color: var(--tinta-tenue); } /* El índice. El aviso de la muestra va ARRIBA y no al pie: sin él, la lista se lee como una estadística de cuánto mienten las IAs, y sólo mide lo que elegimos comprobar. */ .aviso-muestra { margin: 0 0 26px; padding: 12px 14px; background: var(--papel-hueso); border: 1px solid var(--linea); font: 400 14px/1.55 var(--sans); color: var(--tinta-suave); } .lista-tachones { list-style: none; margin: 0; padding: 0; } .lista-tachones li { padding: 14px 0; border-top: 1px solid var(--linea); } .lista-tachones a { display: block; font: 400 17px/1.45 var(--serif); color: var(--tinta); } .lista-tachones a:hover { color: var(--acento); } .lista-tachones .tachado { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--acento); } .lista-tachones .cuando { display: block; margin-top: 5px; } /* ── La pregunta al lector (UCO#031) ─────────────────────────────────────────────── Cada respuesta es un enlace, no un formulario: así no hace falta ni una cookie ni un tercero, que es lo que promete la página de privacidad. DE DÓNDE SALE EL DISEÑO: de Unify, `shortcode-blocks-cta-boxed` — su patrón de llamada a la acción, una banda de color a todo el ancho con el texto y los botones centrados (`g-bg-primary g-color-white g-pa-30` + `u-btn-white`). Se toma el patrón y se traduce a nuestras variables, que es la regla de la casa; no se importa su CSS. Va DESPUÉS del cuerpo y ANTES del bloque que lleva al debate (PO, 12-sep): preguntar a quien acaba de leer, sin ponerse delante de la puerta a h2aichat, que es la razón de ser del periódico (UCO#001). Por eso la banda es roja y corta, y el botón del debate sigue siendo el único verde y grande de la página. */ .encuesta { margin: 34px 0 0; padding: 22px 24px; background: var(--acento); color: var(--papel); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .encuesta .pregunta { margin: 0; flex: 1 1 230px; font: 700 clamp(17px, 2.2vw, 21px)/1.3 var(--serif); color: var(--papel); } .encuesta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; } .encuesta a { display: inline-block; padding: 9px 15px; background: var(--papel); border-radius: 3px; font: 600 13px/1.35 var(--sans); color: var(--acento); } .encuesta a:hover { background: var(--tinta); color: var(--papel); } /* En la página de gracias no hay banda: ahí la pregunta ya no compite con nada. */ .gracias .encuesta { background: var(--papel-hueso); border: 1px solid var(--linea); } .gracias .encuesta .pregunta { color: var(--tinta); } .gracias .encuesta a { border: 1px solid var(--acento); } .abierta { margin-top: 18px; font: 400 14px/1.5 var(--sans); } .abierta a { color: var(--acento); font-weight: 700; } @media (max-width: 640px) { .encuesta { display: block; } .encuesta .pregunta { margin-bottom: 12px; } .encuesta ul { flex-direction: column; } .encuesta a { display: block; text-align: center; } } /* ── El pie (UCO#033) ────────────────────────────────────────────────────────────── DE DÓNDE SALE: de Unify, `shortcode-blocks-footer-modern` — banda oscura con columnas y barra de cierre debajo (`g-bg-black-opacity-0_9 g-py-60`). Se toma el patrón y se traduce a nuestras variables, que es la regla de la casa; no se importa su CSS. Hasta el 12-sep aquí sólo había la barra de cierre, y el PO la describió como «más bien triste». La columna de «lo último» no es adorno: el 90% de los visitantes se va en la portada, y el pie es el último sitio donde ofrecerles otra cosa que leer. */ .pie-alto { background: var(--tinta); color: #b9bcc6; padding: 42px 0 34px; margin-top: 4px; } .pie-cols { display: grid; gap: 30px 34px; grid-template-columns: 1.6fr 1fr 1.4fr 0.8fr; } .pie-col h3 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.16); font: 700 11.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--papel); } .pie-col ul { list-style: none; margin: 0; padding: 0; } .pie-col li { padding: 5px 0; border: 0; font-size: 13.5px; line-height: 1.45; } .pie-col a { color: #b9bcc6; } .pie-col a:hover { color: var(--papel); } .pie-nombre { margin: 0 0 12px; font: 900 30px/1 var(--serif); letter-spacing: -.01em; } .pie-nombre a { color: var(--papel); } .pie-nombre b { color: var(--acento); font-weight: 900; } .pie-nombre span { color: #6d717e; } .pie-que { margin: 0 0 14px; font: 400 13.5px/1.55 var(--sans); max-width: 46ch; } .pie-correo a { color: var(--papel); font: 700 13.5px/1.5 var(--sans); } .pie-correo a:hover { color: var(--acento); } .pie-redes li { display: inline-block; margin-right: 14px; } @media (max-width: 900px) { .pie-cols { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } } @media (max-width: 560px) { .pie-cols { grid-template-columns: 1fr; gap: 26px; } .pie-alto { padding: 32px 0 26px; } }