/**
 * hero.css — Hero Principal
 * RC-20 | Figma nodeId 120:713
 *
 * Specs exactos:
 *  - Gradiente: linear-gradient(160.74deg, #004E5A → #003840)
 *  - Imagen de fondo: opacity 0.30, cover
 *  - Padding lateral: 218px (posición del contenido en canvas 1600px)
 *  - Padding vertical: top 114px, bottom 80px
 *  - Título: Inter 800, 60px, blanco, lh 75px, tracking -1.2363px
 *  - Subtítulo: Inter 400, 20px, rgba(255,255,255,0.9), lh 32.5px
 *  - Gap entre elementos: 19px
 *  - Espacio extra antes del botón: ~46px (65px spacer - 19px gap)
 *  - Botón: bg #fff, texto #004E5A, Roboto 500, 20px, border-radius 66px, padding 10px 20px
 */

/* ── Sección hero ──
   Figma: gradiente como fondo base + imagen encima a opacity: 0.3
   Background spec del Figma:
     background: url(img) lightgray -0.437px -731.381px / 119.617% 273.997% no-repeat;
     opacity: 0.3 (sobre el gradiente)
── */
.hero {
    position: relative;
    width: 100%;
    min-height: 599px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #014651;
}

/* ── Capa 2 — imagen de fondo ── */
.hero__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* ── Capa 3 — contenido ── */
.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    /* Padding lateral que reproduce la posición del Figma (218px en canvas 1600px)
       Escalado al container: usamos 100px + gutter del sitio */
    padding-inline: clamp(24px, 8vw, 218px);
    padding-block: 114px 80px;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 19px;
    max-width: 780px;   /* suficiente para que el H1 de 60px quede en 2 líneas */
}

/* ── Título H1 ── */
/* Figma: Inter ExtraBold 800, 60px, #fff, lh 75px, tracking -1.2363px */
.hero__title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 60px;
    color: #FFFFFF;
    line-height: 75px;
    letter-spacing: -1.2363px;
    max-width: 730px;  /* Figma: width 730px — garantiza 2 líneas */
    width: 100%;
    margin: 0;
}

/* ── Subtítulo ── */
/* Figma: Inter Regular 400, 20px, rgba(255,255,255,0.9), lh 32.5px, tracking -0.4492px */
.hero__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32.5px;
    letter-spacing: -0.4492px;
    max-width: 610px;
    margin: 0;
}

/* ── Botón CTA ── */
/* Figma: bg blanco, texto #004E5A, Roboto Medium 500, 20px, border-radius 66px, padding 10px 20px — SIN ícono */
.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: #004E5A;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    white-space: nowrap;
    border-radius: 66px;
    padding: 10px 20px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    min-height: 44px;
    margin-block-start: 80px;
    align-self: flex-start;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.15s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
    background-color: var(--color-secondary-1);
    color: #FFFFFF;
    box-shadow: 0 6px 24px rgba(68, 138, 43, 0.4);
    transform: translateY(-2px);
}

