/* ==========================================================================
   Fuentes y Variables CSS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --color-primario: #4A90E2; 
    --color-primario-hover: #62a1e9;
    --color-fondo: #111111;
    --color-superficie: #1d1d1d;
    --color-borde: #2e2e2e;
    --color-texto-principal: #f0f0f0;
    --color-texto-secundario: #a0a0a0;
    
    /* Tipografía */
    --font-principal: 'Poppins', sans-serif;

    /* Transiciones */
    --transicion-rapida: 0.3s ease;
}

/* ==========================================================================
   Reseteo de Estilos y Estilos Globales
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 40rem;
    height: auto;
}

/* ==========================================================================
   Clases reutilizables
   ========================================================================== */
.container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

.section {
    padding: 6rem 0 2rem;
}

.section__title {
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-primario);
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.button {
    display: inline-block;
    background-color: var(--color-primario);
    color: var(--color-fondo);
    padding: 1rem 2rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: var(--transicion-rapida);
    font-family: inherit; /* Hace que <button> use la fuente 'Poppins' */
    border: none;       /* Quita el borde feo por defecto del <button> */
    cursor: pointer;    /* Asegura que ambos se vean clickeables */
}

.button:hover {
    background-color: var(--color-primario-hover);
}

.add__button {
    display: inline-block;
    background-color: rgba(4, 185, 58, 0.719);
    color: var(--color-fondo);
    padding: 1rem 2rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: var(--transicion-rapida);
    font-family: inherit; /* Hace que <button> use la fuente 'Poppins' */
    border: none;       /* Quita el borde feo por defecto del <button> */
    cursor: pointer;    /* Asegura que ambos se vean clickeables */
}

.add__button:hover {
    background-color: rgba(4, 185, 58, 0.9);
}

.edit__button {
    display: inline-block;
    background-color: var(--color-primario);
    color: var(--color-fondo);
    padding: 1rem 2rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: var(--transicion-rapida);
    font-family: inherit; /* Hace que <button> use la fuente 'Poppins' */
    border: none;       /* Quita el borde feo por defecto del <button> */
    cursor: pointer;    /* Asegura que ambos se vean clickeables */
}

.edit__button:hover {
    background-color: var(--color-primario-hover);
}

.delete__button {
    display: inline-block;
    background-color: rgba(255, 0, 0, 0.719);
    color: var(--color-fondo);
    padding: 1rem 2rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: var(--transicion-rapida);
    font-family: inherit; /* Hace que <button> use la fuente 'Poppins' */
    border: none;       /* Quita el borde feo por defecto del <button> */
    cursor: pointer;    /* Asegura que ambos se vean clickeables */
}

.delete__button:hover {
    background-color: rgba(255, 0, 0, 0.9);
}

/* ==========================================================================
   Header / Navegación
   ========================================================================== */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: transparent;
    transition: var(--transicion-rapida);
}

/* --- JS Class para el scroll --- */
.header-scrolled {
    background-color: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(10px);
}

.nav {
    height: 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

/* Botón de menú móvil */
.nav__toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-texto-principal);
}

.nav__toggle i {
    transition: transform 0.3s ease;
}

/* Clase para cuando el menú está abierto */
.nav__toggle.active i {
    transform: rotate(90deg);
}

.nav__logo {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-right: 3rem;
}

.nav__logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* Ajuste del logo para móvil */
@media screen and (max-width: 768px) {
    .nav__logo img {
        width: 70px;
        height: 70px;
    }
}

.admin-text {
    /* Estilo del texto sin posicionamiento absoluto */
    background-color: var(--color-primario);
    color: var(--color-fondo);
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.nav__list {
    display: flex;
    gap: 2rem;
}

.nav__item__rs {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: 1.5rem;
}

.nav__link {
    color: var(--color-texto-principal);
    font-weight: 500;
    transition: var(--transicion-rapida);
    position: relative;
}

.nav__link:hover,
.active-link {
    color: var(--color-primario);
}

.active-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primario);
}

/* ==================== SWITCH TEMA CLARO/OSCURO ==================== */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 3rem;
}

.theme-switch-icon {
    font-size: 2rem;
    color: var(--color-primario);
    padding: 0.5rem;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-borde);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--color-primario);
    transition: .4s;
    border-radius: 50%;
}

