/* =========================================================================
   Ficha de integrante del equipo
   Medidas del .ai final (mesas 2 y 8-15, lienzo 1920 × 1012):
   banda de fondo a ancho completo · card #151F2B de 333 en x=374, con el
   retrato de 333×512 arriba · panel #F3F3F3 de 768×779 en x=745 y=195 ·
   botón Volver de 180×41 en x=1545 y=928.
   ========================================================================= */

.ficha {
    position: relative;
    background: #fff;
    min-height: 1012px;
    padding-bottom: 0;
    overflow: hidden;
}

.ficha__banda {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(300 * var(--u));
    background: #29384B url('https://dfyc.cl/wp-content/uploads/2026/08/dfyc-banda-interior.jpg') center top / cover no-repeat;
    z-index: 0;
}

/* velo del header, igual que en la portada */
.ficha::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(137 * var(--u));
    background: rgba(23, 35, 48, 0.88);
    z-index: 1;
    pointer-events: none;
}

.ficha__cuerpo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    padding-left: calc(374 * var(--u));
    padding-top: calc(195 * var(--u));
    gap: calc(39 * var(--u));
}

/* Sin biografía escrita (Cristián y Johanna) no se pinta el panel: la tarjeta
   se centra sola, para que la ficha se vea simple pero terminada, y no como una
   página a la que le falta la mitad. */
.ficha--sin-perfil .ficha__cuerpo {
    padding-left: 0;
    justify-content: center;
}

/* el botón está anclado donde iba el panel; sin panel baja al pie de la
   tarjeta, centrado con ella */
.ficha--sin-perfil .ficha__volver {
    position: static;
    display: flex;
    margin: calc(34 * var(--u)) auto 0;
}

/* ---------------------------------------------------------------- card ---- */
.ficha__card {
    flex: 0 0 calc(333 * var(--u));
    width: calc(333 * var(--u));
    background: #151F2B;
    padding-bottom: calc(36 * var(--u));
    align-self: stretch;
}

.ficha__retrato {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 333 / 455;
    object-fit: cover;
}

.ficha__id {
    padding: calc(33 * var(--u)) calc(25 * var(--u)) 0;
}

.ficha__nombre {
    display: block;
    /* antes 14: el nombre de la persona quedaba más chico que su biografía */
    font-size: clamp(15px, calc(19 * var(--u)), 19px);
    font-weight: 300;
    letter-spacing: clamp(0.8px, calc(2 * var(--u)), 2px);
    text-transform: uppercase;
    line-height: 1.15;
    color: #BDAD9A;
}

.ficha__cargo {
    display: block;
    margin-top: calc(8 * var(--u));
    /* un escalón por debajo del nombre, para que se distingan entre sí */
    font-size: clamp(12.5px, calc(15 * var(--u)), 15px);
    letter-spacing: clamp(0.5px, calc(1 * var(--u)), 1px);
    color: #7E8B99;
    line-height: 1.2;
}

.ficha__contacto {
    margin: calc(133 * var(--u)) 0 0;
    padding: 0 calc(25 * var(--u));
    text-align: center;
}

.ficha__contacto p {
    margin: 0;
    font-size: clamp(12px, calc(15 * var(--u)), 15px);
    line-height: 1.55;
    letter-spacing: clamp(0.6px, calc(1.4 * var(--u)), 1.4px);
    color: #BDAD9A;
}

.ficha__contacto a {
    color: #BDAD9A;
    text-decoration: none;
    border: 0;
}