.hero__cta:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1100px) {
    .hero__title {
        font-size: 48px;
        line-height: 60px;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .hero {
        min-height: 480px;
    }

    .hero__inner {
        padding-inline: 24px;
        padding-block: 72px 56px;
    }

    .hero__content {
        max-width: 90%;
        gap: 14px;
    }

    .hero__title {
        font-size: 26px;
        line-height: 34px;
        letter-spacing: -0.5px;
        max-width: 100%;
        width: 100%;
    }

    .hero__subtitle {
        font-size: 16px;
        line-height: 26px;
        max-width: 100%;
    }

    .hero__cta {
        font-size: 15px;
        padding: 10px 24px;
        align-self: flex-start;  /* no ocupa todo el ancho */
        margin-block-start: 28px;
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .hero {
        min-height: 420px;
    }

    .hero__inner {
        padding-inline: 20px;
        padding-block: 60px 48px;
    }

    .hero__content {
        max-width: 90%;
    }

    .hero__title {
        font-size: 28px;
        line-height: 36px;
    }

    .hero__subtitle {
        font-size: 15px;
        line-height: 24px;
    }

    .hero__cta {
        font-size: 14px;
        padding: 9px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__cta { transition: none; }
}
/**
 * que-es.css — Sección "¿Qué es Recoplast?" (2 partes + flecha decorativa)
 * RC-21 | Figma nodeId 120:723
 *
 * Specs:
 *  - Fondo: #004E5A (teal oscuro)
 *  - Padding: 128px vertical, 80px lateral (en canvas 1600px)
 *  - H2: Inter ExtraBold 48px, blanco, centrado, tracking -0.8484px
 *  - Párrafo: Roboto Light 20px, blanco, centrado, max-width 887px, lh 30px
 *  - 2 columnas: imagen (559×421px, border-radius 24px) + card (560×421px, glass, border-radius 14px)
 *  - H3 Propósito: Roboto Bold 32px, blanco
 *  - Texto card: Roboto Light 20px, blanco, lh 30px
 */

/* ══════════════════════════════════════════════
   PARTE 1 — Sección blanca (intro)
   Figma nodeId 120:104
   Fondo: #FAFAFA | Texto: Roboto Light 20px #4E4F4F
   Botón: "Conoce más" bg #004E5A blanco con flecha
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   WRAPPER — Group557 como background de ambas secciones
══════════════════════════════════════════════ */

.que-es-wrapper {
    position: relative;
    width: 100%;
    margin-block-start: 20px;
    overflow: hidden;
}

/* Imagen de fondo absolutamente posicionada — cubre todo el wrapper */
.que-es-wrapper__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.que-es-wrapper__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 88% !important;
    display: block;
}

/* ── PARTE 1: Intro — sin fondo propio, el Group557 se ve a través ── */
.que-es-intro {
    background-color: transparent;
    padding-block-start: 144px;
    padding-block-end: 0;
    padding-inline: 80px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.que-es-intro__inner {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-inline-start: calc((100% - 1440px) / 2 + 80px);
}

/* Texto — Roboto Light 20px, #4E4F4F, lh 30px, tracking -0.1504px */
.que-es-intro__text p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #4E4F4F;
    line-height: 30px;
    letter-spacing: -0.1504px;
    margin-block-end: 0;
}

.que-es-intro__text p + p {
    margin-block-start: 16px;
}

/* Botón "Conoce más" — bg #004E5A, blanco, Roboto Medium 20px, border-radius 66px */
.que-es-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #004E5A;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    border-radius: 66px;
    padding: 10px 20px;
    text-decoration: none;
    align-self: flex-start;
    min-height: 44px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.que-es-intro__btn:hover,
.que-es-intro__btn:focus-visible {
    background-color: var(--color-secondary-1);
    color: #FFFFFF;
    transform: translateY(-1px);
}


/* ══════════════════════════════════════════════
   PARTE 2 — Sección teal
══════════════════════════════════════════════ */

/* ── PARTE 2: Teal — sin fondo propio, el Group557 se ve a través ── */
.que-es {
    background-color: transparent;
    padding-block-start: 389px;
    padding-block-end: 160px;
    padding-inline: 80px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.que-es__inner {
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    /* padding-block-start: 80px; */
    padding-block-end: 57px;
}

/* ── Header de la sección ── */
.que-es__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* H2 — Inter ExtraBold 48px, blanco, centrado */
.que-es__title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 48px;
    color: #FFFFFF;
    text-align: center;
    line-height: 48px;
    letter-spacing: -0.8484px;
    margin: 0;
}

/* Párrafo — Roboto Light 20px, blanco, centrado, max-width 887px */
.que-es__subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    letter-spacing: -0.1504px;
    max-width: 887px;
    margin: 0;
}

/* ── Layout 2 columnas ── */
/* Figma: imagen 559px + gap 31px + card 560px = 1150px total
   Alineado a la izquierda con el texto de introducción */
.que-es__grid {
    display: grid;
    grid-template-columns: 559px 560px;
    gap: 31px;
    align-items: start;
    width: fit-content;
    margin-inline-start: 80px; /* alinea con el intro text (80px padding section + 80px inner) */
    margin-inline-end: auto;
    padding-block-start: 48px;
}

/* ── Columna izquierda: Imagen ── */
.que-es__image-wrap {
    border-radius: 24px;
    overflow: hidden;
    height: 421px;
    flex-shrink: 0;
}

.que-es__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Columna derecha: Card "Propósito" ── */
/* Figma: bg rgba(255,255,255,0.1), border-radius 14px, padding 24px */
.que-es__card {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 24px;
    height: 421px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* H3 "Propósito" — Roboto Bold 32px, blanco, tracking 0.0703px */
.que-es__card-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #FFFFFF;
    line-height: 32px;
    letter-spacing: 0.0703px;
    margin: 0;
    flex-shrink: 0;
}

/* Texto del propósito — Roboto Light 20px, blanco, lh 30px */
.que-es__card-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 30px;
    letter-spacing: -0.1504px;
    margin: 0;
    overflow: hidden;
    padding-right: 34.5px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── MONITOR ≥ 1600px ── */
@media (min-width: 1600px) {
    .que-es-wrapper__bg-img {
        object-position: center 30% !important;
    }
}

/* ── TABLET ≤ 1250px ── */
@media (max-width: 1250px) {
    .que-es-wrapper {
        min-height: unset;
    }

    .que-es-intro {
        padding-inline: 40px;
    }

    .que-es-intro__inner {
        margin-inline-start: 0;
    }

    .que-es {
        padding-inline: 40px;
        padding-block-start: 280px;
    }

    .que-es__grid {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin-inline-start: 0;
    }

    .que-es__image-wrap {
        height: 360px;
    }

    .que-es__card {
        height: 360px;
    }

    .que-es__card-text {
        padding-right: 16px;
    }
}

/* ── MOBILE ≤ 900px ── */
@media (max-width: 900px) {
    /* En mobile: ocultar imagen de fondo; color sólido solo en la sección teal */
    .que-es-wrapper__bg {
        display: none;
    }

    .que-es {
        background-color: #004E5A;
    }

    .que-es-intro {
        padding-inline: 24px;
        padding-block-start: 80px;
        padding-block-end: 56px;
    }

    .que-es {
        padding-block-start: 60px;
        padding-block-end: 60px;
        padding-inline: 24px;
    }

    .que-es__title {
        font-size: 32px;
        line-height: 38px;
    }

    .que-es__subtitle {
        font-size: 16px;
        line-height: 26px;
    }

    /* Stack vertical en mobile */
    .que-es__grid {
        grid-template-columns: 1fr;
        padding-block-start: 32px;
        width: 100%;
        margin-inline-start: 0;
    }

    .que-es__image-wrap {
        height: 260px;
        border-radius: 16px;
    }

    .que-es__card {
        height: auto;
        min-height: unset;
    }

    .que-es__card-title {
        font-size: 24px;
        line-height: 30px;
    }

    .que-es__card-text {
        font-size: 16px;
        line-height: 26px;
        padding-right: 0;
    }

    .que-es-intro__text p {
        font-size: 17px;
    }

    .que-es-intro__btn {
        font-size: 16px;
        padding: 10px 18px;
    }
}

/* ── MÓVIL PEQUEÑO ≤ 480px ── */
@media (max-width: 480px) {
    .que-es-intro {
        padding-inline: 16px;
        padding-block-start: 60px;
    }

    .que-es {
        padding-inline: 16px;
    }

    .que-es__title {
        font-size: 26px;
        line-height: 32px;
    }

    .que-es__image-wrap {
        height: 220px;
    }
}
/**
 * reduce-reusa.css — Sección "Reduce, Reusa, Recicla"
 * RC-22 | Figma nodeIds 120:195 (card), 120:196 (heading), 120:197 (párrafo)
 *
 * Specs (canvas 1600px):
 *  - Card: #DAF3F0, 56.25% ancho (900/1600), min-height 410px
 *    border-radius: 0 204px 0 0 (solo esquina top-right)
 *    padding: 103px 80px 99px 104px
 *  - Heading: Roboto 900 96px, 3 colores: #5F9FCB / #004E5A / #448A2B
 *  - Párrafo: Roboto Light 20px, #4E4F4F, lh 30px, max-width 479px
 */

/* ══════════════════════════════════════════════
   SECCIÓN
══════════════════════════════════════════════ */

.reduce-reusa {
	width: 100%;
	display: flex;
	align-items: stretch;
	min-height: 410px;
	background-color: #FAFAFA;
}

/* ── Card izquierda: rectángulo mint ── */
.reduce-reusa__card {
	flex: 0 0 56.25%;
	background-color: #DAF3F0;
	border-radius: 0 204px 0 0;
	padding: 103px 80px 99px 104px;
	display: flex;
	align-items: center;
	margin-top: -65px;
	z-index: 9;
}

/* ── Heading display ── */
/* Figma: Roboto ExtraBold ≈ weight 900 (Roboto no tiene 800 como estático) */
.reduce-reusa__heading {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 96px;
	line-height: 1.1;
	margin: 0;
	word-break: break-word;
}

/* Colores exactos del Figma */
.reduce-reusa__word--blue  { color: #5F9FCB; } /* "Reduce, "  */
.reduce-reusa__word--teal  { color: #004E5A; } /* "Reusa"      */
.reduce-reusa__word--green { color: #448A2B; } /* "Recicla."   */

/* ── Columna derecha: párrafo ── */
.reduce-reusa__content {
	flex: 1;
	display: flex;
	align-items: center;
	padding-inline-start: 57px;  /* gap entre card y párrafo = 957-900 en Figma */
	padding-inline-end: 80px;
}

.reduce-reusa__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #4E4F4F;
	line-height: 30px;
	letter-spacing: -0.1504px;
	max-width: 479px;
	margin: 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1400px ── */
@media (max-width: 1400px) {
	.reduce-reusa__heading {
		font-size: 80px;
	}

	.reduce-reusa__card {
		padding: 80px 60px 80px 80px;
		border-radius: 0 160px 0 0;
	}
}

/* ── Tablet ≤ 1100px ── */
@media (max-width: 1100px) {
	.reduce-reusa__heading {
		font-size: 64px;
	}

	.reduce-reusa__card {
		padding: 60px 48px 60px 56px;
		border-radius: 0 120px 0 0;
	}

	.reduce-reusa__content {
		padding-inline-start: 40px;
		padding-inline-end: 40px;
	}
}

/* ── Mobile ≤ 900px: stack vertical ── */
@media (max-width: 900px) {
	.reduce-reusa {
		flex-direction: column;
	}

	.reduce-reusa__card {
		flex: none;
		width: 100%;
		border-radius: 0 80px 0 0;
		padding: 60px 24px 60px 24px;
		justify-content: center;
	}

	.reduce-reusa__heading {
		font-size: 56px;
		text-align: center;
	}

	.reduce-reusa__content {
		padding: 40px 24px;
		justify-content: center;
	}

	.reduce-reusa__text {
		max-width: 100%;
		text-align: center;
	}
}

/* ── Móvil pequeño ≤ 480px ── */
@media (max-width: 480px) {
	.reduce-reusa__heading {
		font-size: 42px;
	}

	.reduce-reusa__card {
		border-radius: 0 60px 0 0;
		padding-block: 48px;
	}
}
/**
 * modelo-gestion.css — Sección "Modelo de Gestión" (cards de actores)
 * RC-23 | Figma nodeId 121:750 (ThreeRsSection)
 *
 * Specs (canvas 1600px):
 *  - Section: bg #FFFFFF, pt 128px, px 229.5px → max-width ~1140px
 *  - Título: Inter ExtraBold 60px, #448A2B, lh 60px, tracking -1.2363px
 *  - Subtítulo: Roboto Light 20px, #004E5A, lh 30px, tracking -0.1504px
 *  - Cards: 352×264px, gap 32px, fila 1: 3 cards / fila 2: 2 cards centradas
 *  - Avatar: 96×96px, bg rgba(68,138,43,0.10), círculo completo
 *  - Iniciales: Inter ExtraBold 36px, #448A2B
 *  - H3: Inter Bold 24px, #004E5A, lh 32px, tracking 0.0703px
 *  - Descripción: Roboto Light 16px, #004E5A, lh 24px, tracking -0.1504px
 */

/* ══════════════════════════════════════════════
   SECCIÓN
══════════════════════════════════════════════ */

.modelo-gestion {
	width: 100%;
	background-color: #FFFFFF;
	padding-block-start: 128px;
	padding-block-end: 80px;
	padding-inline: 80px;
}

.modelo-gestion__inner {
	max-width: 1140px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Encabezado ── */
.modelo-gestion__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	width: 100%;
	margin-block-end: 82px; /* 58px padding interior Figma + 24px gap a las cards */
}

/* H2 — Inter ExtraBold 60px, #448A2B */
.modelo-gestion__title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 60px;
	color: #448A2B;
	text-align: center;
	line-height: 60px;
	letter-spacing: -1.2363px;
	margin: 0;
}

/* Subtítulo — Roboto Light 20px, #004E5A */
.modelo-gestion__subtitle {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #004E5A;
	text-align: center;
	line-height: 30px;
	letter-spacing: -0.1504px;
	margin: 0;
}

/* ── Grid de actores — flex-wrap centrado ──
   Con 5 cards de 352px + gap 32px: la primera fila cabe 3 (1120px ≤ 1140px max-width)
   y las 2 restantes se centran solas en la segunda fila. */
.modelo-gestion__actors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	width: 100%;
}

/* ══════════════════════════════════════════════
   ACTOR CARD
══════════════════════════════════════════════ */

.actor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 352px;
	flex-shrink: 0;
	min-height: 264px;
}

/* Círculo avatar */
.actor-card__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: rgba(68, 138, 43, 0.10);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-block-end: 24px;
}

