/* Servicios de la portada (Gus, 15-10-2026): cuatro tarjetas a color con íconos de línea en un círculo */
.servicio-card { border-radius: 18px; padding: 44px 30px 36px; color: #fff; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 12px 30px rgba(10, 30, 60, .15); transition: transform .2s ease, box-shadow .2s ease; }
.servicio-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10, 30, 60, .22); }
.servicio-icono { width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .45); display: flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 20px; }
.servicio-card h3 { color: #fff !important; font-weight: 700; font-size: 1.6rem; line-height: 1.25 !important; text-transform: none; margin-bottom: 12px; }
.servicio-card p { color: rgba(255, 255, 255, .92); font-size: 1rem; margin-bottom: 22px; }
.servicio-card a { color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 7px 20px; font-weight: 600; text-decoration: none; margin-top: auto; }
.servicio-card a:hover { background: rgba(255, 255, 255, .15); }

/* Áreas de investigación (Gus, 15-10-2026): 8 cajones por unidad, título + una línea; al tocar, 4 temas */
.areas-seccion { background: #f4f7fb; }
.areas-pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.areas-pestana { border: 2px solid #1479d6; background: #fff; color: #1479d6; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .15s; }
.areas-pestana[data-panel="areas-social"] { border-color: #7b3fb8; color: #7b3fb8; }
.areas-pestana.activa { background: #1479d6; color: #fff; }
.areas-pestana[data-panel="areas-social"].activa { background: #7b3fb8; color: #fff; }
.area-card { background: #fff; border-radius: 16px; padding: 22px 22px 18px; height: 100%; box-shadow: 0 6px 20px rgba(10, 30, 60, .08); border-top: 5px solid #1479d6; }
.area-card.area-b { border-top-color: #7b3fb8; }
.area-card summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; }
.area-card summary::-webkit-details-marker { display: none; }
.area-num { font-size: .95rem; font-weight: 700; color: #9aa8b8; }
.area-titulo { display: block; font-size: 1.2rem; font-weight: 800; color: #1d2a3a; line-height: 1.25; margin: 4px 0 6px; }
h4.area-titulo { margin-top: 4px; }
.area-linea { display: block; color: #5b6b7f; font-size: .95rem; line-height: 1.4; margin-bottom: 10px; }
.area-mas { margin-top: auto; font-size: .85rem; font-weight: 700; color: #1479d6; }
.area-b .area-mas { color: #7b3fb8; }
.area-card[open] .area-mas i { transform: rotate(45deg); }
.area-mas i { transition: transform .15s; margin-left: 4px; }
.area-card ul { margin: 6px 0 0; padding-left: 18px; color: #33424f; font-size: .95rem; line-height: 1.55; }
.area-card.abierta ul { margin-top: 2px; }
/* Analítica y herramientas */
.metodo-item { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 18px; height: 100%; box-shadow: 0 4px 16px rgba(10, 30, 60, .07); }
.metodo-item i { font-size: 26px; color: #1479d6; width: 32px; flex-shrink: 0; margin-top: 2px; }
.metodo-item strong { display: block; color: #1d2a3a; font-size: 1.05rem; margin-bottom: 2px; }
.metodo-item span { color: #5b6b7f; font-size: .95rem; line-height: 1.45; }

/* Portada (Gus, 15-10-2026): azul marino; título separado; R+S+I grande dentro del cerebro; lema abajo en dorado */
.hero-portada { position: relative; }
.hero-titulo { font-size: clamp(3.2rem, 7.5vw, 6.5rem) !important; font-weight: 300; line-height: 1.15 !important; letter-spacing: -1px; margin-bottom: 28px !important; }
.hero-rsi { font-size: clamp(1.25rem, 2.6vw, 2.1rem) !important; font-weight: 300; letter-spacing: .5px; margin: 0; }
.hero-lema { position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; margin: 0; padding: 0 16px; color: #f5c13b; font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: .3px; }
/* Mapa de contacto */
.mapa-contacto { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(10, 30, 60, .12); background: #fff; }
.mapa-contacto iframe { display: block; width: 100%; height: 420px; border: 0; }
.mapa-contacto a { display: block; padding: 10px 14px; font-weight: 600; font-size: .95rem; text-decoration: none; }
/* Páginas internas: banda finita del color de su servicio */
.page-header.banda-servicio { margin: 0 !important; padding: 26px 0 22px !important; min-height: 0 !important; border: 0 !important; }
.banda-servicio h1 { color: #fff !important; font-size: clamp(1.5rem, 3vw, 2.2rem) !important; margin: 0 0 4px !important; line-height: 1.2 !important; }
.banda-servicio .breadcrumb { margin: 0 !important; }
.banda-servicio .breadcrumb a, .banda-servicio .breadcrumb i { color: rgba(255, 255, 255, .9) !important; }

/* Marca: poliedro rojo + «brain cognitio» en Quicksand 500 (16-10-2026) */
.hero-marca { display: grid; grid-template-columns: auto auto; column-gap: .24em; align-items: center; justify-content: center; margin-bottom: 30px; font-size: clamp(3.2rem, 7.5vw, 6.5rem); }
.hero-marca-c { grid-column: 1; grid-row: 1; height: 1.3em; width: auto; }
.hero-marca .hero-titulo { grid-column: 2; grid-row: 1; justify-self: center; font-size: 1em !important; font-family: 'Quicksand', 'Poppins', sans-serif; font-weight: 450; text-transform: lowercase; color: #fff !important; letter-spacing: 0; margin: 0 !important; line-height: 1 !important; white-space: nowrap; }
/* el lema va centrado debajo del NOMBRE, no de todo el bloque */
.hero-marca .hero-rsi { grid-column: 2; grid-row: 2; justify-self: center; margin-top: 26px !important; white-space: nowrap; }
@media (max-width: 575px) { .hero-marca { font-size: 2.6rem; } .hero-marca .hero-rsi { grid-column: 1 / -1; font-size: 1.15rem !important; } }
.hero-rsi .mas { color: #e5483d; }
/* Páginas internas: marca chica (poliedro + nombre) que vuelve al inicio */
.marca-chica { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.marca-chica img { height: 34px; width: auto; }
.marca-chica span { font-family: 'Quicksand', 'Poppins', sans-serif; font-weight: 450; text-transform: lowercase; font-size: 1.45rem; color: #fff; white-space: nowrap; }
/* Cabecera en el mismo azul oscuro de la portada (antes gris) */
#header .header-body.bg-dark { background-color: #0a1730 !important; }
html:not(.sticky-header-active) #header.header-semi-transparent-dark .header-body.bg-dark { background-color: rgba(6, 16, 38, .72) !important; }

/* Lema: pegado a la marca, en dos líneas con flecha que baja (16-10-2026) */
.hero-lema { position: static !important; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: clamp(60px, 14vh, 150px) 0 0 !important; padding: 0 !important; color: #f5c13b; font-size: clamp(1.3rem, 2.6vw, 2.05rem) !important; font-weight: 500; letter-spacing: .3px; line-height: 1.25; }
.hero-flecha { display: block; height: 44px; color: #f5c13b; }
.hero-flecha svg { display: block; animation: lema-baja 1.8s ease-in-out infinite; }
@keyframes lema-baja {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translateY(12px); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-flecha svg { animation: none; transform: translateY(6px); } }

/* Pie: letra un 30 % más grande (11,3 px → 14,7 px) */
#footer .footer-copyright p { font-size: 14.7px !important; line-height: 1.7 !important; }

/* Servicios: al tocar «Servicios» en el menú se ve SOLO el título y los cuatro cajones, enteros (16-10-2026) */
#servicios { min-height: calc(100vh - 70px); display: flex; flex-direction: column; justify-content: center; }
#servicios > .row { width: auto; }
.servicios-cabecera { text-align: center; padding: 26px 0 24px; }
.servicios-cabecera h2 { margin: 0 0 2px !important; }
.servicios-cabecera p { margin: 0 !important; }
@media (min-width: 992px) {
  .servicio-card { padding: 36px 30px 30px; }
  .servicio-icono { width: 78px; height: 78px; font-size: 34px; margin-bottom: 16px; }
}
/* pantallas bajas (notebooks chicas): un poco más compactos para que igual entren */
@media (min-width: 992px) and (max-height: 860px) {
  .servicios-cabecera { padding: 14px 0 16px; }
  .servicio-card { padding: 24px 30px 22px; }
  .servicio-icono { width: 62px; height: 62px; font-size: 27px; margin-bottom: 12px; }
  .servicio-card h3 { font-size: 1.45rem; margin-bottom: 8px; }
  .servicio-card p { margin-bottom: 14px; }
}

/* Trayectoria: 27 años (16-10-2026) */
.trayectoria { background: #0a1730; color: #fff; }
.trayectoria .container { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); padding-top: 54px; padding-bottom: 54px; }
.tray-num { font-family: 'Quicksand', 'Poppins', sans-serif; font-weight: 500; font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: .9; color: #e5483d; letter-spacing: -2px; }
.tray-txt { max-width: 640px; }
.tray-txt strong { display: block; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.2; color: #fff; }
.tray-txt span { display: block; margin-top: 8px; font-size: clamp(1rem, 1.5vw, 1.2rem); color: #c9d1e0; line-height: 1.5; }
@media (max-width: 575px) { .trayectoria .container { flex-direction: column; text-align: center; gap: 8px; } }

/* el menú salta con el ancla nativa: que la cabecera fija (70 px) no tape el título de cada sección */
#servicios, #areas, #metodo, #nosotros, #contacto { scroll-margin-top: 70px; }
/* con el menú largo («Áreas de investigación», «Metodologías y analíticas»), en compus angostas el nombre al lado del poliedro chocaba con el menú: queda solo el poliedro */
@media (min-width: 992px) and (max-width: 1239px) { .marca-chica span { display: none; } }