/* Ajustes específicos para móvil */
@media screen and (max-width: 768px) {
    .theme-switch-icon {
        font-size: 1.5rem;
    }
    
    .theme-switch {
        width: 36px;
        height: 20px;
    }

    .slider:before {
        height: 12px;
        width: 12px;
        left: 4px;
        bottom: 4px;
    }

    .theme-switch input:checked + .slider:before {
        transform: translateX(5px);
    }
}

.theme-switch input:checked + .slider {
    background-color: var(--color-primario);
}

.theme-switch input:checked + .slider:before {
    transform: translateX(24px);
    background-color: #fff;
}

/* Sobreescribir específicamente para móvil con mayor especificidad */
@media screen and (max-width: 768px) {
    .header .nav .theme-switch input:checked + .slider:before {
        transform: translateX(16px) !important;
    }
}

/* ==================== TEMA CLARO ==================== */
.light-theme {
    --color-fondo: #f5f5f5;
    --color-superficie: #ffffff;
    --color-borde: #e0e0e0;
    --color-texto-principal: #4A90E2;
    --color-texto-secundario: #222;
    --color-primario: #19809cba;
    --color-primario-hover: #62a1e9;
}

/* ==================== AJUSTES RESPONSIVOS PARA LA NAVEGACIÓN EN VISTA MÓVIL ==================== */
@media screen and (max-width: 768px) {    
    .nav {
        padding: 1rem;
    }

    .nav__toggle {
        display: block;
    }

    .nav__list {
        position: fixed;
        top: 4.5rem;
        left: -100%;
        width: 60%;
        height: 100vh;
        padding: 2rem;
        background-color: var(--color-superficie);
        transition: 0.5s ease-in-out;
        flex-direction: column;
        gap: 2rem;
        border-right: 1px solid var(--color-borde);
    }

    .nav__list.active {
        left: 0;
    }

    .nav__logo {
        margin: 0;
    }

    .nav__logo img {
        margin: 0;
    }

    .theme-switch-wrapper {
        margin: 0;
    }

    /* Ajustes para el botón de logout en móvil */
    .nav__logout-button {
        margin: 0;
        font-size: 1.25rem !important;
    }
}

/* ==========================================================================
   Hero section (página principal)
   ========================================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(17,17,17,0.7), rgba(17,17,17,0.7)), url('https://images.unsplash.com/photo-1550745165-9bc0b252726a?q=80&w=2070') no-repeat center center/cover;
}

.hero__container {
    text-align: center;
}

.hero__title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.hero__subtitle {
    font-size: 1.25rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2.5rem;
}

/* ==================== RESUMEN DE SERVICIOS ==================== */
.services__container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service__card {
    background-color: var(--color-superficie);
    padding: 2.5rem 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-borde);
    text-align: center;
    transition: var(--transicion-rapida);
}

.service__card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primario);
}

.service__icon {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}

.service__title {
    font-size: 1.25rem;
    margin-bottom: .75rem;
}

.service__description {
    color: var(--color-texto-secundario);
}

/* ==================== ABOUT SECTION ==================== */
.about__container {
    text-align: center;
    max-width: 800px;
}
.about__description {
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
    line-height: 1.7;
    text-align: justify;
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE SERVICIOS (servicios.html)
   ========================================================================== */

/* ==================== CABECERA DE PÁGINA ==================== */
.page-header {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(17,17,17,0.8), rgba(17,17,17,0.8)), url('/images/redes_2.jpg') no-repeat center center/cover;
}

.page-header__title {
    font-size: 3rem;
    color: var(--color-primario);
}


/* ==================== DETALLE DE SERVICIOS ==================== */
.service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem; /* Espacio entre cada servicio */
}

/* --- Modificador para alternar el orden --- */
.service-detail--reverse {
    grid-template-columns: 1fr 1fr; /* Mantenemos las columnas */
}

.service-detail--reverse .service-detail__image {
    order: 2; /* Cambiamos el orden visual de la imagen */
}

.service-detail__image img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-detail__title {
    font-size: 2rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
    text-align: center;
}

.service-detail__description {
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
    line-height: 1.7;
    text-align: justify;
}