/* Iniciales — Inter ExtraBold 36px, #448A2B */
.actor-card__initials {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 36px;
	color: #448A2B;
	line-height: 40px;
	letter-spacing: 0.3691px;
	text-align: center;
}

/* Cuerpo de la card */
.actor-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* H3 — Inter Bold 24px, #004E5A */
.actor-card__title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #004E5A;
	text-align: center;
	line-height: 32px;
	letter-spacing: 0.0703px;
	margin: 0;
}

/* Descripción — Roboto Light 16px, #004E5A */
.actor-card__desc {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #004E5A;
	text-align: center;
	line-height: 24px;
	letter-spacing: -0.1504px;
	max-width: 302px;
	margin: 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1300px: cards ligeramente más pequeñas ── */
@media (max-width: 1300px) {
	.modelo-gestion {
		padding-inline: 48px;
	}

	.actor-card {
		width: 300px;
	}
}

/* ── Tablet ≤ 1000px: 2 columnas en fila top, 1 en bottom ── */
@media (max-width: 1000px) {
	.modelo-gestion {
		padding-inline: 40px;
	}

	.modelo-gestion__row {
		flex-wrap: wrap;
		justify-content: center;
	}

	.actor-card {
		width: 280px;
	}

	.modelo-gestion__title {
		font-size: 48px;
		line-height: 52px;
	}
}

/* ── Mobile ≤ 700px: 2 columnas ── */
@media (max-width: 700px) {
	.modelo-gestion {
		padding-block-start: 80px;
		padding-block-end: 60px;
		padding-inline: 24px;
	}

	.modelo-gestion__header {
		margin-block-end: 48px;
	}

	.modelo-gestion__title {
		font-size: 36px;
		line-height: 40px;
	}

	.modelo-gestion__subtitle {
		font-size: 16px;
	}

	.modelo-gestion__row {
		gap: 24px;
	}

	.actor-card {
		width: calc(50% - 12px);
		min-width: 140px;
	}

	.actor-card__desc {
		max-width: 100%;
		font-size: 14px;
	}
}

/* ── Móvil pequeño ≤ 480px: 1 columna ── */
@media (max-width: 480px) {
	.actor-card {
		width: 100%;
		max-width: 320px;
	}
}
/**
 * modelo-educativo.css — Sección "Modelo Educativo" (Ecoguardianes)
 * RC-24 | Figma nodos 226:101-226:104
 *
 * Specs medidos en canvas 1600px:
 *  - Sección: bg #FFFFFF, height ~790px
 *  - Columna izquierda: 56.25% (900px)
 *      · Strip (226:104): x=99, y=3884 → pt:77px, pl:11%(99px), 801×219px
 *      · Gap entre imágenes: 19px
 *      · Principal (226:103): x=0, y=4122 → 900×475px, full-width
 *  - Columna derecha: 43.75% (700px)
 *      · pt:147px (título y=3954 − sección y=3807)
 *      · pl:41px  (texto x=941 − columna x=900)
 *      · pr:180px (1600 − 1420 donde termina el texto)
 *      · pb:90px  (sección y=4597 − texto y+h=4507)
 *  - Título (226:102): Roboto ExtraBold 48px, #004E5A, lh:64px, ls:1px
 *  - Texto (226:101):  Roboto Regular 16px, #4E4F4F, lh:24px
 */

/* ══════════════════════════════════════════════
   SECCIÓN (flex a dos columnas)
══════════════════════════════════════════════ */

.modelo-educativo {
	display: flex;
	align-items: stretch;
	width: 100%;
	background-color: #FAFAFA;
}

/* ══════════════════════════════════════════════
   COLUMNA IZQUIERDA — imágenes
══════════════════════════════════════════════ */

.modelo-educativo__images {
	flex: 0 0 58.25%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Strip superior (Ecoguardianes 2) ── */
.modelo-educativo__strip-wrapper {
	padding-top: 77px;   /* espacio sobre el strip hasta el inicio de la sección */
	padding-left: 11%;   /* 99px / 900px ≈ 11% — offset horizontal del strip */
}

.modelo-educativo__strip-img {
	display: block;
	width: 100%;    /* ocupa el 89% restante de la columna (900 − 99 = 801px) */
	height: auto;
	aspect-ratio: 801 / 219;
	object-fit: cover;
}

/* ── Imagen principal (Ecoguardianes 1) ── */
.modelo-educativo__main-wrapper {
	margin-top: 19px; /* gap entre strip y la imagen principal */
}

.modelo-educativo__main-img {
	display: block;
	width: 100%;
	height: auto;     /* proporción natural — sin recorte inferior */
}

/* ══════════════════════════════════════════════
   COLUMNA DERECHA — contenido
══════════════════════════════════════════════ */

.modelo-educativo__content {
	flex: 1;
	padding-top: 147px;  /* alinea el título con y=3954 del canvas Figma */
	padding-left: 41px;  /* alinea el texto con x=941 del canvas Figma */
	padding-right: 40px; /* margen derecho mínimo — max-width del texto controla el ancho */
	padding-bottom: 90px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ── Título H2 — Roboto ExtraBold 48px, #004E5A ── */
.modelo-educativo__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #004E5A;
	line-height: 64px;
	letter-spacing: 1px;
	margin: 0 0 33px 0; /* gap al texto: y=4051 − (3954+64) = 33px */
}

/* ── Texto — Roboto Regular 16px, #4E4F4F ── */
.modelo-educativo__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #4E4F4F;
	line-height: 24.19px; /* 1.512 × 16px (Figma) */
	max-width: 479px;     /* ancho exacto del nodo texto en Figma */
}

/* Reset de márgenes internos del texto rico */
.modelo-educativo__text p {
	margin: 0 0 1em !important;
}

.modelo-educativo__text ul {
	margin: 0 0 16px !important;
	padding-left: 24px !important;
	list-style: disc !important;
}

.modelo-educativo__text li {
	margin-bottom: 4px;
	list-style: disc !important;
}

.modelo-educativo__text p:last-child,
.modelo-educativo__text ul:last-child {
	margin-bottom: 0;
}

.modelo-educativo__text strong {
	font-weight: 700;
	color: inherit;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop / pantalla media ≤ 1400px ── */
@media ( max-width: 1400px ) {
	.modelo-educativo__content {
		padding-right: 80px;
	}
}

/* ── Tablet amplio ≤ 1200px ── */
@media ( max-width: 1200px ) {
	.modelo-educativo__content {
		padding-top: 100px;
		padding-left: 32px;
		padding-right: 48px;
		padding-bottom: 60px;
	}

	.modelo-educativo__title {
		font-size: 40px;
		line-height: 52px;
		margin-bottom: 24px;
	}
}

/* ── Tablet ≤ 900px: apila columnas verticalmente ── */
@media ( max-width: 900px ) {
	.modelo-educativo {
		flex-direction: column;
	}

	.modelo-educativo__images {
		flex: none;
		width: 100%;
	}

	/* Quitar offsets de desktop al apilar */
	.modelo-educativo__strip-wrapper {
		padding-top: 0;
		padding-left: 0;
	}

	/* Proporciones naturales de imagen */
	.modelo-educativo__strip-img,
	.modelo-educativo__main-img {
		width: 100%;
		height: auto;
	}

	.modelo-educativo__main-wrapper {
		margin-top: 8px;
	}

	.modelo-educativo__content {
		padding: 48px 40px 64px;
		align-items: flex-start;
	}

	.modelo-educativo__text {
		max-width: 100%;
	}
}

/* ── Mobile ≤ 480px ── */
@media ( max-width: 480px ) {
	.modelo-educativo__content {
		padding: 40px 24px 48px;
	}

	.modelo-educativo__title {
		font-size: 32px;
		line-height: 42px;
	}

	.modelo-educativo__text {
		font-size: 15px;
		line-height: 22px;
	}
}
/**
 * conoce-mas.css — Sección "Conoce lo que estamos haciendo"
 * RC-25 | Figma container 120:435 (1160×430px, canvas 1600px)
 *
 * Specs:
 *  - Sección: bg #004E5A, py 90px
 *  - Inner container: max-width 1160px, centrado
 *  - Columna izquierda (flex: 536px): H2 + párrafo + botón pill
 *  - Columna derecha (flex: 536px, pt 60px): galería escalonada
 *      · Imagen 1: 256×256, r=16, posición (0, 0)
 *      · Imagen 2: 256×256, r=16, posición (280px, 32px)
 *  - Gap entre columnas: 88px
 *  - H2: Roboto ExtraBold 800, 48px, #FFFFFF, lh 64px, ls 1px
 *  - Párrafo: Roboto Light 300, 20px, #FFFFFF, lh 30px
 *  - Botón: bg #FFFFFF, color #004E5A, Roboto SemiBold 600, 16px, pill 48px alto
 */

/* ══════════════════════════════════════════════
   SECCIÓN
══════════════════════════════════════════════ */

.conoce-mas {
	/* Figma: Rectangle 120:111/9180 — 1401×635px, border-radius 20px, centrado en 1600px */
	max-width: 1401px;
	margin-top: 94px;
	margin-bottom: 95px;
	margin-inline: auto;
	border-radius: 20px;
	position: relative; /* contexto para el overlay ::before */
	/* Fondo: imagen configurable + overlay teal 80% */
	background-color: #004E5A;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* Padding visual: top=88px (title a 88px del bg), bottom=128px (button a 128px del borde inferior) */
	padding-top: 88px;
	padding-bottom: 128px;
	overflow: hidden; /* border-radius clipea la imagen de fondo */
}

/* Overlay teal 80% sobre la imagen de fondo (Figma Rectangle 9180, opacity 0.8) */
.conoce-mas::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 78, 90, 0.80);
	pointer-events: none;
	z-index: 0;
}

