/* ==========================================================================
   Talent microsite (Trabaja con nosotros) - SPA scroll
   Pantalla 1: ¿Por qué Cerdá?
   Pantalla 2: Nuestra esencia (4 pasos con efecto parallax)
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.talent-body {
    margin: 0;
    font-family: 'Quicksand', 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
    color: #37536b;
    /* Fondo fijo que ocupa toda la ventana del navegador */
    background: url('/img/talent/fondo.webp') no-repeat center center fixed;
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Barra de navegación fija
   ========================================================================== */
.talent-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(253, 250, 244, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 10px rgba(90, 70, 40, .06);
}

/* Navegación superior de páginas (Página 1 ... Página 6) */
.talent-pagenav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 30px;
    padding: 12px 48px 0;
    font-size: 14px;
}
.talent-pagenav a {
    color: #9a938a;
    text-decoration: none;
    transition: color .2s ease;
}
.talent-pagenav a:hover { color: #37536b; }
.talent-pagenav a.is-active { color: #3a3a3a; font-weight: 700; }

/* Navegación principal (logo + menú) */
.talent-mainnav {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 6px 48px 18px;
}
.talent-logo {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.talent-logo:focus,
.talent-logo:active { outline: none; }
.talent-logo img {
    height: 56px;
    width: auto;
    display: block;
}

.talent-menu {
    display: flex;
    align-items: center;
    gap: 42px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.talent-menu a {
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    color: #37536b;
    white-space: nowrap;
    transition: color .2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.talent-menu a:hover { color: #c2a15e; }
.talent-menu a:focus,
.talent-menu a:active { outline: none; text-decoration: none; }

.talent-menu .is-gold > a {
    color: #c2a15e;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.talent-menu .is-gold .caret-r {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #c2a15e;
    transition: transform .2s ease;
}
.talent-menu .is-active > a { color: #2f4a60; }

/* Subelementos: ocultos hasta pulsar "Trabaja con nosotros" */
.talent-menu .talent-subitem { display: none; }
.talent-menu.is-open .talent-subitem { display: block; }
.talent-menu.is-open .is-gold .caret-r { transform: rotate(90deg); }

/* Altura ocupada por la barra fija (referencia para separaciones) */
:root { --nav-h: 150px; }

/* ==========================================================================
   Pantalla 1 - Hero ¿Por qué Cerdá?
   ========================================================================== */
.talent-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--nav-h) 48px 60px;
}
.talent-hero .talent-page {
    display: flex;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}
.talent-figure {
    flex: 1 1 420px;
    max-width: 640px;
}
.talent-figure .photo {
    width: 100%;
    aspect-ratio: 16 / 13;
    border-radius: 30px;
    background: #d9cfc0 url('/img/talent/oficina.webp') center / cover no-repeat;
    box-shadow: 0 18px 42px rgba(90, 70, 40, .16);
}
.talent-copy {
    flex: 1 1 460px;
    max-width: 720px;
}
.talent-copy h1 {
    font-size: 52px;
    font-weight: 800;
    color: #37536b;
    line-height: 1.05;
    margin: 0 0 26px;
}
.talent-copy p {
    font-size: 21px;
    line-height: 1.45;
    color: #4e6a82;
    margin: 0 0 14px;
}

/* ==========================================================================
   Pantalla 2 - Nuestra esencia (sección sticky de 4 pasos)
   La sección mide 4 x 100vh; el contenido interior queda "pegado"
   (position: sticky) y va cambiando de paso según el scroll.
   ========================================================================== */
.esencia {
    position: relative;
    height: 400vh;               /* 4 pasos */
}
.esencia-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.esencia-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--nav-h) 48px 60px;
    width: 100%;
}

/* --- Columna izquierda: diagramas apilados (cross-fade) --- */
.esencia-visual {
    position: relative;
    flex: 1 1 46%;
    max-width: 512px; /* Tamaño imágenes ne_01–ne_04 (antes 640px, -20%) */
    margin-inline: auto; /* Mantiene el diagrama centrado en su columna */
    aspect-ratio: 1 / 1;
}
.esencia-diagram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateY(40px) scale(.96);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}

/* --- Columna derecha: bloques de texto apilados (cross-fade) --- */
.esencia-copy {
    position: relative;
    flex: 1 1 54%;
    max-width: 720px;
    min-height: 360px;
}
.esencia-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(48px);
    transition: opacity .7s ease, transform .7s ease;
    pointer-events: none;
    will-change: opacity, transform;
}
.esencia-text h2 {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #37536b;
    margin: 0 0 22px;
    line-height: 1.08;
}
.esencia-text p {
    font-size: 20px;
    line-height: 1.5;
    color: #4e6a82;
    margin: 0 0 12px;
}

/* --- Estado activo según data-active en .esencia --- */
.esencia[data-active="0"] .esencia-diagram[data-step="0"],
.esencia[data-active="1"] .esencia-diagram[data-step="1"],
.esencia[data-active="2"] .esencia-diagram[data-step="2"],
.esencia[data-active="3"] .esencia-diagram[data-step="3"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.esencia[data-active="0"] .esencia-text[data-step="0"],
.esencia[data-active="1"] .esencia-text[data-step="1"],
.esencia[data-active="2"] .esencia-text[data-step="2"],
.esencia[data-active="3"] .esencia-text[data-step="3"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Indicador de pasos (puntos a la derecha) */
.esencia-dots {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 5;
}
.esencia-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(55, 83, 107, .25);
    transition: background .3s ease, transform .3s ease;
}
.esencia[data-active="0"] .esencia-dots span:nth-child(1),
.esencia[data-active="1"] .esencia-dots span:nth-child(2),
.esencia[data-active="2"] .esencia-dots span:nth-child(3),
.esencia[data-active="3"] .esencia-dots span:nth-child(4) {
    background: #c2a15e;
    transform: scale(1.35);
}

/* ==========================================================================
   Pantalla 4 - Lo que encontrarás en Cerdá
   (5 iconos + textos que se deslizan en horizontal con el scroll / parallax)
   ========================================================================== */
.encontraras {
    position: relative;
    height: 500vh;               /* 5 pasos */
}
.encontraras-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.encontraras-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--nav-h) 48px 60px;
    width: 100%;
    text-align: center;
}
.encontraras-title {
    font-size: 46px;
    font-weight: 800;            /* black */
    color: #37536b;
    line-height: 1.08;
    margin: 0;
}

