/* Estilos específicos de index.php */

/* ============================================================
   Sección destacados: grid 6 cols, featured ocupa 2x2
============================================================ */
.tabladest.row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: minmax(0, auto);
    gap: 16px !important;
    margin: 0 !important;
}
/* Wrappers .col2/.col3 transparentes para que las mini-cards
   sean items directos del grid */
.tabladest > .col2,
.tabladest > .col3 {
    display: contents !important;
}
.tabladest > .col1.destaca-esto,
.tabladest > .col2,
.tabladest > .col3 {
    flex: unset !important;
    max-width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tabladest > .mini {
    grid-column: 1 / -1;
}

/* ===== Diseño común: imagen arriba con título overlay,
   descripción debajo en blanco (estilo "servicio") ===== */

/* --- Featured (2x2) --- */
.tabladest .destaca-esto {
    grid-column: span 2;
    grid-row: span 2;
    position: relative;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tabladest .destaca-esto > a:first-child {
    grid-row: 1;
    grid-column: 1;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: #fafbfc;
}
.tabladest .destaca-esto > a:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.tabladest .destaca-esto > div.mt-2 { display: none !important; }
.tabladest .destaca-esto .title {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 1;
    width: 100% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%) !important;
    color: #fff !important;
    padding: 50px 20px 14px !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    overflow-wrap: break-word;
}
.tabladest .destaca-esto .title:hover { text-decoration: underline !important; }
.tabladest .destaca-esto > p,
.tabladest .destaca-esto > p.mt-2 {
    grid-row: 2;
    grid-column: 1;
    margin: 0 !important;
    padding: 16px 20px 8px !important;
    background: #fff !important;
    color: #495057 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word;
}
.tabladest .destaca-esto > p a,
.tabladest .destaca-esto > p.mt-2 a {
    color: #0057b4 !important;
    text-decoration: underline;
}

/* CTA "Más información" en el featured */
.tabladest .destaca-esto .btn-mas-info {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    margin: 0 20px 20px !important;
    padding: 10px 22px !important;
    background: #0057b4 !important;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    transition: background 0.2s ease;
}
.tabladest .destaca-esto .btn-mas-info:hover {
    background: #003d80 !important;
    text-decoration: none !important;
    color: #fff !important;
}
@media (max-width: 767.98px) {
    .tabladest .destaca-esto .btn-mas-info {
        justify-self: stretch;
        text-align: center;
        margin: 8px 20px 20px !important;
    }
}

/* --- Mini-cards (1x1): mismo patrón --- */
.tabladest .cont-col2,
.tabladest .cont-col3 {
    position: relative;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}
.tabladest .cont-col2 .col2-img,
.tabladest .cont-col3 .col3-img {
    grid-row: 1;
    grid-column: 1;
    width: 100% !important;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: #fafbfc;
}
.tabladest .cont-col2 .col2-img a,
.tabladest .cont-col3 .col3-img a {
    display: block;
    width: 100%;
    height: 100%;
}
.tabladest .cont-col2 .col2-img img,
.tabladest .cont-col3 .col3-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.tabladest .cont-col2 .col2-textos,
.tabladest .cont-col3 .col3-textos {
    display: contents !important;
}
.tabladest .cont-col2 .col2-textos .negrita,
.tabladest .cont-col3 .col3-textos .negrita {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 1;
    width: 100% !important;
    margin: 0 !important;
    padding: 36px 14px 10px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    overflow-wrap: break-word;
}
.tabladest .cont-col2 .col2-textos .negrita:hover,
.tabladest .cont-col3 .col3-textos .negrita:hover { text-decoration: underline !important; }
.tabladest .cont-col2 .col2-textos .plano,
.tabladest .cont-col3 .col3-textos .plano {
    grid-row: 2;
    grid-column: 1;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    background: #fff !important;
    color: #495057 !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word;
}
.tabladest .cont-col2 .col2-textos .plano a,
.tabladest .cont-col3 .col3-textos .plano a {
    color: #0057b4 !important;
    text-decoration: underline;
}

/* "Ver todos los productos…" píldora */
.tabladest .mini {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 28px 0 40px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.tabladest .mini a {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    color: #0057b4 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tabladest .mini a:hover {
    border-color: #0057b4;
    background: #f6f9fd;
    text-decoration: none !important;
}

/* ===== Responsive — sin breakpoint 5-col (dejaba huecos vacíos) ===== */
@media (max-width: 1399.98px) {
    .tabladest.row { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 991.98px) {
    .tabladest.row { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767.98px) {
    .tabladest.row { grid-template-columns: repeat(2, 1fr) !important; }
    /* En móvil el featured ocupa las 2 columnas y 1 fila */
    .tabladest .destaca-esto { grid-column: 1 / -1 !important; grid-row: span 1 !important; }
}

/* ============================================================
   Secciones alternas (seccion1..4): card blanca con imagen + texto
============================================================ */

/* Grid de cards: 1 col en mobile, 2 cols a partir de md (tablet) */
.secciones-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .secciones-cards {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1200px) {
    .secciones-cards {
        grid-template-columns: 1fr;
    }
    #seccion1 .seccion-img,
    #seccion2 .seccion-img,
    #seccion3 .seccion-img,
    #seccion4 .seccion-img {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    #seccion1 .seccion-text,
    #seccion2 .seccion-text,
    #seccion3 .seccion-text,
    #seccion4 .seccion-text {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}
.secciones-cards > [id^="seccion"] {
    margin-bottom: 0 !important;
}

#seccion1, #seccion2, #seccion3, #seccion4 {
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#seccion1:hover, #seccion2:hover, #seccion3:hover, #seccion4:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 6px 24px -8px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* Imagen: col a ancho completo, alto fijo, object-fit cover */
#seccion1 .seccion-img,
#seccion2 .seccion-img,
#seccion3 .seccion-img,
#seccion4 .seccion-img {
    padding: 0 !important;
    overflow: hidden;
}
#seccion1 .seccion-img > a,
#seccion2 .seccion-img > a,
#seccion3 .seccion-img > a,
#seccion4 .seccion-img > a {
    display: block;
    width: 100%;
    height: 100%;
}
#seccion1 .seccion-img img,
#seccion2 .seccion-img img,
#seccion3 .seccion-img img,
#seccion4 .seccion-img img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 280px;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}
#seccion1 a:hover img, #seccion2 a:hover img,
#seccion3 a:hover img, #seccion4 a:hover img {
    transform: none;
    box-shadow: none;
}

/* Texto */
#seccion1 .seccion-text,
#seccion2 .seccion-text,
#seccion3 .seccion-text,
#seccion4 .seccion-text {
    padding: 24px 32px 24px 36px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#seccion1 h2, #seccion2 h2, #seccion3 h2, #seccion4 h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.01em;
    line-height: 1.25 !important;
}
#seccion1 h2 a, #seccion2 h2 a, #seccion3 h2 a, #seccion4 h2 a {
    color: inherit !important;
    text-decoration: none !important;
}
#seccion1 h2 a:hover, #seccion2 h2 a:hover,
#seccion3 h2 a:hover, #seccion4 h2 a:hover { color: #0057b4 !important; }
#seccion1 p, #seccion2 p, #seccion3 p, #seccion4 p {
    color: #495057 !important;
    font-size: .98rem !important;
    line-height: 1.6 !important;
    margin: 0 0 12px !important;
}