/* Inner container centrado — encima del overlay */
.conoce-mas__inner {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin-inline: auto;
	display: flex;
	gap: 88px;
	align-items: flex-start;
}

/* ══════════════════════════════════════════════
   COLUMNA IZQUIERDA — contenido
══════════════════════════════════════════════ */

.conoce-mas__content {
	flex: 0 0 536px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* H2 — Roboto ExtraBold 48px, blanco (Figma 120:440: w=412px) */
.conoce-mas__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #FFFFFF;
	line-height: 64px;
	letter-spacing: 1px;
	width: 412px;
	margin: 0 0 25px;
}

/* Párrafo — Roboto Light 20px, blanco, ls -0.15px (Figma 120:441) */
.conoce-mas__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 30px;
	letter-spacing: -0.15px;
	margin: 0 0 25px;
}

.conoce-mas__text p {
	margin: 0 0 16px;
}

.conoce-mas__text p:last-child {
	margin-bottom: 0;
}

/* Botón CTA — pill blanco, texto teal (Figma 120:447: Inter Semi Bold 600, 16px) */
.conoce-mas__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding-inline: 32px;
	background-color: #FFFFFF;
	color: #004E5A;
	font-family: 'Inter', 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.conoce-mas__btn:hover,
.conoce-mas__btn:focus-visible {
	background-color: #DAF3F0;
	color: #004E5A;
	text-decoration: none;
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════
   COLUMNA DERECHA — galería escalonada
══════════════════════════════════════════════ */

.conoce-mas__gallery {
	flex: 0 0 536px;
	/* Figma: right col y=60 dentro del container, que a su vez está a 114px del section bg.
	   En CSS el inner container arranca a 88px del bg, por lo que 174(gallery abs) - 88 = 86px */
	padding-top: 86px;
	align-self: flex-start;
}

/* Contenedor relativo para el posicionamiento absoluto de las imágenes */
.conoce-mas__gallery-inner {
	position: relative;
	width: 536px;
	height: 288px; /* 32px offset + 256px imagen = 288px total */
}

/* Ambas imágenes: posición absoluta dentro del gallery-inner */
.conoce-mas__img-wrap {
	position: absolute;
	width: 256px;
	height: 256px;
	border-radius: 16px;
	overflow: hidden;
}

/* Imagen 1 — esquina superior izquierda */
.conoce-mas__img-wrap--1 {
	left: 0;
	top: 0;
}

/* Imagen 2 — desplazada 280px a la derecha y 32px hacia abajo */
.conoce-mas__img-wrap--2 {
	left: 280px;
	top: 32px;
}

.conoce-mas__img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1300px ── */
@media ( max-width: 1300px ) {
	.conoce-mas {
		padding-inline: 48px;
		padding-top: 72px;
		padding-bottom: 96px;
		margin-top: 72px;
		margin-bottom: 72px;
	}

	.conoce-mas__inner {
		gap: 56px;
	}

	.conoce-mas__content,
	.conoce-mas__gallery {
		flex: 1;
	}

	.conoce-mas__gallery {
		padding-top: 60px;
	}

	.conoce-mas__gallery-inner {
		width: 100%;
	}

	.conoce-mas__img-wrap--2 {
		left: calc(50% + 12px);
	}
}

/* ── Tablet ≤ 1024px: reducir fuentes ── */
@media ( max-width: 1024px ) {
	.conoce-mas__title {
		width: 100%;
		font-size: 40px;
		line-height: 54px;
	}

	.conoce-mas__text {
		font-size: 18px;
		line-height: 28px;
	}
}

/* ── Tablet pequeña ≤ 768px: columnas apiladas ── */
@media ( max-width: 768px ) {
	.conoce-mas {
		border-radius: 16px;
		padding-inline: 32px;
		padding-top: 56px;
		padding-bottom: 64px;
		margin-top: 48px;
		margin-bottom: 48px;
		margin-inline: 16px;
	}

	.conoce-mas__inner {
		flex-direction: column;
		gap: 40px;
	}

	.conoce-mas__content,
	.conoce-mas__gallery {
		flex: none;
		width: 100%;
	}

	.conoce-mas__gallery {
		padding-top: 0;
	}

	/* Galería: imágenes escalonadas adaptadas al ancho disponible */
	.conoce-mas__gallery-inner {
		position: relative;
		width: 100%;
		height: 240px;
	}

	.conoce-mas__img-wrap {
		width: 210px;
		height: 210px;
		border-radius: 14px;
	}

	.conoce-mas__img-wrap--1 {
		left: 0;
		top: 0;
	}

	.conoce-mas__img-wrap--2 {
		left: calc(50% + 16px);
		top: 30px;
	}
}

/* ── Mobile ≤ 480px ── */
@media ( max-width: 480px ) {
	.conoce-mas {
		border-radius: 12px;
		padding-inline: 20px;
		padding-top: 48px;
		padding-bottom: 52px;
		margin-top: 32px;
		margin-bottom: 32px;
		margin-inline: 12px;
	}

	.conoce-mas__inner {
		gap: 28px;
	}

	.conoce-mas__title {
		font-size: 28px;
		line-height: 38px;
		letter-spacing: 0.5px;
		width: 100%;
		margin-bottom: 16px;
	}

	.conoce-mas__text {
		font-size: 15px;
		line-height: 24px;
		margin-bottom: 20px;
	}

	.conoce-mas__btn {
		height: 44px;
		padding-inline: 24px;
		font-size: 15px;
	}

	/* Galería mobile: imágenes escalonadas a escala 390px */
	.conoce-mas__gallery-inner {
		position: relative;
		width: 100%;
		height: 185px;
	}

	.conoce-mas__img-wrap {
		width: 160px;
		height: 160px;
		border-radius: 12px;
	}

	.conoce-mas__img-wrap--1 {
		left: 0;
		top: 0;
	}

	.conoce-mas__img-wrap--2 {
		left: calc(50% + 10px);
		top: 25px;
	}
}

/* ── Mobile muy pequeño ≤ 360px ── */
@media ( max-width: 360px ) {
	.conoce-mas {
		padding-inline: 16px;
		margin-inline: 10px;
	}

	.conoce-mas__title {
		font-size: 26px;
		line-height: 36px;
	}

	.conoce-mas__gallery-inner {
		height: 170px;
	}

	.conoce-mas__img-wrap {
		width: 145px;
		height: 145px;
	}

	.conoce-mas__img-wrap--2 {
		left: calc(50% + 8px);
		top: 25px;
	}
}
/**
 * socios.css — Sección "Nuestros socios" + Carrusel
 * RC-26 | Figma canvas 1600px
 *
 * Fondo (Rectangle 9181): imagen bg + fallback #004E5A, h=1025px
 *
 * Header (Frame 120:108, 1279×266px centrado):
 *  - pt desde bg top: 83px | pb: 83px
 *  - H2: Roboto ExtraBold 800, 48px, lh 64px, ls 1px, blanco, centrado
 *  - Párrafo: Roboto Regular 400, 20px, lh 30px, ls -0.15px, blanco, centrado, 2 párrafos
 *
 * Tarjeta (967×370px):
 *  - Panel izq (Frame 45, 446×370, #FFF, border-radius: 20px 0 0 20px)
 *      · Logo: posición abs y=100, h=142 → bottom en 242px
 *      · Gap 24px hasta underline: y=266, w=113, h=3, #004E5A
 *  - Panel der (Frame 46, 521×370, #004A5A, border-radius: 0 20px 20px 0)
 *      · Texto: x=48, y=94, Roboto Light 300, 20px, blanco
 *  - box-shadow: 0 4px 37px 0 rgba(214,250,255,0.42) (Figma DROP_SHADOW)
 *
 * Flechas: Material Design arrow_circle_left/right, 40×40
 *  - Prev: white 30% opacity | Next: white 100%
 *
 * Tira thumbs (Frame 49, 1597×111):
 *  - 5 cajas 214×95px, radius 10, blanco, gap ~55px, padding lateral 154px
 *  - Activo: opacity 1 | Inactivo: opacity 0.6
 */

/* ══════════════════════════════════════════════
   SECCIÓN CONTENEDOR
══════════════════════════════════════════════ */

.socios {
	background-color: #004E5A;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 83px;
	padding-bottom: 83px;
	overflow: hidden;
	width: 100%;
}

/* ══════════════════════════════════════════════
   HEADER — título + 2 párrafos
══════════════════════════════════════════════ */

.socios__header {
	max-width: 1279px;
	margin-inline: auto;
	padding-inline: 20px;
	text-align: center; /* alineación general del bloque */
}

/* H2 — Roboto ExtraBold 48px, centrado (Figma textAlignHorizontal=CENTER) */
.socios__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #FFFFFF;
	line-height: 64px;
	letter-spacing: 1px;
	margin: 0;
}