.service-detail__list {
    list-style: none;
    margin-bottom: 2.5rem;
}

.service-detail__list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.service-detail__list .fa-check {
    color: var(--color-primario);
}

.process__container {
    padding-top: 4rem; /* Espacio para separarlo de los servicios de arriba */
    padding-bottom: 6rem;
    border-top: 1px solid var(--color-borde); /* Línea divisoria minimalista */
}

.process__timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 22%; /* Ancho de cada paso */
}

.process__icon-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    background-color: var(--color-superficie);
    border: 2px solid var(--color-borde);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transicion-rapida);
}

.process__step:hover .process__icon-wrapper {
    border-color: var(--color-primario);
}

.process__icon {
    font-size: 2.5rem;
    color: var(--color-primario);
}

.process__number {
    position: absolute;
    top: -15px;
    right: -10px;
    background-color: var(--color-primario);
    color: var(--color-fondo);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: 2px solid var(--color-fondo);
}

.process__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.process__description {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Línea conectora --- */
.process__line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--color-borde);
    align-self: center;
    margin-top: -65px; /* Ajuste para alinear con el centro de los círculos */
}

/* ==================== AJUSTES RESPONSIVOS PARA LA SECCIÓN DE PROCESO ==================== */
@media screen and (max-width: 992px) {
    .process__timeline {
        flex-direction: column; /* Apilamos los pasos verticalmente */
        align-items: center;
        gap: 2rem;
    }

    .process__step {
        width: 80%; /* Ocupan más ancho en móvil */
        max-width: 350px;
    }

    .process__line {
        display: none; /* Ocultamos las líneas horizontales en móvil */
    }
}

/* ==================== AJUSTES RESPONSIVOS PARA PÁGINA DE SERVICIOS ==================== */
@media screen and (max-width: 768px) {
    .page-header__title {
        font-size: 2.5rem;
        text-align: center;
    }

    .service-detail,
    .service-detail--reverse {
        grid-template-columns: 1fr; /* Hacemos que sea una sola columna */
        gap: 2rem;
    }

    .service-detail--reverse .service-detail__image {
        order: 1; /* Restauramos el orden original en móvil */
    }

    .service-detail__title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA "Productos" (productos.ejs)
   ========================================================================== */
.productos__grid {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    justify-content: space-evenly;
}

.productos__card {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    margin-bottom: 2rem;
    /* Quitamos el padding de la tarjeta para que la imagen pueda tocar los bordes */
    padding: 0;
    /* Layout: imagen arriba (full-width) y contenido debajo */
    display: block;
    overflow: hidden; /* Asegura que la imagen redondeada no sobresalga del borde */
    transition: var(--transicion-rapida);
}

.productos__card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primario);
}

.productos__img {
    display: block;
    width: 100%; /* image fills the card width */
    height: auto;
    max-width: 100%;
    object-fit: cover;
    /* Make the image reach the card edges and preserve rounding by inheriting the card's border-radius
       We set border-radius on the image for top corners only so the bottom of the card (content) keeps its own spacing */
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.productos__title {
    font-size: 1.5rem;
    margin-bottom: .75rem;
    color: var(--color-primario);
    text-align: center;
}

.productos__description {
    color: var(--color-texto-secundario);
    text-align: justify;
}

.productos__content {
    padding: 1.5rem 2rem 2rem; /* espacio interno para el texto debajo de la imagen */
}

/* -------------------------------------------------------------------------
     Desktop-specific image and card size
     - This media query applies only to wider screens (desktop).
     - It forces a fixed height for product images so they appear smaller on desktop
         while keeping object-fit: cover to preserve aspect and cropping.
     - To change the desktop image height, edit the "height" value below.
 ------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
    .productos__card {
        /* Constrain the card width on desktop so images don't stretch too wide
           - change max-width to make the card narrower on desktop */
        max-width: 540px; /* <-- adjust this value to set card width on desktop */
        margin-left: auto;
        margin-right: auto;
    }

    .productos__img {
        /* DESKTOP SIZE: change these values to control how the image appears on desktop */
        width: 100%;               /* image still fills the card width */
        max-height: 220px;        /* max visible height (cropped if necessary) */
        height: auto;             /* keep natural height but respect max-height */
        /* If you'd rather force an exact height, replace 'max-height' with 'height' */
    }
}

