/*
Theme Name: CESGA
Text Domain: cesga
Version: 1.0.0
*/

* {
    box-sizing: border-box;
}

/* Ajustes globales del documento y comportamiento base del scroll. */
html {
    scroll-behavior: smooth;
}

/* Base tipografica y fondo neutro compartidos por toda la web. */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #13212c;
    background: #f7f3ea;
}

/* Los enlaces heredan color para integrarse en cada bloque visual. */
a {
    color: inherit;
    text-decoration: none;
}

/* Header principal con video de fondo y comportamiento fijo. */
.site-header {
    position: relative;
    z-index: 1;
    min-height: min(56.25vw, 72vh);
    background: #13212c;
    border-bottom: 1px solid #fffaf12e;
    box-shadow: 0 10px 30px #13212c14;
    overflow: clip;
    transition: box-shadow 0.56s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.56s cubic-bezier(0.19, 1, 0.22, 1);
}

.site-header__media,
.site-header__overlay {
    position: absolute;
    inset: 0;
}

/* Contenedor base del video que llena todo el header. */
.site-header__media {
    z-index: 0;
}

/* Video escalado para cubrir el area visible del header. */
.site-header__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Degradado de contraste sobre el video de fondo. */
.site-header__overlay {
    z-index: 1;
    background: linear-gradient(180deg, #FFFFFFE0 0%, #13212c1a 100%);
}

/* Barra fija con logo y menu hamburguesa. */
.site-header__inner {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    top: 40px;
    left: 50%;
    width: min(1200px, 100%);
    margin: 0;
    min-height: auto;
    padding: 0 20px;
    transform: translateX(-50%);
    transition: top 0.56s cubic-bezier(0.19, 1, 0.22, 1), padding 0.56s cubic-bezier(0.19, 1, 0.22, 1);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Tamaño y tratamiento visual del logo en estado normal. */
.site-logo__image {
    display: block;
    width: 170px;
    height: 125.23px;
    object-fit: contain;
    transform-origin: left bottom;
    filter: brightness(1.08) contrast(1.18) drop-shadow(0 14px 30px #00000057);
    transition: width 0.56s cubic-bezier(0.19, 1, 0.22, 1), transform 0.56s cubic-bezier(0.19, 1, 0.22, 1), filter 0.56s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Titular central del header, situado entre el logo y el menu. */
.site-header__title {
    position: absolute;
    z-index: 2;
    top: 250px;
    left: 50%;
    width: min(800px, calc(100% - 40px));
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    color: #94024b;
    text-align: left;
    transform: translateX(-50%);
}

/* Primera linea del titular con el mensaje principal de servicios. */
.site-header__title-line {
    display: block;
    font-size: clamp(50px, 2.625vw, 20px);
    font-weight: 100;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Segunda linea explicativa con el posicionamiento historico del despacho. */
.site-header__title-subline {
    display: block;
    max-width: 760px;
    font-size: clamp(30px, 1.3125vw, 20px);
    font-weight: 50;
    line-height: 1;
    letter-spacing: 0.15px;
}

.nav-toggle {
    display: none;
}

/* Boton hamburguesa y estado compacto del header. */
.nav-toggle-button {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4.8px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: #00000000;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.56s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Variante reducida del header una vez superado el primer scroll. */
.site-header.site-header--compact {
    box-shadow: 0 8px 20px #13212c1f;
}

.site-header.site-header--compact .site-header__inner {
    top: 32px;
}

.site-header.site-header--compact .site-logo__image {
    width: 85px;
    height: 62.61px;
    transform: translateY(1px) scale(0.92);
    filter: brightness(1.08) contrast(1.18) drop-shadow(0 8px 18px #0000004d);
}

/* Ajusta el bloque tipografico cuando el header se compacta al hacer scroll. */
.site-header.site-header--compact .nav-toggle-button {
    transform: scale(0.82);
}

/* Barras que componen el icono hamburguesa. */
.nav-toggle-button span {
    display: block;
    width: 28px;
    height: 3px;
    margin: 0 auto;
    background: #94024b;
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Panel desplegable del menu principal. */
.main-nav {
    position: absolute;
    top: 100%;
    right: 20px;
    width: min(320px, calc(100vw - 40px));
    padding: 8px 16px 16px;
    margin-top: 8px;
    background: #13212cdb;
    border: 1px solid #fffaf133;
    border-radius: 16px;
    box-shadow: 0 18px 45px #13212c1f;
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Lista base del menu desplegable. */
.main-nav__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
}

/* Estilo base de los enlaces del menu. */
.main-nav__list a {
    display: block;
    padding: 10.4px 0;
    font-weight: 600;
    color: #fffaf1;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
}

/* Estados interactivos de hover y foco del menu. */
.main-nav__link:hover,
.main-nav__link:focus-visible {
    color: #94024b;
    background: #fffaf1e0;
    padding-left: 14.4px;
    padding-right: 14.4px;
    outline: none;
}

/* Estado activo de la seccion visible en el menu. */
.main-nav__link.is-active {
    color: #94024b;
    background: #fffaf1e0;
    padding-left: 14.4px;
    padding-right: 14.4px;
}

/* Transformaciones del icono hamburguesa cuando el menu esta abierto. */
.nav-toggle:checked + .nav-toggle-button span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-button span:nth-child(2) {
    opacity: 0;
}

.nav-toggle:checked + .nav-toggle-button span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Apertura visual del panel del menu. */
.nav-toggle:checked ~ .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Estructura general de la landing y titulos de seccion. */
.site-main {
    min-height: 100vh;
}

/* Titulos principales de cada bloque de contenido. */
.section-title {
    margin: 0 0 16px;
    font-size: clamp(24.32px, 3.19vw, 40.16px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.64px;
    text-transform: none;
    color: #94024b;
}

.content-section {
    padding: 80px 20px;
}

/* Alternancia de fondo entre bloques para dar ritmo a la landing. */
.content-section:nth-of-type(even) {
    background: #fffaf1;
}

.content-section--accent {
    background: #fffaf1;
}

.content-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Variante a dos columnas para secciones con texto + apoyo visual. */
.content-section__inner--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Evita desbordes cuando una columna lleva imagenes o embeds anchos. */
.content-section__primary,
.content-section__secondary {
    min-width: 0;
}

/* Tipografia base de textos descriptivos e introductorios. */
.content-section__primary p,
.content-section__secondary p,
.section-intro {
    color: #969696;
    font-weight: 550;
    line-height: 1.76;
    letter-spacing: 0.18px;
}

/* Ajuste especifico del bloque de contacto para separar titulo e introduccion. */
#contacto .content-section__primary > .section-title {
    margin-bottom: 40px;
}

/* Lista de datos de contacto en la landing. */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 11.2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada linea combina icono y texto en una sola fila. */
.contact-details__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.76;
}

/* Espacio extra entre lineas de contacto para separarlas mejor. */
.contact-details__item + .contact-details__item {
    margin-top: 5px;
}

/* Separacion entre el texto introductorio y la lista de contacto. */
#contacto .content-section__primary > p {
    margin-top: 0;
    margin-bottom: 40px;
}

/* Color compartido entre iconos y textos del bloque de contacto. */
.contact-details__icon,
.contact-details__text {
    color: #969696;
}

/* Ajuste fino del icono para alinearlo con la primera linea del texto. */
.contact-details__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    font-size: 16px;
    align-self: flex-start;
    margin-top: 6px;
    line-height: 1;
}

/* Estilo tipografico de cada dato de contacto. */
.contact-details__text {
    display: inline-block;
    font-weight: 550;
    letter-spacing: 0.18px;
}

/* Contenedor visual del mapa embebido. */
#contacto .content-section__secondary {
    min-height: 545px;
}

/* Caja exterior del mapa para igualar el lenguaje visual de la landing. */
.contact-map {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 545px;
    overflow: hidden;
    background: #ffffffa8;
}

/* Iframe ligeramente reducido dentro de su caja para dejar aire visual alrededor. */
.contact-map__frame {
    display: block;
    width: 95%;
    height: 95%;
    border: 0;
}

/* Boton flotante para volver al inicio sin depender del menu. */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid #94024b;
    border-radius: 999px;
    background: #fffaf1e8;
    color: #94024b;
    box-shadow: 0 8px 18px #13212c24;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Activa el boton una vez el usuario ya ha avanzado en la landing. */
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Ajusta el icono para que quede centrado en un boton muy compacto. */
.back-to-top i {
    font-size: 11px;
    line-height: 1;
}

/* Refuerzo visual en hover y foco para mantener coherencia con el tema. */
.back-to-top:hover,
.back-to-top:focus-visible {
    background: #94024b;
    color: #fffaf1;
    outline: none;
}

/* Imagen de apoyo de la seccion Quienes somos. */
.content-section__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Rejilla y tarjetas de la seccion Servicios. */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    /* Separa visualmente la intro de servicios de la rejilla de tarjetas. */
    margin-top: 90px;
}

/* Tarjeta base de servicio con imagen superior y texto inferior. */
.service-card {
    position: relative;
    z-index: 0;
    display: grid;
    /* Reparte la tarjeta entre zona visual y zona descriptiva. */
    grid-template-rows: 45% 55%;
    height: 400px;
    min-height: 400px;
    padding: 24px;
    border: 0;
    border-radius: 18px;
    background: #ffffffa8;
    transform-origin: center bottom;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

/* Segunda capa inferior centrada, 5px mayor por cada lado que la tarjeta principal. */
.service-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    z-index: -1;
    border: 2px solid #9f1b5d;
    border-radius: 23px;
    background: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease, border-width 0.24s ease;
    transform: translate(-50%, -50%);
}

/* La tarjeta se eleva ligeramente para reforzar el efecto de profundidad. */
.service-card:hover,
.service-card:focus-within {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 14px 22px #13212c12;
}

/* Activa la capa inferior para dar el efecto de tarjeta levantada. */
.service-card:hover::after,
.service-card:focus-within::after {
    border-width: 7px;
    opacity: 1;
}

/* Cabecera visual de cada tarjeta, usada para alojar la imagen y el titulo. */
.service-card__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 0;
    margin: -24px -24px 20px;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    overflow: hidden;
}

/* Imagen de servicio suavizada para mejorar la lectura del titulo superpuesto. */
.service-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

/* Titulo superpuesto sobre cada imagen de servicio. */
.service-card__media-title {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Reserva un pequeño margen interno para que el titulo no toque bordes. */
    width: calc(100% - 32px);
    margin: 0;
    color: #94024b;
    font-size: clamp(17.6px, 2vw, 24.8px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.4px;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Texto descriptivo de cada tarjeta de servicio. */
.service-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 13.6px;
    min-height: 0;
}

/* Copy explicativo de cada servicio. */
.service-card__text {
    margin: 0;
    width: 100%;
    color: #969696;
    font-weight: 550;
    line-height: 1.76;
    letter-spacing: 0.18px;
}

/* Footer global del sitio y sus bloques informativos. */
.site-footer {
    margin-top: auto;
    background: #c63a79;
    color: #bcbcbc;
}

/* Contenedor general y respiracion interior del footer. */
.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Franja superior en tres bloques: contacto, logo y mensaje corporativo. */
.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ffffff;
}

.site-footer__top-column {
    min-height: 1px;
}

/* Titulos de cada columna superior del footer. */
.site-footer__top-title {
    margin: 0 0 13.6px;
    font-size: 16px;
    font-weight: 700;
    color: #850244;
}

/* Texto resumido de la columna corporativa derecha. */
.site-footer__top-text {
    margin: 0;
    max-width: 352px;
    line-height: 1.6;
    color: #bcbcbc;
}

/* Lista de contacto especifica del footer. */
.site-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 11.2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Fila individual con icono y dato dentro del footer. */
.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

/* Estilo visual comun para los iconos de contacto del footer. */
.site-footer__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    color: #bcbcbc;
    font-size: 16px;
}

/* Texto asociado a cada dato de contacto del footer. */
.site-footer__contact-text {
    display: inline-block;
    color: #bcbcbc;
}

/* Centrado del bloque del logo en la columna central. */
.site-footer__top-column--center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.site-footer__top-column--right {
    text-align: left;
}

/* Enlace y dimension del logo mostrado en el footer. */
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-footer__logo-image {
    display: block;
    width: 170px;
    height: 125.23px;
    object-fit: contain;
}

/* Bloque inferior de copyright separado del resto del footer. */
.site-footer__copyright {
    margin: 0 0 16px;
    padding-bottom: 16px;
    color: #bcbcbc;
    border-bottom: 1px solid #ffffff;
    text-align: center;
    font-size: 15.2px;
}

/* Lista de enlaces legales en movil, apilada por defecto. */
.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Enlaces legales con transicion suave de estado. */
.site-footer__list a {
    display: inline-block;
    color: #bcbcbc;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Estados interactivos de los enlaces legales. */
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
    color: #bcbcbc;
    opacity: 1;
    outline: none;
}

/* Envoltura general de las paginas legales con aire superior para convivir con el header. */
.legal-page {
    padding: 176px 20px 112px;
    background: #fffaf1;
}

/* Columna centrada de lectura similar a una pagina documental corporativa. */
.legal-page__shell {
    max-width: 1040px;
    margin: 0 auto;
}

/* Enlace de vuelta ligero, alineado arriba y con icono corporativo. */
.legal-page__back {
    margin-bottom: 32px;
}

.legal-page__back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: #94024b;
}

