/* ====================================================
   1. VARIABLES GLOBALES DEL TEMA (CAP)
   ==================================================== */
:root {
    --cap-gold: #C9A84C;
    --cap-text: #333333;
    --cap-muted: #666666;
    --cap-bg-box: #F9FAFB;
    --cap-border-light: #e5e7eb;
    --cap-white: #ffffff;
    --cap-transition: all 0.3s ease;
}

/* ====================================================
   2. ESTILOS GLOBALES DEL TEMA (Anteriormente en theme.json)
   ==================================================== */

.wp-travel-book,
.wp-element-button,
.wpcf7-submit,
.wp-block-button__link {
    background: #f08039;
    border: none !important;
    color: #fff;
    font-size: 14px;
    padding: 15px 30px !important;
    border-radius: 8px;
}

.splide__arrow {
    background: #f08039 !important;
}
.splide__arrow svg {
    fill: #fff !important;
}

.wp-travel-book:hover,
input.wp-element-button:hover,
.wpcf7-submit:hover,
.wp-block-button__link:hover,
input.wp-element-button:focus,
.wpcf7-submit:focus,
.wp-block-button__link:focus {
    background-color: #F9985B !important;
    color: #fff !important;
    border: none !important;
}

.page-numbers.current,
a:focus,
a:hover {
    color: var(--wp--preset--color--secondary);
}

.wp-block-query-pagination a,
.wp-block-comment-date a,
.wp-block-comment-author-name a,
.wp-block-navigation-submenu a,
.wp-block-navigation-link a,
.wp-block-categories a,
.wp-block-post-title a,
.wp-block-site-title a {
    text-decoration: none !important;
}

.about-section-image-relative {
    z-index: 2;
    position: relative !important;
}

.testimonial-relative-post-content,
.about-relative-post-content {
    z-index: 2;
    position: relative !important;
}

.wpcf7-text {
    width: 100%;
    height: 30px;
}

.wpcf7-textarea {
    width: 100%;
}

.single .wp-block-post-terms a {
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
    margin: 5px;
    text-decoration: none;
}

@media only screen and (max-width: 1000px) {
    .mobile-disable {
        display: none;
    }
}

#banner .splide__arrow--prev {
    left: auto !important;
    right: 1em !important;
    top: 18em !important;
    border-radius: 8px !important;
}
#banner .splide__arrow--next {
    right: 1em;
    border-radius: 8px !important;
}
#trips .splide__arrow--prev {
    left: auto !important;
    right: 8em !important;
    top: 18em !important;
    border-radius: 8px !important;
}
#trips .splide__arrow--next {
    right: 8em;
    border-radius: 8px !important;
}
.splide__arrow {
    opacity: 1 !important;
}
.splide__arrow:hover {
    opacity: .9 !important;
}
.wp-block-post-title a:hover {
    color: #F9985B !important;
}
.z-index-quote {
    z-index: 999;
}
#wptravel-scroll-to-top {
    display: none !important;
}
a {
    text-decoration: none;
}

#wptravel-block-trip-sale {
    padding: 5px 15px;
    background-color: #F83531;
    color: #ffffff;
    border-radius: 8px;
}
.wptravel-block-trip-filters .wp-travel-itinerary-items .wp-travel-form-field select,
.wptravel-block-trip-filters .wp-travel-itinerary-items .wp-travel-form-field input {
    padding: 10px !important;
    border: 1px solid #ccc !important;
    outline: 0;
    background: #f3f3f3 !important;
    border-radius: 8px !important;
}
.wptravel-block-trip-filters .wp-travel-itinerary-items .wp-travel-form-field {
    margin-bottom: 20px !important;
}
.wp-trave-price-range .ui-widget.ui-widget-content {
    top: 12px;
}
.wptravel-block-trip-filters .wp-trave-price-range .ui-slider-horizontal .ui-slider-range {
    background: #F08039 !important;
}
#wptravel-block-trip-code {
    margin-top: 0px;
}