/* -------------------------------------------------------------------------
   Tablet / Mobile adjustments
   - Ensure images maintain good proportions on small screens
   - Keep cards full-width on mobile and let images scale naturally
 ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .productos__card {
        max-width: 90%; /* Cards take up most of the screen width on mobile */
    }

    .productos__img {
        /* On mobile we let the image size itself but cap the height for consistency */
        width: 100%;
        max-height: 280px; /* mobile max height; change as needed */
        height: auto;
    }
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA ¿QUIÉNES SOMOS? (quienes-somos.html)
   ========================================================================== */

/* ==================== MISIÓN Y VISIÓN ==================== */
.mission-vision__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    text-align: center;
}

.mission-vision__icon {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}

.mission-vision__title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.mission-vision__description {
    color: var(--color-texto-secundario);
    line-height: 1.7;
    max-width: 450px;
    margin: 0 auto; /* Centra el texto si el contenedor es más ancho */
}

/* ==================== VALORES ==================== */
.values {
    background-color: var(--color-superficie);
}

.values__container {
    /* **CAMBIO CLAVE 1: Usar Flexbox para Centrar el Contenido** */
    display: flex; 
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    
    /* Mantenemos el gap para el espacio entre las tarjetas */
    gap: 2rem;
    
    /* Aseguramos que el contenedor no tenga un width excesivo si no lo necesita */
    max-width: 100%; 
}

.values__card {
    text-align: center;
    padding: 2rem;
    
    /* **CAMBIO CLAVE 2: Limitar el Ancho de la Tarjeta** */
    /* Esto asegura que solo haya un máximo de 3 o 4 por fila antes de envolver */
    width: 100%; 
    max-width: 300px; /* Define un ancho máximo fijo para que el flexbox pueda distribuirlas */
}

.values__icon {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.values__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ==================== EQUIPO ==================== */
.team__container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team__card {
    background-color: var(--color-superficie);
    border-radius: 1rem;
    overflow: hidden; /* Oculta lo que se salga de la tarjeta */
    text-align: center;
    transition: var(--transicion-rapida);
    border: 1px solid var(--color-borde);
}

.team__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border-color: var(--color-primario);
}

.team__image-container {
    width: 100%;
    height: 300px; /* Altura fija para todas las imágenes */
}

.team__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
    object-position: center top; /* Centra la imagen en la parte superior */
}

.team__info {
    padding: 1.5rem;
}

.team__name {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.team__role {
    color: var(--color-primario);
    font-weight: 500;
}

/* ==================== AJUSTES RESPONSIVOS PARA ¿QUIÉNES SOMOS? ==================== */
@media screen and (max-width: 768px) {
    .mission-vision__container {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE CONTACTO (contacto.html)
   ========================================================================== */

.contact__container {
    grid-template-columns: 1fr 1.5fr; /* Damos más espacio al formulario */
    gap: 4rem;
    align-items: flex-start; /* Alineamos al inicio */
}

.contact__info-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.contact__info-description {
    color: var(--color-texto-secundario);
    margin-bottom: 2.5rem;
    text-align: justify;
}

.contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact__info-icon {
    font-size: 1.5rem;
    color: var(--color-primario);
    margin-top: 5px;
}

.contact__info-subtitle {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

/* --- Formulario --- */
.contact__form {
    width: 100%;
}

.form__group {
    margin-bottom: 1.5rem;
}

.form__label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-texto-secundario);
    font-weight: 500;
}

.form__input {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: .5rem;
    color: var(--color-texto-principal);
    font-family: var(--font-principal);
    transition: var(--transicion-rapida);
}

.form__input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); /* Sombra sutil azul */
}

textarea.form__input {
    resize: vertical;
    min-height: 120px;
    padding-top: 1rem; /* Espacio adicional para el texto */
}

textarea.form__input::-webkit-scrollbar {
    width: 8px;
}

textarea.form__input::-webkit-scrollbar-thumb {
    background-color: var(--color-borde);
    border-radius: 4px;
}

textarea.form__input::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primario);
}

textarea.form__input::-webkit-scrollbar-track {
    background-color: var(--color-superficie);
    border-radius: 4px;
}