/* Titulo principal amplio y con un ancho comodo para no romper la lectura. */
.legal-page__title {
    max-width: 800px;
    margin: 0 0 36px;
    color: #94024b;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

/* Bloque introductorio algo mas corto para abrir la pagina antes del cuerpo legal. */
.legal-page__lead {
    max-width: 920px;
    margin: 0 0 48px;
}

/* Cuerpo principal de lectura con un ritmo vertical uniforme entre piezas consecutivas. */
.legal-page__body > * + * {
    margin-top: 24px;
}

/* Titulares principales y secundarios en paginas legales con el color corporativo del menu. */
.legal-page h1,
.legal-page h2 {
    color: #94024b;
}

/* Jerarquia visual de subtitulos para que cada apartado se lea como bloque independiente. */
.legal-page h2 {
    margin-bottom: 16px;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

/* Cada nuevo apartado gana un salto extra respecto al texto anterior para marcar seccion. */
.legal-page__body > h2 {
    margin-top: 48px;
}

.legal-page__body > h2:first-child {
    margin-top: 0;
}

/* El bloque descriptivo que sigue al h2 arranca pegado al titulo del apartado. */
.legal-page__body > h2 + div {
    margin-top: 0;
}

/* El resto del contenido legal comparte el gris usado en la landing y una lectura relajada. */
.legal-page p,
.legal-page li,
.legal-page a,
.legal-page th,
.legal-page td {
    color: #969696;
    font-size: 17px;
    line-height: 1.8;
}

/* Listas legales con una sangria suave y espaciado suficiente entre items. */
.legal-page ul,
.legal-page ol {
    margin: 20px 0 0;
    padding-left: 24px;
}

.legal-page li + li {
    margin-top: 10px;
}

/* Retroalimentacion sutil del enlace de vuelta sin romper el tono sobrio de la pagina. */
.legal-page__back-link:hover,
.legal-page__back-link:focus-visible {
    color: #7e013f;
    outline: none;
}

/* Enlaces de ayuda del navegador en cookies con el mismo tono corporativo de los titulares. */
.legal-page .cookies-more-link,
.legal-page .cookies-more-link:visited {
    color: #94024b;
    font-size: 22px;
    font-weight: 700;
}

.legal-page .cookies-more-link:hover,
.legal-page .cookies-more-link:focus-visible {
    color: #94024b;
    outline: none;
}

/* Tablas especificas de cookies con rejilla fina y cabecera destacada. */
.cookies-policy-table {
    width: 100%;
    margin-top: 28px;
    border-collapse: collapse;
}

/* Cabecera en negrita para identificar claramente cada columna. */
.cookies-policy-table th {
    font-weight: 700;
    color: #94024b;
    background: #ffffff;
}

/* Lineas grises finas para separar visualmente todas las celdas. */
.cookies-policy-table th,
.cookies-policy-table td {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    border: 0.5px solid #808080;
}

/* Ajustes responsive para escritorio. */
@media (min-width: 768px) {
    /* Reparto base de texto e imagen en las secciones a dos columnas. */
    .content-section__inner--split {
        grid-template-columns: 55% 40%;
        column-gap: 5%;
        /* Mantiene ambas columnas arrancando desde la misma parte superior. */
        align-items: start;
    }

    /* Variante propia de la seccion Contacto: datos a la izquierda y mapa a la derecha. */
    #contacto .content-section__inner--split {
        grid-template-columns: 40% 50%;
        column-gap: 10%;
        /* Permite que el mapa estire su altura dentro de la fila. */
        align-items: stretch;
    }

    /* Rejilla de servicios en dos columnas centradas con separacion vertical amplia. */
    .services-grid {
        grid-template-columns: 40% 40%;
        column-gap: 10%;
        row-gap: 56px;
        /* Fija una altura uniforme para que todas las tarjetas respiren igual. */
        grid-auto-rows: 400px;
        justify-content: center;
        align-items: stretch;
    }

    /* Reparto en tres columnas del bloque superior del footer. */
    .site-footer__top {
        grid-template-columns: 30% 30% 30%;
        justify-content: space-between;
        align-items: start;
    }

    /* Ajuste fino de alineacion de cada columna del footer. */
    .site-footer__top-column--left {
        justify-self: start;
    }

    .site-footer__top-column--center {
        justify-self: center;
        align-self: start;
    }

    /* Mantiene la tercera columna pegada al lado derecho del conjunto. */
    .site-footer__top-column--right {
        justify-self: end;
    }

    /* Enlaces legales en una sola fila cuando hay ancho suficiente. */
    .site-footer__list {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 32px;
    }
}