/* THEME ORYALINE */
/* =====================================================================
TIPOGRAFIA DE MARCA — Poppins, autoalojada
---------------------------------------------------------------------
El 23 de agosto se descubrio que Poppins no se cargaba en ninguna
pagina: el CSS la pedia desde el principio pero no habia ni un
ni un @font-face, asi que el navegador caia a la fuente del sistema.
La primera solucion fue enlazar Google Fonts, y eso anadia dos origenes
externos (fonts.googleapis.com y fonts.gstatic.com) mas una hoja de
estilos que bloquea el pintado antes de poder pedir una sola letra.
Ahora los cuatro pesos viven en estilo/fuentes/ (31 KB en total, solo
el subconjunto latino, que cubre el castellano de sobra). Se sirven
desde el mismo dominio, aprovechan la cache del propio servidor y de
paso la IP de quien visita la web deja de llegar a Google.
font-display:swap: el texto se lee con la fuente del sistema mientras
llega Poppins, en vez de quedarse invisible.
===================================================================== */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fuentes/poppins-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fuentes/poppins-700.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fuentes/poppins-800.woff2') format('woff2');
}
/* RESET / NORMALIZE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
display: block;
}
button, input, textarea {
font-family: inherit;
}
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Root / Themes */
:root{
--azul: #97c3ca;
--cian: #a9dae3;
--bgw: #325257;
--bg: #ffffff;
--muted: #666;
--text: #111;
--card: #f7f7fb;
--maxw: 1100px;
--radius: 12px;
--font: "Poppins", "Open Sans", sans-serif;
}
/* =====================
DARK MODE VARIABLES
===================== */
body.dark-mode {
--bg: #0f0f14;
--bg-soft: #15151c;
--text: #e2edf3;
--muted: #b9b9c3;
--card: #17171f;
--border: rgba(255,255,255,0.08);
--header-bg: rgba(15,15,20,0.85);
--shadow: 0 10px 35px rgba(0,0,0,0.55);
}
/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);margin:0;line-height:1.6;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
main {padding-top:225px;position: relative;}
/* Header */
.site-header{position:fixed;left:0;right:0;top:0;background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);z-index:1800;box-shadow:0 2px 8px rgba(0,0,0,0.04);height:30%;}
.header-inner{display:grid; grid-template-columns:9fr 1fr;gap:10px;justify-content:space-between;padding:14px 0; height:98%;}
.brand{display:flex;margin:0 auto;align-items:center;gap:10px;}
.logo {display:block;height:140px;width:auto;padding: 0.2rem;cursor: pointer;}
#logo-wrapper a{display:flex;margin:2px auto;align-items:center;flex-shrink: 0;}
.brand-text strong{padding:0;font-size:1.2rem}
.small.muted{font-size:0.8rem;color:var(--muted)}
.brand-text {margin-top: 0.1rem;margin:0;padding:0;}
/*search*/
.search-container {
position: relative;
}
.search-container form {
display: flex;
align-items: center;
}
.search-input {
width: 0;
opacity: 0;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
transition: all 0.3s ease;
font-size: 14px;
}
/* Estado activo */
.search-container.active .search-input {
width: 180px;
opacity: 1;
margin-right: 8px;
}
.search-btn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #333;
}
.search-btn:hover {
color: #000;
}
/* Lupa del buscador.
Sustituye a Font Awesome 4.7, que era la única razón por la que las 19
páginas descargaban 31 KB de CSS y 77 KB de tipografía: en todo el sitio se
usaba un solo icono, este. Ahora va en línea dentro del botón, así que no
hay ni petición extra ni hoja de estilos que bloquee el pintado.
stroke:currentColor hace que herede el color del botón, y con eso la regla
de modo oscuro .dark-mode .search-btn sigue funcionando sin tocar nada. */
.icon-buscar {
width: 20px;
height: 20px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* NAV */
.nav {display: flex;gap: 34px;align-items: center;position: relative;margin-left:20%;}
/* Links */
.nav a {color: var(--text);text-decoration: none;font-weight: 600;padding: 8px 12px;border-radius: 8px;}
.nav a.cta{background:var(--azul);color:#fff;}
.nav a:hover {background: rgba(74,94,255,0.06);color: var(--azul);}
/* SUBNAV */
.subnav {position: relative;}
.subnavbtn {background: none;border: none;font-size: 16px;font-weight: 600;cursor: pointer;padding: 8px 12px;border-radius: 8px;}
.subnavbtn:hover {background: rgba(74,94,255,0.06);color: var(--azul);}
/* DROPDOWN */
.subnav-cont {display: none;position: absolute;top: 100%;left: 0;background: #fff;min-width: 220px;padding: 10px;border-radius: 8px;box-shadow: 0 10px 25px rgba(0,0,0,.15);z-index: 1000;}
/* MOSTRAR AL HOVER */
.subnav:hover .subnav-cont {display: block;}
.subnav-cont a {display: block;padding: 8px;}
/* ===== BLOG MEGA MENU ===== */
.subnav {position: relative;}
/* CONTENEDOR MEGA MENU */
.subnavsub {display: none;position: absolute;top: 100%;left: 50%;width: 100vw; max-width:calc(100vw - 40px); transform: translate(-59%); background: #fff;padding: 1rem 2rem;box-shadow: 0 15px 40px rgba(0,0,0,.15);list-style: none;z-index: 3000;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem; border-radius:8px;}
/* MOSTRAR MEGA MENU */
.subnav:hover .subnavsub {display: grid;}
/* CADA COLUMNA */
.subnavsub > li {list-style: none;}
/* TÍTULO DE CATEGORÍA */
.subnavsub > li > a {font-weight: 700;margin-bottom: 0.6rem;display: block;color: var(--text);}
.subnavsub > li:hover .subnavsub-cont {display: block;}
/* LISTA DE POSTS */
.subnavsub-cont {list-style: none;padding: 0;margin: 0;}
/* LINKS DE POSTS */
.subnavsub-cont a {display: block;padding: 6px 0;font-weight: 400;color: var(--text);}
.subnavsub-cont a:hover {color: var(--azul);text-decoration: underline;}
/* Burguer menu*/
.burger{display:none;border:none;background:transparent;cursor:pointer;padding:8px}
.burger span{display:block;width:25px;height:3px;background:var(--text);margin:5px 0;transition:all .3s}
/* Theme toggle */
.theme-toggle{position:fixed;margin-top:0.3rem;margin-right: 2rem;top:1rem;right:1rem;background:var(--azul);color:#fff;border:none;border-radius:50%;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;z-index:1300;box-shadow:0 6px 18px rgba(255,255,255,0.85);cursor:pointer;transition:transform .2s}
.theme-toggle:hover{transform:scale(1.05)}
.icon{width:22px;height:22px;display:block;fill:currentColor}
/* Hero */
.hero{padding:120px 0 60px;background:linear-gradient(90deg,var(--azul),var(--cian));color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:center}
.hero-copy h1{font-size:2.6rem;margin-bottom:12px}
.lead_center{font-size:1.05rem;color:black}
.accent{color:#fff;font-weight:700}
.hero-card{background:rgba(255,255,255,0.95);color:var(--text);padding:22px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
/* Buttons */
.btn{display:inline-block;background:#fff;color:var(--azul);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.btn:hover{background:var(--cian);color:#fff}
.link-btn{margin-left:12px;color:rgba(255,255,255,0.92);font-weight:600;text-decoration:underline}
/* Sections */
.section{padding:70px 0}
.light{background:var(--card)}
h2 {text-align:center;color:var(--bgw);background-image: linear-gradient(to left, rgba(252,252,252,0), rgba(151,195,202,1)); border-radius:1% 9% 95%;}
h3 {color:var(--bgw);margin-bottom:12px;}
h3 {color:var(--bgw);margin-bottom:8px;}
h5 {color:var(--bgw);margin-bottom:8px;}
h6 {text-align:center;color:var(--bgw);margin-top:24px;}
h4.pull-quote {color:var(--bgw);margin-bottom:8px;}
h4.closing-statement {text-align:center;color:var(--bgw);margin-top:24px;}
p {margin-bottom:18px;color:var(--muted);}
.center{text-align:center}
/* Grid utilities */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px; padding:5rem;}
.card{background:var(--bg);padding:30px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.04)}
.card h3{color:var(--bgw)}
.team-card{text-align:center; padding:2rem;}
.team-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.team-name{font-size:1.1rem;font-weight:700;color:var(--text)}
/* Images */
.img-circle{width:220px;height:auto;border-radius:50%;object-fit:cover;display:block;margin:30px auto 12px}
/* Projects */
.project-grid{margin-top:20px}
.project img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.project figcaption{padding:12px}
/* Prices */
.price-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px; padding:10px;}
.price-card{background:var(--card);padding:18px;border-radius:12px;min-width:220px;box-shadow:0 6px 18px rgba(0,0,0,0.04);text-align:center;}
.price{font-weight:800;font-size:1.2rem;color:var(--text)}
/* Blog*/
figure a{text-decoration: none;color:inherit;}
/* Contact */
.contact-wrap{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-top:18px;}
.contact-form{flex:1;min-width:260px;display:flex;flex-direction:column;gap:12px;}
.row label, input, textarea, select, button{margin:8px auto;padding: 8px;border-radius:8px;}
.contact-form input,.contact-form textarea,.contact-form select{padding:12px;border-radius:10px;border:1px solid #e6e6ef;background:transparent}
.contact-info{width:300px;min-width:220px;}
.info-card{padding:18px;border-radius:12px;background:var(--card);box-shadow:0 8px 30px rgba(0,0,0,0.04)}
/* Footer */
.site-footer{ display:fixed;padding:18px 0;background:transparent;border-top:1px solid rgba(0,0,0,0.04);margin-top:40px;text-align:center}
.small{font-size:0.9rem}
strong{font-weight:700; font-size: 1.2em;}
/* Modal */
.modal{display:none; position:fixed;inset:0;background:rgba(0,0,0,0.45);align-items:center;justify-content:center;z-index:1400}
.modal.show{display:flex;}
.modal-content{background:var(--bg);padding:30px;border-radius:14px;max-width:420px;width:90%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,0.12)}
.icon-circle{width:72px;height:72px;border-radius:50%;background:var(--azul);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 12px;font-size:28px}
#close-modal{margin-top:14px;background:var(--cian);color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer}
/* =====================
MOBILE FIRST FIXES
===================== */
@media (max-width: 768px) {
/* HEADER */
header {
position:relative;
}
.header-inner {
padding: 15px 0;
}
.brand-text {
display: none; /* ocultar texto logo en móvil */
}
.theme-toggle {
top: 0.9rem;
right: 0.6rem;
width: 38px;
height: 38px;
}
/*search*/
.search-container {
float: none;
}
.search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 10px;
}
/* NAV */
.nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
transform: none; /* NO MODIFICAR */
margin: 0;
flex-direction: column;
align-items: stretch;
background: #fff;
padding: 0.3rem;
display: none;
z-index: 2000;
gap:2px;
}
.nav.open{
display:flex;
}
.nav a,
.subnavbtn {
font-size: 15px;
padding: 4px 6px;
}
.burger {
display: block;
z-index: 1300;
}
/* El menú móvil es el propio .nav: a ≤768px lo abre .burger con la clase .open. */
.subnavsub,
.subnav-cont {
position: static;
width: 100%;
box-shadow: none;
transform: none;
width: 100%;
box-sizing: border-box;
}
.subnavsub {
display: none;
width: 100%;
display: none;
grid-template-columns: 1fr;
box-shadow: none;
transform: none;
}
.subnav,
.subnav-cont,
.subnavsub {
position: static;
transform: none;
width: 100%;
}
/* Submenús ocultos */
.subnav-cont,
.subnavsub {
display: none;
padding-left: 20px;
margin:0;
}
/* Mostrar al abrir */
.subnav-cont.open,
.subnavsub.open {
display: block;
}
.subnav-cont a,
.subnavsub > li > a {
display: block;
font-size: 14px;
margin: 0;
padding: 5px 0 0 10px;
}
/* Subnivel blog */
.subnavsub-cont {
display: none;
margin:0 20px;
}
.subnavsub-cont.open {
display: block;
}
.subnavsub-cont a {
font-size: 13px;
}
/* CTA */
.nav a.cta {
margin-top: 6px;
padding: 8px;
font-size: 14px;
text-align: center;
}
/* HERO */
.hero {
padding: 90px 0 40px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.hero-copy h1 {
font-size: 1.9rem;
line-height: 1.25;
}
.hero-cta {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.link-btn {
margin-left: 0;
}
.hero-card {
padding: 18px;
}
/* SECTIONS */
.section {
padding: 50px 0;
}
h2 {
font-size: 1.5rem;
}
/* GRIDS */
.grid-4,
.grid-3 {
grid-template-columns: 1fr;
}
/* PRICE GRID */
.price-grid {
flex-direction: column;
align-items: stretch;
}
.price-card {
width: 100%;
}
/* CONTACTO */
.contact-wrap {
flex-direction: column;
width: 100%;
gap: 16px;
padding: 0;
}
.contact-info {
width: 100%;
}
/* FOOTER */
.site-footer {
padding: 20px 0;
font-size: 0.85rem;
}
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
.flex-wrap .item { flex: 0 0 100%; }
}
/* Tablets */
@media (min-width: 769px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Desktop */
@media (min-width: 1025px) {
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Transition helper */
.fade-transition{transition:background-color .35s ease,color .35s ease,filter .35s ease}
/* =====================================================================
RESPONSIVE — revisión UX/UI
---------------------------------------------------------------------
Tres tramos, del más ancho al más estrecho:
· tablet ......... 769px – 1024px
· móvil .......... hasta 768px
· móvil pequeño .. hasta 480px
El corte de móvil es 768px, el mismo valor que usa main.js (constante
MOVIL), para que la hoja de estilos y el guion cambien de comportamiento
exactamente en el mismo punto. Si se toca uno, hay que tocar el otro.
Este bloque va al final a propósito: así sus reglas ganan a las
anteriores de igual especificidad sin tener que subir selectores.
===================================================================== */
/* ---------------------------------------------------------------------
CABECERA por debajo de escritorio
La cabecera base es position:fixed con height:30%, una altura relativa
a la ventana: en una tablet de 1024px de alto ocupaba ~307px, más que
los 225px de padding-top de , así que tapaba el principio del
contenido. Y el logo de 140px era desproporcionado en pantallas
pequeñas. Pasa a sticky con altura automática: sigue visible al bajar
pero ocupa solo lo que necesita.
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
.site-header {
position: sticky;
top: 0;
left: auto;
right: auto;
width: 100%;
height: auto;
}
.header-inner {
height: auto;
}
main {
padding-top: 24px;
}
/* Ninguna caja debe provocar barra horizontal */
html,
body {
overflow-x: hidden;
}
}
/* ---------------------------------------------------------------------
TABLET (769px – 1024px)
El menú sigue siendo horizontal, pero con menos aire para que quepan
los seis elementos sin romper a dos líneas.
--------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
padding: 0 24px;
}
.logo {
height: 84px;
}
.nav {
gap: 14px;
margin-left: 0;
justify-content: flex-end;
}
.nav a,
.subnavbtn {
padding: 8px 6px;
font-size: 15px;
}
.header-inner {
grid-template-columns: auto 1fr;
align-items: center;
}
.hero {
padding: 40px 0 40px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.hero-copy h1 {
font-size: 2.1rem;
}
/* 5rem de padding dejaba las tarjetas muy estrechas */
.grid-2 {
padding: 2rem;
}
.subnavsub {
padding: 1rem;
gap: 1.2rem;
}
.theme-toggle {
margin-right: 0.5rem;
}
}
/* ---------------------------------------------------------------------
MÓVIL (hasta 768px)
--------------------------------------------------------------------- */
@media (max-width: 768px) {
/* --- cabecera en una sola fila: logo | buscador | hamburguesa ---
Con display:grid de 2 columnas la hamburguesa caía a una segunda
fila debajo del logo, porque .nav es absolute y sale del flujo. */
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 0;
}
.brand {
margin: 0;
min-width: 0;
}
.logo {
height: 52px;
padding: 0;
}
#logo-wrapper a {
margin: 0;
}
main {
padding-top: 12px;
}
/* .site-header tiene backdrop-filter, así que es el contenedor de
referencia de este botón fixed (no la pantalla): "bottom" cuenta
desde su borde inferior, y como en móvil el header mide solo lo que
ocupa su contenido, el botón acaba cayendo en esa franja en vez de
ir a la esquina de la pantalla como parecía en el CSS. En vez de
calcular a ojo una distancia desde abajo, se centra de verdad
respecto a la cabecera con top:50%. */
.theme-toggle {
position: fixed;
top: 50%;
bottom: auto;
right: 40px;
transform: translateY(-50%);
margin: 0;
width: 44px;
height: 44px;
display: flex;
}
/* .theme-toggle:hover pone su propio transform (scale) y sin más
borraría el translateY(-50%) que lo centra, haciendo que salte de
sitio al tocarlo. */
.theme-toggle:hover {
transform: translateY(-50%) scale(1.05);
}
/* --- EL MENÚ ---
Este es el arreglo de "no se ven todas las secciones del blog":
al desplegar las categorías el menú crecía más que la pantalla y,
al estar en position:absolute, no había manera de llegar a lo que
quedaba por debajo. Ahora tiene altura máxima y scroll propio. */
.nav {
max-height: calc(100vh - 76px);
max-height: calc(100dvh - 76px); /* dvh descuenta la barra del navegador móvil */
overflow-y: auto;
overscroll-behavior: contain; /* el scroll del menú no arrastra la página */
-webkit-overflow-scrolling: touch;
padding: 6px 8px 14px;
gap: 0;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
border-radius: 0 0 12px 12px;
}
/* --- áreas táctiles ---
Mínimo 44px de alto: por debajo de eso el dedo falla y hay que
ampliar para acertar. Antes eran ~23px. */
.nav a,
.subnavbtn {
display: block;
width: 100%;
text-align: left;
font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
padding: 12px 10px;
min-height: 44px;
line-height: 1.35;
border-radius: 8px;
}
.subnav-cont a,
.subnavsub > li > a,
.subnavsub-cont a {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px;
font-size: 15px;
margin: 0;
}
.subnavsub-cont a {
font-size: 14px;
padding-left: 20px;
}
/* Jerarquía visible al desplegar: una guía a la izquierda deja claro
qué entradas cuelgan de qué categoría. */
.subnav-cont.open,
.subnavsub.open {
border-left: 2px solid var(--azul);
margin-left: 8px;
padding-left: 10px;
}
.subnavsub-cont.open {
border-left: 1px solid rgba(151, 195, 202, 0.5);
margin-left: 10px;
}
/* El mega-menú del blog es una lista normal en móvil, no una rejilla */
.subnavsub {
width: 100%;
max-width: 100%;
padding: 0;
gap: 0;
}
/* --- buscador --- */
.search-container {
flex: 0 0 auto;
}
.search-container button {
width: auto;
}
.search-container.active .search-input {
width: 130px;
}
/* --- contenido --- */
.section {
padding: 36px 0;
}
.hero {
padding: 28px 0 24px;
}
.grid-2 {
padding: 0;
}
.team-card {
padding: 1.2rem;
}
.card {
padding: 20px;
}
.contact-info {
width: 100%;
}
.img-circle {
width: 160px;
margin: 20px auto 12px;
}
.team-photo {
width: 110px;
height: 110px;
}
.project img {
height: 160px;
}
.modal-content {
width: calc(100% - 32px);
padding: 22px;
}
/* Formularios cómodos de rellenar con el pulgar */
.contact-form input,
.contact-form textarea,
.contact-form select,
.row input,
.row select,
.row textarea {
width: 100%;
font-size: 16px;
min-height: 44px;
}
.contact-form textarea,
.row textarea {
min-height: 120px;
}
.btn {
min-height: 44px;
padding: 12px 18px;
}
}
/* ---------------------------------------------------------------------
MÓVIL PEQUEÑO (hasta 480px)
Referencia: iPhone SE (375px) y Galaxy A (360px).
--------------------------------------------------------------------- */
@media (max-width: 480px) {
.container {
padding: 0 14px;
}
.logo {
height: 44px;
}
.hero-copy h1 {
font-size: 1.5rem;
line-height: 1.25;
}
h2 {
font-size: 1.2rem;
}
/* strong estaba a 1.2em: dentro de un h3 ya grande se desbordaba */
strong {
font-size: 1.05em;
}
.nav {
max-height: calc(100vh - 64px);
max-height: calc(100dvh - 64px);
}
/* Botones a ancho completo: más fáciles de acertar */
.hero-cta {
width: 100%;
}
.hero-cta .btn,
.hero-cta .link-btn {
display: block;
width: 100%;
text-align: center;
margin-left: 0;
}
.price-card {
min-width: 0;
width: 100%;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.search-container.active .search-input {
width: 104px;
}
.img-circle {
width: 130px;
}
.project img {
height: 140px;
}
.card,
.info-card {
padding: 16px;
}
}
/* ---------------------------------------------------------------------
ACCESIBILIDAD (todos los tamaños)
--------------------------------------------------------------------- */
/* Foco visible al navegar con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--bgw);
outline-offset: 2px;
border-radius: 6px;
}
/* Respeta a quien pide menos movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* =====================================================================
MODO OSCURO
---------------------------------------------------------------------
La clase se pone en desde un guion en línea del , para que
el tema ya esté aplicado en el primer pintado y no haya destello blanco.
Los selectores usan .dark-mode como ANCESTRO, así funcionan tanto si la
clase está en como en .
===================================================================== */
html.dark-mode,
body.dark-mode {
--bg: #0f0f14;
--bg-soft: #15151c;
--text: #e2edf3;
--muted: #b9b9c3;
--card: #17171f;
--border: rgba(255, 255, 255, 0.12);
--header-bg: rgba(15, 15, 20, 0.9);
--shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
/* --bgw es el color de todos los encabezados. En claro es un verde
azulado oscuro; en oscuro tiene que ser claro o los títulos
desaparecen sobre el fondo. Cambiándolo aquí se arreglan de una vez
h2, h3, h5, h6, h4.pull-quote, h4.closing-statement y .card h3. */
--bgw: #a9dae3;
}
html.dark-mode {
color-scheme: dark; /* barras de scroll y controles nativos en oscuro */
}
/* --- superficies que estaban fijadas a blanco --- */
.dark-mode .site-header {
background: var(--header-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.dark-mode .nav,
.dark-mode .subnav-cont,
.dark-mode .subnavsub {
background: var(--card);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.dark-mode .hero-card {
background: var(--card);
color: var(--text);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* .card usaba var(--bg), que en oscuro es el mismo color que la página:
las tarjetas se volvían invisibles. */
.dark-mode .card {
background: var(--card);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.dark-mode .site-footer {
border-top: 1px solid var(--border);
}
/* --- textos con color fijo --- */
.dark-mode .lead_center {
color: var(--text); /* estaba en negro sobre fondo oscuro */
}
/* El degradado del h2 es un teal claro pensado para fondo blanco; con el
título ya en claro haría falta contraste al revés. */
.dark-mode h2 {
background-image: linear-gradient(to left, rgba(15, 15, 20, 0), rgba(50, 82, 87, 0.9));
}
/* --- hero: el degradado de marca a plena luz resulta deslumbrante
sobre una página oscura, así que se apaga sin perder el tono --- */
.dark-mode .hero {
background: linear-gradient(90deg, #2c4c52, #1d3a41);
}
.dark-mode .btn {
background: var(--cian);
color: #10262b;
}
.dark-mode .btn:hover {
background: var(--azul);
color: #10262b;
}
/* --- formularios y buscador --- */
.dark-mode .search-btn {
color: var(--text);
}
.dark-mode .search-input {
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
}
.dark-mode .contact-form input,
.dark-mode .contact-form textarea,
.dark-mode .contact-form select,
.dark-mode .row input,
.dark-mode .row select,
.dark-mode .row textarea {
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
}
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
color: var(--muted);
}
/* --- botón de tema: la sombra blanca lo dejaba con un halo --- */
.dark-mode .theme-toggle {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
/* --- enlaces del menú sobre el desplegable oscuro --- */
.dark-mode .nav a,
.dark-mode .subnavbtn,
.dark-mode .subnav-cont a,
.dark-mode .subnavsub > li > a,
.dark-mode .subnavsub-cont a {
color: var(--text);
}
.dark-mode .nav a:hover,
.dark-mode .subnavbtn:hover {
background: rgba(169, 218, 227, 0.12);
color: var(--cian);
}
.dark-mode .nav a.cta {
color: #10262b;
}
/* --- transición suave al cambiar de tema, salvo si se pide lo contrario --- */
@media (prefers-reduced-motion: no-preference) {
body,
.site-header,
.card,
.nav,
.subnav-cont,
.subnavsub,
.hero-card {
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
}
/* =====================================================================
BUSCADOR — corrección de accesibilidad
El campo plegado se ocultaba solo con width:0 y opacity:0. Eso lo deja
invisible pero SIGUE en el orden de tabulación y los lectores de
pantalla lo anuncian: quien navega con teclado caía en un campo que no
veía. Con visibility:hidden sale del recorrido, y vuelve al desplegarlo.
===================================================================== */
.search-input {
visibility: hidden;
}
.search-container.active .search-input {
visibility: visible;
}
/* =====================================================================
RESULTADOS DE BÚSQUEDA
El panel lo crea main.js dentro de .search-container, así no hay que
añadir marcado a las veinte páginas.
===================================================================== */
.search-results {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
max-width: calc(100vw - 32px);
max-height: min(60vh, 420px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
z-index: 3500;
padding: 6px;
}
.search-results[hidden] {
display: none;
}
.search-result {
display: block;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.search-result:last-child {
border-bottom: 0;
}
/* .marcado lo pone el teclado (flechas arriba/abajo) */
.search-result:hover,
.search-result:focus,
.search-result.marcado {
background: rgba(151, 195, 202, 0.18);
outline: none;
}
.search-result-seccion {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--azul);
margin-bottom: 2px;
}
.search-result-titulo {
display: block;
font-weight: 600;
font-size: 14px;
line-height: 1.3;
color: var(--text);
}
.search-result-desc {
display: block;
font-size: 12.5px;
line-height: 1.4;
color: var(--muted);
margin-top: 3px;
}
.search-empty {
margin: 0;
padding: 14px 12px;
font-size: 13.5px;
color: var(--muted);
}
/* Modo oscuro */
.dark-mode .search-results {
background: var(--card);
border-color: var(--border);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}
.dark-mode .search-result {
border-bottom-color: var(--border);
}
.dark-mode .search-result:hover,
.dark-mode .search-result:focus,
.dark-mode .search-result.marcado {
background: rgba(169, 218, 227, 0.14);
}
.dark-mode .search-result-seccion {
color: var(--cian);
}
/* En móvil, si se ancla a la derecha del buscador (que no está pegado al
borde de la pantalla, porque la hamburguesa va después) el panel puede
crecer hacia la izquierda y salirse por el borde. Se centra respecto a
la pantalla en su lugar, con position:fixed. */
@media (max-width: 768px) {
.search-results {
position: fixed;
top: 76px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: min(92vw, 320px);
max-width: none;
max-height: 60vh;
max-height: 60dvh;
}
.search-result {
padding: 12px;
min-height: 44px; /* área táctil cómoda */
}
.search-result-titulo {
font-size: 15px;
}
}
/* =====================================================================
CONTACTO DIRECTO
---------------------------------------------------------------------
Sustituye al formulario, retirado el 23 de agosto: recogía nombre,
correo, teléfono y mensaje sin información de tratamiento ni casilla
de consentimiento, y los textos legales aún no se pueden escribir.
Escribiendo por WhatsApp o por correo la persona usa su propia
aplicación y sabe perfectamente a quién le está escribiendo, así que
la web deja de recoger datos.
Los botones son de ancho completo en móvil: son la única vía de
contacto que queda, conviene que no se fallen con el dedo.
===================================================================== */
.contacto-directo {
flex: 1;
min-width: 260px;
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.contacto-directo .btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--azul);
color: #fff;
border: none;
}
.contacto-directo .btn:hover {
background: var(--cian);
color: #10262b;
}
@media (max-width: 768px) {
.contacto-directo .btn {
width: 100%;
}
}
/* =====================================================================
AVISO DE COOKIES
---------------------------------------------------------------------
Lo construye main.js y aparece solo si no hay una decisión guardada.
Va abajo y a lo ancho en móvil, y como tarjeta a la izquierda en
pantallas grandes: así no tapa el contenido ni el botón de tema.
Los dos botones comparten estilo a propósito — destacar "Aceptar"
sobre "Rechazar" es el patrón que la AEPD considera inválido.
===================================================================== */
.aviso-cookies {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 3600;
max-width: 460px;
padding: 18px 20px;
background: var(--bg);
color: var(--text);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.aviso-cookies[hidden] {
display: none;
}
.aviso-cookies:focus {
outline: 3px solid var(--bgw);
outline-offset: 3px;
}
.aviso-cookies-titulo {
margin: 0 0 6px;
font-weight: 700;
font-size: 1rem;
color: var(--text);
}
.aviso-cookies-texto {
margin: 0 0 14px;
font-size: 0.88rem;
line-height: 1.5;
color: var(--muted);
}
.aviso-cookies-botones {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.aviso-cookies-botones .btn {
flex: 1 1 auto;
min-width: 120px;
min-height: 44px;
text-align: center;
background: var(--azul);
color: #fff;
cursor: pointer;
border: none;
}
.aviso-cookies-botones .btn:hover {
background: var(--cian);
color: #10262b;
}
.dark-mode .aviso-cookies {
background: var(--card);
border-color: var(--border);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}
/* Botón del pie para volver a decidir. Es un