/* =========================================================================
   Página de área de práctica
   Medidas del .ai final (mesas 3-7, lienzo 1920 × 1012):
   banda del header #4D6271 de alto 160 · columna oscura #151F2B de 649 desde
   y=161 hasta abajo, con el icono de 244 en y=422 y el nombre en y=765 ·
   panel #F3F3F3 de 885×800 en x=690 y=164, texto de 26/48 justificado ·
   botón Volver de 181×41 en x=1369 y=897 · adornos dorados a la derecha.
   ========================================================================= */

.area {
    position: relative;
    background: #fff;
    min-height: calc(1012 * var(--u));
    overflow: hidden;
}

/* la banda del header baja 23px más que la línea del menú */
.area__banda {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(160 * var(--u));
    background: #4D6271;
    z-index: 0;
}

/* ------------------------------------------------------- columna oscura ---- */
.area__col {
    position: absolute;
    top: calc(161 * var(--u));
    left: 0;
    width: calc(649 * var(--u));
    bottom: 0;
    background: #151F2B;
    z-index: 2;
}

/* Cada icono tiene su propio tamaño y su propia altura en el diseño; van en
   el bloque de abajo, uno por área. El trazo se declara sin escalar para que
   quede en 1px como en el .ai, sin importar cuánto se agrande el dibujo. */
.area__icono {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    fill: none;
    stroke: #BDAD9A;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.area--patrimonio-y-empresas-familiares .area__icono { width: calc(244 * var(--u)); height: calc(244 * var(--u)); top: calc(261 * var(--u)); }
.area--derecho-tributario .area__icono { width: calc(186 * var(--u)); height: calc(223 * var(--u)); top: calc(265 * var(--u)); }
.area--derecho-corporativo .area__icono { width: calc(212 * var(--u)); height: calc(212 * var(--u)); top: calc(277 * var(--u)); }
.area--fusiones-y-adquisiciones .area__icono { width: calc(282 * var(--u)); height: calc(184 * var(--u)); top: calc(299 * var(--u)); }
.area--derecho-inmobiliario .area__icono { width: calc(211 * var(--u)); height: calc(211 * var(--u)); top: calc(269 * var(--u)); }



.area__titulo {
    position: absolute;
    left: 0;
    right: 0;
    /* el diseño deja el bloque del nombre centrado en y=793, tenga una o dos
       líneas; por eso se ancla por el centro y no por arriba */
    top: calc(632 * var(--u));
    transform: translateY(-50%);
    margin: 0;
    padding: 0 calc(40 * var(--u));
    text-align: center;
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    font-size: clamp(19px, calc(34 * var(--u)), 34px);
    line-height: calc(48 * var(--u));
    letter-spacing: 0;
    color: #BDAD9A;
}

/* --------------------------------------------------------------- panel ---- */
.area__panel {
    position: absolute;
    left: calc(690 * var(--u));
    top: calc(164 * var(--u));
    width: calc(885 * var(--u));
    min-height: calc(800 * var(--u));
    background: #F3F3F3;
    padding: calc(70 * var(--u)) calc(68 * var(--u)) calc(110 * var(--u)) calc(57 * var(--u));
    color: #101821;
    z-index: 2;
    /* el texto se centra en altura, a la altura del dibujo de la izquierda */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.area__panel p {
    margin: 0;
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    font-size: clamp(13px, calc(26 * var(--u)), 26px);
    line-height: calc(48 * var(--u));
    text-align: justify;
    hyphens: auto;
}

.area__panel p + p {
    margin-top: calc(48 * var(--u));
}

.area__volver {
    position: absolute;
    right: calc(25 * var(--u));
    bottom: calc(26 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(181 * 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;
}

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

/* ------------------------------------------------------------- adornos ---- */
.area__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.area__deco span {
    position: absolute;
    display: block;
    border: 1px solid rgba(150, 126, 88, .45);
}

/* cuatro rectángulos medidos en el .ai; los tres de la derecha se cortan en el
   borde del lienzo, así que su ancho es el que se ve, no el real */
.area__deco span:nth-child(1) { left: calc(1620 * var(--u)); top: calc(322 * var(--u)); width: calc(297 * var(--u)); height: calc(227 * var(--u)); }
.area__deco span:nth-child(2) { left: calc(1801 * var(--u)); top: calc(404 * var(--u)); width: calc(220 * var(--u)); height: calc(350 * var(--u)); }
.area__deco span:nth-child(3) { left: calc(1658 * var(--u)); top: calc(426 * var(--u)); width: calc(300 * var(--u)); height: calc(153 * var(--u)); }
.area__deco span:nth-child(4) { left: calc(1862 * var(--u)); top: calc(564 * var(--u)); width: calc(180 * var(--u)); height: calc(238 * var(--u)); }

/* ---------------------------------------------------------- responsive ---- */
@media (max-width: 1200px) {
    .area__panel { padding-bottom: calc(140 * var(--u)); }
}

@media (max-width: 900px) {
    .area {
        min-height: 0;
        padding-bottom: 34px;
        background: #151F2B;
    }
    .area__banda { height: 74px; }
    .area__deco { display: none; }

    .area__col {
        position: static;
        width: 100%;
        padding: 96px 22px 34px;
        text-align: center;
    }
    .area__icono {
        position: static;
        transform: none;
        width: auto !important;
        height: 130px !important;
        top: auto !important;
        margin: 0 auto;
    }
    .area__titulo {
        position: static;
        transform: none;
        margin-top: 24px;
        padding: 0;
        font-size: 22px;
        line-height: 30px;
    }

    .area__panel {
        position: static;
        width: auto;
        min-height: 0;
        margin: 0 16px;
        padding: 26px 22px 30px;
    }
    .area__panel p { font-size: 15px; line-height: 26px; text-align: left; }
    .area__panel p + p { margin-top: 20px; }

    .area__volver {
        position: static;
        display: flex;
        width: 100%;
        height: 46px;
        margin: 22px auto 0;
        max-width: 320px;
    }
}

/* el corte de línea del título es el del diseño; en móvil estorba */
@media (max-width: 900px) {
    .area__titulo br { display: none; }
}

/* mismo motivo que en la ficha: esta hoja se encola después de la general */
@media (max-width: 900px) {
    .area__volver { font-size: 13px; letter-spacing: 1.4px; }
}