/* ==========================================================================
   MORENA — ÍNDICE GENERAL CSS
   ==========================================================================

   01. ESTILOS GENERALES
       - Fuentes
       - Variables
       - Reset básico
       - Contenedor general

   02. HEADER
       - Contenedor
       - Logo
       - Navegación
       - Responsive Header

   03. HERO
       - Pretítulo
       - Título
       - Botones
       - Responsive Hero

   04. LÍNEAS MORENA
       - Título
       - Subtítulo
       - Contenedor de tarjetas
       - Tarjetas Morena Impulsa / Morena Web
       - Logos
       - Píldoras
       - Texto
       - Botones
       - Barra animada de cupos
       - Responsive Líneas Morena
       - Animación barra de cupos

   05. CUPOS MORENA
       - Tarjeta principal
       - Título
       - Subtítulo
       - Imagen tiempo limitado
       - Formulario
       - Inputs
       - Botón
       - Mensaje del formulario
       - Condiciones
       - Accesibilidad
       - Responsive Cupos Morena

   06. QUIÉNES SOMOS
       - Título
       - Contenedor de perfiles
       - Perfil
       - Foto principal
       - Nombre y puesto
       - Descripción
       - Logos inferiores
       - Responsive Quiénes Somos

   07. VALORES / PRINCIPIOS
       - Título
       - Subtítulo
       - Tarjetas visuales
       - Responsive Valores / Principios

   08. CONTACTO
       - Lado izquierdo
       - Botones de contacto
       - Texto final
       - Lado derecho
       - Formulario
       - Grupos del formulario
       - Inputs
       - Opciones de ayuda
       - Radio buttons
       - Textarea
       - Botón enviar
       - Accesibilidad
       - Responsive Contacto

   09. PIE DE PÁGINA
       - Contenedor
       - Logo
       - Información
       - Instagram
       - Responsive Pie de Página

   ==========================================================================
   MORENA — ESTILOS GENERALES
   ========================================================================== */

/* Fuentes */

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bellefair';
    src: url('../fonts/Bellefair-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Variables */

:root {
    --blush: #FFF4F9;
    --rose-light: #FCD3E6;
    --rose-pink: #D584A1;
    --dusty-rose: #8D6775;
    --maroon: #4E0E1A;
    --maroon-hover: #3A0A13;
    --maroon-deep: #5C233C;
    --brown: #442C28;
    --superdark: #2A1520;
    --pastel-blue: #E3ECF4;
    --celeste: #B1CFD7;
    --cream: #F5F2EE;
    --white: #FFFFFF;

    --font-display: 'Fraunces', Georgia, serif;
    --font-script: 'Bellefair', Georgia, serif;
    --font-body: 'Montserrat', Arial, sans-serif;
}

/* Reset básico */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--brown);
    font-family: var(--font-body);
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

/* Contenedor general */

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;

    background: var(--blush);

    border-bottom: 1px solid rgba(91, 28, 39, 0.08);
}

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

header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: min(92%, 1100px);

    margin: 0 auto;
    padding: 0;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

header .logo {
    display: flex;
    align-items: center;
    justify-self: start;
}

header .logo img {
    display: block;

    width: auto;
    height: 38px;

    margin: 10px 0;
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */

header .menu-principal {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 35px;
}

header .btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    color: var(--brown);

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}

header .btn-hero:hover {
    color: var(--rose-pink);
}

/* ==========================================================================
   BOTÓN TRABAJEMOS JUNTAS
   ========================================================================== */

header .btn-contacto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;

    padding: 6px 14px;

    border: 1px solid var(--maroon);
    border-radius: 999px;

    background: var(--maroon);
    color: var(--blush);

    font-family: var(--font-body);
    font-size: 12px;
    font-style: italic;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}

header .btn-contacto:hover {
    background: var(--rose-pink);
    border-color: var(--rose-pink);
}

/* ==========================================================================
   HAMBURGUESA
   Oculta en desktop + iPad
   ========================================================================== */

header .menu-toggle {
    display: none;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    width: 38px;
    height: 38px;

    padding: 7px;

    border: 0;

    background: transparent;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;

    -webkit-tap-highlight-color: transparent;
}