textarea.form__input::-webkit-scrollbar-track:hover {
    background-color: var(--color-borde);
}

textarea::-webkit-resizer {
    background-color: var(--color-borde);
    border-radius: 2px;
}

/* --- Mapa --- */
.contact__map {
    margin-top: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-borde);
}

.contact__map iframe {
    width: 100%;
    height: 450px;
    filter: invert(90%) grayscale(80%); /* Estilo para que el mapa sea oscuro */
}


/* ==================== AJUSTES RESPONSIVOS PARA PÁGINA DE CONTACTO ==================== */
@media screen and (max-width: 992px) {
    .contact__container {
        grid-template-columns: 1fr; /* Una sola columna en tablets y móviles */
        gap: 3rem;
    }
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA "Blog" (blog.ejs)
   ========================================================================== */
.blog__grid {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    justify-content: space-evenly;
}

.blog__card {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    margin-bottom: 2rem;
    /* Quitamos el padding de la tarjeta para que la imagen pueda tocar los bordes */
    padding: 0;
    /* Layout: imagen arriba (full-width) y contenido debajo */
    display: block;
    overflow: hidden; /* Asegura que la imagen redondeada no sobresalga del borde */
    transition: var(--transicion-rapida);
}

.blog__card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primario);
}

.blog__img {
    display: block;
    width: 100%; /* image fills the card width */
    height: auto;
    max-width: 100%;
    object-fit: cover;
    /* Make the image reach the card edges and preserve rounding by inheriting the card's border-radius
       We set border-radius on the image for top corners only so the bottom of the card (content) keeps its own spacing */
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.blog__title {
    font-size: 1.5rem;
    margin-bottom: .75rem;
    color: var(--color-primario);
    text-align: center;
}

.blog__description {
    color: var(--color-texto-secundario);
    text-align: justify;
}

.blog__content {
    padding: 1.5rem 2rem 2rem; /* espacio interno para el texto debajo de la imagen */
}

/* -------------------------------------------------------------------------
     Desktop-specific image size
     - This media query applies only to wider screens (desktop).
     - It forces a fixed height for blog images so they appear smaller on desktop
         while keeping object-fit: cover to preserve aspect and cropping.
     - To change the desktop image height, edit the "height" value below.
 ------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
    .blog__card {
        /* Constrain the card width on desktop so images don't stretch too wide
           - change max-width to make the card narrower on desktop */
        max-width: 540px; /* <-- adjust this value to set card width on desktop */
        margin-left: auto;
        margin-right: auto;
    }

    .blog__img {
        /* DESKTOP SIZE: change these values to control how the image appears on desktop */
        width: 100%;               /* image still fills the card width */
        max-height: 220px;        /* max visible height (cropped if necessary) */
        height: auto;             /* keep natural height but respect max-height */
        /* If you'd rather force an exact height, replace 'max-height' with 'height' */
    }
}

/* -------------------------------------------------------------------------
   Tablet / Mobile adjustments
   - Ensure images maintain good proportions on small screens
   - Keep cards full-width on mobile and let images scale naturally
 ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .blog__card {
        max-width: 90%; /* Cards take up most of the screen width on mobile */
    }

    .blog__img {
        /* On mobile we let the image size itself but cap the height for consistency */
        width: 100%;
        max-height: 280px; /* mobile max height; change as needed */
        height: auto;
    }
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
.footer {
    padding: 1rem 0;
    background-color: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footer__container {
    text-align: center;
}

.footer__container__social {
    text-align: center;
}

.footer__copy {
    color: var(--color-texto-secundario);
}

.footer__item {
    color: var(--color-texto-secundario);
    font-size: 0.8rem;
    margin: 0.5rem;
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA "Login" (login.ejs)
   ========================================================================== */
.login-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-fondo); /* Opcional: para asegurar el fondo si no se usa un layout */
    margin-top: 4.5rem; /* Separación del header fijo */
    margin-bottom: 2rem;
}