.ficha__contacto a:hover { color: #fff; }

/* El mismo "&" dibujado del diseño que va en el hero y en la tarjeta de la
   portada, no el de Minion Pro. En las mesas interiores del .ai mide 22,6x27,9.
   Lo pidió Dala el 18-ago-2026. */
.ficha__amp {
    margin: calc(48 * var(--u)) 0 0;
    text-align: center;
    line-height: 0;
    color: #BDAD9A;
}

.ficha__amp svg {
    display: inline-block;
    width: clamp(15px, calc(22.6 * var(--u)), 22.6px);
    height: clamp(18.5px, calc(27.9 * var(--u)), 27.9px);
}

/* --------------------------------------------------------------- panel ---- */
.ficha__panel {
    flex: 0 0 calc(768 * var(--u));
    width: calc(768 * var(--u));
    margin-top: calc(0 * var(--u));
    background: #F3F3F3;
    padding: calc(88 * var(--u)) calc(86 * var(--u)) calc(70 * var(--u)) calc(70 * var(--u));
    color: #101821;
}

.ficha__panel p,
.ficha__panel li {
    margin: 0;
    font-size: clamp(11px, calc(17 * var(--u)), 17px);
    line-height: calc(30 * var(--u));
    font-weight: 300;
}

.ficha__intro {
    text-align: justify;
    hyphens: auto;
}

.ficha__panel h2 {
    margin: calc(34 * var(--u)) 0 calc(2 * var(--u));
    font-size: clamp(11px, calc(17 * var(--u)), 17px);
    /* TT Hoves Medium; la variante ya viene cargada, no baja nada nuevo */
    font-weight: 500;
    line-height: calc(30 * var(--u));
    letter-spacing: 0;
    text-transform: none;
    color: #101821;
}

.ficha__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ficha__panel li::before {
    content: "-";
}

/* --------------------------------------------------------------- volver ---- */
.ficha__volver {
    position: absolute;
    left: calc(1545 * var(--u));
    top: calc(928 * var(--u));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(180 * var(--u));
    height: calc(41 * var(--u));
    background: #151F2B;
    color: #fff;
    text-decoration: none;
    font-size: clamp(12px, calc(14 * var(--u)), 14px);
    letter-spacing: clamp(0.8px, calc(2 * var(--u)), 2px);
    text-transform: uppercase;
    transition: background .25s ease;
}

.ficha__volver:hover { background: #29384B; }

/* -------------------------------------------------------------- adornos ---- */
.ficha__deco span {
    position: absolute;
    display: block;
    border: 1px solid rgba(150, 126, 88, .45);
    z-index: 1;
}

.ficha__deco span:nth-child(1) { left: calc(-52 * var(--u));  top: calc(200 * var(--u)); width: calc(180 * var(--u)); height: calc(120 * var(--u)); }
.ficha__deco span:nth-child(2) { left: calc(40 * var(--u));   top: calc(258 * var(--u)); width: calc(215 * var(--u)); height: calc(160 * var(--u)); }
.ficha__deco span:nth-child(3) { left: calc(-10 * var(--u));  top: calc(430 * var(--u)); width: calc(150 * var(--u)); height: calc(220 * var(--u)); }
.ficha__deco span:nth-child(4) { left: calc(1600 * var(--u)); top: calc(236 * var(--u)); width: calc(220 * var(--u)); height: calc(180 * var(--u)); }
.ficha__deco span:nth-child(5) { left: calc(1700 * var(--u)); top: calc(292 * var(--u)); width: calc(215 * var(--u)); height: calc(230 * var(--u)); }
.ficha__deco span:nth-child(6) { left: calc(1560 * var(--u)); top: calc(560 * var(--u)); width: calc(190 * var(--u)); height: calc(150 * var(--u)); }

/* ------------------------------------------------------------ responsive ---- */
@media (max-width: 1200px) {
    .ficha__cuerpo {
        padding-left: calc(40 * var(--u));
        padding-right: calc(40 * var(--u));
    }
    .ficha__volver { left: auto; right: calc(40 * var(--u)); }
}

@media (max-width: 900px) {
    .ficha { min-height: 0; padding-bottom: 40px; }
    .ficha::before { display: none; }
    .ficha__deco { display: none; }
    .ficha__banda { height: 200px; }
    .ficha__cuerpo {
        display: block;
        padding: 150px 22px 0;
    }
    .ficha__card { width: 100%; max-width: 333px; margin: 0 auto; }
    .ficha__contacto { margin-top: 54px; }
    .ficha__panel {
        width: 100%;
        margin-top: 26px;
        padding: 30px 24px 34px;
    }
    .ficha__panel p, .ficha__panel li, .ficha__panel h2 { font-size: 15px; line-height: 26px; }
    .ficha__panel h2 { margin-top: 22px; }
    .ficha__volver {
        position: static;
        display: flex;
        width: 100%;
        height: 46px;
        margin: 26px auto 0;
        max-width: 333px;
    }
}

/* contenedor de los adornos: se posiciona para que el parallax tenga referencia */
.ficha__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* El tema marca los <li> con viñeta y aquí el guion ya lo pone el propio
   contenido: se veían las dos marcas juntas. */
html body .ficha__panel ul,
html body .ficha__panel li {
    list-style: none;
}

/* Los pisos de tamaño para móvil van AQUÍ y no en la hoja general: esta se
   encola después y le ganaba, dejando el nombre en 9px y el cargo en 8. */
@media (max-width: 900px) {
    .ficha__nombre { font-size: 16px; letter-spacing: 1.3px; line-height: 1.3; }
    .ficha__cargo  { font-size: 13.5px; letter-spacing: .6px; margin-top: 5px; }
    .ficha__id     { padding: 20px 18px 0; }
    .ficha__contacto p { font-size: 14px; line-height: 1.8; letter-spacing: .8px; }
    .ficha__contacto a { display: inline-block; padding: 5px 4px; }
    .ficha__volver { font-size: 13px; letter-spacing: 1.4px; }
    .ficha__amp { margin-top: 26px; }
    .ficha__amp svg { width: 18px; height: 22.2px; }
}