header .menu-toggle span {
    display: block;

    width: 24px;
    height: 1.5px;

    border-radius: 999px;

    background: var(--maroon);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* ==========================================================================
   SUBMENÚ NUESTRAS LÍNEAS
   ========================================================================== */

header .menu-desplegable {
    position: relative;
    display: flex;
    align-items: center;
}

header .menu-lineas {
    gap: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

header .flecha-menu {
    display: inline-block;
    margin-top: -2px;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.25s ease;
}

/* Submenú */

header .submenu-lineas {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 155px;
    padding: 10px 7px 7px;
    background: var(--blush);
    border: 1px solid rgba(91, 28, 39, 0.08);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(91, 28, 39, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-5px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

header .submenu-lineas a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--brown);
    font-family: var(--font-body);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

header .submenu-lineas a:hover {
    background: rgba(91, 28, 39, 0.06);
    color: var(--rose-pink);
}

/* Abrir */

header .menu-desplegable:hover .submenu-lineas,
header .menu-desplegable:focus-within .submenu-lineas {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

header .menu-desplegable:hover .flecha-menu,
header .menu-desplegable:focus-within .flecha-menu {
    transform: rotate(180deg);
}

/* ==========================================================================
   MENÚ MOBILE
   ========================================================================== */

header .menu-mobile {
    display: none;
}

/* ==========================================================================
   ESPACIO PARA HEADER FIJO
   ========================================================================== */

body {
    padding-top: 59px;
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 1024px) {

    header .container {
        width: 94%;
    }

    header .logo img {
        height: 35px;
    }

    header .menu-principal {
        gap: 22px;
    }

    header .btn-hero {
        padding: 5px 6px;
        font-size: 11px;
    }

    header .btn-contacto {
        padding: 6px 12px;
        font-size: 11px;
    }

    body {
        padding-top: 56px;
    }
}

/* ==========================================================================
   IPAD VERTICAL
   Mantiene menú completo
   ========================================================================== */

@media (min-width: 601px) and (max-width: 820px) {

    header .container {
        width: 95%;
    }

    header .logo img {
        height: 32px;
        margin: 9px 0;
    }

    header .menu-principal {
        gap: 12px;
    }

    header .btn-hero {
        padding: 5px 4px;
        font-size: 10px;
    }

    header .btn-contacto {
        padding: 5px 9px;
        font-size: 10px;
    }

    body {
        padding-top: 51px;
    }
}

/* ==========================================================================
   MOBILE — IPHONE
   ========================================================================== */

@media (max-width: 600px) {

    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 90%;

        margin: 0 auto;
    }

    /* Logo */
    header .logo {
        margin: 0;
    }

    header .logo img {
        height: 30px;
        margin: 9px 0;
    }

    /* Ocultar menú desktop */
    header .menu-principal {
        display: none;
    }

    header .btn-contacto {
        display: none;
    }

    /* Mostrar hamburguesa */
    header .menu-toggle {
        display: flex;
    }

    /* ===============================================================
       MENÚ DESPLEGABLE
       =============================================================== */

    header .menu-mobile {
        position: absolute;
        top: 100%;
        left: 0;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-height: 0;

        padding: 0 5%;
        box-sizing: border-box;

        overflow: hidden;

        background: var(--blush);

        border-bottom: 1px solid rgba(91, 28, 39, 0.08);

        opacity: 0;
        visibility: hidden;

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            padding 0.35s ease;
    }

    /* Menú abierto */
    header .menu-mobile.active {
        max-height: 350px;

        padding-top: 18px;
        padding-bottom: 25px;

        opacity: 1;
        visibility: visible;
    }

    /* Links */
    header .menu-mobile a {
        display: block;

        padding: 13px 0;

        border-bottom: 1px solid rgba(91, 28, 39, 0.1);

        color: var(--maroon);

        font-family: var(--font-body);
        font-size: 14px;

        text-align: left;
        text-decoration: none;
    }

    /* Trabajemos juntas mobile */
    header .menu-mobile .menu-mobile-contacto {
        margin-top: 12px;

        padding: 10px 15px;

        border: 1px solid var(--maroon);
        border-radius: 999px;

        background: var(--maroon);
        color: var(--blush);

        font-style: italic;
        text-align: center;
    }

    /* ===============================================================
       HAMBURGUESA → X
       =============================================================== */

    header .menu-toggle.active span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    header .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    body {
        padding-top: 48px;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO — IPHONE SE
   ========================================================================== */

@media (max-width: 390px) {

    header .container {
        width: 88%;
    }

    header .logo img {
        height: 27px;
    }

    header .menu-toggle {
        width: 34px;
        height: 34px;
    }

    header .menu-toggle span {
        width: 22px;
    }

    body {
        padding-top: 45px;
    }
}
/* ==========================================================================
   HERO
   ========================================================================== */

#hero {
    position: relative;
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: stretch;
    width: 100%;
    min-height: 680px;
    height: calc(100vh - 90px);
    max-height: 820px;
    overflow: hidden;
    background: var(--blush);
}
/* Lado izquierdo */
.izquierda-hero {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 10px 60px 70px; /*arriba  derecha  abajo  izquierda*/
}

/* Pretítulo */
#hero .pretitulo {
    display: flex;
    align-items: left;
    gap: 12px;
    margin: 20px 0 28px 0; /*arriba  derecha  abajo  izquierda*/
}

#hero .pretitulo p {
    display: flex;
    margin: 0;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--rose-light);
    color: #700d29;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body);
}
#hero .icono-hero {
    height: 18px;
    object-fit: contain;
}

/* Título */

#hero h1 {
    max-width: 620px;
    margin: 0 0 24px;
    color:var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 0.98;
    text-align: left;
}
#hero h1 span {
    color: #340D0E;
}
/* Texto principal */
.izquierda-hero > p {
    max-width: 560px;
    margin: 0 0 30px;
    color: var(--maroon);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 350;
    line-height: 1.4;
}

/* Botón */
.botones-hero {
    margin-bottom: 20px;
}

.boton_hero1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 50px;
    background: var(--maroon);
    color: white;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(87, 9, 29, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.boton_hero1:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(87, 9, 29, 0.24);
}

/* ----- IMAGEN HERO.-------*/
.derecha-hero {
    position: relative;
    overflow: hidden;
}

.img-hero {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 65%;
}

/* Degradado para fusionar imagen con el fondo */
.derecha-hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 32%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--blush) 0%,
        rgba(250, 241, 244, 0.85) 25%,
        rgba(250, 241, 244, 0.4) 55%,
        rgba(250, 241, 244, 0) 100%
    );
}
/* ----- ELEMENTOS FLOTANTES.-------*/