/* Font family */
.dashboard-tab p,
.dashboard-tab,
.dashboard-tab h1,
.dashboard-tab h2,
.dashboard-tab h3,
.dashboard-tab h4,
.dashboard-tab h5,
.dashboard-tab h6 {
    font-family: "Poppins";
}
.dashboard-tab .book-more a {
    background-color: #F9985B !important;
    border-radius: 8px !important;
}
.dashboard-tab .book-more a:hover {
    background-color: #F08039 !important;
}
.dashboard-tab #wp-travel-tab-content-account .button,
#wp-travel-tab-content-address .button {
    background-color: #F9985B !important;
    border-radius: 8px !important;
    padding: 10px 20px;
    border: 0px;
}
.dashboard-tab #wp-travel-tab-content-account .button:hover,
#wp-travel-tab-content-address .button:hover {
    background-color: #F08039 !important;
}
.dashboard-tab select,
.dashboard-tab input.form-control {
    padding: 10px !important;
    border: 1px solid #ccc !important;
    outline: 0;
    background: #f3f3f3 !important;
    border-radius: 8px !important;
}
.dashboard-tab .contact-title a {
    background-color: #F9985B !important;
    border-radius: 10px !important;
}
.dashboard-tab .contact-title a:hover {
    background-color: #F08039 !important;
}
.dashboard-tab .my-order table.order-list-table td .name-title a {
    color: #F08039 !important;
}
.dashboard-tab .dashtab-nav {
    color: #F9985B !important;
}
.dashboard-tab .box-content a:hover {
    color: #F08039;
}
.dashboard-tab .log-out a {
    color: #F9985B;
}
.dashboard-tab .log-out a:hover {
    color: #F08039;
}
.dashboard-tab .onoffswitch-inner:after {
    background-color: #F9985B;
}
.dashboard-tab .onoffswitch-inner:before {
    background-color: #F08039;
}
.dashboard-tab .control-label {
    font-size: 16px !important;
}

@media only screen and (max-width: 1024px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: block !important;
    }
    header .wp-block-navigation__responsive-container {
        display: none !important;
    }
    header .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
    }
}

.taxonomy-post_tag,
.taxonomy-category {
    padding: 5px 20px;
    background: #F8F8F8;
    text-decoration: none !important;
    border-radius: 8px;
}
.single .wp-block-post-terms a {
    border: none !important;
}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
input.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel {
    border: solid 1px #eee;
    height: 35px;
    border-radius: 8px;
}
.wpcf7-textarea {
    border: solid 1px #eee;
    border-radius: 8px;
}
#wp-travel-tab-content-address select {
    height: 44px !important;
}

@media (max-width: 781px) {
    #client-says .is-layout-flex {
        display: flex;
        flex-wrap: wrap !important;
    }
    #client-says .splide__slide img {
        width: 100% !important;
    }
}
@media (max-width: 600px) {
    .splide__arrow {
        display: none !important;
    }
}
.wp-block-heading a:hover {
    color: #f08039;
}
.wptravel-guide-image-block {
    height: auto !important;
    width: 100% !important;
    border-radius: 15px;
}
#wptravel-travel-guide-Review .form-submit input {
    background: #f08039 !important;
    border-radius: 8px !important;
    color: #fff !important;
}
.wptravel-travel-guide-Review {
    position: relative;
    margin-bottom: 30px;
    border: none !important;
}
#client-says {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.back-to-top-icon.right {
    display: none !important;
}
@media (max-width: 781px) {
    .wrap-the-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .wrap-the-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}
.login-page {
    max-width: 632px !important;
}
.login-logo {
    width: auto !important;
}
.travel-code {
    @media (max-width: 768px) {
        margin-top: 638px !important;
    }
}
.travel-code {
    @media (max-width: 600px) {
        margin-top: 300px !important;
    }
}
.side-line {
    @media (max-width: 768px) {
        border-right-width: 0px !important;
    }
}
@media (max-width: 781px) {
    .wptravel-blocks.trip-fixed-departure .fixed-date-dropdown .dropdown-content {
        grid-template-columns: repeat(1, minmax(165px, 1fr)) !important;
    }
}
@media (max-width: 781px) {
    .fixed-date-dropdown .dropdown-content {
        display: grid;
        grid-template-columns: repeat(1, minmax(180px, 1fr)) !important;
    }
}
/* ====================================================
   3. CSS PATRÓN CAP ACTIVIDADES (NOTICIAS)
   ==================================================== */
