/* ============================= */
/* CABECERA */
/* ============================= */

.animales-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 10px;
}

.animales-title {
    margin: 0;
    line-height: 1.1;
}

.animales-cabecera .field--name-field-logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.animales-cabecera img {
    max-height: 100%;
    height: 100px;
    width: auto;
}


/* ============================= */
/* CONTENEDOR PRINCIPAL */
/* ============================= */

.animales-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 0 auto;
}

.animales-col-left {
    flex: 1 1 45%;
    min-width: 300px;
}

.animales-col-right {
    flex: 1 1 35%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: right;
}

.animales-taxonomy {
    display: flex;
}

.animales-characteristics {
    margin-top: 15px;
}

.field-animales {
    margin-bottom: 0;
}


/* ============================= */
/* BLOQUE ESTADO */
/* ============================= */

.animales-status-block {
    margin-top: 24px;
}

.animales-status-image img {
    max-width: 100%;
    height: 100%;
}


/* ============================= */
/* AMENAZA */
/* ============================= */

.animales-amenaza {
    margin-bottom: 0px;
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 768px) {

    .animales-cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .animales-cabecera .field--name-field-logos {
        justify-content: flex-start;
    }

    .animales-container {
        flex-direction: column;
        padding-top: 20px;
    }

    .animales-col-right {
        align-items: flex-start;
        text-align: left;
        margin-top: 40px;
    }

    .animales-title {
        font-size: 42px;
    }
}

.field.field--name-field-amenaza.field--type-string.field--label-inline {
    display: flex;
}

.field.field--name-field-estado-actual.field--type-entity-reference.field--label-inline {
    display: flex;
}

.field.field--name-field-termino-especifico.field--type-string.field--label-hidden.field__item {
    font-style: italic;
}


/* ============================= */
/* GALERIA DINAMICA */
/* ============================= */

.animales-galeria {
    margin-top: 40px;
    margin-bottom: 40px;
}

/*
 * KEY FIX: field--name-field-galeria AND field__items are on the SAME element.
 * Use compound selector (no space) instead of child selector.
 */
.animales-galeria .field--name-field-galeria.field__items {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    width: 100%;
    grid-template-areas:
        "big small1"
        "big small2";
}

/* Each gallery item */
.animales-galeria .field--name-field-galeria.field__items>.field__item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
}

/* Propagate height through ALL nested Drupal media wrappers */
.animales-galeria .field--name-field-galeria.field__items>.field__item div {
    height: 100%;
}

/* All images inside gallery: cover entire grid cell */
.animales-galeria .field--name-field-galeria.field__items>.field__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grid area assignments via JS classes */
.animales-galeria .gallery-pos-1 {
    grid-area: small1;
}

.animales-galeria .gallery-pos-2 {
    grid-area: small2;
}

.animales-galeria .gallery-pos-main {
    grid-area: big;
}

/* Responsive gallery */
@media (max-width: 768px) {
    .animales-galeria .field--name-field-galeria.field__items {
        grid-template-columns: 1fr;
        grid-template-rows: 300px 150px 150px;
        grid-template-areas:
            "big"
            "small1"
            "small2";
        gap: 10px;
    }
}

.field.field--name-field-orden.field--type-string.field--label-inline {
    margin-right: 5px;
}

.animales-col-left .field__label::after {
    content: ":";
}

.animales-col-right .field__label::after {
    content: ":";
    margin-right: 5px;
}


/* ============================= */
/* FILTRO ANIMALES — PILL BUTTONS */
/* ============================= */

/* Hide the native select + submit */
.sv-filtro-original {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pill container */
.sv-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

/* ── Animales View: match Atracciones container width ── */
.view-id-filtro_animales {
    max-width: 100%;
}

/* ── Animal Group Sections (Views Grouping) ── */
.sv-animal-group {
    margin-bottom: 48px;
    padding: 0;
    /* Fix: .view-content.row (Bootstrap) es display:flex, por lo que
       .sv-animal-group se convierte en flex item. Sin width:100%, el
       item intenta dimensionarse según el max-width del wrapper interno
       (1390px), rompiendo el layout en mobile. */
    width: 100%;
}

.sv-animal-group__header {
    margin-bottom: 24px;
}

/* Style the taxonomy term entity rendered inside the group header */
.sv-animal-group__header .taxonomy-term {
    position: relative;
}

.sv-animal-group__header .taxonomy-term>h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0px;
    color: var(--text);
}

.sv-animal-group__header .taxonomy-term>h2 a {
    color: inherit;
    text-decoration: none;
}

.sv-animal-group__header .taxonomy-term .field--name-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    opacity: 0.8;
    margin: 0;
    max-width: 600px;
}

.sv-animal-group__header .taxonomy-term .field--name-description p {
    margin: 0;
}

/* Hide contextual links inside the group header */
.sv-animal-group__header .contextual {
    display: none !important;
}

/* Outer wrapper: clips overflow so only 4 + peek are visible */
.sv-animal-carousel-wrapper {
    position: relative;
    overflow: hidden;
    /* Extra horizontal padding gives room for the half-visible arrow buttons */
    padding: 0 40px;
    margin: 0 -40px;
    max-width: calc(1310px + 80px);
    /* 4 cards × 254px + 3 gaps × 24px + 2 × arrow padding */
}