.flotantes {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 11px 18px;
    border: 1px solid rgba(99, 17, 38, 0.08);
    border-radius: 30px;
    background: rgba(255, 250, 248, 0.95);
    color: var(--maroon);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(80, 40, 45, 0.12);

    /* Estado inicial */
    opacity: 0;
    transform: translateY(25px);

    /* Animación */
    animation: aparecer-flotante 0.9s ease-out forwards;
}

/* Más claridad */
.derecha-hero .flotantes:nth-of-type(1) {
    top: 20%;
    left: 12%;
    animation-delay: 0.4s;
}

/* Menos pendientes */
.derecha-hero .flotantes:nth-of-type(2) {
    top: 29%;
    right: 6%;
    animation-delay: 0.9s;
}

/* Más autonomía */
.derecha-hero .flotantes:nth-of-type(3) {
    top: 67%;
    right: 10%;
    animation-delay: 1.4s;
}

/* Más autonomía */
.derecha-hero .flotantes:nth-of-type(4) {
    top: 50%;
    right: 55%;
    animation-delay: 1.8s;
}

/* Animación de entrada */
@keyframes aparecer-flotante {

    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }

    40% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE HERO */
@media (max-width: 1050px) {

    #hero {
        grid-template-columns: 50% 50%;
    }

    .izquierda-hero {
        padding-left: 45px;
        padding-right: 25px;
    }

    .izquierda-hero h1 {
        font-size: clamp(42px, 5vw, 58px);
    }

    .pretitulo {
        gap: 7px;
    }

    .pretitulo p {
        padding: 9px 12px;
        font-size: 12px;
    }
}

@media (max-width: 800px) {

    #hero {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: none;
        min-height: auto;
    }

    .izquierda-hero {
        order: 1;
        padding: 60px 25px 45px;
    }

    .derecha-hero {
        order: 2;
        height: 500px;
    }

    .izquierda-hero h1 {
        max-width: 600px;
        font-size: clamp(42px, 10vw, 58px);
    }

    .derecha-hero::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 18%;
        background: linear-gradient(
            180deg,
            var(--blush) 0%,
            rgba(250, 241, 244, 0) 100%
        );
    }
}

@media (max-width: 550px) {

    .izquierda-hero {
        padding: 22px 22px 35px;
    }

    .pretitulo {
        flex-wrap: wrap;
        margin-bottom: 22px;
        gap: 10px;
    }

    .pretitulo p {
        font-size: 11px;
        margin: 0;
    }

    .icono-hero {
        width: 15px;
        height: 15px;
    }

    .izquierda-hero h1 {
        margin-bottom: 20px;
        font-size: 42px;
        line-height: 1;
    }

    .izquierda-hero > p {
        font-size: 15px;
        line-height: 1.55;
    }

    .boton_hero1 {
        width: 100%;
        padding: 17px 22px;
    }

    .derecha-hero {
        height: 430px;
    }

    .flotantes {
        padding: 9px 13px;
        font-size: 11px;
    }

    .derecha-hero .flotantes:nth-of-type(1) {
        top: 18%;
        left: 5%;
    }

    .derecha-hero .flotantes:nth-of-type(2) {
        top: 43%;
        right: 4%;
    }

    .derecha-hero .flotantes:nth-of-type(3) {
        top: 68%;
        right: 7%;
    }
}

/* ===============================================================
   SERVICIOS LINEAS MORENA
   =============================================================== */

#lineas_morena {
    width: 100%;
    padding: 60px 30px 0;
    box-sizing: border-box;
    background: #340d0e;
    text-align: center;
}

/* TÍTULO */
#lineas_morena h1 {
    margin: 0 auto;
    color: var(--blush);
    font-family: fraunces;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

/* SUBTÍTULO */
#lineas_morena h2 {
    max-width: 700px;
    margin: 5px auto 45px;
    color: var(--rose-light);
    font-family: montserrat;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 500;
    text-align: center;
}

/* CONTENEDOR DE LAS DOS TARJETAS */
.lineas_morena {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 760px;
    margin: 45px auto 0;
}

/* TARJETAS */
.tarjeta-impulsa,
.tarjeta-web {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 320px;
    padding: 32px 28px 24px;
    box-sizing: border-box;
    background: var(--blush);
    border: 1px solid #d8a9b6;
    border-radius: 20px;
    box-shadow:
        7px 7px 0 rgba(255, 211, 230, 0.25),
        12px 12px 0 rgba(255, 211, 230, 0.12);
    text-align: left;
}

/* LOGOS */
.tarjeta-impulsa img,
.tarjeta-web img {
    display: block;
    width: 170px;
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto 20px;
}