/* Párrafo wrapper — Roboto Regular 400, 20px, centrado */
/* gap entre título y párrafo: 30px (y=97 - h_title=67) */
/* width: 1250px fijo en desktop, centrado dentro del header */
.socios__text {
	margin: 30px 0 0;
	width: 1250px;
	margin-inline: auto;
}

/* Cada <p> generado por wpautop() */
.socios__text p {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 30px;
	letter-spacing: -0.15px;
	text-align: center;
	margin: 0 0 16px;
}

.socios__text p:last-child {
	margin-bottom: 0;
}

/* ══════════════════════════════════════════════
   CARRUSEL — contenedor
   Gap entre header y carrusel: 54px (5000-4946 en Figma)
══════════════════════════════════════════════ */

.socios__carousel {
	margin-top: 54px;
}

/* ── Área del slide principal con flechas ── */
.socios__main-wrap {
	position: relative;
	max-width: 1157px;
	margin-inline: auto;
}

/* ── Shadow wrapper — FUERA del overflow:hidden del swiper ── */
/* El box-shadow aquí es completamente visible en todos sus lados */
.socios__card-shadow {
	width: 967px;
	height: 370px;
	margin-inline: auto;
	box-shadow: 0 0 37px 0 rgba(214, 250, 255, 0.42);
	border-radius: 20px;
}

/* ── Swiper principal ── */
/* border-radius clipea las slides en los bordes durante transiciones */
.socios-swiper-main {
	overflow: hidden;
	border-radius: 20px;
	/* SIN height: 100% — Swiper se dimensiona solo por el contenido de las slides */
}

/* ══════════════════════════════════════════════
   TARJETA DEL SOCIO (socio-card)
   Figma: 967×370px total
   box-shadow: 0 4px 37px 0 rgba(214,250,255,0.42)
══════════════════════════════════════════════ */