.wp-block-button.cap-filter-btn { width: 100% !important; margin-bottom: 15px; }
.wp-block-button.cap-filter-btn .wp-block-button__link {
    background: var(--cap-white) !important;
    color: var(--cap-muted) !important;
    border: 2px solid var(--cap-border-light) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-align: center !important;
    transition: var(--cap-transition) !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 45px;
}
.wp-block-button.cap-filter-btn.active .wp-block-button__link {
    background: var(--cap-gold) !important; 
    color: var(--cap-white) !important;
    border-color: transparent !important;
}
.cap-filter-content { width: 100%; position: relative; }
.cap-filter-pane { display: none; opacity: 0; transition: opacity 0.5s ease; }
.cap-filter-pane.active { display: block; opacity: 1; }

/* === LA MAGIA: GRID FLUIDO INTELIGENTE === */
/* Anulamos el grid fijo de Gutenberg y ponemos uno que se auto-ajusta */
.cap-filter-pane .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 25px !important;
}

/* Tarjetas Compactas */
.cap-card-act { 
    background: var(--cap-white); 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    height: 100% !important; /* Iguala alturas */
    border: 1px solid #f0f0f0;
}
.cap-card-act:hover { transform: translateY(-5px); }

/* Ajuste de la imagen */
.cap-card-act .wp-block-post-featured-image { 
    margin: 0 !important; 
    width: 100%; 
    overflow: hidden; 
    line-height: 0; 
    flex-shrink: 0;
}
.cap-card-act .wp-block-post-featured-image img { 
    width: 100% !important; 
    height: 200px !important; 
    object-fit: cover !important; 
    display: block; 
}

.cap-card-act .wp-block-post-title { 
    padding: 15px; 
    font-size: 18px !important; 
    font-weight: 600; 
    color: var(--cap-text); 
    margin: 0 !important; 
    line-height: 1.4; 
    flex-grow: 1;
    
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; 
    text-overflow: ellipsis;
}
.cap-card-act .wp-block-post-title a { 
    text-decoration: none; 
    color: var(--cap-text) !important;
    display: block; 
}

.cap-btn-mas { background: var(--cap-text) !important; color: var(--cap-white) !important; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-block; float: right; }

/* RESPONSIVE PARA BOTONES EN MÓVIL */
@media (max-width: 768px) {
    .wp-block-buttons.is-vertical {
        flex-direction: row !important;
        gap: 10px;
    }
    .wp-block-button.cap-filter-btn {
        width: calc(50% - 5px) !important;
        margin-bottom: 0 !important;
    }
    .cap-card-act .wp-block-post-title {
        font-size: 15px !important;
        padding: 12px;
    }
}
/* En pantallas muy pequeñas, fuerza 1 sola columna para que no se aprieten */
@media (max-width: 600px) {
    .cap-filter-pane .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}
/* ====================================================
   4. CSS PATRÓN CAP MAPA HEXAGONAL (INICIO)
   ==================================================== */
.cap-hex-slider-fix {
    display: flex;
    align-items: flex-start; 
    gap: 60px; 
}