/* SUBTÍTULO / PÍLDORA */
.subtitulo-servicio {
    display: inline-block;
    align-self: center;
    margin: 0 auto 25px;
    padding: 5px 15px;
    background: var(--rose-light);
    color: var(--maroon);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* TEXTO TARJETAS */
.tarjeta-impulsa > p:not(.subtitulo-servicio),
.tarjeta-web > p:not(.subtitulo-servicio) {
    margin: 0 0 25px;
    color: var(--maroon);
    font-size: 12px;
    line-height: 1.45;
    text-align: justify;
}

/* BOTONES */
.conoce-impulsa,
.conoce-web {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;
    margin: auto auto 0;
    padding: 10px 12px;
    box-sizing: border-box;
    background: var(--pastel-blue);
    color: var(--maroon);
    border: 1px solid #9bc6e3;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* HOVER */
.conoce-impulsa:hover,
.conoce-web:hover {
    background: var(--celeste);
}

/* BARRA CUPOS ANIMADA */
.barra-cupos {
    width: calc(100% + 60px);
    margin-top: 55px;
    margin-left: -30px;
    overflow: hidden;
    padding: 8px 0;
    background: var(--pastel-blue);
    border-top: 1px solid var(--maroon);
    border-bottom: 1px solid var(--maroon);
    white-space: nowrap;
}

.barra-cupos-track {
    display: flex;
    width: max-content;
    animation: mover-barra 22s linear infinite;
}

.barra-cupos-grupo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
}

.barra-cupos-grupo span {
    display: inline-block;
}

.barra-cupos-punto {
    margin: 0 8px;
}

/* ===============================================================
   TABLET
   =============================================================== */

@media (max-width: 900px) {

    #lineas_morena {
        padding: 55px 24px 0;
    }

    .lineas_morena {
        grid-template-columns: repeat(2, minmax(0, 280px));
        max-width: 600px;
        gap: 22px;
    }

    .tarjeta-impulsa,
    .tarjeta-web {
        padding: 28px 24px 22px;
    }

    .barra-cupos {
        width: calc(100% + 48px);
        margin-left: -24px;
    }
}

/* ===============================================================
   MOBILE
   =============================================================== */

@media (max-width: 600px) {

    #lineas_morena {
        padding: 45px 20px 0;
    }

    #lineas_morena h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    #lineas_morena h2 {
        max-width: 340px;
        margin: 8px auto 32px;
        font-size: 16px;
        line-height: 1.3;
    }

    .lineas_morena {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 330px;
        margin: 30px auto 0;
        gap: 25px;
    }

    .tarjeta-impulsa,
    .tarjeta-web {
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 28px 24px 24px;
    }

    .tarjeta-impulsa img,
    .tarjeta-web img {
        width: 155px;
    }

    .conoce-impulsa,
    .conoce-web {
        width: 100%;
    }

    .barra-cupos {
        width: calc(100% + 40px);
        margin-top: 45px;
        margin-left: -20px;
    }

    .barra-cupos-grupo {
        font-size: 16px;
    }
}

@keyframes mover-barra {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   CUPOS MORENA
   ========================================================================== */

#cupos-morena {
    padding: 70px 24px 35px;
    background: var(--blush);
    text-align: center;
}

/* Tarjeta principal */

#cupos-morena .cupon-cupos-morena {
    position: relative;
    width: min(90%, 400px);
    margin: 0 auto;
    padding: 35px 42px 30px;
    border-radius: 20px;
    background: var(--pastel-blue);
    box-shadow: 8px 10px 0 rgba(78, 14, 26, 0.12), 14px 18px 25px rgba(78, 14, 26, 0.20);
}

/* Título */

#cupos-morena .cupon-cupos-morena h1 {
    margin: 0 0 16px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.02;
    text-align: left;
}

#cupos-morena .cupon-cupos-morena h1 span {
    color: var(--rose-pink);
}

/* Subtítulo */

#cupos-morena .cupon-cupos-morena h2 {
    margin: 0 0 4px;
    color: var(--rose-pink);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
}

#cupos-morena .cupon-cupos-morena h2 strong {
    font-weight: 700;
}

/* Imagen tiempo limitado */

#cupos-morena .cupon-cupos-morena > img {
    display: block;
    width: 185px;
    max-width: 65%;
    height: auto;
    margin: -2px 0 4px auto;
}

/* Formulario */

#cupos-morena .form-aviso {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

/* Inputs */

#cupos-morena .form-aviso input[type="email"],
#cupos-morena .form-aviso input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--blush);
    color: var(--maroon);
    font-family: var(--font-body);
    font-size: 14px;
}

#cupos-morena .form-aviso input::placeholder {
    color: var(--rose-pink);
    opacity: 0.8;
}

#cupos-morena .form-aviso input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--rose-pink);
}

/* Botón */

#cupos-morena .form-aviso button {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 7px;
    background: var(--rose-pink);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#cupos-morena .form-aviso button:hover {
    background: var(--maroon);
    transform: translateY(-2px);
}

.botcheck {
    display: none;
}
/* Mensaje del formulario */

#cupos-morena .form-aviso-mensaje {
    margin: 8px 0 0;
    color: var(--maroon);
    font-size: 13px;
}

/* Condiciones */

#cupos-morena .condiciones-cupos-morena {
    max-width: 620px;
    margin: 60px auto 0;
    color: var(--brown);
    font-size: 10px;
    font-style: italic;
    line-height: 1.15;
}

/* Accesibilidad */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* RESPONSIVE CUPOS MORENA */

@media (max-width: 600px) {
    #cupos-morena {
        padding: 55px 18px 30px;
    }

    #cupos-morena .cupon-cupos-morena {
        width: min(100%, 400px);
        padding: 30px 28px 26px;
    }

    #cupos-morena .cupon-cupos-morena h1 {
        font-size: 27px;
    }

    #cupos-morena .cupon-cupos-morena h2 {
        font-size: 16px;
    }

    #cupos-morena .condiciones-cupos-morena {
        margin-top: 45px;
        font-size: 9px;
    }
}

/* ==========================================================================
   ANIMACIONES — CUPOS MORENA
   ========================================================================== */

/* Contenedor principal */
#cupos-morena .cupon-cupos-morena {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Título */
#cupos-morena h1 {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
    transition-delay: 0.18s;
}

/* Subtítulo */
#cupos-morena h2 {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
    transition-delay: 0.28s;
}