.socio-card {
	display: flex;
	width: 967px;
	height: 370px;
	/* box-shadow movido a .socios__card-shadow (wrapper externo al swiper) */
}

/* ══════════════════════════════════════════════
   PANEL IZQUIERDO — logo (Frame 45, 446×370, #FFFFFF)
   border-radius: 20px 0 0 20px  (topLeft=20, bottomLeft=20)
══════════════════════════════════════════════ */

.socio-card__logo-side {
	flex: 0 0 446px;
	background-color: #FFFFFF;
	position: relative;
	border-radius: 20px 0 0 20px;
	overflow: hidden; /* necesario para que border-radius sea visible */
}

/* Logo: posición absoluta según Figma
   x=50, y=100, w=346, h=142
   Logo bottom = 100+142 = 242px | underline y=266 | gap = 24px ✓ */
.socio-card__logo-wrap {
	position: absolute;
	left: 50px;
	right: 50px;    /* = 346px de ancho disponible */
	top: 100px;
	height: 142px;  /* altura fija del área del logo */
	display: flex;
	align-items: center;
	justify-content: center;
}

.socio-card__logo-img {
	display: block;
	max-width: 100%;
	max-height: 142px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.socio-card__logo-placeholder {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #004E5A;
	text-align: center;
	line-height: 1.3;
}

/* Underline decorativa teal: x=50, y=266, w=113, h=3
   Gap desde logo bottom (242px) a underline top (266px) = 24px ✓ */
.socio-card__underline {
	position: absolute;
	left: 50px;
	top: 266px;
	width: 113px;
	height: 3px;
	background-color: #004E5A;
	border-radius: 2px;
}

/* ══════════════════════════════════════════════
   PANEL DERECHO — descripción (Frame 46, 521×370, #004A5A)
   border-radius: 0 20px 20px 0  (topRight=20, bottomRight=20)
══════════════════════════════════════════════ */

.socio-card__desc-side {
	flex: 0 0 521px;
	background-color: #004A5A;
	position: relative;
	overflow: hidden;
	border-radius: 0 20px 20px 0;
	display: flex;
	align-items: stretch;
}

/* Texto: x=48, y=94 dentro del panel de 521×370 */
.socio-card__desc-inner {
	position: relative;
	z-index: 1;
	padding: 94px 48px 48px;
	display: flex;
	align-items: flex-start;
}

/* Roboto Light 300, 20px, blanco */
.socio-card__desc {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 30px;
	margin: 0;
	max-width: 425px;
}

/* Watermark decorativo — SVG Figma (494×370, fill-opacity 0.07) */
/* z-index: 0 para que quede debajo del texto (.desc-inner tiene z-index: 1) */
.socio-card__watermark {
	position: absolute;
	right: 0;
	top: 0;
	width: 494px;
	height: 370px;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/* ══════════════════════════════════════════════
   FLECHAS DE NAVEGACIÓN
   Material Design arrow_circle_left/right, 40×40 en bounding box 48×48
   Prev: white 30% opacity | Next: white 100%
══════════════════════════════════════════════ */

.socios-btn-prev,
.socios-btn-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	padding: 4px;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: opacity 0.2s ease;
}

.socios-btn-prev {
	left: 0;
}

.socios-btn-next {
	right: 0;
}

/* Tamaño SVG — el fill/fill-opacity viene embebido en el path del SVG */
/* Prev: path tiene fill="white" fill-opacity="0.3" | Next: fill="white" */
.socios-btn-prev svg,
.socios-btn-next svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* Hover: sobreescribir fill-opacity directamente en el path (CSS > presentation attributes) */
.socios-btn-prev:hover svg path {
	fill-opacity: 0.6;
}

.socios-btn-next:hover svg path {
	fill-opacity: 0.8;
}

.socios-btn-prev:focus-visible,
.socios-btn-next:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

.socios-btn-prev.swiper-button-disabled svg path,
.socios-btn-next.swiper-button-disabled svg path {
	fill-opacity: 0.15;
}

.socios-btn-prev.swiper-button-disabled,
.socios-btn-next.swiper-button-disabled {
	cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   TIRA DE LOGOS (Thumbs)
   Frame 49: 1597×111px | gap carrusel-thumbs: 58px
   5 cajas: 214×95px, radius 10, blanco | gap ~55px | padding 154px c/lado
   Slide width calculada por Swiper (slidesPerView: 5, spaceBetween: 55)
══════════════════════════════════════════════ */

.socios__thumbs-wrap {
	margin-top: 58px;
	padding-inline: 154px;
}

.socios-swiper-thumbs {
	overflow: visible; /* logos no se clipean en los bordes */
}

/* Cada slide: Swiper calcula el ancho (≈214px a 1600px viewport) */
.socios-swiper-thumbs .swiper-slide {
	height: 95px;
	cursor: pointer;
	/* SIN !important — Swiper calcula el ancho en base a slidesPerView:5 spaceBetween:55 */
}

/* Caja blanca del thumb */
.socio-thumb {
	width: 100%;
	height: 95px;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	transition: background-color 0.25s ease;
	overflow: visible; /* logos no se clipean */
}

/* Thumb activo: opacidad completa */
.socios-swiper-thumbs .swiper-slide-thumb-active .socio-thumb {
	background-color: rgba(255, 255, 255, 1);
}

/* Imagen del logo dentro del thumb */
.socio-thumb__img {
	display: block;
	max-width: 100%;      /* ocupa todo el ancho disponible (- padding 20px × 2) */
	max-height: 57px;     /* Figma: h=57 del logo dentro del thumb */
	width: auto;
	height: auto;
	object-fit: contain;
}

.socio-thumb__name {
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 11px;
	color: #004E5A;
	text-align: center;
	line-height: 1.3;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1300px ── */
@media ( max-width: 1300px ) {

	/* Header */
	.socios__header {
		padding-inline: 40px;
	}

	.socios__text {
		width: 100%;
	}

	.socios__title {
		font-size: 40px;
		line-height: 56px;
	}

	/* Carrusel */
	.socios__main-wrap {
		max-width: calc(100% - 80px); /* 40px c/lado para los arrow buttons */
		margin-inline: 40px;
	}

	.socios__thumbs-wrap {
		padding-inline: 60px;
	}

	/* Shadow wrapper y card pasan a fluidos */
	.socios__card-shadow {
		width: 100%;
		height: auto;
	}

	.socio-card {
		width: 100%;
		height: auto;
		min-height: 320px;
	}

	/* Panel izquierdo: flex column para posicionar logo + underline en flujo */
	.socio-card__logo-side {
		flex: 0 0 45%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Logo: sale de position:absolute y pasa a flujo flex */
	.socio-card__logo-wrap {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
		height: auto;
		flex: 1;
		min-height: 130px;
		padding: 40px 30px 16px;
	}

	/* Underline: flujo normal debajo del logo */
	.socio-card__underline {
		position: static;
		left: auto;
		top: auto;
		margin: 0 0 28px 30px;
		flex-shrink: 0;
	}

	/* Panel derecho */
	.socio-card__desc-side {
		flex: 1;
	}

	.socio-card__desc-inner {
		padding: 60px 40px 40px;
	}
}

/* ── Tablet ≤ 1024px ── */
@media ( max-width: 1024px ) {

	/* Header */
	.socios__title {
		font-size: 36px;
		line-height: 48px;
	}

	.socios__text p {
		font-size: 18px;
	}

	/* Thumbs */
	.socios__thumbs-wrap {
		padding-inline: 20px;
	}

	.socios-swiper-thumbs .swiper-slide {
		height: 80px;
	}

	.socio-thumb {
		height: 80px;
		padding: 0 12px;
	}

	.socio-thumb__img {
		max-height: 46px;
	}

	/* Tarjeta */
	.socio-card__logo-wrap {
		padding: 32px 24px 12px;
	}

	.socio-card__underline {
		margin-left: 24px;
		margin-bottom: 24px;
	}

	.socio-card__desc-inner {
		padding: 50px 32px 32px;
	}

	.socio-card__desc {
		font-size: 17px;
		line-height: 26px;
	}
}

/* ── Mobile ≤ 768px: tarjeta apilada verticalmente ── */
@media ( max-width: 768px ) {

	/* Sección */
	.socios {
		padding-block: 60px;
	}

	/* Header */
	.socios__header {
		padding-inline: 24px;
	}

	.socios__title {
		font-size: 32px;
		line-height: 44px;
	}

	.socios__text p {
		font-size: 16px;
		line-height: 26px;
	}

	/* Carrusel */
	.socios__carousel {
		margin-top: 40px;
	}

	/* Main wrap: sin padding lateral (arrows ocultos en mobile) */
	.socios__main-wrap {
		max-width: 100%;
		margin-inline: 0;
		padding-inline: 20px;
	}

	/* Arrows ocultos en mobile — navegación por swipe táctil */
	.socios-btn-prev,
	.socios-btn-next {
		display: none;
	}

	/* Tarjeta apilada: logo arriba, descripción abajo */
	.socio-card {
		flex-direction: column;
	}

	/* Panel logo: ancho completo, altura fija para centrar logo */
	.socio-card__logo-side {
		flex: none;
		width: 100%;
		min-height: 200px;
		border-radius: 20px 20px 0 0;
		justify-content: center; /* centra logo verticalmente */
	}

	.socio-card__logo-wrap {
		flex: 1;
		padding: 32px 24px 16px;
	}

	.socio-card__underline {
		margin: 0 0 20px 24px;
	}

	/* Panel descripción: ancho completo */
	.socio-card__desc-side {
		flex: none;
		width: 100%;
		border-radius: 0 0 20px 20px;
	}

	.socio-card__desc-inner {
		padding: 32px 24px 32px;
	}

	.socio-card__desc {
		font-size: 16px;
		line-height: 26px;
		max-width: 100%;
	}

	/* Thumbs */
	.socios__thumbs-wrap {
		padding-inline: 20px;
		margin-top: 32px;
	}

	.socios-swiper-thumbs .swiper-slide {
		height: 70px;
	}

	.socio-thumb {
		height: 70px;
		padding: 0 10px;
	}

	.socio-thumb__img {
		max-height: 40px;
	}
}

/* ── Mobile pequeño ≤ 480px ── */
@media ( max-width: 480px ) {

	.socios__title {
		font-size: 28px;
		line-height: 38px;
	}

	.socios__main-wrap {
		padding-inline: 16px;
	}

	.socio-card__logo-wrap {
		padding: 24px 20px 12px;
	}

	.socio-card__underline {
		margin-left: 20px;
		margin-bottom: 16px;
	}

	.socio-card__desc-inner {
		padding: 24px 20px;
	}

	/* Thumbs */
	.socios__thumbs-wrap {
		padding-inline: 16px;
	}

	.socios-swiper-thumbs .swiper-slide {
		height: 60px;
	}

	.socio-thumb {
		height: 60px;
		padding: 0 8px;
	}

	.socio-thumb__img {
		max-height: 34px;
	}
}
/**
 * contacto.css — Sección "¿Quieres ser parte del cambio?"
 * RC-27 | Figma ContactSection 121:839 (1600×1616px)
 *
 * Specs:
 *  - Sección: bg #004E5A full-width
 *  - Fila 1 (inner 1148px): left 477px + gap 114px + form card 557px (rgba(255,255,255,.1), r=16)
 *  - Fila 2 (inner 1269px): image 481px + gap 68px + info 720px
 *  - Form inputs: rgba(255,255,255,.2), r=10, h=50px
 *  - Textarea: rgba(255,255,255,.2), r=10, h=122px
 *  - Botón submit: bg #448A2B, r=pill, 48px alto, 20px font, blanco
 *  - Info icons: 48×48 circular, rgba(255,255,255,.2)
 *  - Mapa: 720×454px, r=10
 *  - Padding top sección: 128px | Gap entre filas: 98px | Padding bottom: 100px
 */

/* ══════════════════════════════════════════════
   SECCIÓN BASE
══════════════════════════════════════════════ */

.contact-section {
	background: linear-gradient(135deg,
		#004E5A 0%,
		#004B57 11.11%,
		#004954 22.22%,
		#004751 33.33%,
		#00444E 44.44%,
		#00424B 55.56%,
		#003F49 66.67%,
		#003D46 77.78%,
		#003A43 88.89%,
		#003840 100%
	);
	padding-top: 128px;
	padding-bottom: 100px;
}

/* ══════════════════════════════════════════════
   FILA 1 — Texto + Formulario
══════════════════════════════════════════════ */

.contact-section__top {
	max-width: 1160px;
	margin-inline: auto;
}

.contact-section__inner {
	display: flex;
	gap: 114px;
	align-items: flex-start;
}

/* ── Columna izquierda: copy ── */
.contact-section__content {
	flex: 0 0 477px;
}

.contact-section__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #FFFFFF;
	line-height: 48px;
	letter-spacing: -0.85px;
	margin: 0 0 24px;
}

.contact-section__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 30px;
	letter-spacing: -0.15px;
}

.contact-section__text p {
	margin: 0 0 20px;
}

.contact-section__text p:last-child {
	margin-bottom: 0;
}

.contact-section__subheading {
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin-bottom: 8px !important;
}

.contact-section__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-section__list li {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 30px;
	padding-left: 16px;
	position: relative;
}

.contact-section__list li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: rgba(255, 255, 255, 0.9);
}

/* ── Tarjeta formulario ── */
.contact-section__form-card {
	flex: 0 0 557px;
	background-color: rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	padding: 32px;
}

/* ══════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════ */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Honeypot — oculto visualmente, no accesible */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	pointer-events: none;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-form__label {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 24px;
}

.contact-form__input,
.contact-form__textarea {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.20);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	padding: 13px 16px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	box-sizing: border-box;
	appearance: none;
}