/* Botón CTA */
#seccion1 .btn-primary, #seccion2 .btn-primary,
#seccion3 .btn-primary, #seccion4 .btn-primary {
    align-self: flex-start;
    float: none !important;
    margin-top: 16px !important;
    padding: 10px 22px !important;
    background: #0057b4 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
    text-decoration: none !important;
    transition: background 0.2s ease;
}
#seccion1 .btn-primary:hover, #seccion2 .btn-primary:hover,
#seccion3 .btn-primary:hover, #seccion4 .btn-primary:hover {
    background: #003d80 !important;
    color: #fff !important;
}

@media (max-width: 1199.98px) {
    /* En 2-col grid (md/lg) y en mobile: layout interno apilado (block, no flex) */
    #seccion1, #seccion2, #seccion3, #seccion4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: initial !important;
    }
    #seccion1 .seccion-img,
    #seccion2 .seccion-img,
    #seccion3 .seccion-img,
    #seccion4 .seccion-img {
        flex: initial;
        max-width: 100%;
        width: 100%;
    }
    #seccion1 .seccion-img img,
    #seccion2 .seccion-img img,
    #seccion3 .seccion-img img,
    #seccion4 .seccion-img img { height: 220px !important; min-height: 220px; }
    #seccion1 .seccion-text,
    #seccion2 .seccion-text,
    #seccion3 .seccion-text,
    #seccion4 .seccion-text {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 24px 20px 16px !important;
    }
    #seccion1 h2, #seccion2 h2, #seccion3 h2, #seccion4 h2 { font-size: 1.3rem !important; }
}