/* Imagen "tiempo limitado" */
#cupos-morena .cupon-cupos-morena > img {
    opacity: 0;
    transform: translateY(12px) rotate(-4deg) scale(0.88);
    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(0.22, 1.25, 0.36, 1);
    transition-delay: 0.40s;
}

/* Campos visibles del formulario */
#cupos-morena .form-aviso input:not([type="hidden"]):not(.botcheck),
#cupos-morena .form-aviso button {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nombre */
#cupos-morena .form-aviso input[type="text"] {
    transition-delay: 0.50s;
}

/* Correo */
#cupos-morena .form-aviso input[type="email"] {
    transition-delay: 0.60s;
}

/* Botón */
#cupos-morena .form-aviso button {
    transition-delay: 0.70s;
}

/* Condiciones */
#cupos-morena .condiciones-cupos-morena {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    transition-delay: 0.80s;
}

/* ==========================================================================
   ESTADO VISIBLE
   ========================================================================== */

#cupos-morena.is-visible .cupon-cupos-morena {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#cupos-morena.is-visible h1,
#cupos-morena.is-visible h2 {
    opacity: 1;
    transform: translateY(0);
}

#cupos-morena.is-visible .cupon-cupos-morena > img {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
}

#cupos-morena.is-visible .form-aviso input:not([type="hidden"]):not(.botcheck),
#cupos-morena.is-visible .form-aviso button {
    opacity: 1;
    transform: translateY(0);
}

#cupos-morena.is-visible .condiciones-cupos-morena {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   QUIÉNES SOMOS
   ========================================================================== */

#quienes-somos {
    padding: 60px 30px 70px;
    background: #340D0E;
}

/* Título */

#quienes-somos > h1 {
    margin: 0 0 35px;
    color: var(--blush);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* Contenedor de perfiles */

#quienes-somos .contenedor-quienes-somos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    align-items: start;
    justify-content: center;
    gap: 40px;
    width: min(92%, 720px);
    margin: 0 auto;
}

/* Perfil */

#quienes-somos .presentacion {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Foto principal */

#quienes-somos .presentacion > img:first-child {
    display: block;
    width: 100%;
    height: 270px;
    border: 3px solid var(--rose-light);
    border-bottom: none;
    border-radius: 150px 150px 0 0;
    background: var(--blush);
    object-fit: cover;
    object-position: center top;
}

/* Nombre y puesto */

#quienes-somos .nombre-puesto {
    position: relative;
    z-index: 3;
    width: calc(100% + 18px);
    margin: -1px 0 0 -9px;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--pastel-blue);
    text-align: center;
}

#quienes-somos .nombre-puesto .nombre {
    margin: 0;
    color: var(--maroon);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
}

#quienes-somos .nombre-puesto .puesto {
    margin: 2px 0 0;
    color: var(--maroon);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}

/* Descripción */

#quienes-somos .presentacion > p {
    margin: 0;
    padding: 12px 16px 0;
    background: var(--blush);
    color: var(--maroon);
    font-size: 12px;
    line-height: 1.25;
    text-align: justify;
}

#quienes-somos .presentacion > p:nth-of-type(1) {
    padding-top: 18px;
}

#quienes-somos .presentacion > p:nth-of-type(2) {
    min-height: 75px;
    padding-bottom: 18px;
    border-radius: 0 0 13px 13px;
}

#quienes-somos .presentacion > p strong {
    font-weight: 600;
}

/* Logos inferiores */

#quienes-somos .logoali,
#quienes-somos .logodani {
    width: 100%;
    margin-top: 10px;
    border-radius: 12px;
    background: var(--blush);
    object-fit: contain;
}

#quienes-somos .logoali {
    padding: 8px 45px;
    height: 65px;
}

#quienes-somos .logodani {
    width: 110%;
    padding: 8px 8px;
    height: 75px;
}

/* RESPONSIVE QUIÉNES SOMOS */

@media (max-width: 700px) {
    #quienes-somos {
        padding: 50px 20px 60px;
    }

    #quienes-somos > h1 {
        margin-bottom: 30px;
        font-size: 32px;
    }

    #quienes-somos .contenedor-quienes-somos {
        grid-template-columns: minmax(0, 300px);
        gap: 45px;
    }

    #quienes-somos .presentacion > img:first-child {
        height: 300px;
    }
}

@media (max-width: 400px) {
    #quienes-somos .contenedor-quienes-somos {
        grid-template-columns: minmax(0, 280px);
        width: 100%;
    }

    #quienes-somos .presentacion > img:first-child {
        height: 270px;
    }
}

/* ==========================================================================
   VALORES / PRINCIPIOS
   ========================================================================== */

#valores {
    padding: 70px 24px 80px;
    background-image: url("../img/fondovalores.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: left;
}

/* Título */

#valores h1 {
    width: min(90%, 600px);
    margin: 0 auto 10px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

/* Subtítulo */

#valores h2 {
    width: min(90%, 560px);
    margin: 0 auto 14px;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
}

/* Tarjetas visuales */

#valores > img {
    position: relative;
    display: block;
    width: min(90%, 430px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

/* Tarjeta 1 */
#valores > img:nth-of-type(1) {
    --x: -26px;
    z-index: 1;
    margin-bottom: -88px;
}

/* Tarjeta 2 */
#valores > img:nth-of-type(2) {
    --x: -6px;
    z-index: 2;
    margin-bottom: -84px;
}