.contact-form__input {
	height: 50px;
}

.contact-form__textarea {
	height: 122px;
	resize: vertical;
	min-height: 80px;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.25);
}

.contact-form__input:invalid:not(:placeholder-shown),
.contact-form__textarea:invalid:not(:placeholder-shown) {
	border-color: rgba(255, 100, 100, 0.7);
}

/* Botón submit */
.contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	background-color: #448A2B;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.3px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.contact-form__submit:hover {
	background-color: #386B22;
}

.contact-form__submit:active {
	transform: scale(0.98);
}

.contact-form__submit:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* Spinner de carga (oculto por defecto, visible al enviar) */
.contact-form__submit-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: cf-spin 0.7s linear infinite;
}

.contact-form--loading .contact-form__submit-spinner {
	display: block;
}

.contact-form--loading .contact-form__submit-text {
	opacity: 0.7;
}

@keyframes cf-spin {
	to { transform: rotate(360deg); }
}

/* Aviso legal reCAPTCHA */
.contact-form__recaptcha-note {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.5;
	text-align: center;
	margin: -8px 0 0;
}

.contact-form__recaptcha-note a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact-form__recaptcha-note a:hover {
	color: #FFFFFF;
}

/* Ocultar badge flotante (reemplazado por aviso en el form) */
.grecaptcha-badge {
	visibility: hidden !important;
}

/* Notices de éxito / error */
.contact-form__notice {
	border-radius: 10px;
	padding: 14px 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 16px;
}

