/* ================================================
   HOME — home.css
   Hereda variables de main.css
   ================================================ */

/* ── Utilidad fade-in scroll ────────────────── */
.search-section,
.popular,
.why,
.impact,
.reviews,
.cta,
.service-card,
.why-card,
.impact-card,
.review-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
    position: relative;
    max-height: 92vh;
    z-index: 0;
}
.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 92vh;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) 5% var(--space-8) 50%;
    text-align: center;
    animation: heroFadeIn 0.9s ease both;
    z-index: 0;
}
.hero__subtitle {
    color: #FFFFFF;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero__subtitle--top    { animation: fadeInDown 0.7s 0.3s ease both; }
.hero__subtitle--bottom { animation: fadeInUp   0.7s 0.7s ease both; }
.hero__logo {
    max-width: 40%;
    height: auto;
    animation: zoomIn 0.6s 0.5s ease both;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.3));
}

@keyframes heroFadeIn { from { opacity:0 }                              to { opacity:1 } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY( 20px) } to { opacity:1; transform:translateY(0) } }
@keyframes zoomIn     { from { opacity:0; transform:scale(0.85) }       to { opacity:1; transform:scale(1) } }

/* ════════════════════════════════════════════
   BUSCADOR
════════════════════════════════════════════ */
.search-section {
    padding: var(--space-10) var(--container-padding);
    max-width: var(--container-max);
    margin: 0 auto;
}
.search-card {
    background-color: #ffefda;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.search-card__form {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 360px;
}
.search-card__image { overflow: hidden; }
.search-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-card__body {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    justify-content: center;
}
.search-card__title {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-teal);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.search-card__title i { color: var(--color-primary); }
.search-card__fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-6);
    align-items: end;
}
.search-card__col  { display: flex; flex-direction: column; gap: var(--space-5); }
.search-card__group { display: flex; flex-direction: column; gap: var(--space-1); }
.search-card__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-teal);
    font-family: var(--font-primary);
}
.search-card__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    color: var(--color-teal);
    background-color: var(--color-white);
    border: 1.5px solid rgba(49,128,134,0.3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23318086' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.search-card__select:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px rgba(49,128,134,0.15);
}
.search-card__action { display: flex; align-items: flex-end; padding-bottom: 2px; }

.btn-platform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}
.btn-platform:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(242,146,36,0.45); color: var(--color-white); }
.btn-platform--lg   { font-size: var(--font-size-lg); padding: 0.85rem 2rem; }
.btn-platform--navy { background: linear-gradient(135deg, var(--color-navy) 0%, #003a5c 100%); box-shadow: 0 4px 14px rgba(0,77,119,0.3); }
.btn-platform--navy:hover { box-shadow: 0 8px 24px rgba(0,77,119,0.45); }

/* ════════════════════════════════════════════
   LO MÁS POPULAR
════════════════════════════════════════════ */
.popular {
    padding: var(--space-12) var(--container-padding);
    max-width: var(--container-max);
    margin: 0 auto;
}
.popular__header { text-align: center; margin-bottom: var(--space-8); }
.popular__title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    margin: 0 0 var(--space-2);
}
.popular__brand { color: var(--color-primary); -webkit-text-stroke: 1px #000; }
.popular__subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin: 0; }
.popular__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }

.service-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card__img { width: 80px; height: 80px; object-fit: contain; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.service-card__body { text-align: center; width: 100%; }
.service-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-navy); margin: 0 0 var(--space-2); }
.service-card__item { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; line-height: var(--line-height-snug); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border-light); }
.service-card__item:last-child { border-bottom: none; }

/* ════════════════════════════════════════════
   ¿POR QUÉ ELEGIR PROFEGO?
   · Foto de fondo ocupa todo el bloque
   · Texto blanco pegado a la izquierda
   · 4 cards naranjas posición absoluta
     replicando la imagen de referencia
════════════════════════════════════════════ */
.why {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-8);
    height: 560px;          /* altura fija para las cards absolutas */
}

/* Foto de fondo — ocupa todo */
.why__bg {
    position: absolute;
    inset: 0;
    background-image: url('/img/icons/fondos2.svg');
    background-size: cover;
    background-position: center center;
    z-index: 0;
}