/* Tarjeta 3 */
#valores > img:nth-of-type(3) {
    --x: 12px;
    z-index: 3;
    margin-bottom: -87px;
}

/* Tarjeta 4 */
#valores > img:nth-of-type(4) {
    --x: 24px;
    z-index: 4;
    margin-bottom: -87px;
}

/* Tarjeta 5 */
#valores > img:nth-of-type(5) {
    --x: 38px;
    z-index: 5;
}

/* Animaciones */
#valores h1,
#valores h2 {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

#valores h2 {
    transition-delay: 0.12s;
}

#valores > img {
    opacity: 0;
    transform: translateX(var(--x, 0)) translateY(35px) scale(0.97);
    transition:
        opacity 0.65s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entrada escalonada */
#valores > img:nth-of-type(1) {
    transition-delay: 0.20s;
}

#valores > img:nth-of-type(2) {
    transition-delay: 0.32s;
}

#valores > img:nth-of-type(3) {
    transition-delay: 0.44s;
}

#valores > img:nth-of-type(4) {
    transition-delay: 0.56s;
}

#valores > img:nth-of-type(5) {
    transition-delay: 0.68s;
}

/* Estado visible */
#valores.is-visible h1,
#valores.is-visible h2 {
    opacity: 1;
    transform: translateY(0);
}

#valores.is-visible > img {
    opacity: 1;
    transform: translateX(var(--x, 0)) translateY(0) scale(1);
}


/* RESPONSIVE VALORES / PRINCIPIOS */

@media (max-width: 600px) {
    #valores {
        padding: 55px 18px 65px;
        overflow: hidden;
    }

    #valores h1 {
        width: 95%;
        font-size: 30px;
    }

    #valores h2 {
        width: 95%;
        font-size: 15px;
    }

    #valores > img {
        width: min(95%, 400px);
    }

    #valores > img:nth-of-type(1) {
        margin-bottom: -70px;
        transform: translateX(-12px);
    }

    #valores > img:nth-of-type(2) {
        margin-bottom: -68px;
        transform: translateX(-5px);
    }

    #valores > img:nth-of-type(3) {
        margin-bottom: -68px;
        transform: translateX(3px);
    }

    #valores > img:nth-of-type(4) {
        margin-bottom: -68px;
        transform: translateX(9px);
    }

    #valores > img:nth-of-type(5) {
        transform: translateX(14px);
    }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */

#contacto {
    display: grid;
    grid-template-columns: 340px 400px;
    align-items: start;
    justify-content: center;
    gap: 70px;
    width: 100%;
    padding: 65px 40px 70px;
    border-top: 4px solid var(--rose-light);
    background: var(--blush);
}

/* Lado izquierdo */

#contacto .lado-izquierdo {
    width: 100%;
}

#contacto .lado-izquierdo h1 {
    margin: 45px 0 30px;
    color: var(--maroon);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 0.98;
}

#contacto .lado-izquierdo p {
    margin: 0 0 60px;
    color: var(--maroon);
    font-size: 14px;
    line-height: 1.45;
}

#contacto .lado-izquierdo .contactop {
    margin-bottom: 15px;
    font-weight: 600;
}

#contacto .lado-izquierdo img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
}

/* Botones de contacto */

#contacto .lado-izquierdo > a {
    display: flex;
    align-items: center;
    width: fit-content;
    min-width: 185px;
    margin: 0 0 8px;
    padding: 8px 17px;
    border: 1px solid #9FC9E6;
    border-radius: 999px;
    background: var(--pastel-blue);
    color: var(--maroon);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

#contacto .lado-izquierdo > a:hover {
    background: var(--celeste);
    transform: translateY(-2px);
}

/* Texto final */

#contacto .lado-izquierdo > p:last-child {
    max-width: 260px;
    margin-top: 20px;
    font-size: 10px;
    font-style: italic;
    line-height: 1.2;
    color: var(--brown);
}

/* Lado derecho */

#contacto .lado-derecho {
    width: 100%;
}

/* Formulario */

#contacto .formulario-contacto {
    width: 100%;
    padding: 24px 27px 18px;
    border: 4px solid var(--rose-light);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.2);
}

#contacto .formulario-contacto h2 {
    margin: 0 0 22px;
    color: var(--maroon);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

/* Grupos del formulario */

#contacto .grupo-formulario {
    width: 100%;
    margin: 0 0 15px;
}

#contacto .grupo-formulario > label:not(.opcion-radio) {
    display: block;
    margin: 0 0 7px;
    color: var(--rose-pink);
    font-size: 14px;
}

/* Inputs */

#contacto .grupo-formulario input[type="text"],
#contacto .grupo-formulario input[type="email"] {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    outline: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--maroon);
    font-size: 13px;
}

#contacto .grupo-formulario input[type="text"]:focus,
#contacto .grupo-formulario input[type="email"]:focus,
#contacto .grupo-formulario textarea:focus {
    box-shadow: 0 0 0 2px var(--rose-light);
}

/* Opciones de ayuda */

#contacto .opciones-ayuda {
    margin: 0 0 15px;
    padding: 0;
    border: none;
}

#contacto .opciones-ayuda legend {
    margin-bottom: 5px;
    color: var(--rose-pink);
    font-size: 14px;
}

#contacto .opcion-radio {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 3px 0;
    color: var(--rose-pink);
    font-size: 13px;
    cursor: pointer;
}

/* Radio buttons */

#contacto .opcion-radio input[type="radio"] {
    appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
}