/* The scrollable track */
.sv-animal-carousel {
    display: flex;
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Each card: exactly 4 per row, 5th peeks ~15% */
.sv-carousel-item {
    flex: 0 0 calc(25% - 18px);
    /* (100% - 3*24px) / 4 ≈ 25% - 18px */
    min-width: 0;
}


/* ── Arrow buttons ── */
.sv-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    color: var(--green-900, #2a4123);
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.85;
    padding: 0;
}

.sv-carousel-btn:hover {
    background: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.sv-carousel-btn--prev {
    left: 0;
}

.sv-carousel-btn--next {
    right: 0;
}

/* Hidden state for arrows at extremes */
.sv-carousel-btn--hidden {
    opacity: 0;
    pointer-events: none;
}

/* When group has ≤ 4 items, wrapper needs no extra padding */
.sv-animal-carousel-wrapper.sv-carousel--no-nav {
    padding: 0;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 991px) {

    /* 3 visible + peek */
    .sv-carousel-item {
        flex: 0 0 calc(33.333% - 16px);
    }
}

/* ── Mobile override (≤700px): scroll en el track, wrapper contiene ── */
@media (max-width: 700px) {

    /* Wrapper: corta el overflow, ancho explícito (no infla el DOM padre) */
    .sv-animal-carousel-wrapper {
        overflow: hidden;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        position: relative;
    }

    /* Track: flex container scrollable (scroll aquí, no en el wrapper) */
    .sv-animal-carousel {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        gap: 12px;
        transform: none !important; /* Anula cualquier transform del JS */
        white-space: nowrap;       /* mantiene items en una sola línea */
    }

    .sv-animal-carousel::-webkit-scrollbar {
        display: none;
    }

    /* Items: ancho con vw (evita el problema de % en flex context) */
    .sv-carousel-item {
        flex: 0 0 calc(50vw - 28px);
        max-width: calc(50vw - 28px);
        min-width: 0;
        scroll-snap-align: start;
        display: block; /* reset desde inline-block previo */
    }

    /* Ocultar botones — se usa scroll táctil */
    .sv-animal-carousel-wrapper .sv-carousel-btn {
        display: none !important;
    }

    .sv-animal-carousel-wrapper.sv-carousel--no-nav {
        padding: 0;
        margin: 0;
    }
}

/* Individual pill */
.sv-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--green-900);
    background: transparent;
    color: var(--green-900);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
}

.sv-filter-pill:hover {
    background: rgba(42, 65, 35, 0.08);
    transform: translateY(-1px);
}

/* Active pill */
.sv-filter-pill--active,
.sv-filter-pill--active:hover {
    background: var(--green-900);
    color: #fff;
    border-color: var(--green-900);
}

/* Wrapper */
.sv-filtro-animales-wrapper {
    position: relative;
}


/* ============================= */
/* CARD ANIMALES — OVERLAY TITLE */
/* ============================= */

.card-sendaviva--animales {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.card-image-animales--overlay {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 330px;
}

.card-image-animales--overlay img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    height: 330px;
}

/* Gradient overlay for text readability */
.card-label-animales--overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            transparent 100%);
    z-index: 2;
}

.card-label-animales--overlay .card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.card-label-animales--overlay .card-title a {
    color: #fff;
    text-decoration: none;
}

.card-label-animales--overlay .card-title a:hover {
    text-decoration: underline;
}

/* View grid adjustments for animales */
.view-filtro-animales .views-bootstrap-grid .row {
    gap: 20px 0;
}

.view-filtro-animales .view-content .col-lg-3 {
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 768px) {
    .sv-filter-pills {
        gap: 8px;
    }

    .sv-filter-pill {
        height: 38px;
        padding: 0 18px;
        font-size: 11px;
    }

    .card-label-animales--overlay .card-title {
        font-size: 17px;
    }
}

.taxonomy-term.vocabulary-clasificacion a {
    color: black;
    text-decoration: none;
}

.taxonomy-term.vocabulary-clasificacion h3 {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.view-filtro-animales .node--view-mode-teaser {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ============================= */
/* CARD ATRACCIONES — SAME STYLE AS ANIMALES */
/* ============================= */

.card-sendaviva--atracciones {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 100% !important;
}

.card-image-atracciones--overlay {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 330px;
}

.card-image-atracciones--overlay img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    height: 330px;
}

/* Gradient overlay for text readability */
.card-label-atracciones--overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            transparent 100%);
    z-index: 2;
}

.card-label-atracciones--overlay .card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.card-label-atracciones--overlay .card-title a {
    color: #fff;
    text-decoration: none;
}

.card-label-atracciones--overlay .card-title a:hover {
    text-decoration: underline;
}

/* Remove default node teaser spacing inside atracciones view */
.view-atracciones .node--view-mode-teaser {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .card-label-atracciones--overlay .card-title {
        font-size: 17px;
    }
}


/* ============================= */
/* ATRACCIONES VIEW — GROUP SECTIONS (same as animales) */
/* ============================= */

