/* * Estilos propios del sitio, encima de los del prototipo. * * Aquí va lo que no existe en styles.css ni en content-pages.css: el aviso de * independencia, las páginas legales y la red de seguridad de las animaciones. */ /* ------------------------------------------------------------------ */ /* Red de seguridad de las animaciones */ /* ------------------------------------------------------------------ */ /* * EL PROBLEMA QUE RESUELVE * ------------------------ * El prototipo oculta con CSS todo lo que lleva la clase .reveal y lo enseña * cuando el JavaScript le añade .in-view al pasar por pantalla. * * Eso significa que si el JavaScript no llega a ejecutarse —un error, un * bloqueador, una red que corta el archivo a medias— hay bloques enteros de la * página que el visitante no ve nunca. En un sitio cuyo único objetivo es que * alguien lea y deje su correo, eso es lo peor que puede pasar. * * Y no es hipotético: en /casos-de-uso-ia la franja de datos del hero se * quedaba invisible aunque recorrieras la página entera. * * Con esto el contenido se ve SIEMPRE por defecto. La animación solo entra en * juego cuando el JavaScript ha confirmado que está vivo, añadiendo .js al * . Al revés que antes: lo seguro es lo que pasa si algo falla. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; } html.js .reveal.in-view { opacity: 1; transform: none; } /* Quien pide menos movimiento, no lo tiene. */ @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------------ */ /* Aviso de independencia */ /* ------------------------------------------------------------------ */ /* * Va arriba del todo, antes del logo. No es letra pequeña: tiene que leerse * sin buscarlo, porque el dominio coincide con el nombre de un programa * público y quien llega desde una búsqueda puede creer que esto es una sede * electrónica. */ .rn-aviso--barra { background: #0a2443; color: #dbeafe; border-bottom: 1px solid rgba(255, 255, 255, .12); } .rn-aviso--barra p { max-width: 1240px; margin: 0 auto; padding: 10px 20px; font-size: .8125rem; line-height: 1.5; text-align: center; } .rn-aviso--barra strong { color: #fff; } .rn-aviso--barra a { text-decoration: underline; white-space: nowrap; } .rn-aviso--bloque { margin: 32px 0; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .04); } .rn-aviso--bloque p { margin: 0 0 10px; font-size: .875rem; line-height: 1.6; opacity: .85; } .rn-aviso--bloque p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ */ /* Pie */ /* ------------------------------------------------------------------ */ .footer-top { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 64px 0 8px; } @media (min-width: 900px) { .footer-top { grid-template-columns: 1.2fr 2fr; } } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; } .footer-cols h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 12px; } .footer-cols a, .footer-cols span { display: block; padding: 4px 0; font-size: .9375rem; opacity: .85; } .footer-cols a:hover { opacity: 1; text-decoration: underline; } /* Lo que todavía no existe se distingue de lo que sí. */ [data-proximamente] { opacity: .45; cursor: default; } [data-proximamente] small { font-size: .75em; opacity: .8; } /* ------------------------------------------------------------------ */ /* Páginas legales */ /* ------------------------------------------------------------------ */ .legal-doc { max-width: 760px; } .legal-doc h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 24px; } .legal-doc h2 { margin: 40px 0 12px; font-size: 1.375rem; } .legal-doc p, .legal-doc li { line-height: 1.7; color: #334155; } .legal-doc ul { padding-left: 20px; } .legal-doc li { margin-bottom: 8px; } .legal-doc a { color: #2563eb; text-decoration: underline; } .legal-updated { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; font-size: .875rem; color: #64748b; } /* ------------------------------------------------------------------ */ /* Detalles de la home */ /* ------------------------------------------------------------------ */ .relationship-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .relationship-steps li { display: flex; gap: 16px; align-items: flex-start; } .relationship-steps .step-number { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: rgba(59, 130, 246, .25); color: #fff; } .relationship-steps strong { display: block; margin-bottom: 2px; } .relationship-steps span { opacity: .75; font-size: .9375rem; } .sources-note { margin-top: 24px; font-size: .875rem; color: #64748b; } .rn-fuentes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .rn-fuentes li { padding-left: 18px; position: relative; line-height: 1.6; } .rn-fuentes li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; } .rn-fuentes a { color: #2563eb; text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Confirmación del formulario */ /* ------------------------------------------------------------------ */ .newsletter-ok { text-align: center; padding: 24px; } .newsletter-ok strong { display: block; font-size: 1.25rem; margin-bottom: 6px; } .newsletter-nota { font-size: .8125rem; opacity: .75; line-height: 1.6; } /* ------------------------------------------------------------------ */ /* Formulario de avisos */ /* ------------------------------------------------------------------ */ /* * El del prototipo pedía solo el correo y le bastaba con .input-row. Este pide * correo, empresa y tamaño, así que los campos se apilan. */ .rn-campos { display: grid; gap: 10px; } .rn-campos input, .rn-campos select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .96); color: #0d2843; font-size: .9375rem; } .rn-campos select { /* La flecha nativa desaparece sobre fondo claro en algunos navegadores. */ appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; } .rn-campos input::placeholder { color: #64748b; } .rn-campos input:focus, .rn-campos select:focus { outline: 2px solid var(--cyan-400, #39e0ff); outline-offset: 1px; } .rn-campos .button { width: 100%; min-height: 48px; margin-top: 2px; } .rn-legal { margin: 10px 0 0; font-size: .6875rem; color: #b9cce0; opacity: .8; } /* * En la rejilla de tres columnas, el bloque de texto se queda muy estrecho * cuando lleva la nota legal debajo. Se le da aire. */ .newsletter-copy .newsletter-nota { margin-top: 10px; font-size: .75rem; line-height: 1.5; color: #cfe3f5; opacity: .9; } .newsletter-copy .newsletter-nota strong { color: #fff; } /* Debajo de 900px la tarjeta ya apila: el icono sobra y roba altura. */ @media (max-width: 900px) { .newsletter-graphic { display: none; } } /* ------------------------------------------------------------------ */ /* Desplegables de preguntas frecuentes */ /* ------------------------------------------------------------------ */ /* * EL PROBLEMA * ----------- * .faq-list dibuja su indicador de abrir/cerrar con los pseudoelementos de un * dentro del . Tres páginas traen ahí un en lugar del * span, y ese svg no lleva clase, así que ninguna regla lo dimensiona: un SVG * sin ancho ni alto declarados cae a su tamaño por defecto, 300x150 px. * * Resultado: una flecha enorme encima de cada pregunta, empujando el texto * hacia abajo. En /casos-de-uso-ia eran siete. * * Se dimensiona y se coloca a la derecha, girando al abrir. Así la flecha hace * de indicador y no hace falta tocar el HTML de las páginas, que se regenera * desde el prototipo cada vez que llega contenido nuevo. */ .faq-list summary svg { position: absolute; right: 20px; top: 50%; width: 1.05em; height: 1.05em; color: #4b7190; transform: translateY(-50%); transition: transform .2s; } .faq-list details[open] summary svg { transform: translateY(-50%) rotate(90deg); } /* * Cuando el summary trae svg, el del indicador no existe, así que la * respuesta va suelta en un

y se queda sin margen inferior. */ .faq-list details > p { margin: 0; padding: 0 54px 18px 20px; color: #65798b; font-size: 13px; line-height: 1.7; }