#contacto .opcion-radio input[type="radio"]:checked {
    border: 4px solid var(--white);
    background: var(--rose-pink);
    box-shadow: 0 0 0 1px var(--rose-pink);
}

/* Textarea */

#contacto .grupo-formulario textarea {
    display: block;
    width: 100%;
    height: 125px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    outline: none;
    resize: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brown);
    font-size: 11px;
    line-height: 1.1;
}

#contacto .grupo-formulario textarea::placeholder {
    color: var(--brown);
    opacity: 0.7;
}

/* Botón enviar */

#contacto .acciones-formulario {
    display: flex;
    justify-content: flex-end;
    margin-top: -7px;
}

#contacto .boton-enviar {
    min-width: 90px;
    padding: 8px 20px;
    border: 1px solid #8FC3E6;
    border-radius: 999px;
    background: var(--pastel-blue);
    color: var(--maroon);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#contacto .boton-enviar:hover {
    background: var(--celeste);
    color: var(--brown);
    transform: translateY(-2px);
}

/* Accesibilidad */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE CONTACTO — TABLET
   ========================================================================== */

@media (max-width: 850px) {

    #contacto {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 50px 25px 60px;
    }

    #contacto .lado-izquierdo,
    #contacto .lado-derecho {
        width: min(100%, 430px);
        margin: 0 auto;
    }

    #contacto .lado-izquierdo h1 {
        margin: 0 0 25px;
    }

    #contacto .lado-izquierdo > p:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   RESPONSIVE CONTACTO — MOBILE
   ========================================================================== */

@media (max-width: 500px) {

    #contacto {
        gap: 22px;
        padding: 38px 18px 50px;
    }

    /* Título */
    #contacto .lado-izquierdo h1 {
        margin: 0 0 25px;
        font-size: 33px;
        line-height: 1;
    }

    /* Texto inicial */
    #contacto .lado-izquierdo > p {
        margin-bottom: 30px;
    }

    /* "Hablemos" */
    #contacto .lado-izquierdo .contactop {
        margin-bottom: 14px;
    }

    /* Nota bajo botones */
    #contacto .lado-izquierdo > p:last-child {
        max-width: 280px;
        margin: 17px 0 0;
        font-size: 10px;
        line-height: 1.25;
    }

    /* Formulario */
    #contacto .formulario-contacto {
        padding: 23px 20px;
        border-radius: 16px;
    }

    #contacto .boton-enviar {
        min-width: 100px;
    }
}
/* ==========================================================================
   ANIMACIONES — CONTACTO
   ========================================================================== */

/* Estado inicial — lado izquierdo */
#contacto .lado-izquierdo {
    opacity: 0;
    transform: translateX(-35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Estado inicial — formulario */
#contacto .lado-derecho {
    opacity: 0;
    transform: translateX(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.12s;
}

/* Título del formulario */
#contacto .formulario-contacto h2 {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    transition-delay: 0.35s;
}

/* Campos */
#contacto .grupo-formulario {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Aparición escalonada */
#contacto .grupo-formulario:nth-of-type(1) {
    transition-delay: 0.42s;
}

#contacto .grupo-formulario:nth-of-type(2) {
    transition-delay: 0.50s;
}

#contacto .grupo-formulario:nth-of-type(3) {
    transition-delay: 0.58s;
}

#contacto .grupo-formulario:nth-of-type(4) {
    transition-delay: 0.66s;
}

/* Botón */
#contacto .acciones-formulario {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    transition-delay: 0.74s;
}

/* Estado visible */
#contacto.is-visible .lado-izquierdo,
#contacto.is-visible .lado-derecho {
    opacity: 1;
    transform: translateX(0);
}

#contacto.is-visible .formulario-contacto h2,
#contacto.is-visible .grupo-formulario,
#contacto.is-visible .acciones-formulario {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */

footer {
    position: relative;
    width: 100%;
    background: var(--blush);
    border-top: 1px solid rgba(91, 28, 39, 0.08);
}

/* Pequeño detalle superior */
footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: var(--rose-light);
}

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

footer .piedepagina {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 45px;

    width: min(88%, 1000px);

    margin: 0 auto;
    padding: 42px 0 38px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

footer .logopie {
    display: block;
    justify-self: start;

    width: auto;
    height: 48px;
}

/* ==========================================================================
   CENTRO — LEGALES
   ========================================================================== */

footer .piecentro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;

    gap: 5px;

    text-align: center;
}

footer .piecentro p {
    margin: 0;

    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
}

footer .piecentro a {
    position: relative;

    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

footer .piecentro a:hover {
    color: var(--maroon);
}

/* ==========================================================================
   DERECHA — CONTACTO
   ========================================================================== */

footer .pie-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;

    gap: 2px;

    text-align: right;
}

footer .pie-derecha p {
    margin: 0;

    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
}