.sv-atraccion-group {
    margin-bottom: 48px;
}

.sv-atraccion-group__header {
    margin-bottom: 24px;
}

.sv-atraccion-group__header h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--text);
}

.sv-atraccion-group__header h3 a {
    color: inherit;
    text-decoration: none;
}

/* Hide contextual links inside the group header */
.sv-atraccion-group__header .contextual {
    display: none !important;
}

/* ── Netflix-style carousel for atraccion cards ── */

.sv-atraccion-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 40px;
    margin: 0 -40px;
}

.sv-atraccion-carousel {
    display: flex;
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.sv-atraccion-carousel-wrapper.sv-carousel--no-nav {
    padding: 0;
    margin: 0;
}

@media (max-width: 991px) {
    .sv-atraccion-carousel-wrapper {
        padding: 0 36px;
        margin: 0 -36px;
    }
}

@media (max-width: 767px) {
    .sv-atraccion-carousel-wrapper {
        padding: 0 32px;
        margin: 0 -32px;
    }
}

@media (max-width: 480px) {
    .sv-atraccion-carousel-wrapper {
        padding: 0 28px;
        margin: 0 -28px;
    }
}

.view-atracciones .sv-atraccion-group__header a {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--text);
    text-decoration: none;
}


/* ============================= */
/* ATRACCIONES FILTERS — CUSTOM UI */
/* ============================= */

/* Main wrapper: 2-column layout */
.sv-filtro-atracciones-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
}

.sv-filtro-atracciones-left {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sv-filtro-atracciones-right {
    flex: 0 0 auto;
    text-align: center;
}

/* ── Zona title ── */
.sv-zona-title {
    display: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 16px;
    color: var(--text);
}

/* ── Zona pills container ── */
.sv-zona-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* ── Altura filter section ── */
.sv-altura-filter {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}

/* "SIN LÍMITE" pill */
.sv-altura-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--green-900);
    background: transparent;
    color: var(--green-900);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.sv-altura-pill:hover {
    background: rgba(42, 65, 35, 0.08);
}

.sv-altura-pill--active,
.sv-altura-pill--active:hover {
    background: var(--green-900);
    color: #fff;
    border-color: var(--green-900);
}

/* ── Slider track ── */
.sv-altura-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sv-altura-label-left {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--text);
    line-height: 1;
}

.sv-altura-track {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Individual dot + label unit */
.sv-altura-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 6px 8px;
}

/* Connecting line between dots */
.sv-altura-dot-wrap:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right,
            var(--green-900) 0px,
            var(--green-900) 3px,
            transparent 3px,
            transparent 7px);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* The dot itself */
.sv-altura-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--green-900);
    background: transparent;
    position: relative;
    z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sv-altura-dot-wrap:hover .sv-altura-dot {
    transform: scale(1.3);
}

.sv-altura-dot-wrap--active .sv-altura-dot {
    background: var(--green-900);
    transform: scale(1.3);
}

/* "X" marker above active dot */
.sv-altura-dot-wrap--active::before {
    content: "✕";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1;
}

/* Number label below */
.sv-altura-num {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    margin-top: 6px;
    line-height: 1;
}

/* ── Toggle switch (Acompañado por adultos) ── */
.sv-toggle-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 0px;
    margin-top: 40px;
}

.sv-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.sv-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.sv-toggle__slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 999px;
    transition: background 0.3s ease;
}

.sv-toggle__slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.sv-toggle__input:checked+.sv-toggle__slider {
    background: var(--green-900);
}

.sv-toggle__input:checked+.sv-toggle__slider::before {
    transform: translateX(20px);
}

.sv-toggle__label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--text);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sv-filtro-atracciones-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .sv-filtro-atracciones-right {
        text-align: left;
    }

    .sv-zona-pills {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .sv-altura-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .sv-toggle-filter {
        margin-left: 0;
    }

    .sv-altura-slider {
        flex-wrap: wrap;
    }
}

.field.field--name-field-amenaza.field--type-string.field--label-inline .field__label {
    margin-right: 2px !important;
}

/* ── Segundo slider de altura (acompañado) ── */

/* El slider de acompañado empieza oculto; el JS quita esta clase cuando toggle está ON */
.sv-altura-acomp-filter--hidden {
    display: none !important;
}

/* Cuando el toggle está ON, ocultar el slider solo */
.sv-altura-filter--hidden {
    display: none !important;
}

/* Pill activa del slider acompañado (mismos estilos que sv-altura-pill--active) */
.sv-altura-acomp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--green-900);
    background: transparent;
    color: var(--green-900);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.sv-altura-acomp-pill:hover {
    background: rgba(42, 65, 35, 0.08);
}

.sv-altura-acomp-pill--active,
.sv-altura-acomp-pill--active:hover {
    background: var(--green-900);
    color: #fff;
    border-color: var(--green-900);
}

/* El track del segundo slider hereda los mismos estilos de sv-altura-track,
   sv-altura-dot-wrap, sv-altura-dot, sv-altura-num (ya definidos arriba) */
.sv-altura-acomp-track {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}


.sv-atraccion-group {
    padding: 0;
}