.cap-hex-menu { display: flex; flex-direction: column; align-items: center; gap: 15px; flex-shrink: 0; }
.hex-btn { width: 22px; height: 25px; position: relative; cursor: pointer; transition: var(--cap-transition); }
.hex-bg { width: 100%; height: 100%; background-color: var(--cap-border-light); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: var(--cap-transition); }
.hex-btn:hover { transform: scale(1.1); }
.hex-btn:hover .hex-bg { background-color: #d1d5db; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1)); }
.hex-btn.active { transform: scale(1.2) translateX(10px); }
.hex-btn.active .hex-bg { background-color: var(--cap-gold); filter: drop-shadow(0px 4px 10px rgba(201, 168, 76, 0.4)); }

.cap-hex-data { position: relative; width: 100%; min-height: 400px; }
.data-panel { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateX(40px); transition: var(--cap-transition); }
.data-panel.active { opacity: 1; visibility: visible; transform: translateX(0); position: relative; }

.cap-label { display: inline-block; color: var(--cap-gold); font-size: 14px; font-weight: 700; margin-bottom: 10px; letter-spacing: 1px; }
.cap-title-data { color: var(--cap-text); font-size: clamp(20px, 4vw, 32px); font-weight: 600; margin: 0 0 15px 0; line-height: 1.3; }
.cap-text-data { color: var(--cap-muted); font-size: clamp(14px, 2vw, 16px); line-height: 1.7; margin: 0; max-width: 1200px; }

.map-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 40px;
}
.map-container-custom { 
    position: relative; 
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto; 
    overflow: visible; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.map-peru-custom { 
    width: 100%; 
    height: auto; 
    max-width: 500px; 
    display: block; 
}
.line-layer-custom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
#lineMapCustom { stroke: var(--cap-gold); stroke-width: 2; stroke-dasharray: 5,5; }
.region-custom { 
    fill: var(--cap-border-light); stroke: var(--cap-gold); stroke-width: 2; cursor: pointer; 
    stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: fill 0.3s ease, stroke-dashoffset 2s ease-in-out;
}
.region-custom:hover { fill: #e0e0e0; transform: scale(1.02); transform-origin: center; }
.region-custom.active { fill: var(--cap-gold); }
.draw-active .region-custom { stroke-dashoffset: 0 !important; }

.map-stats-column { display: flex; flex-direction: column; gap: 30px; }
.stat-item-custom { border-bottom: 2px solid var(--cap-border-light); padding-bottom: 15px; }
.stat-item-custom:last-child { border-bottom: none; }
.stat-number {
    display: block;
    font-size: clamp(40px, 7vw, 62px);
    font-weight: 800;
    color: var(--cap-gold);
    line-height: 1;
    margin-bottom: 5px;
}
.stat-desc {
    display: block;
    font-size: clamp(12px, 2vw, 16px);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cap-muted);
    font-weight: 600;
}

.info-box-custom { background: var(--cap-bg-box); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid var(--cap-border-light); }
.info-header-custom { background: var(--cap-gold); color: var(--cap-white); padding: 15px; font-style: italic; font-weight: bold; font-size: 16px; }
.info-body-custom { padding: 15px; font-size: 14px; color: var(--cap-text); min-height: 150px; }
.info-body-custom p { margin: 6px 0; }
.info-body-custom strong { color: var(--cap-gold); }

/* RESPONSIVE MAPA HEXAGONAL */
@media (max-width: 992px) {
    .map-layout-wrapper { 
        grid-template-columns: 1fr; 
        text-align: center;
        gap: 30px;
    }
    .map-stats-column { 
        flex-direction: row; 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 20px; 
        margin-bottom: 10px;
    }
    .stat-item-custom { 
        border-bottom: none; 
        border-right: 2px solid var(--cap-border-light); 
        padding-bottom: 0; 
        padding-right: 20px;
        min-width: 100px;
    }
    .stat-item-custom:last-child { 
        border-right: none; 
        padding-right: 0;
    }
    .cap-hex-data { min-height: auto; }
    .info-box-custom {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
    .line-layer-custom {
        display: none;
    }
}

@media (max-width: 768px) {
    .cap-hex-slider-fix { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 30px; 
    }
    .cap-hex-menu { 
        flex-direction: row; 
        justify-content: center; 
    }
    .hex-btn.active { 
        transform: scale(1.2) translateY(-5px); 
    }
    .data-panel { transform: translateY(20px); }
    .data-panel.active { transform: translateY(0); }
}

/* ====================================================
   5. CSS PATRÓN CAP VALORES OFICIALES
   ==================================================== */
.cap-valores-section { padding: 80px 0; }
.cap-valores-info { display: flex; flex-direction: column; gap: 20px; }
.cap-valores-title { 
    font-size: clamp(32px, 5vw, 70px); 
    font-weight: 700; 
    line-height: 1.3; 
    color: var(--cap-text); 
}
.cap-valores-desc { 
    font-size: clamp(18px, 3vw, 30px); 
    color: var(--cap-muted); 
    line-height: 1.7; 
}

/* Estilos extra para el tag y botón (si no los tienes ya) */
.cap-tag { display: inline-block; width: fit-content; background: var(--cap-gold); color: var(--cap-bg-box); padding: 8px 15px; border-radius: 50px; font-weight: 600; font-size: 14px; margin: 0; }
.cap-valores-btn .wp-block-button__link { background: var(--cap-text); color: var(--cap-white); border-radius: 50px; padding: 12px 30px; }

/* Grid de tarjetas */
.cap-valores-cards { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    overflow: visible; 
}
.cap-valores-card { 
    position: relative; 
    border-radius: 12px; 
    overflow: hidden; 
    cursor: pointer; 
    margin: 0;
}
.cap-valores-card.card-h-1 { height: 300px; }
.cap-valores-card.card-h-2 { height: 210px; align-self: end; }
.cap-valores-card.card-h-3 { height: 210px; transform: translateX(20px); }
.cap-valores-card.card-h-4 { height: 300px; transform: translateX(20px); }

/* Ajuste de imágenes nativas de Gutenberg */
.cap-valores-card .wp-block-image { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    z-index: 1;
}
.cap-valores-card .wp-block-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.4s ease; 
}
.cap-valores-card:hover .wp-block-image img { transform: scale(1.08); }

/* LA MAGIA: El enlace de la imagen cubre toda la tarjeta */
.cap-valores-card .wp-block-image a {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; /* Se pone encima de la imagen */
}

/* Overlay y Texto (Deben dejar pasar el clic) */
.cap-valores-card-overlay { 
    position: absolute !important; 
    bottom: 0; left: 0; width: 100%; height: 55%; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); 
    pointer-events: none; /* Permite que el clic pase al enlace */
    z-index: 2; 
    margin: 0 !important; padding: 0 !important; 
}
.cap-valores-card-text { 
    position: absolute; bottom: 16px; left: 18px; 
    color: var(--cap-white); font-size: 18px; font-weight: 600; z-index: 3; 
    pointer-events: none; /* Permite que el clic pase al enlace */
    margin: 0 !important; padding: 0 !important; 
}