.login__container {
    max-width: 450px;
    padding: 3rem;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.login__form {
    display: grid;
    gap: 1.5rem;
}

.login__forgot {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA "Privacidad" (privacidad.ejs)
   ========================================================================== */

/* Contenedor principal para limitar el ancho del texto */
.privacy-content {
    max-width: 900px; 
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
}

/* Estilo para la fecha de efectividad */
.privacy-date {
    color: var(--color-texto-secundario);
    font-weight: 500;
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
}

/* Estilo para el índice de contenido */
.privacy-index {
    margin-bottom: 4rem;
    padding: 2.5rem;
    border: 1px solid var(--color-borde);
    border-radius: 0.5rem;
    background-color: var(--color-superficie);
}

.privacy-subnav {
    padding: 2.5rem;
    border: 1px solid var(--color-borde);
}

.privacy-index h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--color-texto-principal);
}

.privacy-index ol {
    list-style: none; /* Quitamos la numeración por defecto para controlarla con EJS/CSS */
    padding-left: 0;
}

.privacy-index li {
    margin-bottom: 0.75rem;
}

.privacy-index .nav__link {
    /* Reutilizamos el estilo de enlace de la navegación */
    display: block; /* Para que el área de clic sea más grande */
    font-weight: 500;
    transition: var(--transicion-rapida);
    color: var(--color-texto-secundario); /* Color más discreto para el índice */
}

.privacy-index .nav__link:hover {
    color: var(--color-primario);
    padding-left: 5px; /* Efecto sutil al pasar el mouse */
}