.contact-form__notice--success {
	background-color: rgba(68, 138, 43, 0.30);
	border: 1.5px solid #448A2B;
	color: #FFFFFF;
}

.contact-form__notice--error {
	background-color: rgba(200, 50, 50, 0.25);
	border: 1.5px solid rgba(255, 100, 100, 0.6);
	color: #FFFFFF;
}

.contact-form__notice p {
	margin: 0;
}

/* ══════════════════════════════════════════════
   FILA 2 — Imagen + Info general
══════════════════════════════════════════════ */

.contact-section__bottom {
	margin-top: 98px;
}

.contact-section__bottom-inner {
	max-width: 1269px;
	margin-inline: auto;
	display: flex;
	gap: 68px;
	align-items: stretch; /* ambas columnas misma altura */
}

/* Imagen lateral — se estira para igualar la altura de la columna info */
.contact-section__image-wrap {
	flex: 0 0 481px;
	min-height: 600px; /* garantiza altura mínima razonable */
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.1);
}

.contact-section__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 600px; /* asegura que la imagen llene el wrapper */
	object-fit: cover;
	object-position: center top;
}

.contact-section__image-placeholder {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.08);
}

/* Info general */
.contact-section__info {
	flex: 0 0 720px;
}

.contact-section__info-title {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: #FFFFFF;
	line-height: 64px;
	margin: 0 0 32px;
}

/* ── Lista de ítems de contacto ── */
.contact-info {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* Icono circular */
.contact-info__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.20);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-info__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 2px;
}

.contact-info__label {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #FFFFFF;
	line-height: 27px;
}

.contact-info__value {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 30px;
	text-decoration: none;
}

/* Email y teléfono — visualmente clickeables */
a.contact-info__value {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.contact-info__value:hover {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, 0.9);
}

/* ── Mapa (contenedor Leaflet) ── */
.contact-section__map {
	width: 100%;
	height: 454px;
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.08);
}

/* Leaflet overrides — mantener border-radius del contenedor */
.contact-section__map .leaflet-container {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
}

.contact-section__map .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.8);
	font-size: 10px;
	line-height: 1.4;
}

.contact-section__map .leaflet-control-zoom a {
	color: #004E5A;
	font-weight: 700;
}

/* ── Pin personalizado Recoplast ── */
.rc-map-pin {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 44px;
	height: 58px;
	filter: drop-shadow( 0 3px 8px rgba(0, 0, 0, 0.35) );
}

.rc-map-pin__circle {
	width: 44px;
	height: 44px;
	background-color: #004E5A;
	border: 2.5px solid #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rc-map-pin__r {
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	color: #FFFFFF;
	letter-spacing: -0.5px;
	user-select: none;
}

/* Triángulo apuntador */
.rc-map-pin__tail {
	width: 0;
	height: 0;
	border-left:  10px solid transparent;
	border-right: 10px solid transparent;
	border-top:   14px solid #004E5A;
	margin-top:   -2px;
}

/* Popup del mapa */
.rc-map-popup .leaflet-popup-content-wrapper {
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 4px 0;
}

.rc-map-popup .leaflet-popup-tip {
	background: #FFFFFF;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── Laptop ≤ 1300px ── */
@media ( max-width: 1300px ) {
	.contact-section {
		padding-top: 96px;
		padding-bottom: 80px;
	}

	.contact-section__top {
		padding-inline: 48px;
	}

	.contact-section__inner {
		gap: 64px;
	}

	.contact-section__content,
	.contact-section__form-card {
		flex: 1;
	}

	.contact-section__bottom-inner {
		padding-inline: 48px;
		gap: 48px;
	}

	.contact-section__image-wrap {
		flex: 0 0 380px;
		min-height: 520px; /* stretch activo — la imagen crece con la col. info */
	}

	.contact-section__info {
		flex: 1;
	}
}

/* ── Tablet ≤ 1024px ── */
@media ( max-width: 1024px ) {
	.contact-section__title,
	.contact-section__info-title {
		font-size: 38px;
		line-height: 48px;
	}

	.contact-section__text,
	.contact-section__list li,
	.contact-form__label,
	.contact-info__value {
		font-size: 18px;
	}

	.contact-section__bottom-inner {
		padding-inline: 32px;
		gap: 40px;
	}

	.contact-section__image-wrap {
		flex: 0 0 320px;
		min-height: 480px;
	}

	.contact-section__map {
		height: 380px;
	}
}

/* ── Tablet ≤ 768px: apilar columnas ── */
@media ( max-width: 768px ) {
	.contact-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.contact-section__top {
		padding-inline: 24px;
	}

	.contact-section__inner {
		flex-direction: column;
		gap: 32px;
	}

	.contact-section__content,
	.contact-section__form-card {
		flex: none;
		width: 100%;
	}

	.contact-section__bottom {
		margin-top: 56px;
	}

	.contact-section__bottom-inner {
		flex-direction: column;
		padding-inline: 24px;
		gap: 40px;
	}

	.contact-section__image-wrap {
		flex: none;
		width: 100%;
		height: 320px;
		min-height: unset; /* sobreescribe el min-height de breakpoints superiores */
	}

	/* La imagen: resetear min-height y centrar verticalmente en el recorte */
	.contact-section__image {
		min-height: unset;
		height: 100%;
		object-position: center center;
	}

	.contact-section__info {
		flex: none;
		width: 100%;
	}

	.contact-section__map {
		height: 300px;
	}
}

/* ── Mobile ≤ 480px ── */
@media ( max-width: 480px ) {
	.contact-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.contact-section__top {
		padding-inline: 16px;
	}

	.contact-section__title,
	.contact-section__info-title {
		font-size: 28px;
		line-height: 36px;
		letter-spacing: -0.3px;
	}

	.contact-section__text,
	.contact-section__list li {
		font-size: 15px;
		line-height: 24px;
	}

	.contact-section__form-card {
		padding: 20px 16px;
	}

	.contact-form__label {
		font-size: 16px;
	}

	.contact-form__submit {
		font-size: 17px;
		height: 44px;
	}

	.contact-section__bottom {
		margin-top: 40px;
	}

	.contact-section__bottom-inner {
		padding-inline: 16px;
	}

	.contact-section__image-wrap {
		height: 240px;
	}

	.contact-section__image {
		object-position: center 57%;
	}

	.contact-section__map {
		height: 280px;
	}

	.contact-info__label {
		font-size: 16px;
	}

	.contact-info__value {
		font-size: 15px;
	}
}

/* ── Extra-small ≤ 360px ── */
@media ( max-width: 360px ) {
	.contact-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.contact-section__top {
		padding-inline: 12px;
	}

	.contact-section__title,
	.contact-section__info-title {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.2px;
	}

	.contact-section__text,
	.contact-section__list li {
		font-size: 14px;
		line-height: 22px;
	}

	.contact-section__inner {
		gap: 24px;
	}

	.contact-section__form-card {
		padding: 16px 12px;
	}

	.contact-form__label {
		font-size: 15px;
	}

	.contact-form__submit {
		font-size: 16px;
		height: 40px;
	}

	.contact-section__bottom {
		margin-top: 32px;
	}

	.contact-section__bottom-inner {
		padding-inline: 12px;
		gap: 24px;
	}

	.contact-section__image-wrap {
		height: 200px;
	}

	.contact-section__map {
		height: 200px;
	}

	.contact-info__item {
		gap: 12px;
	}

	.contact-info__icon {
		width: 40px;
		height: 40px;
	}

	.contact-info__label {
		font-size: 14px;
		line-height: 22px;
	}

	.contact-info__value {
		font-size: 14px;
		line-height: 22px;
	}
}