/* Estado activo */
.cap-valores-card.cap-valores-active { outline: 3px solid var(--cap-gold); outline-offset: -3px; }
.cap-valores-card.cap-valores-active .cap-valores-card-text { color: #E6C675; }

/* Responsive */
@media (max-width: 768px) {
    .cap-valores-cards { grid-template-columns: 1fr; }
    .cap-valores-card.card-h-3, .cap-valores-card.card-h-4 { transform: translateX(0); }
    .cap-valores-card.card-h-2 { align-self: auto; }
}

/* ====================================================
   6. CSS PATRÓN CAP SECCIONES CONSULTADAS (CARRUSEL)
   ==================================================== */
.cap-section-box { 
    background: var(--cap-bg-box); 
    border-radius: 25px; 
    padding: 40px;
}

.cap-secciones-header { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 15px; 
}
.cap-title-sec { 
    font-size: 20px; 
    font-weight: 500; 
    margin: 0; 
    color: var(--cap-text); 
}
.cap-icon-search { font-size: 20px; }
.cap-divider { 
    height: 1px; 
    background: var(--cap-border-light); 
    margin-bottom: 30px; 
}

/* Tarjetas */
.card-cap {
    position: relative;
    border-radius: 12px; /* var(--cap-radius) si lo tienes definido, si no 12px */
    overflow: hidden;
    transition: var(--cap-transition);
    display: block;
    text-decoration: none;
}
.card-cap img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: var(--cap-transition);
}
.card-cap:hover { transform: translateY(-5px); }
.card-cap:hover img { transform: scale(1.05); }
.card-cap .overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
}
.card-cap span {
    position: absolute;
    bottom: 15px; left: 18px;
    color: var(--cap-white);
    font-size: 16px;
    font-weight: 600;
    z-index: 2;
}