/* Estilo para los títulos de sección (1. ¿Qué información...?) */
.privacy-content h3 {
    font-size: 2rem;
    color: var(--color-primario);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* Reutilizamos el estilo de descripción que ya existe en el archivo */
.privacy-content p.about__description {
    margin-bottom: 3rem; 
}

/* ==========================================================================
   ESTILOS PARA MODAL DE COOKIES
   ========================================================================== */
.cookie-modal {
    position: fixed;
    bottom: 20px; /* Separación del fondo */
    left: 20px; /* Separación del borde izquierdo */
    z-index: 1000; /* Asegura que esté por encima de todo */
    max-width: 350px; /* Ancho similar al de la imagen */
    
    /* Fondo oscuro usando tu variable de color */
    background-color: var(--color-fondo); 
    border: 1px solid var(--color-borde);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
}

.cookie-modal__content {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.cookie-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.cookie-modal__description {
    color: var(--color-texto-principal);
    font-size: 0.95rem;
    line-height: 1.5;
}

.cookie-modal__link-info {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.cookie-modal__link-info .nav__link {
    color: var(--color-primario);
    font-weight: 600;
    /* Eliminar el subrayado por defecto que tiene el .nav__link en :hover */
    text-decoration: underline; 
}

/* Reutilizar la clase button pero hacerla de ancho completo */
.cookie-modal__button {
    width: 100%;
    margin-top: 0.5rem;
}

.cookie-modal__more-info {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
    transition: var(--transicion-rapida);
    text-decoration: underline;
}

.cookie-modal__more-info:hover {
    color: var(--color-primario);
}

/* ==========================================================================
   ESTILOS PARA EL FORMULARIO DE PRODUCTOS (product-form.ejs)
   ========================================================================== */
.product-form {
    /* Estilos copiados del .login__container para la apariencia de tarjeta */
    max-width: 600px; /* Más ancho que el login (450px) para campos largos */
    padding: 5rem;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center;
    /* Los estilos de .grid ya manejan el espaciado (gap) */
}

/* Para que el botón se alinee al centro si el formulario es ancho */
.product-form .button {
    margin: 0 auto; /* Centra el botón horizontalmente */
    width: auto;
}

.product-form .admin-form-fields {
    display: grid;
    gap: 1.5rem;
}

/* -------------------------------------------------------------------------
   Tablet / Mobile adjustments
 ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .product-form {
        max-width: 90%; /* Cards take up most of the screen width on mobile */
    }
}

/* ==================== BOTÓN DE ACCIÓN FLOTANTE (FAB) ==================== */
.fab__button {
    /* Fijo en la esquina inferior derecha */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 900; /* Alto z-index para que flote sobre el contenido */

    /* Estilo circular */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* Colores del botón principal */
    background-color: var(--color-primario);
    color: var(--color-fondo);
    border: none;
    
    /* Icono de + */
    font-size: 1.5rem;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: var(--transicion-rapida);
}

.fab__button:hover {
    background-color: var(--color-primario-hover);
    transform: scale(1.05);
}

/* ==========================================================================
   ESTILOS PARA ACCIONES DE ADMIN (Edit/Delete)
   ========================================================================== */

.card__actions {
    display: flex;
    justify-content: center; /* Centra los botones */
    align-items: center;
    gap: 1rem; /* Espacio entre los botones */
    margin-top: 1.5rem; /* Espacio entre la descripción y los botones */
}

.card__actions form {
    margin: 0; /* Quita cualquier margen por defecto del formulario */
}

/* ==========================================================================
   Botón de Logout (en la navegación)
   ========================================================================== */

.nav__logout-button {
    /* 1. Resetea la apariencia de botón */
    background: none;
    border: none;
    padding: 0;
    
    /* 2. Iguala la apariencia de los otros .nav__link */
    color: var(--color-texto-principal);
    font-weight: 500;
    transition: var(--transicion-rapida);
    font-family: inherit; /* Asegura que use la fuente Poppins */
    
    /* 3. Estilos del icono y cursor */
    font-size: 2rem; /* Puedes ajustar este tamaño */
    cursor: pointer;
}

.nav__logout-button:hover {
    /* 4. Efecto hover igual al de los .nav__link */
    color: var(--color-primario);
}

/* ==========================================================================
   Mensajes de error
   ========================================================================== */

.user-message--error {
    color: red;
}

/* ==================== MODAL DE CONFIRMACIÓN DE ELIMINACIÓN ==================== */

/* Reutilizamos .modal y .modal__content del aviso de cookies/producto para el contenedor */

/* ==================== MODAL (Ventana Emergente) ==================== */
/* ==================== MODAL (Ventana Emergente) ==================== */
.modal {
    /* 1. Oculto por defecto */
    display: none; 
    
    /* 2. Propiedades de posición */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* 3. FONDO SEMI-TRANSPARENTE */
    background-color: rgba(0, 0, 0, 0.7); 
    overflow: auto; 
}

/* Clase que se activa con JavaScript */
.modal.is-open {
    /* 4. **FLEXBOX PARA EL CENTRADO HORIZONTAL Y VERTICAL** */
    display: flex; /* <-- Habilitar Flexbox */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.delete-modal {
    /* Ajuste de ancho solo para el modal de confirmación */
    max-width: 400px; 
    text-align: center;
    
    /* AÑADIR/VERIFICAR ESTOS ESTILOS DE TARJETA: */
    background-color: var(--color-superficie); /* Fondo oscuro */
    border: 1px solid var(--color-borde);    /* Borde sutil */
    border-radius: 1rem;                     /* Bordes redondeados */
    padding: 2.5rem;                         /* Espaciado interno */
}

.delete-modal .modal__description {
    color: var(--color-texto-principal);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.delete-modal__actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Estilo para el botón secundario (Cancelar) */
.button--secondary {
    /* Invierte los colores para ser menos prominente que el botón 'Sí, eliminar' */
    background-color: transparent;
    border: 1px solid var(--color-primario);
    color: var(--color-primario);
    padding: 1rem 1.5rem;
    width: 100%;
}

.button--secondary:hover {
    background-color: var(--color-primario);
    color: var(--color-fondo);
}

/* ==================== ALINEACIÓN DE BOTONES EN FORMULARIOS DE ADMIN ==================== */
/* Usada para centrar los botones "Añadir" y "Cancelar" */
.form-actions {
    text-align: center; /* Centra el botón horizontalmente */
}

/* Aseguramos que el botón de Añadir/Actualizar dentro del formulario 
   no tenga márgenes extraños y se centre correctamente dentro de su .form-actions
*/
.product-form .add__button {
    margin: 0 auto;
    display: inline-block;
}

/* Si quieres que los botones tengan el mismo ancho, puedes agregar: */
.form-actions .button, 
.form-actions .add__button,
.form-actions .delete__button {
    width: 70%; /* Ejemplo: Ancho constante para los botones */
    max-width: 300px; /* Limita el ancho en pantallas muy grandes */
    margin: 0.5rem auto; /* Centra y añade espacio vertical entre ellos */
    display: block; /* Fuerza a que cada botón ocupe su propia línea */
}

/* ==================== EDICION DE LA VISTA CONTACTO ==================== */
/* Estilo para campos en modo de edición */
.editing-field {
    /*background-color: #f0f0f0;*/
    border: 1px dashed #999;
    cursor: text;
    padding: 2px 4px;
    border-radius: 4px;
}

/* ==========================================================================
   ESTILOS PARA LA TABLA DE SOLICITUDES (solicitudes.ejs)
   ========================================================================== */

/* 1. El contenedor (La "Tarjeta Visual") */
.solicitudes__container {
    background-color: var(--color-superficie); /* Fondo de tarjeta, igual que .service__card */
    border: 1px solid var(--color-borde);      /* Borde sutil, igual que las tarjetas */
    border-radius: 1rem;                       /* Bordes redondeados */
    padding: 1.5rem;                           /* Espacio interno */
    overflow-x: auto;                          /* MUY IMPORTANTE: Permite scroll horizontal en móviles si la tabla es muy ancha */
}

/* 2. Estilos base de la tabla */
.solicitudes__table {
    width: 100%;                /* Ocupa todo el ancho de la tarjeta */
    border-collapse: collapse;  /* Une los bordes para un look limpio */
    color: var(--color-texto-principal);
}

/* 3. Cabecera (thead) - Para distinguir los títulos de columna */
.solicitudes__table thead th {
    color: var(--color-primario); /* Color de acento para los títulos */
    font-size: 1.1rem;
    text-align: left;           /* Alineación estándar */
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--color-primario); /* Línea gruesa de acento */
}

/* 4. Celdas del cuerpo (tbody) - Para distinguir las filas */
.solicitudes__table tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-borde); /* Línea divisoria sutil entre filas */
    vertical-align: top; /* Alinea el texto arriba, útil para mensajes largos */
}

