/* ==========================================================================
   Portada.
   ========================================================================== */

.hero {
    padding-top: var(--space-5);
}

/* Panel de marca: no ocupa todo el ancho, se apoya sobre el papel como una
   tarjeta grande. Los radios generosos vienen del portal de Edutalent. */
.hero__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 0.5rem + 4vw, 4.5rem)
        clamp(6rem, 4rem + 6vw, 8.5rem);
    background: var(--board);
    border-radius: var(--r-2xl);
    color: #fff;
}

/* Lo escrito con tiza, arriba a la derecha: es lo primero que aparece al
   cargar y no compite con el titular, que esta a la izquierda. */
.hero__writing {
    position: absolute;
    right: 5%;
    top: 15%;
    width: clamp(12rem, 25vw, 20rem);
    z-index: 0;
    pointer-events: none;
}

/* El simbolo de la marca, entero y apoyado en la esquina inferior derecha.

   Antes se salia del panel por la derecha y por abajo, y como el panel recorta
   lo que se sale, el simbolo se veia partido: los dos eslabones quedaban a
   medias y no se entendia que era. Mas pequeno y dentro se lee de un vistazo.

   Es el PNG del logotipo escalado, asi que cuanto mas grande, mas blando: a
   este tamano ademas gana nitidez. */
.hero__mark {
    position: absolute;
    right: clamp(2.5rem, 6vw, 6rem);
    bottom: clamp(2.75rem, 5.5vw, 5.5rem);
    width: clamp(9rem, 18vw, 15rem);
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* En pantalla estrecha ambos cruzarian el texto: la pizarra sola basta para
   sostener el panel. */
@media (max-width: 48rem) {
    .hero__writing,
    .hero__mark {
        display: none;
    }
}

.hero__content {
    position: relative;
    max-width: min(100%, 46rem);
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--sun);
}

.hero__eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
}

.hero__title {
    /* Medido en caracteres del propio titular: tres lineas en pantalla ancha. */
    max-width: 15ch;
    margin-top: var(--space-4);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
}

.hero__subtitle {
    max-width: 52ch;
    margin-top: var(--space-5);
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.76);
}

/* La ficha vuela sobre el borde inferior del panel: mitad en la cuadricula,
   mitad en el papel. */
.hero__search {
    position: relative;
    z-index: 20;
    margin-top: clamp(-4.5rem, -3rem - 2vw, -3rem);
    padding-inline: clamp(0rem, -1rem + 4vw, 2.5rem);
}

.hero__shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.hero__shortcuts-label {
    margin-right: var(--space-2);
}

/* --- Entrada orquestada de la portada ---------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .hero__content > *,
    .hero__search > * {
        animation: hero-rise var(--dur-slow) var(--ease) backwards;
    }

    .hero__eyebrow {
        animation-delay: 60ms;
    }

    .hero__title {
        animation-delay: 130ms;
    }

    .hero__subtitle {
        animation-delay: 210ms;
    }

    .hero__search .ficha {
        animation-delay: 290ms;
    }

    .hero__shortcuts {
        animation-delay: 380ms;
    }
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* --- Tipos de centro ---------------------------------------------------- */

.type-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.type-tile:hover {
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.type-tile__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--r-md);
    background: var(--teal-soft);
    color: var(--teal);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.type-tile:hover .type-tile__icon {
    background: var(--teal);
    color: #fff;
}

.type-tile__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.type-tile__label {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.type-tile__go {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-faint);
    transition: color var(--dur) var(--ease);
}

.type-tile__go svg {
    width: 0.8rem;
    height: 0.8rem;
    transition: transform var(--dur) var(--ease);
}

.type-tile:hover .type-tile__go {
    color: var(--teal);
}

.type-tile:hover .type-tile__go svg {
    transform: translateX(3px);
}

/* --- Ciudades ----------------------------------------------------------- */

.city-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--rule);
    transition: padding-inline-start var(--dur) var(--ease), color var(--dur) var(--ease);
}

.city-row:hover {
    padding-inline-start: var(--space-3);
    color: var(--teal);
}

.city-row__name {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.city-row__province {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-faint);
}

.city-row__count {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Franja para centros ------------------------------------------------ */

.cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
    background: var(--sun);
    color: #42320a;
    border-radius: var(--r-2xl);
}

.cta-band__eyebrow {
    color: var(--sun-ink);
}

.cta-band__title {
    margin-top: var(--space-3);
    font-size: var(--fs-h2);
}

.cta-band__body {
    max-width: 48ch;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--sun-ink);
}

.cta-band__action {
    justify-self: end;
}

@media (max-width: 52rem) {
    .cta-band {
        grid-template-columns: 1fr;
    }

    .cta-band__action {
        justify-self: start;
    }
}