/* Estilos de las flechas del carrusel (Swiper) */
.cap-swiper { padding: 0 5px 10px 5px; overflow: visible; }
.cap-swiper .swiper-button-next, 
.cap-swiper .swiper-button-prev {
    color: var(--cap-text);
    background: var(--cap-white);
    width: 40px; height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cap-swiper .swiper-button-next:after, 
.cap-swiper .swiper-button-prev:after {
    font-size: 16px; font-weight: bold;
}



/* ====================================================
   7. CSS MAPA REGIONAL INDEPENDIENTE (2 COLUMNAS)
   ==================================================== */
.cap-reg-wrapper { padding: 60px 0; }
.cap-reg-title { text-align: center; font-size: clamp(28px, 4vw, 40px); color: var(--cap-text); margin-bottom: 40px; font-weight: 700; }

/* Grid principal de 2 columnas */
.cap-reg-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: stretch; /* Hace que el InfoCard ocupe todo el alto */
    max-width: 1100px;
    margin: 0 auto;
}

/* Columna 1: Mapa */
.cap-reg-map-container { position: relative; width: 100%; overflow: visible; display: flex; align-items: center; justify-content: center; }
.cap-reg-svg-peru { width: 100%; height: auto; max-width: 500px; display: block; }
.cap-reg-line-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.cap-reg-line { stroke: var(--cap-gold); stroke-width: 2; stroke-dasharray: 5,5; }
.cap-reg-path { 
    fill: var(--cap-border-light); stroke: var(--cap-gold); stroke-width: 2; cursor: pointer; 
    transition: fill 0.3s ease; 
}
.cap-reg-path:hover { fill: #e0e0e0; }
.cap-reg-path.active { fill: var(--cap-gold); }

/* Columna 2: Caja de Información Grande */
.cap-reg-info-card { 
    background: var(--cap-bg-box); 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    border: 1px solid var(--cap-border-light); 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}
.cap-reg-info-header { background: var(--cap-gold); color: var(--cap-white); padding: 20px; font-style: italic; font-weight: bold; font-size: 22px; text-align: center; }

/* Cuerpo del InfoCard con 2 columnas internas */
.cap-reg-info-body { padding: 25px; flex-grow: 1; display: flex; }
.cap-reg-placeholder { text-align: center; color: #888; margin: auto; font-size: 15px; }

.cap-reg-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    width: 100%;
    align-items: center;
}
.cap-reg-inner-col { display: flex; flex-direction: column; gap: 15px; }
.cap-reg-inner-col.left { border-right: 2px solid var(--cap-border-light); padding-right: 20px; text-align: center; }
.cap-reg-stat-num { font-size: 42px; font-weight: 800; color: var(--cap-gold); line-height: 1; }
.cap-reg-stat-lbl { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--cap-muted); font-weight: 600; }
.cap-reg-inner-col.right .label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--cap-muted); font-weight: 600; margin-bottom: 4px; }
.cap-reg-inner-col.right .value { font-size: 16px; color: var(--cap-text); font-weight: 600; margin-bottom: 15px; line-height: 1.4; }

/* Responsive */
@media (max-width: 992px) {
    .cap-reg-grid { grid-template-columns: 1fr; }
    .cap-reg-line-layer { display: none; }
}


/* ====================================================
   8. CSS CARRUSEL SERVICIOS (5 CARDS + FLECHAS)
   ==================================================== */
.cap-srv-section-box { 
    background: #fff; 
    border-radius: 25px; 
    padding: 40px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
    max-width: 1200px; 
    margin: 0 auto;
}
.cap-srv-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.cap-srv-icon-search { font-size: 20px; }
.cap-srv-title-sec { font-size: 20px; font-weight: 500; margin: 0; color: var(--cap-text); }
.cap-srv-divider { height: 1px; background: var(--cap-border-light); margin-bottom: 40px; }

/* Contenedor relativo para las flechas */
.cap-srv-scroll-wrapper { position: relative; max-width: 1100px; margin: 0 auto; }

/* Carrusul Scroll-Snap */
.cap-srv-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 40px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cap-srv-scroll::-webkit-scrollbar { display: none; }