/* En móvil y en la vista de 2 columnas (tablet), el CTA de cada
   tarjeta ocupa el 100% del ancho. En escritorio (>=1200px, imagen
   y texto en horizontal) mantiene su ancho natural. */
@media (max-width: 1199.98px) {
    #seccion1 .btn-primary, #seccion2 .btn-primary,
    #seccion3 .btn-primary, #seccion4 .btn-primary {
        display: block;
        width: 100%;
        text-align: center;
        align-self: stretch;
        margin-top: auto !important;
    }
}
/* En móvil (1 columna) las tarjetas no se emparejan: en vez de empujar
   el botón al fondo, se le da una separación fija respecto al texto. */
@media (max-width: 767.98px) {
    #seccion1 .btn-primary, #seccion2 .btn-primary,
    #seccion3 .btn-primary, #seccion4 .btn-primary {
        margin-top: 32px !important;
    }
}
/* En 2 columnas el botón se ancla al fondo (margin-top:auto). Para que en
   las tarjetas con texto largo no quede pegado, se garantiza una
   separación mínima con el último párrafo. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #seccion1 .seccion-text p:last-of-type,
    #seccion2 .seccion-text p:last-of-type,
    #seccion3 .seccion-text p:last-of-type,
    #seccion4 .seccion-text p:last-of-type {
        margin-bottom: 28px !important;
    }
}

/* Botón "Ver todos los servicios" — estilo píldora coherente */
#seccion5 {
    margin: 40px 0 24px !important;
}
#seccion5 a.btn-secondary,
#seccion5 a {
    display: inline-block;
    padding: 10px 24px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0057b4 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
#seccion5 a.btn-secondary:hover,
#seccion5 a:hover {
    border-color: #0057b4 !important;
    background: #f6f9fd !important;
    text-decoration: none !important;
}

/* Título "Lo que dicen sobre nosotros" */
.titulo-google {
    text-align: center !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 36px 0 24px !important;
    letter-spacing: -0.01em;
}

/* Cards de reseñas de Google — diseño original con fondo
   amarillo muy claro y bordes/divisores dorados a juego. */
#comentarios {
    margin-bottom: 40px;
}
.caja-comentarios {
    background: #fffefa;
    border: 1px solid #ecd98a;
    border-radius: 12px;
    overflow: hidden;
    padding: 20px !important;
    margin-bottom: 20px;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.caja-comentarios:hover {
    border-color: #d9b94a;
    box-shadow: 0 8px 22px rgba(217, 185, 74, 0.22);
    transform: translateY(-2px);
}
.caja-comentarios .header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0e3b0;
}
.caja-comentarios .header img {
    height: 22px !important;
    width: auto !important;
}
.caja-comentarios .comentario {
    flex: 1;
    color: #343a40 !important;
    line-height: 1.55 !important;
    font-size: 0.95rem !important;
    margin-bottom: 14px;
}
.caja-comentarios .footer-comentarios {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f0e3b0;
}
.caja-comentarios .circulo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.nick-google {
    margin: 0 !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    font-size: 0.95rem;
}
#comentarios .icon-star {
    color: #fbbc04 !important;
    font-size: 0.95rem;
}

/* Imágenes destacadas de los bloques de secciones */
#seccion1 img, #seccion2 img, #seccion3 img, #seccion4 img {
    border-radius: 12px !important;
    border: 1px solid #dee2e6 !important;
}