footer .pie-derecha a {
    color: var(--dusty-rose);

    font-family: var(--font-body);
    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

footer .pie-derecha a:hover {
    color: var(--maroon);
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */

footer .pie-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 8px 0 5px;

    line-height: 0;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

footer .pie-instagram:hover {
    opacity: 0.75;
    transform: translateY(-2px);
}

footer .pie-instagram img {
    display: block;

    width: 24px;
    height: 24px;

    object-fit: contain;
}

/* ==========================================================================
   TABLET — IPAD
   ========================================================================== */

@media (max-width: 820px) {

    footer .piedepagina {
        gap: 28px;

        width: 92%;

        padding: 38px 0 34px;
    }

    footer .logopie {
        height: 42px;
    }

    footer .piecentro a,
    footer .piecentro p,
    footer .pie-derecha p,
    footer .pie-derecha a {
        font-size: 10px;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    footer .piedepagina {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        width: min(86%, 390px);

        padding: 32px 0 28px;

        text-align: center;
    }

    /* Logo */
    footer .logopie {
        order: 1;

        width: auto;
        height: 40px;

        margin-bottom: 22px;
    }

    /* Información y contacto */
    footer .pie-derecha {
        order: 2;

        align-items: center;

        width: 100%;
        margin-bottom: 22px;

        text-align: center;
    }

    footer .pie-derecha p {
        font-size: 11px;
        line-height: 1.6;
    }

    footer .pie-derecha a {
        font-size: 11px;
    }

    footer .pie-instagram {
        margin: 10px 0 6px;
    }

    footer .pie-instagram img {
        width: 23px;
        height: 23px;
    }

    /* Legales */
    footer .piecentro {
        order: 3;

        width: 100%;

        padding-top: 18px;

        border-top: 1px solid rgba(91, 28, 39, 0.1);
    }

    footer .piecentro p,
    footer .piecentro a {
        font-size: 10px;
        line-height: 1.5;
    }
}

/* ==========================================================================
   MOBILE PEQUEÑO
   ========================================================================== */

@media (max-width: 390px) {

    footer .piedepagina {
        width: 84%;
        padding: 28px 0 25px;
    }

    footer .logopie {
        height: 37px;
        margin-bottom: 20px;
    }

    footer .pie-derecha p,
    footer .pie-derecha a {
        font-size: 10.5px;
    }

    footer .piecentro p,
    footer .piecentro a {
        font-size: 9.5px;
    }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

/* Entrada del Hero */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero izquierdo */
#hero .pretitulo,
#hero .izquierda-hero h1,
#hero .izquierda-hero > p,
#hero .botones-hero {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
}

#hero .pretitulo {
    animation-delay: 0.05s;
}

#hero .izquierda-hero h1 {
    animation-delay: 0.15s;
}

#hero .izquierda-hero > p {
    animation-delay: 0.3s;
}

#hero .botones-hero {
    animation-delay: 0.45s;
}

/* Imagen del hero */
#hero .img-hero {
    opacity: 0;
    animation: fadeInRight 0.8s ease 0.2s forwards;
}

/* Etiquetas flotantes del hero */
#hero .flotantes {
    opacity: 0;
    animation: fadeInRight 0.55s ease forwards;
}

#hero .flotantes:nth-of-type(1) {
    animation-delay: 0.55s;
}

#hero .flotantes:nth-of-type(2) {
    animation-delay: 0.7s;
}

#hero .flotantes:nth-of-type(3) {
    animation-delay: 0.85s;
}

#hero .flotantes:nth-of-type(4) {
    animation-delay: 1s;
}

/* ==========================================================================
   APARICIÓN AL HACER SCROLL
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.en-vista {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   CASCADAS
   ========================================================================== */

/* Líneas Morena */
.lineas_morena .reveal:nth-child(1) {
    transition-delay: 0.05s;
}

.lineas_morena .reveal:nth-child(2) {
    transition-delay: 0.2s;
}

/* Quiénes somos */
.contenedor-quienes-somos .reveal:nth-child(1) {
    transition-delay: 0.05s;
}

.contenedor-quienes-somos .reveal:nth-child(2) {
    transition-delay: 0.2s;
}

/* Valores */
#valores img.reveal:nth-of-type(1) {
    transition-delay: 0.05s;
}

#valores img.reveal:nth-of-type(2) {
    transition-delay: 0.12s;
}

#valores img.reveal:nth-of-type(3) {
    transition-delay: 0.19s;
}

#valores img.reveal:nth-of-type(4) {
    transition-delay: 0.26s;
}

#valores img.reveal:nth-of-type(5) {
    transition-delay: 0.33s;
}

/* ==========================================================================
   HOVER BOTONES
   ========================================================================== */

.boton_hero1,
.conoce-impulsa,
.conoce-web,
#btn-cupo,
.boton-enviar,
.btn-contacto {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.boton_hero1:hover,
.conoce-impulsa:hover,
.conoce-web:hover,
#btn-cupo:hover,
.boton-enviar:hover,
.btn-contacto:hover {
    transform: translateY(-3px);
}

/* ==========================================================================
   HOVER TARJETAS MORENA
   ========================================================================== */

.tarjeta-impulsa,
.tarjeta-web {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tarjeta-impulsa:hover,
.tarjeta-web:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(78, 14, 26, 0.12);
}

/* ==========================================================================
   HOVER PERFILES
   ========================================================================== */

#quienes-somos .presentacion {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#quienes-somos .presentacion:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   LOGO
   ========================================================================== */

header .logo img {
    transition: transform 0.25s ease;
}

header .logo:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   REDUCIR MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #hero .pretitulo,
    #hero .izquierda-hero h1,
    #hero .izquierda-hero > p,
    #hero .botones-hero,
    #hero .img-hero,
    #hero .flotantes {
        animation: none;
        opacity: 1;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .boton_hero1,
    .conoce-impulsa,
    .conoce-web,
    #btn-cupo,
    .boton-enviar,
    .btn-contacto,
    .tarjeta-impulsa,
    .tarjeta-web,
    #quienes-somos .presentacion,
    header .logo img {
        transition: none;
    }
}