/* --- Fila de iconos --- */
.encontraras-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.encontraras-icon {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(90, 70, 40, .12);
    cursor: pointer;
    transition: transform .4s ease, box-shadow .4s ease;
}
/* Realce al pasar el ratón (solo iconos de esta sección) */
.encontraras-icon:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(55, 83, 107, .22);
}
/* Icono inactivo (trazo oscuro sobre tarjeta blanca) */
.encontraras-icon .ei-b {
    position: absolute;
    inset: 20%;
    width: 60%;
    height: 60%;
    object-fit: contain;
    opacity: 1;
    transition: opacity .5s ease;
}
/* Icono activo (la propia imagen ya trae la tarjeta azul horneada) */
.encontraras-icon .ei-n {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
    opacity: 0;
    transition: opacity .5s ease;
}
/* Estado activo del icono según data-active en .encontraras */
.encontraras[data-active="0"] .encontraras-icon[data-step="0"],
.encontraras[data-active="1"] .encontraras-icon[data-step="1"],
.encontraras[data-active="2"] .encontraras-icon[data-step="2"],
.encontraras[data-active="3"] .encontraras-icon[data-step="3"],
.encontraras[data-active="4"] .encontraras-icon[data-step="4"] {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(55, 83, 107, .28);
}
.encontraras[data-active="0"] .encontraras-icon[data-step="0"] .ei-b,
.encontraras[data-active="1"] .encontraras-icon[data-step="1"] .ei-b,
.encontraras[data-active="2"] .encontraras-icon[data-step="2"] .ei-b,
.encontraras[data-active="3"] .encontraras-icon[data-step="3"] .ei-b,
.encontraras[data-active="4"] .encontraras-icon[data-step="4"] .ei-b { opacity: 0; }
.encontraras[data-active="0"] .encontraras-icon[data-step="0"] .ei-n,
.encontraras[data-active="1"] .encontraras-icon[data-step="1"] .ei-n,
.encontraras[data-active="2"] .encontraras-icon[data-step="2"] .ei-n,
.encontraras[data-active="3"] .encontraras-icon[data-step="3"] .ei-n,
.encontraras[data-active="4"] .encontraras-icon[data-step="4"] .ei-n { opacity: 1; }