/* Tarjetas (Tamaño para 5 en escritorio) */
.card-srv-cap {
    scroll-snap-align: center;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    height: 220px; 
    flex: 0 0 200px; /* Ancho fijo para que quepan 5 */
    background: #f0f0f0;
    opacity: 0.4; /* Laterales semitransparentes */
    transform: scale(0.85); /* Laterales más pequeños */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Tarjeta Activa (La del centro grande) */
.card-srv-cap.is-active {
    opacity: 1;
    transform: scale(1.1); /* Se agranda */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    z-index: 10;
}

.card-srv-cap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-srv-cap .srv-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    pointer-events: none;
}
.card-srv-cap span {
    position: absolute; bottom: 15px; left: 15px;
    color: var(--cap-white); font-size: 15px; font-weight: 600; z-index: 2;
}

/* Flechas Nativas */
.cap-srv-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 45px; height: 45px;
    border-radius: 50%;
    background: var(--cap-white);
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 20px;
    color: var(--cap-text);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
.cap-srv-nav-btn:hover { transform: translateY(-50%) scale(1.1); }
.cap-srv-prev { left: -22px; }
.cap-srv-next { right: -22px; }

/* En móviles, tarjetas un poco más grandes para que se vea bien */
@media (max-width: 768px) {
    .card-srv-cap { flex: 0 0 260px; height: 260px; }
    .cap-srv-prev { left: -10px; }
    .cap-srv-next { right: -10px; }
}

/* ====================================================
   9. CSS PATRÓN NOTICIAS TABS (4 CARDS - INDEPENDIENTE)
   ==================================================== */
.cap-news-wrapper { padding: 60px 0; max-width: 1200px; margin: 0 auto; }
.cap-news-title { text-align: center; font-size: clamp(28px, 4vw, 40px); color: var(--cap-text); margin-bottom: 30px; font-weight: 700; line-height: 1.3; }

/* Botones centrados debajo del título */
.cap-news-btns { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }
.wp-block-button.cap-news-btn { width: auto !important; margin: 0 !important; }
.wp-block-button.cap-news-btn .wp-block-button__link {
    background: var(--cap-white) !important;
    color: var(--cap-muted) !important;
    border: 2px solid var(--cap-border-light) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: var(--cap-transition) !important;
    padding: 12px 35px !important;
}
.wp-block-button.cap-news-btn.active .wp-block-button__link {
    background: var(--cap-gold) !important; 
    color: var(--cap-white) !important;
    border-color: transparent !important;
}

/* Paneles (Tabs) */
.cap-news-pane { display: none; opacity: 0; transition: opacity 0.5s ease; }
.cap-news-pane.active { display: block; opacity: 1; }

/* Grid de 4 columnas inteligente */
.cap-news-pane .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    align-items: start !important; /* Evita que el grid estire las tarjetas */
}
@media (max-width: 1024px) and (min-width: 769px) {
    .cap-news-pane .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .cap-news-pane .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

/* Tarjetas (Sin height: 100% para que se adapten a su contenido) */
.cap-news-card { 
    background: var(--cap-white); 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    border: 1px solid #f0f0f0;
}
.cap-news-card:hover { transform: translateY(-5px); }
.cap-news-card .wp-block-post-featured-image { 
    margin: 0 !important; 
    width: 100%; 
    overflow: hidden; 
    line-height: 0; 
    flex-shrink: 0;
}
.cap-news-card .wp-block-post-featured-image img { 
    width: 100% !important; 
    height: 200px !important; 
    object-fit: cover !important; 
    display: block; 
}
.cap-news-card .wp-block-post-title { 
    padding: 15px; 
    font-size: 18px !important; 
    font-weight: 600; 
    color: var(--cap-text); 
    margin: 0 !important; 
    line-height: 1.4; 
    /* Se eliminó el flex-grow: 1 para que el texto no sea empujado hacia abajo */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden; 
    text-overflow: ellipsis;
}
.cap-news-card .wp-block-post-title a { 
    text-decoration: none; 
    color: var(--cap-text) !important;
    display: block; 
}
/* ====================================================
   9. CSS VIDEO HERO (BLOQUE NATIVO)
   ==================================================== */
.wp-block-video.cap-hero-video {
    margin: 0;
    width: 100%;
}

.wp-block-video.cap-hero-video video {
    width: 100% !important;
    height: 80vh !important;
    min-height: 500px !important;
    object-fit: cover !important;
    display: block;
}