/**
 * =============================================================================
 * KS-Semilla Nutriente: SLIDER CAROUSEL - nt-slider-carousel.css
 * -----------------------------------------------------------------------------
 * Contains all styles required for the Slider Carousel functionality.
 * The classes are designed to be self-contained to avoid conflicts with
 * other styles.
 * =============================================================================
 */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    max-height: 87rem; /* Altura ajustada para este proyecto */
}

/* Styles for the slide container */
.slides-container {
    display: flex;
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* Adjust duration and transition curve */
    width: 100%;
}

/* --- State Classes for JavaScript Control (CSP Compliant) --- */

/* Utility class to temporarily disable transitions during slide reordering */
.is-pre-transition {
    transition: none;
}

/* Defines the position of the three visible slides */
.is-at-left {
    transform: translateX(0%);
}
.is-at-center {
    transform: translateX(-100%);
}
.is-at-right {
    transform: translateX(-200%);
}

/* Styles for each slide */
.slide {
    min-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
}

.slide picture,
.slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Styles for the slider navigation */
.slider-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    opacity: 0; /* Hide by default */
    transition: opacity 0.3s ease; /* Smooth the transition */
}

/* Show navigation on hover over the slider container */
.slider-container:hover .slider-nav {
    opacity: 1; /* Show navigation buttons */
}

.slider-nav span {
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: none;
    padding: 1rem;
    cursor: pointer;
}

/**
 * =============================================================================
 * KS-Semilla Nutriente: SLIDER CAROUSEL - custom-slides.css
 * -----------------------------------------------------------------------------
 * This is the CUSTOMIZATION file for the Slider Carousel text overlays.
 *
 * --- HOW TO USE ---
 * 1. Do not edit the core files of the slide above.
 * 2. Edit THIS FILE to change the position, alignment, and style of the
 * text on each slide.
 * 3. Use the modifier classes (.slide--1, .slide--2, etc.) to style
 * each slide individually.
 * 4. A template for a new slide style (.slide--4) is provided at the
 * end of this file to guide you.
 *
 * NOTE ON FONT SIZES:
 * The fluid font sizes (using clamp()) are generated dynamically in the
 * `slider-carousel.php` template file. This file handles the layout and
 * positioning of the text.
 * =============================================================================
 */

/*
 * -----------------------------------------------------------------------------
 * 1. Base Styles for ALL Slide Overlays
 * -----------------------------------------------------------------------------
 * These styles apply to every slide.
 */
.slide--1,
.slide--2,
.slide--3,
.slide--4 {
    position: relative; /* This is crucial for absolute positioning of the overlay. */
}

.slide-text-overlay {
    /* This makes the overlay cover the entire slide area. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* These are Flexbox properties to align the text block inside the overlay. */
    display: flex;
    z-index: 10;
    color: #FFFFFF;
    pointer-events: none; /* Allows clicking through the text to the slide if needed. */
}

.slide-title span {
    display: block; /* Each line of text is a block element. */
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/*
 * =============================================================================
 * 2. Slide-Specific Modifiers
 * -----------------------------------------------------------------------------
 * Each slide has its own modifier class (e.g., .slide--1) to allow for
 * unique layouts. You can copy and paste these blocks to create new styles.
 * =============================================================================
 */

/* --- MODIFIER: Slide 1 (Text aligned to Top-Left) --- */
.slide--1 .slide-text-overlay {
    align-items: flex-start; /* Aligns the block to the top. */
    justify-content: flex-start; /* Aligns the block to the left. */
}

.slide--1 .slide-title {
    text-align: left;
    /* Nudge the entire text block into position. */
    margin-left: 8vw;
    margin-top: -4vw;
}

/* Fine-tune each individual line of text. */
.slide--1 .span-txt-1 {
    font-weight: 700;
    line-height: 5.3;
}
.slide--1 .span-txt-2 {
    font-weight: 700;
    margin-top: -2em;
}
.slide--1 .span-txt-3 {
    font-weight: 200;
    text-transform: none;
    margin-top: -1.2em;
    margin-right: 0.2em;
}


/* --- MODIFIER: Slide 2 (Text aligned to Center-Center) --- */
.slide--2 .slide-text-overlay {
    align-items: flex-start;     /* Aligns the block to the vertical center. */
    justify-content: flex-start; /* Aligns the block to the horizontal center. */
}

.slide--2 .slide-title {
    text-align: left; /* Text inside the block is left-aligned. */
    margin-left: 8vw;
    margin-top: -4vw;
}

.slide--2 .span-txt-1 {
    font-weight: 200;
    line-height: 7.4;
}
.slide--2 .span-txt-2 {
    font-weight: 700;
    margin-top: -2.1em;
}
.slide--2 .span-txt-3 {
    font-weight: 700;
    text-transform: none;
    margin-top: -1.4em;
}


/* --- MODIFIER: Slide 3 (Text aligned to Bottom-Right) --- */
.slide--3 .slide-text-overlay {
    align-items: flex-start;   /* Aligns the block to the bottom. */
    justify-content: flex-start; /* Aligns the block to the right. */
}

.slide--3 .slide-title {
    text-align: left;
    margin-left: 8vw;
    margin-top: -4vw;
}

.slide--3 .span-txt-1 {
    font-weight: 200;
    line-height: 7.9;
}
.slide--3 .span-txt-2 {
    font-weight: 700;
    margin-top: -2.2em;
}
.slide--3 .span-txt-3 {
    font-weight: 700;
    text-transform: none;
    margin-top: -1em;
}

/*
 * =============================================================================
 * 3. Configuration Guide (Template for a New Slide Style)
 * =============================================================================
 * To style a new slide (e.g., with class .slide--4), copy, paste, and
 * uncomment the block below. Then, adjust the values to your liking.
 */

/*
.slide--4 .slide-text-overlay {
    // Step 1: Choose the alignment of the text block.
    // Examples: align-items (flex-start, center, flex-end)
    //           justify-content (flex-start, center, flex-end)
    align-items: center;
    justify-content: flex-start; // e.g., Centered vertically, aligned to the left.
}

.slide--4 .slide-title {
    // Step 2: Position the entire title block using margins.
    text-align: left;
    margin-left: 10vw;
}

.slide--4 .span-txt-1 {
    // Step 3: Style each individual line of text.
    font-weight: 900; // e.g., Black
}

.slide--4 .span-txt-2 {
    font-weight: 400; // e.g., Regular
}

.slide--4 .span-txt-3 {
    font-weight: 400; // e.g., Regular
    text-transform: uppercase;
}
*/

/*
 * -----------------------------------------------------------------------------
 * 4. Fine-tuning for Small Screens (Optional)
 * -----------------------------------------------------------------------------
 * With clamp() and vw units, media queries are often not needed.
 * However, you can use them for very specific adjustments on small devices.
 */
@media (max-width: 480px) {
    .slide--1 .span-txt-3 {
        margin-top: -1.2em;
    }

    .slide--2 .slide-title {
        margin-left: 10vw;
    }
}