/* --- Textos que se deslizan horizontalmente --- */
.encontraras-viewport {
    width: 100%;
    max-width: 760px;
    overflow: hidden;
}
.encontraras-track {
    display: flex;
    /* El desplazamiento en X lo fija el JS (parallax con el scroll) */
    will-change: transform;
}
.encontraras-text {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 20px;
    opacity: .25;
    transition: opacity .5s ease;
}
.encontraras[data-active="0"] .encontraras-text[data-step="0"],
.encontraras[data-active="1"] .encontraras-text[data-step="1"],
.encontraras[data-active="2"] .encontraras-text[data-step="2"],
.encontraras[data-active="3"] .encontraras-text[data-step="3"],
.encontraras[data-active="4"] .encontraras-text[data-step="4"] { opacity: 1; }
.encontraras-text h3 {
    font-size: 24px;
    font-weight: 800;            /* black */
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #37536b;
    margin: 0 0 12px;
}
.encontraras-text p {
    font-size: 20px;
    font-weight: 500;            /* medium */
    line-height: 1.5;
    color: #4e6a82;
    margin: 0;
}

/* ==========================================================================
   Portada - Vídeo de fondo a pantalla completa con texto superpuesto
   ========================================================================== */
.talent-portada {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.talent-portada-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.talent-portada-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20, 34, 48, .35) 0%, rgba(20, 34, 48, .55) 100%);
}
.talent-portada-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: var(--nav-h) 48px 60px;
    color: #fff;
}
/* "En Cerdá creamos / Life's Little Moments" (peso black) */
.talent-portada-kicker {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 4px;
    color: #fff;
}
/* "¿Te unes?" (peso black, tamaño grande) */
.talent-portada-content h1 {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 20px;
    color: #fff;
}
/* "Aquí vienes a aprender..." (peso medium) */
.talent-portada-lead {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    color: #fff;
}

/* ==========================================================================
   Pantalla 3 - Únete al equipo (ofertas de empleo en iframe)
   ========================================================================== */
.talent-ofertas {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--nav-h) 48px 60px;
}
.talent-ofertas .talent-page {
    display: flex;
    flex-direction: column;
    gap: 34px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}
.talent-ofertas .talent-copy {
    flex: none;
    max-width: 720px;
    margin: 0 auto;
}
.talent-ofertas .talent-copy h2 {
    font-size: 46px;
    font-weight: 800;
    color: #37536b;
    line-height: 1.08;
    margin: 0 0 18px;
    text-align: center;
}
.talent-ofertas .talent-copy p {
    font-size: 21px;
    line-height: 1.45;
    color: #4e6a82;
    margin: 0;
}
.talent-ofertas-frame {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(90, 70, 40, .16);
    background: #f4f0e9;
}
.talent-ofertas-frame iframe {
    display: block;
    /* Ensanchamos el iframe para que su barra de scroll (~17px) quede fuera
       del área visible; el contenedor con overflow:hidden la recorta.
       El scroll con rueda/táctil sigue funcionando. */
    width: calc(100% + 20px);
    height: 80vh;
    min-height: 640px;
    border: 0;
}

/* ==========================================================================
   Pantalla 6 - Preguntas frecuentes (dos columnas de tarjetas)
   ========================================================================== */