/* Contenedor centrado sobre la foto */
.why__content {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max);
    padding: 0 var(--container-padding);
    z-index: 1;
}

/* TEXTO — izquierda, centrado vertical */
.why__text {
    position: absolute;
    left: var(--container-padding);
    top: 50%;
    transform: translateY(-50%);
    width: 230px;
}
.why__title {
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.75);
}
.why__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: 0;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 8px rgba(0,0,0,0.65);
}

/* CARDS — posición absoluta sobre la foto
   Referencia visual:
   [1] Flexibilidad  → arriba derecha
   [2] Profesores    → centro, izquierda del centro
   [3] Seguridad     → debajo de [1], derecha
   [4] Diversidad    → abajo, debajo de [2]
*/
.why__cards {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* el contenedor no bloquea */
}

.why-card {
    position: absolute;
    pointer-events: all;
    width: 260px;
    background-color: rgba(242, 146, 36, 0.95);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.32); }

/* Posiciones individuales */
.why-card:nth-child(1) { top:  4%;   right: 2%;  }   /* Flexibilidad  */
.why-card:nth-child(2) { top:  30%;  left:  32%; }   /* Profesores    */
.why-card:nth-child(3) { top:  52%;  right: 2%;  }   /* Seguridad     */
.why-card:nth-child(4) { bottom: 4%; left:  42%; }   /* Diversidad    */

.why-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: #1a1a1a;
}
.why-card__title i { font-size: var(--font-size-base); color: #1a1a1a; }
.why-card__desc { font-size: var(--font-size-sm); margin: 0; line-height: 1.55; color: #2d2d2d; }

/* ════════════════════════════════════════════
   IMPACTO EN CIFRAS
════════════════════════════════════════════ */
.impact {
    background: linear-gradient(160deg, var(--color-teal) 0%, var(--color-navy) 100%);
    padding: var(--space-14) var(--container-padding);
    text-align: center;
}
.impact__header { margin-bottom: var(--space-10); }
.impact__title { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: var(--font-weight-bold); color: var(--color-white); margin: 0 0 var(--space-2); }
.impact__subtitle { font-size: var(--font-size-lg); color: rgba(255,255,255,0.75); margin: 0; }
.impact__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); max-width: var(--container-max); margin: 0 auto; }
.impact-card {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-5);
    color: var(--color-white);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.impact-card:hover { transform: translateY(-4px); background-color: rgba(255,255,255,0.18); }
.impact-card__icon { font-size: 2rem; color: var(--color-primary); }
.impact-card__icon--star { animation: starFloat 2s ease-in-out infinite; }
@keyframes starFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.impact-card__number { font-size: clamp(1.8rem,3vw,2.5rem); font-weight: var(--font-weight-bold); margin:0; line-height:1; }
.impact-card__label  { font-size: var(--font-size-sm); opacity:.85; margin:0; line-height: var(--line-height-snug); }

/* ════════════════════════════════════════════
   OPINIONES DESTACADAS
════════════════════════════════════════════ */
.reviews { padding: var(--space-12) var(--container-padding); max-width: var(--container-max); margin: 0 auto; }
.reviews__header { text-align: center; margin-bottom: var(--space-8); }
.reviews__title { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: var(--font-weight-bold); color: var(--color-primary); -webkit-text-stroke: 1px #000; margin: 0 0 var(--space-2); }
.reviews__subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin: 0; }
.reviews__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.review-card {
    background-color: var(--color-white);
    border: 2.5px solid var(--color-navy);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.review-card__avatar { width:80px; height:80px; object-fit:cover; border-radius: var(--radius-full); border: 3px solid var(--color-primary); }
.review-card__subject { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-navy); margin:0; }
.review-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin:0; }

