/* ==========================================================================
   1. RESET Y BASES (Limpieza total)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --rojo: #E31B13;
    --negro: #000000;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

//* ==========================================================================
   HEADER REPARADO (Estructura de 3 Columnas)
   ========================================================================== */
.main-header {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 90px;
    display: flex;
    align-items: center;
    width: 100%;
}

.header-container {
    display: grid;
    grid-template-columns: 250px 1fr 280px; /* Columna fija para logos y centro flexible */
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Bloque Izquierdo */
.header-logo-left {
    display: flex;
    align-items: center;
}
.logo-main { height: 55px; width: auto; }

/* Bloque Central (Menú) */
.header-nav-center {
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
}

.nav-list a {
    text-decoration: none;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Bloque Derecho (Logos Institucionales) */
.header-logo-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}
.logo-turismo, .logo-generalitat { 
    height: 40px; 
    width: auto; 
    object-fit: contain;
}

/* Botón Reservar */
.nav-cta {
    background: #E31B13;
    color: white !important;
    padding: 10px 18px;
    border-radius: 4px;
    margin-left: 10px;
}

/* ==========================================================================
   DROPDOWN (MENU DESPLEGABLE)
   ========================================================================== */
.dropdown {
    position: relative;
    padding: 20px 0; /* Zona activa para el mouse */
}

.dropdown-content {
    display: none; /* Se oculta por defecto */
    position: absolute;
    background-color: #ffffff;
    min-width: 230px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 10000;
    top: 100%;
    left: 0;
    border-radius: 4px;
    padding: 10px 0;
    border: 1px solid #eee;
}

/* ACTIVACIÓN POR HOVER */
.dropdown:hover .dropdown-content {
    display: block !important;
}

.dropdown-content li { width: 100%; list-style: none; }

.dropdown-content li a {
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    color: #333 !important;
    text-transform: none !important;
    font-size: 14px !important;
}

.dropdown-content li a i {
    margin-right: 12px;
    color: #E31B13;
    width: 18px;
    text-align: center;
}

.dropdown-content li a:hover {
    background-color: #f8f8f8;
}

/* NAVEGACIÓN PRINCIPAL */
.nav-list {
    display: flex;
    list-style: none;
    gap: 25px;
    align-items: center;
}

.nav-list a {
    text-decoration: none;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: 0.3s;
}

.nav-cta {
    background: var(--rojo);
    color: white !important;
    padding: 12px 25px;
    border-radius: 4px;
}

/* DROPDOWN (EL MOTOR QUE NO FALLA) */
.dropdown {
    position: relative;
    padding: 30px 0; /* Área de contacto para que no se cierre */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 240px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
    z-index: 10001;
    border-radius: 6px;
    padding: 10px 0;
    top: 85%; /* Ajuste para que pegue con el texto */
    left: 0;
    border: 1px solid #eee;
}

/* ACTIVACIÓN DEL MENÚ */
.dropdown:hover .dropdown-content {
    display: block !important;
}

.dropdown-content li {
    width: 100%;
    list-style: none;
}

.dropdown-content li a {
    color: #333 !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center;
    font-size: 14px;
    text-transform: none;
}

.dropdown-content li a i {
    margin-right: 12px;
    color: var(--rojo);
    width: 20px;
    text-align: center;
}

.dropdown-content li a:hover {
    background-color: #f8f8f8;
    color: var(--rojo) !important;
}

/* ==========================================================================
   3. HEROS UNIFICADOS (ESTILO CHECKING) - NO BORRA FOTOS
   ========================================================================== */
main { margin-top: 0 !important; }

/* Base para todos los banners: Index, Limpieza, Renting, Checking */
.hero-index, 
.hero-service, 
.hero-modern-checks,
.hero-modern {
    min-height: 65vh; /* Altura estándar estilo Checking */
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado como en Checking */
    text-align: center;
    padding: 0 10%;
    color: white;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Títulos H1: Todos al tamaño de Checking (3.2rem) */
.hero-index h1, 
.hero-service h1,
.hero-modern-checks h1,
.hero-modern h1 { 
    font-size: 3.2rem !important; 
    line-height: 1.1; 
    font-weight: 800; 
    margin-bottom: 20px; 
}

/* Párrafos del Hero */
.hero-content p,
.hero-service p,
.hero-modern-checks p {
    font-size: 1.1rem !important;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
    color: #F4F4F4;
}

/* FOTO CASTELLÓN: Protegida para que no desaparezca */
.hero-index {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('img/castellon.png') !important;
}

/* La etiqueta roja (Tag) estilo Checking */
.hero-tag, .hero-tag-red, .small-title { 
    background: var(--rojo) !important;
    color: white !important;
    padding: 6px 15px !important;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

//* BOTONES ESTILO CHECKING (CÁPSULA) */
.hero-btns { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }

.btn-primary, .btn-check-wa, .btn-whatsapp-full { 
    background: var(--rojo); 
    color: white !important; 
    padding: 15px 35px; 
    text-decoration: none; 
    font-weight: 700; 
    border-radius: 50px !important; /* Redondeado total */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-outline { 
    border: 2px solid white; 
    color: white; 
    padding: 15px 35px; 
    text-decoration: none; 
    font-weight: 700; 
    border-radius: 50px !important; 
}

/* ==========================================================================
   4. DISEÑOS DE PÁGINAS INTERNAS
   ========================================================================== */
.solutions-section, .details-section, .services-unified {
    padding: 80px 10%;
}

.solutions-grid, .unified-grid, .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* ============================================================
   TARJETAS UNIFICADAS (CORRECCIÓN DE IMAGEN Y ESPACIOS)
   ============================================================ */

/* 1. Estructura de la tarjeta */
.service-card-full, .info-card, .info-item, .check-card, .new-product-card {
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden; /* Esto corta la foto para que respete el redondeado */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: 0.3s;
    border: 1px solid #eee !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Quitamos el padding global para que la foto llegue al borde */
    height: 100%;
}

/* 2. Ajuste de la Imagen (Para que no se deforme ni quede larga) */
.service-card-full img, .new-product-card img {
    width: 100% !important;
    height: 220px !important; /* Altura fija para que todas las fotos sean iguales */
    object-fit: cover !important; /* Corta la foto sin deformarla */
    display: block;
}

/* 3. El contenedor del texto (Aquí es donde va el espacio) */
.card-body, .card-info, .text-box {
    padding: 25px !important; /* El espacio solo para el texto */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 4. Tarjetas que NO tienen foto (como las de Checking) */
/* Si la tarjeta no tiene imagen, le devolvemos el padding */
.check-card, .info-item {
    padding: 30px !important;
}

.service-card-full:hover, .check-card:hover, .new-product-card:hover {
    transform: translateY(-5px);
    border-color: var(--rojo) !important;
}

/* SPLIT SECTIONS */
.feature-split, .tapiceria-feature {
    display: flex;
    min-height: 500px;
    flex-wrap: wrap;
}

.split-image { flex: 1; min-width: 50%; background-size: cover; background-position: center; min-height: 400px; }
.split-text { flex: 1; min-width: 50%; padding: 80px 8%; display: flex; flex-direction: column; justify-content: center; }

/* LISTAS */
.custom-list { list-style: none; margin: 20px 0; }
.custom-list li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.custom-list i { color: var(--rojo); }

/* ==========================================================================
   5. FOOTER Y EXTRAS
   ========================================================================== */
.footer-rental-black { background: #000; color: #fff; padding: 60px 10%; }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; }
.footer-logo-img { height: 50px; filter: brightness(0) invert(1); }

.whatsapp-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 99999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .feature-split { flex-direction: column; }
    .hero-index h1 { font-size: 2.5rem; }
    .nav-list { display: none; } /* Aquí podrías añadir un menú móvil luego */
}

/* --- ESTILOS ESPECÍFICOS RESERVAS --- */
.layout-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    max-width: 1400px;
    margin: 40px auto;
    gap: 40px;
    padding: 0 5%;
}

.sidebar-reservas {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: fit-content;
    position: sticky;
    top: 110px;
}

.reserva-main {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.reserva-header { text-align: center; margin-bottom: 40px; }
.reserva-header h1 { font-size: 2.5rem; font-weight: 800; color: var(--negro); }

.grid-formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group.full-width { grid-column: span 2; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }

.grid-formulario input, .grid-formulario select, .grid-formulario textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

.grid-formulario input:focus { border-color: var(--rojo); outline: none; }

.botones-container {
    grid-column: span 2;
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-email { background: #333; color: white; border: none; flex: 1; padding: 15px; border-radius: 6px; cursor: pointer; font-weight: 700; }
.btn-whatsapp { background: #25d366; color: white; border: none; flex: 1; padding: 15px; border-radius: 6px; cursor: pointer; font-weight: 700; }

/* CALCULADORA */
.presupuesto-card {
    margin-top: 50px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.slider-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.slider-label { flex: 1; font-weight: 700; }
.slider-value { background: var(--rojo); color: white; padding: 5px 15px; border-radius: 20px; font-weight: 800; }

.resultados-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed #ddd;
}

.total-destacado { color: var(--rojo) !important; font-size: 2rem !important; }

.calc-footer { text-align: center; margin-top: 30px; }

/* --- PAGINA DE RESERVAS (DISEÑO CENTRAL) --- */
.container-full-reserva {
    background: #f8f8f8;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

.reserva-card-clean {
    background: white;
    width: 90%;
    max-width: 900px; /* Tamaño ideal para lectura */
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.reserva-header { text-align: center; margin-bottom: 45px; }
.reserva-header h1 { font-size: 2.8rem; font-weight: 800; margin-top: 10px; }

.grid-formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group.full-width { grid-column: span 2; }
.form-group label { display: block; font-weight: 700; margin-bottom: 10px; color: #444; }

.grid-formulario input, .grid-formulario select, .grid-formulario textarea {
    width: 100%;
    padding: 14px;
    border: 1.5px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}

.grid-formulario input:focus { border-color: var(--rojo); background: #fff; outline: none; }

.botones-container {
    grid-column: span 2;
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-email { background: #222; color: white; border: none; flex: 1; padding: 18px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; }
.btn-whatsapp { background: #25d366; color: white; border: none; flex: 1; padding: 18px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; }

.btn-email:hover, .btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* CALCULADORA */
.presupuesto-card {
    margin-top: 60px;
    background: #fffafa;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #ffeded;
}

.total-red { color: var(--rojo); font-size: 2.2rem !important; font-weight: 800 !important; }

@media (max-width: 768px) {
    .grid-formulario { grid-template-columns: 1fr; }
    .reserva-card-clean { padding: 25px; }
    .botones-container { flex-direction: column; }
}

/* ==========================================================================
   PÁGINA CHECK-IN / CHECK-OUT
   ========================================================================== */

/* Hero Moderno */
.hero-modern {
    height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-text-container {
    max-width: 800px;
    padding: 0 20px;
}

.hero-tag {
    background: #E31B13;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
}

.hero-modern h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-modern .highlight {
    color: #E31B13;
}

/* Sección Contenido */
.services-detail-section {
    padding: 80px 0;
    background: #fff;
}

.container-checks {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.intro-text-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.tag-red {
    color: #E31B13;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Grid de Características */
.features-grid-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.check-feature-item {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 12px;
    transition: 0.3s;
    border: 1px solid #eee;
}

.check-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: #E31B13;
}

.icon-box {
    font-size: 2rem;
    color: #E31B13;
    flex-shrink: 0;
}

.text-box h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.text-box p {
    color: #666;
    line-height: 1.6;
}

/* Botón CTA */
.cta-center-checks {
    text-align: center;
    margin-top: 60px;
}

.btn-whatsapp-full {
    background: #25d366;
    color: white;
    padding: 20px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-whatsapp-full:hover {
    background: #128c7e;
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .features-grid-checks { grid-template-columns: 1fr; }
    .hero-modern h1 { font-size: 2.5rem; }
}

/* --- ESTILOS ESPECÍFICOS PARA CHECKS --- */

.hero-modern-checks {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('media/llaves.jpg');
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-tag-red {
    background: #E31B13;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 0.8rem;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.hero-modern-checks h1 { font-size: 3rem; font-weight: 800; margin-bottom: 15px; }
.hero-modern-checks .highlight { color: #E31B13; }
.hero-modern-checks p { max-width: 600px; margin: 0 auto; font-size: 1.1rem; opacity: 0.9; }

.content-section-checks { padding: 80px 0; background: #ffffff; }
.container-checks { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.intro-box { text-align: center; margin-bottom: 60px; }
.small-title { color: #E31B13; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; }
.intro-box h2 { font-size: 2.2rem; margin: 10px 0; font-weight: 800; }

.features-grid-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.check-card {
    background: #fdfdfd;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.check-card:hover { border-color: #E31B13; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.check-card i { font-size: 2.5rem; color: #E31B13; margin-bottom: 20px; display: block; }
.check-card h4 { font-size: 1.3rem; margin-bottom: 10px; font-weight: 700; }
.check-card p { color: #555; line-height: 1.6; }

.cta-container { text-align: center; margin-top: 50px; }
.btn-check-wa {
    background: #25d366;
    color: white;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.main-header {
    position: fixed;    /* Esto lo deja pegado a la pantalla */
    top: 0;             /* Arriba del todo */
    left: 0;            /* De extremo a extremo */
    width: 100%;        /* Ocupa todo el ancho */
    z-index: 1000;      /* Se asegura de estar por encima de todo lo demás */
    background: white;  /* Ponle fondo sólido para que no se transparente el texto al bajar */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Opcional: una sombrita para que resalte */
}

body {
    /* Ajusta estos píxeles según lo alto que sea tu header (normalmente entre 80px y 100px) */
    padding-top: 90px; 
}

.hero-modern-checks {
    background-size: cover;       /* La imagen cubrirá todo el espacio sin deformarse */
    background-position: center;  /* Centra la imagen para que no se corte lo importante */
    background-repeat: no-repeat;
    height: 450px;                /* Altura del banner principal */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;                /* Ajustado para el Header fijo */
}

/* El degradado (linear-gradient) en el HTML es vital para que las letras blancas 
   se lean bien sobre la imagen check.png */

   /* ==========================================================================
   PÁGINA: DECORACIÓN / MANTENIMIENTO
   ========================================================================== */

/* Estructura del Contenedor de Precios */
.mantenimiento-layout {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px 0;
}

.price-box {
    background: #fdfdfd;
    border-radius: 20px;
    padding: 40px;
    margin: 30px 0;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
}

.price-box h4 {
    color: #1a202c;
    margin-bottom: 25px;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Estilo de la Lista de Precios */
.price-list-deco {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-list-deco li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #cbd5e1;
    font-size: 1.05rem;
    color: #4a5568;
}

.price-list-deco li:last-child {
    border-bottom: none;
}

.price-list-deco li strong {
    color: #1a202c;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Footer de la Oferta (Total con descuento) */
.offer-footer-deco {
    margin-top: 30px;
    text-align: right;
    padding-top: 20px;
    border-top: 2px solid #f1f5f9;
}

.offer-price-deco {
    display: block;
    color: #E31B13; /* Rojo RentalHolidays */
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.offer-price-deco small {
    font-size: 1rem;
    color: #64748b;
    font-weight: 400;
}

/* Ajustes para el Hero y Contenido (Reutilizados de Checks) */
.hero-modern-checks {
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-tag-red {
    background: #E31B13;
    color: white;
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: inline-block;
}

.highlight {
    color: #E31B13;
}

/* Botón de Acción Principal */
.btn-check-wa {
    background: #25d366;
    color: white;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.btn-check-wa:hover {
    background: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .price-box {
        padding: 25px;
    }
    .offer-price-deco {
        font-size: 1.8rem;
    }
    .price-list-deco li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .price-list-deco li strong {
        align-self: flex-end;
    }
}

/* --- ESTILOS SEDE CASTELLÓN --- */

.poblaciones-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.poblacion-item {
    background: #ffffff;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #334155;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.poblacion-item i {
    color: #cbd5e1;
    font-size: 0.8rem;
}

.poblacion-item:hover {
    border-color: #E31B13;
    color: #E31B13;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.poblacion-item.active-city {
    background: #fef2f2;
    border-color: #E31B13;
    color: #E31B13;
}

.poblacion-item.active-city i {
    color: #E31B13;
}

/* Ajuste responsive para móviles */
@media (max-width: 600px) {
    .poblaciones-grid-premium {
        grid-template-columns: 1fr 1fr; /* Dos columnas en móvil */
    }
}

/* --- ESTILOS PÁGINA PRODUCTOS --- */

.product-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.new-product-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.new-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.card-img-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #E31B13;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.card-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-info h3 {
    margin-bottom: 12px;
    font-size: 1.3rem;
    color: #1a202c;
}

.card-info p {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.6;
}

.card-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.btn-sm-outline {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: 0.85rem;
}

.btn-sm-red {
    flex: 2;
    text-align: center;
    padding: 10px;
    background: #E31B13;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 600px) {
    .product-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* --- DISEÑO DE PRODUCTOS 2X2 --- */
.product-grid-square {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea exactamente 2 columnas */
    gap: 30px; /* Espacio entre tarjetas */
    margin: 40px auto;
    max-width: 1100px;
}

.new-product-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #efefef;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Obliga a todas a tener la misma altura */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.new-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
}

.card-img-wrapper {
    position: relative;
    height: 240px; /* Altura de imagen constante */
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #E31B13;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.card-info {
    padding: 25px;
    flex-grow: 1; /* Hace que el contenido crezca para empujar botones abajo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-info h3 {
    font-size: 1.4rem;
    color: #1a202c;
    margin-bottom: 12px;
    font-weight: 700;
}

.card-info p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.card-actions {
    display: flex;
    gap: 12px;
}

.btn-sm-outline {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-sm-red {
    flex: 1.5;
    text-align: center;
    padding: 12px;
    background: #E31B13;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

/* Responsive para tablets y móviles */
@media (max-width: 900px) {
    .product-grid-square {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
        max-width: 500px;
    }
}

/* Contenedor principal de las tarjetas */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsivo básico */
    gap: 20px;
    margin-top: 30px;
}

/* Estilo de cada tarjeta individual */
.info-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra iconos y texto */
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

.info-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}

/* Ajuste del círculo del icono */
.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #f8f9fa; /* Cambia al color de tu marca */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333; /* Cambia según tu paleta */
}

.card-content h3 {
    margin-bottom: 15px;
    font-size: 1.25rem;
}

.card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}

/* --- Media Queries para control total --- */

/* En pantallas de escritorio (web), forzamos 2 arriba y 2 abajo */
@media (min-width: 992px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr); 
        max-width: 900px; /* Ajusta este ancho según tu diseño */
        margin-left: auto;
        margin-right: auto;
    }
}

/* En móviles, 1 sola columna */
@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr;
    }
    
    .info-card {
        padding: 20px;
    }
}

/* Contenedor de la rejilla */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas iguales */
    gap: 25px; /* Espacio entre tarjetas */
    margin-top: 40px;
}

/* Estilo de la tarjeta individual */
.info-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea contenido a la izquierda */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* Efecto al pasar el ratón */
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Iconos */
.icon-circle {
    font-size: 24px;
    color: #333; /* Cambia al color de tu marca si prefieres */
    margin-bottom: 20px;
}

/* Tipografía de la tarjeta */
.card-body h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.card-body p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* --- Responsividad para móviles --- */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr; /* En móviles se apilan en 1 sola columna */
    }
    
    .info-card {
        padding: 20px;
        align-items: center; /* Opcional: centrar contenido en móvil */
        text-align: center;
    }
}

/* Contenedor de la cuadrícula */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas exactas en web */
    gap: 20px; /* Espacio entre tarjetas */
    padding: 20px 0;
}

/* Estilo de la Tarjeta */
.info-item {
    background: #fff;
    padding: 30px;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave */
    border: 1px solid #f0f0f0; /* Borde sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea contenido a la izquierda */
    text-align: left;
}

/* Efecto al pasar el mouse */
.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* Ajuste de Iconos */
.icon-circle {
    margin-bottom: 15px;
    color: #333; 
    font-size: 1.5rem;
}

.info-item h3 {
    margin: 10px 0;
    font-size: 1.2rem;
    color: #222;
}

.info-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Responsivo: 1 sola columna en celulares */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.benefits-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.benefits-table tr {
    border-bottom: 1px solid #f0f0f0; /* Línea divisoria suave */
    transition: background-color 0.3s ease;
}

.benefits-table tr:hover {
    background-color: #fcfcfc; /* Efecto sutil al pasar el mouse */
}

.benefits-table tr:last-child {
    border-bottom: none; /* Quita la línea de la última fila */
}

.benefits-table td {
    padding: 15px 10px;
    vertical-align: middle;
    color: #444;
}

/* Columna de los títulos e iconos */
.benefits-table td:first-child {
    white-space: nowrap; /* Evita que el título se rompa en dos líneas */
    width: 35%;
}

/* Icono del check */
.benefits-table td .fa-check {
    color: #e63946; /* Ajusta este color al de tu marca */
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Responsividad para móviles */
@media (max-width: 600px) {
    .benefits-table td {
        display: block; /* En móviles, las celdas se ponen una sobre otra */
        width: 100% !important;
        padding: 5px 10px;
    }
    .benefits-table tr {
        padding: 10px 0;
        display: block;
    }
}

/* Estilo base de las tarjetas - ACTUALIZADO */
.info-card-item {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombra inicial sutil */
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* ESTO HACE QUE EL CAMBIO NO SEA BRUSCO */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    cursor: pointer;
}

/* EFECTO DINÁMICO AL PASAR EL RATÓN */
.info-card-item:hover {
    transform: translateY(-10px); /* La tarjeta sube un poco */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); /* La sombra se hace más grande y oscura */
    border-color: #e2e8f0; /* El borde se marca un poco más */
}

/* Mantenemos el resto igual, pero asegúrate de que el hover también afecte a la resaltada */
.highlight-card:hover {
    background: #ffffff; /* Opcional: que cambie a blanco puro al resaltar */
    border-left: 5px solid #e63946; /* El borde lateral puede cambiar de color al hover */
}

/* --- El resto del código se mantiene igual --- */
.top-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.info-card-item .small-title {
    color: #e63946;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.info-card-item h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.info-card-item p {
    color: #475569;
    line-height: 1.6;
}

/* --- CORRECCIÓN DE TARJETAS CON IMAGEN --- */
.service-card-full, .new-product-card {
    padding: 0 !important; /* Quita el espacio que hacía que la foto no llegara al borde */
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* Ajuste de la foto para que todas midan lo mismo */
.service-card-full img, 
.new-product-card .card-img-wrapper img, 
.new-product-card img {
    width: 100% !important;
    height: 230px !important; /* Altura fija profesional */
    object-fit: cover !important; /* No deforma la imagen */
    border-radius: 20px 20px 0 0 !important;
}

/* Ajuste del texto para que no esté pegado al borde */
.service-card-full .card-body, 
.new-product-card .card-info,
.service-card-full .text-box {
    padding: 25px !important;
}

/* --- UNIFICACIÓN DE ESTILO PREMIUM --- */
.info-card, .info-item, .check-card, .info-card-item, .reserva-card-clean, .price-box {
    background: white !important;
    border-radius: 20px !important;
    border: 1px solid #eee !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

/* Efecto hover unificado */
.info-card:hover, .info-item:hover, .check-card:hover, .info-card-item:hover, .service-card-full:hover {
    transform: translateY(-8px) !important;
    border-color: #E31B13 !important; /* Tu color rojo */
    box-shadow: 0 15px 35px rgba(227, 27, 19, 0.1) !important;
}