.talent-faqs {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--nav-h) 48px 60px;
}
.faqs-inner {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}
.faqs-title {
    font-size: 46px;
    font-weight: 800;            /* black */
    color: #37536b;
    line-height: 1.08;
    margin: 0 0 40px;
    text-align: center;
}
/* Dos columnas con alturas independientes (escalonado) */
.faqs-grid {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.faqs-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* La columna derecha arranca desplazada hacia abajo */
.faqs-col:nth-child(2) {
    margin-top: 40px;
}
.faq-card {
    background: #fff;
    border-radius: 26px;
    padding: 34px 38px;
    box-shadow: 0 16px 36px rgba(90, 70, 40, .12);
}
.faq-card h3 {
    font-size: 24px;
    font-weight: 800;            /* black */
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #37536b;
    margin: 0 0 16px;
}
.faq-card p {
    font-size: 18px;
    font-weight: 500;            /* medium */
    line-height: 1.5;
    color: #4e6a82;
    margin: 0 0 12px;
}
.faq-card p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    :root { --nav-h: 170px; }
    .talent-mainnav { flex-wrap: wrap; gap: 18px; padding: 6px 24px 16px; }
    .talent-menu { gap: 24px; flex-wrap: wrap; }
    .talent-menu a { font-size: 16px; }
    .talent-pagenav { gap: 18px; padding: 12px 24px 0; }

    .talent-hero { padding: var(--nav-h) 24px 40px; }
    .talent-portada-content { padding: var(--nav-h) 24px 40px; }
    .talent-portada-kicker { font-size: 22px; }
    .talent-portada-content h1 { font-size: 44px; }
    .talent-portada-lead { font-size: 20px; }
    .talent-ofertas { padding: var(--nav-h) 24px 40px; }
    .talent-ofertas .talent-copy h2 { font-size: 34px; }
    .talent-ofertas-frame iframe { height: 70vh; min-height: 520px; }
    .talent-page { gap: 40px; }
    .talent-copy h1 { font-size: 40px; }
    .talent-copy p { font-size: 18px; }

    /* Se mantiene el efecto sticky, apilando diagrama sobre texto */
    .esencia-inner {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: var(--nav-h) 24px 30px;
    }
    .esencia-visual {
        width: 100%;
        max-width: 300px;
        flex: 0 0 auto;
    }
    .esencia-copy {
        flex: 0 0 auto;
        min-height: 260px;
        width: 100%;
    }
    .esencia-text h2 { font-size: 30px; }
    .esencia-text p { font-size: 16px; }
    .esencia-dots { right: 14px; }

    .encontraras-inner { gap: 36px; padding: var(--nav-h) 24px 30px; }
    .encontraras-title { font-size: 34px; }
    .encontraras-icons { gap: 20px; }
    .encontraras-icon { width: 100px; height: 100px; border-radius: 20px; }
    .encontraras-icon .ei-n { border-radius: 20px; }
    .encontraras-text h3 { font-size: 20px; }
    .encontraras-text p { font-size: 16px; }

    .talent-faqs { padding: var(--nav-h) 24px 40px; }
    .faqs-title { font-size: 34px; margin-bottom: 28px; }
    .faqs-grid { flex-direction: column; gap: 24px; }
    .faqs-col { gap: 24px; }
    .faqs-col:nth-child(2) { margin-top: 0; }
    .faq-card { padding: 26px 28px; }
    .faq-card h3 { font-size: 20px; }
    .faq-card p { font-size: 16px; }
}

@media (max-width: 575px) {
    :root { --nav-h: 190px; }
    .talent-logo img { height: 44px; }
    .talent-pagenav { justify-content: flex-start; }
    .talent-copy h1 { font-size: 32px; }
    .esencia-visual { max-width: 220px; }
    .esencia-text h2 { font-size: 26px; }

    .encontraras-title { font-size: 28px; }
    .encontraras-icons { gap: 14px; }
    .encontraras-icon { width: 78px; height: 78px; border-radius: 16px; }
    .encontraras-icon .ei-n { border-radius: 16px; }
}

/* ===========================================================================
   Footer Talent — dos columnas (contacto / información)
   Sólo aplica a la página Talent (.talent-body), no al footer del resto del sitio.
   =========================================================================== */
.talent-body .footer-tienda .frame-6990 > .frame {
    width: 100%;
}

.talent-body .footer-tienda .talent-footer-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px 60px;
    width: 100%;
    max-width: 1178px;
    margin: 0 auto;
    padding: 0 20px;
}

.talent-body .footer-tienda .talent-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* La dirección ya no necesita la altura fija que traía el footer original */
.talent-body .footer-tienda .talent-footer-address {
    display: block;
}

/* Teléfonos: separación uniforme, sin el margen extra del footer original */
.talent-body .footer-tienda .frame-6987-1 {
    gap: 12px;
}

.talent-body .footer-tienda .phone-footer {
    margin-bottom: 0;
}

/* Redes sociales: sin padding lateral para que el primer icono quede
   alineado con los iconos de GPS y teléfono */
.talent-body .footer-tienda .group-rrss {
    gap: 20px;
}

.talent-body .footer-tienda .group-rrss .link-rrss {
    display: flex;
    align-items: center;
    padding: 0;
}

@media (max-width: 767px) {
    .talent-body .footer-tienda .talent-footer-cols {
        justify-content: flex-start;
        gap: 32px;
    }
}

/* ===========================================================================
   Botón flotante "volver arriba"
   =========================================================================== */
.talent-totop {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 900;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c2a15e;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: background .2s ease, transform .2s ease;
}
.talent-totop:hover { background: #ab8b4c; transform: translateY(-2px); }
.talent-totop:focus { outline: none; }
.talent-totop svg {
    width: 22px;
    height: 22px;
    display: block;
}

@media (max-width: 900px) {
    .talent-totop {
        right: 18px;
        bottom: 18px;
        width: 48px;
        height: 48px;
    }
    .talent-totop svg { width: 19px; height: 19px; }
}