/* ════════════════════════════════════════════
   CTA DOCENTES
════════════════════════════════════════════ */
.cta { padding: 0 var(--container-padding) var(--space-12); max-width: var(--container-max); margin: 0 auto; }
.cta__inner {
    background-color: var(--color-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    box-shadow: var(--shadow-xl);
}
.cta__text { padding: var(--space-10); display:flex; flex-direction:column; justify-content:center; gap:var(--space-6); color:var(--color-white); text-align: center;}
.cta__title { font-size: clamp(1.3rem,2.5vw,2rem); font-weight: var(--font-weight-bold); margin:0; line-height:1.3; }
.cta__image img { width:100%; height:100%; object-fit:cover; display:block; }

/* ════════════════════════════════════════════
   BARRA MOBILE FIJA
════════════════════════════════════════════ */
.mobile-bar {
    display: none;
    position: fixed;
    bottom:0; left:0; right:0;
    z-index: var(--z-navbar);
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.mobile-bar__btn { flex:1; display:flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); font-family:var(--font-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); color:var(--color-white); text-decoration:none; transition:filter var(--transition-fast); }
.mobile-bar__btn:hover     { filter:brightness(1.1); color:var(--color-white); }
.mobile-bar__btn--teal     { background-color: var(--color-teal); }
.mobile-bar__btn--orange   { background-color: var(--color-primary); }

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

/* ── Tablet ── */
@media (max-width: 1024px) {
    .popular__grid          { grid-template-columns: repeat(2,1fr); }
    .impact__grid           { grid-template-columns: repeat(2,1fr); }
    .reviews__grid          { grid-template-columns: repeat(2,1fr); }
    .cta__inner             { grid-template-columns: 1fr; }
    .cta__image             { max-height: 260px; }
    .search-card__fields    { grid-template-columns: 1fr 1fr; }
    .search-card__action    { grid-column: 1/-1; justify-content: center; }

    /* Why tablet */
    .why                    { height: 500px; }
    .why__text              { width: 190px; }
    .why-card               { width: 220px; }
    .why-card:nth-child(2)  { left: 28%; }
    .why-card:nth-child(4)  { left: 37%; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .search-section,
    .popular,
    .reviews,
    .cta { padding-left:var(--space-4); padding-right:var(--space-4); }

    /* Hero */
    .hero               { max-height:42vh; min-height:220px; }
    .hero__img          { max-height:42vh; min-height:220px; object-position:center top; }
    .hero__overlay      { align-items:center; justify-content:center; flex-direction:column; gap:var(--space-2); padding:var(--space-4) var(--space-5); background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.40) 55%,rgba(0,0,0,0.18) 100%); text-align:center; }
    .hero__logo         { max-width:44%; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
    .hero__subtitle     { font-size:0.78rem; color:#FFFFFF; text-shadow:0 1px 8px rgba(0,0,0,0.85); margin:0; }

    /* Buscador */
    .search-card__form  { grid-template-columns:1fr; }
    .search-card__image { display:none; }
    .search-card__fields{ grid-template-columns:1fr; }
    .search-card__action{ grid-column:1; }
    .search-card__body  { padding:var(--space-5); }

    /* Populares */
    .popular__grid      { grid-template-columns:1fr 1fr; gap:var(--space-4); }
    .reviews__grid      { grid-template-columns:1fr; }

    /* Why mobile: abandona posición absoluta, layout en columna */
    .why {
        height: auto;
        padding: var(--space-8) var(--space-4) var(--space-10);
    }
    .why__bg            { background-position: 65% center; }
    .why__content {
        position: static;
        transform: none;
        left: auto;
        max-width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }
    .why__text {
        position: static;
        transform: none;
        width: 100%;
    }
    .why__title         { font-size:1.4rem; }
    .why__cards {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        pointer-events: all;
    }
    .why-card           { position:static; width:100%; }

    /* Impact */
    .impact             { padding:var(--space-10) var(--space-4); }
    .impact__grid       { grid-template-columns:repeat(2,1fr); gap:var(--space-4); }

    /* CTA */
    .cta__text          { padding:var(--space-6); }
    .cta__title         { font-size:1.3rem; }

    /* Mobile bar */
    .mobile-bar         { display:flex; }
}

/* ── Mobile pequeño ── */
@media (max-width: 480px) {
    .popular__grid      { grid-template-columns:1fr; }
    .impact__grid       { grid-template-columns:1fr; }
    .reviews__grid      { grid-template-columns:1fr; }
    .search-card__title { font-size:1rem; }
    .why__cards         { grid-template-columns:1fr; }
}