/* 5. Estilo de "Cebra" (Filas alternas) */
.solicitudes__table tbody tr:nth-child(even) {
    background-color: var(--color-fondo); /* Fondo de página para la fila par */
}

/* 6. Efecto Hover sobre las filas */
.solicitudes__table tbody tr:hover {
    background-color: var(--color-borde); /* Resalta la fila al pasar el mouse */
}

/* 7. Estilos para links (email y teléfono) */
.solicitudes__table tbody td a {
    color: var(--color-primario);
    text-decoration: none;
    transition: var(--transicion-rapida);
}

.solicitudes__table tbody td a:hover {
    text-decoration: underline;
    color: var(--color-primario-hover);
}

/* 8. Estilo para la columna de Mensaje (para mejor legibilidad) */
.solicitudes__table tbody td:last-child {
    color: var(--color-texto-secundario); /* Texto un poco más tenue */
    line-height: 1.6;
    min-width: 250px; /* Asegura un ancho mínimo para el mensaje */
}

/* ==========================================================================
   Estilos específicos para el input de tipo archivo
   ========================================================================== */

/* 1. Estilo del contenedor del input (la caja completa) */
.form__input[type="file"] {
    padding: 0.5rem; /* Un poco menos de padding que los inputs de texto */
    background-color: var(--color-superficie);
    color: var(--color-texto-secundario); /* Color del texto "No se ha seleccionado..." */
    height: auto; /* Permitir que se ajuste al contenido */
    display: flex;
    align-items: center; /* Centrar verticalmente el texto y el botón */
    cursor: pointer;
}

/* 2. Estilo del botón interno "Elegir archivo" */
.form__input[type="file"]::file-selector-button {
    margin-right: 1rem; /* Espacio entre el botón y el texto del nombre del archivo */
    border: none;
    background-color: var(--color-primario);
    padding: 0.5rem 1rem;
    border-radius: 0.3rem; /* Radio ligeramente menor para que encaje bien dentro del input */
    color: var(--color-fondo); /* Texto oscuro para contraste con el botón primario */
    cursor: pointer;
    transition: var(--transicion-rapida);
    font-family: var(--font-principal);
    font-weight: 500;
    font-size: 0.9rem;
}

/* 3. Efecto Hover en el botón interno */
.form__input[type="file"]::file-selector-button:hover {
    background-color: var(--color-primario-hover);
}