/**
 * ============================================================
 * EMZO Corporate
 * components.css
 * ------------------------------------------------------------
 * Componentes reutilizables del frontend.
 *
 * Componente:
 * Editorial Content
 *
 * Este componente es transversal y puede utilizarse en:
 * - Servicios
 * - Divisiones
 * - Páginas corporativas
 * - Contenido WordPress
 *
 * @package EMZO_Corporate
 * ============================================================
 */


/* ============================================================
   EDITORIAL CONTENT — CONTAINER
============================================================ */

.emzo-editor-content {

    width:100%;

}


/* ============================================================
   EDITORIAL CONTENT — SERVICE WRAPPER
============================================================ */

.emzo-service-content--premium {

    padding:38px 0 48px;

    background:#F4F6F8;

}

.emzo-service-editor {

    max-width:1180px;

    margin:0 auto;

    padding:0;

}


/* ============================================================
   EDITORIAL CONTENT — HEADINGS
============================================================ */

.emzo-service-editor h2 {

    position:relative;

    max-width:900px;

    margin:0 auto 30px;

    padding-left:20px;

    color:#102131;

    font-size:clamp(1.8rem,3vw,2.5rem);

    font-weight:700;

    line-height:1.2;

    letter-spacing:-.02em;

}

.emzo-service-editor h2::before {

    content:"";

    position:absolute;

    left:0;

    top:.08em;

    width:4px;

    height:1.15em;

    border-radius:2px;

    background:#F58220;

}


/* ============================================================
   EDITORIAL CONTENT — FEATURE TITLES
============================================================ */

.emzo-service-editor h3 {

    position:relative;

    max-width:850px;

    margin:32px auto 12px;

    padding-left:16px;

    color:#102131;

    font-size:1.4rem;

    font-weight:700;

    line-height:1.3;

}

.emzo-service-editor h3::before {

    content:"";

    position:absolute;

    left:0;

    top:.2em;

    width:4px;

    height:1em;

    border-radius:2px;

    background:#F58220;

}

.emzo-service-editor h4 {

    max-width:850px;

    margin:28px auto 10px;

    color:#102131;

    font-size:1.15rem;

    font-weight:700;

    line-height:1.3;

}


/* ============================================================
   EDITORIAL CONTENT — TEXT
============================================================ */

.emzo-service-editor p {

    max-width:900px;

    margin:0 auto 18px;

    color:#34495E;

    font-size:1rem;

    line-height:1.78;

}

.emzo-service-editor strong {

    color:#102131;

    font-weight:700;

}


/* ============================================================
   EDITORIAL CONTENT — FEATURE TEXT
============================================================ */

.emzo-service-editor h3 + p {

    max-width:850px;

    margin-bottom:22px;

}


/* ============================================================
   EDITORIAL CONTENT — IMAGES
============================================================ */

/*
 * Las imágenes continúan funcionando con el contenido
 * existente de WordPress.
 *
 * No dependemos de una estructura HTML nueva.
 */

.emzo-service-editor p:has(> img:only-child),
.emzo-service-editor figure.wp-block-image {

    position:relative;

    width:min(44%,500px);

    margin:10px 0 30px 46px;

    float:right;

}


/* ============================================================
   IMAGE FRAME
============================================================ */

.emzo-service-editor p:has(> img:only-child)::before,
.emzo-service-editor figure.wp-block-image::before {

    content:"";

    position:absolute;

    inset:-6px;

    border:1px solid rgba(16,33,49,.10);

    border-radius:14px;

    pointer-events:none;

}


/* ============================================================
   IMAGE
============================================================ */

.emzo-service-editor p:has(> img:only-child) img,
.emzo-service-editor figure.wp-block-image img {

    display:block;

    width:100%;

    height:auto;

    margin:0;

    border-radius:10px;

    box-shadow:0 14px 32px rgba(8,21,33,.14);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.emzo-service-editor p:has(> img:only-child):hover img,
.emzo-service-editor figure.wp-block-image:hover img {

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(8,21,33,.18);

}


/* ============================================================
   IMAGE CAPTION
============================================================ */

.emzo-service-editor figcaption {

    margin-top:0;

    padding:9px 12px;

    border-radius:0 0 10px 10px;

    background:#102131;

    color:rgba(255,255,255,.78);

    font-size:.78rem;

    line-height:1.45;

}


/* ============================================================
   EDITORIAL FLOW
============================================================ */

.emzo-service-editor h2,
.emzo-service-editor h3,
.emzo-service-editor h4 {

    clear:both;

}


/* ============================================================
   EDITORIAL LISTS
============================================================ */

.emzo-service-editor ul,
.emzo-service-editor ol {

    max-width:900px;

    margin:24px auto 30px;

}

.emzo-service-editor ul {

    padding:22px 28px;

    list-style:none;

    border:1px solid rgba(16,33,49,.08);

    border-radius:14px;

    background:#FFFFFF;

    box-shadow:0 8px 24px rgba(8,21,33,.06);

}

.emzo-service-editor ol {

    padding-left:25px;

}

.emzo-service-editor li {

    margin-bottom:11px;

    color:#34495E;

    line-height:1.7;

}

.emzo-service-editor li:last-child {

    margin-bottom:0;

}

.emzo-service-editor ul li {

    position:relative;

    padding-left:25px;

}

.emzo-service-editor ul li::before {

    content:"";

    position:absolute;

    left:0;

    top:.62em;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#F58220;

}


/* ============================================================
   EDITORIAL BLOCKQUOTE
============================================================ */

.emzo-service-editor blockquote {

    max-width:900px;

    margin:32px auto;

    padding:22px 28px;

    border-left:4px solid #F58220;

    border-radius:0 8px 8px 0;

    background:#102131;

    color:#FFFFFF;

}

.emzo-service-editor blockquote p {

    margin:0;

    color:#FFFFFF;

}


/* ============================================================
   EDITORIAL TABLES
============================================================ */

.emzo-service-editor table {

    max-width:900px;

    margin:28px auto;

    background:#FFFFFF;

}

.emzo-service-editor th {

    padding:13px 15px;

    background:#102131;

    color:#FFFFFF;

}

.emzo-service-editor td {

    padding:13px 15px;

    border:1px solid #E5E8EB;

}


/* ============================================================
   EDITORIAL LINKS
============================================================ */

.emzo-service-editor a {

    color:#F58220;

    font-weight:600;

}

.emzo-service-editor a:hover {

    color:#102131;

}


/* ============================================================
   EDITORIAL CLEAR
============================================================ */

.emzo-service-editor::after {

    content:"";

    display:block;

    clear:both;

}

/* ============================================================
DIVISION EDITORIAL — INTRO GRID
============================================================ */

.emzo-division-intro-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    gap:28px;

    margin:38px 0 32px;

}

.emzo-division-intro-panel{

    padding:30px 32px;

    border:1px solid rgba(16,33,49,.08);

    border-radius:12px;

    background:#ffffff;

    box-shadow:0 8px 24px rgba(16,33,49,.06);

}

.emzo-division-intro-panel h3{

    margin:0 0 16px;

    color:#102131;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.25;

}

.emzo-division-intro-panel h3::before{

    content:"";

    display:inline-block;

    width:3px;

    height:22px;

    margin-right:10px;

    vertical-align:-3px;

    background:#ff8a00;

}

.emzo-division-intro-panel p{

    margin:0;

    color:#526273;

    line-height:1.7;

}

.emzo-division-intro-panel--list ul{

    margin:0;

    padding:0;

    list-style:none;

}

.emzo-division-intro-panel--list li{

    position:relative;

    margin:0;

    padding:7px 0 7px 20px;

    color:#526273;

    line-height:1.5;

}

.emzo-division-intro-panel--list li::before{

    content:"";

    position:absolute;

    left:0;

    top:14px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#ff8a00;

}

/* ============================================================
DIVISION EDITORIAL — INTRO
============================================================ */

.emzo-division-intro{
    width:100%;
}

.emzo-division-intro h2{
    position:relative;

    max-width:100%;

    margin:0 0 24px;

    padding-left:18px;

    color:#102131;

    font-size:clamp(1.8rem,3vw,2.5rem);

    font-weight:700;

    line-height:1.2;

    letter-spacing:-.02em;
}

.emzo-division-intro h2::before{
    content:"";

    position:absolute;

    left:0;

    top:.08em;

    width:3px;

    height:1.1em;

    background:#ff8a00;
}

.emzo-division-intro > p{
    margin:0 0 18px;

    color:#526273;

    line-height:1.7;
}

.emzo-division-intro-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    gap:28px;

    margin:30px 0;
}

.emzo-division-intro-panel{

    padding:28px 30px;

    border:1px solid rgba(16,33,49,.08);

    border-radius:12px;

    background:#fff;

    box-shadow:0 8px 24px rgba(16,33,49,.06);
}

.emzo-division-intro-panel h3{

    margin:0 0 14px;

    color:#102131;

    font-size:1.3rem;

    font-weight:700;

    line-height:1.25;
}

.emzo-division-intro-panel h3::before{

    content:"";

    display:inline-block;

    width:3px;

    height:20px;

    margin-right:9px;

    vertical-align:-3px;

    background:#ff8a00;
}

.emzo-division-intro-panel p{

    margin:0;

    color:#526273;

    line-height:1.7;
}

.emzo-division-intro-panel--list ul{

    margin:0;

    padding:0;

    list-style:none;
}

.emzo-division-intro-panel--list li{

    position:relative;

    margin:0;

    padding:6px 0 6px 18px;

    color:#526273;

    line-height:1.5;
}

.emzo-division-intro-panel--list li::before{

    content:"";

    position:absolute;

    left:0;

    top:13px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#ff8a00;
}

/* ============================================================
SERVICE DETAIL — INNER SERVICE TEMPLATE
============================================================ */

.emzo-service-detail{
    width:100%;
}

.emzo-service-detail__intro{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    align-items:center;

    gap:56px;

    padding:10px 0 58px;

}

.emzo-service-detail__intro-content{

    max-width:620px;

}

.emzo-service-detail__kicker{

    display:block;

    margin-bottom:12px;

    color:#f28c18;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.emzo-service-detail h2{

    margin:0 0 20px;

    color:#102131;

    font-size:clamp(1.8rem,3vw,2.5rem);

    font-weight:700;

    line-height:1.18;

    letter-spacing:-.02em;

}

.emzo-service-detail p{

    color:#526273;

    line-height:1.75;

}

.emzo-service-detail__intro-media{

    min-height:300px;

    overflow:hidden;

    border-radius:14px;

    background:#e9edf1;

}

.emzo-service-detail__intro-media img,
.emzo-service-detail__solution-media img,
.emzo-service-detail__closing-media img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


/* ============================================================
CAPABILITIES
============================================================ */

.emzo-service-detail__capabilities{

    padding:54px 0;

}

.emzo-service-detail__section-header{

    max-width:760px;

    margin:0 auto 34px;

    text-align:center;

}

.emzo-service-detail__section-header > span{

    display:block;

    margin-bottom:10px;

    color:#f28c18;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.emzo-service-detail__section-header h2{

    margin-bottom:0;

}

.emzo-service-detail__capabilities-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

}

.emzo-service-detail__capability{

    padding:30px 26px;

    border:1px solid rgba(16,33,49,.08);

    border-radius:14px;

    background:#fff;

    box-shadow:0 8px 24px rgba(16,33,49,.06);

    text-align:center;

}

.emzo-service-detail__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#102131;

    color:#f28c18;

    font-size:1.35rem;

}

.emzo-service-detail__capability h3{

    margin:0 0 12px;

    color:#102131;

    font-size:1.15rem;

    font-weight:700;

    line-height:1.3;

}

.emzo-service-detail__capability p{

    margin:0;

    font-size:.95rem;

}


/* ============================================================
SOLUTION
============================================================ */

.emzo-service-detail__solution{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    align-items:center;

    gap:56px;

    padding:58px 0;

}

.emzo-service-detail__solution-media{

    min-height:360px;

    overflow:hidden;

    border-radius:14px;

    background:#e9edf1;

}

.emzo-service-detail__solution-content ul{

    margin:22px 0 0;

    padding:0;

    list-style:none;

}

.emzo-service-detail__solution-content li{

    position:relative;

    margin:0 0 16px;

    padding-left:22px;

    color:#526273;

    line-height:1.65;

}

.emzo-service-detail__solution-content li::before{

    content:"";

    position:absolute;

    left:0;

    top:.65em;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#f28c18;

}

.emzo-service-detail__solution-content strong{

    color:#102131;

}


/* ============================================================
CLOSING
============================================================ */

.emzo-service-detail__closing{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    align-items:center;

    gap:46px;

    padding:54px 0 12px;

}

.emzo-service-detail__closing-content{

    grid-column:1;

    grid-row:1;

    max-width:620px;

}

.emzo-service-detail__closing-media{

    grid-column:2;

    grid-row:1;

    min-height:280px;

    overflow:hidden;

    border-radius:14px;

    background:#e9edf1;

}

.emzo-service-detail__closing-content p:last-child{

    margin-bottom:0;

}

/* ============================================================
   DIVISION EDITORIAL — ICONOS DE ENFOQUE Y CAPACIDADES
   Estilo visual congelado EMZO Corporate
============================================================ */

.emzo-division-intro-feature{

    display:grid;

    grid-template-columns:88px minmax(0,1fr);

    align-items:center;

    gap:24px;

}


/* ============================================================
   ICONO CIRCULAR
============================================================ */

.emzo-division-intro-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:78px;

    height:78px;

    border:2px solid #ff8a00;

    border-radius:50%;

    color:#ff8a00;

    font-size:2rem;

    line-height:1;

    flex-shrink:0;

}


/* ============================================================
   TEXTO DENTRO DEL FEATURE
============================================================ */

.emzo-division-intro-feature p{

    margin:0;

    color:#526273;

    line-height:1.7;

}


/* ============================================================
   LISTA DE CAPACIDADES
============================================================ */

.emzo-division-intro-panel--list
.emzo-division-intro-feature{

    align-items:start;

}


.emzo-division-intro-panel--list
.emzo-division-intro-feature
.emzo-division-intro-icon{

    margin-top:4px;

}


.emzo-division-intro-panel--list ul{

    margin:0;

    padding:0;

    list-style:none;

}


.emzo-division-intro-panel--list li{

    position:relative;

    margin:0;

    padding:4px 0 4px 24px;

    color:#526273;

    line-height:1.5;

}


.emzo-division-intro-panel--list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:4px;

    color:#ff8a00;

    font-weight:700;

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:767.98px){

    .emzo-division-intro-feature{

        grid-template-columns:70px minmax(0,1fr);

        gap:18px;

    }

    .emzo-division-intro-icon{

        width:62px;

        height:62px;

        font-size:1.6rem;

    }

}


@media(max-width:480px){

    .emzo-division-intro-feature{

        grid-template-columns:1fr;

        gap:16px;

    }

    .emzo-division-intro-icon{

        width:64px;

        height:64px;

    }

}
/* ============================================================
   SPECIALIZED SERVICES — EDITORIAL OVERRIDE
   ------------------------------------------------------------
   Ajuste exclusivo para páginas de Servicios Especializados.
   No modifica servicios ni divisiones existentes.
============================================================ */

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro{
    width:100%;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro h2{
    max-width:100%;
    margin:0 0 24px;
    padding-left:18px;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro > p{
    max-width:100%;
    margin:0 0 18px;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro h3{
    max-width:100%;
    margin:0 0 14px;
    padding-left:0;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro h3::before{
    display:inline-block;
    position:static;
    width:3px;
    height:20px;
    margin-right:9px;
    vertical-align:-3px;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro p{
    max-width:none;
    margin:0;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro ul{
    max-width:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro li{
    margin:0;
}
/* ============================================================
   SPECIALIZED SERVICES — EMPTY PARAGRAPHS
   ------------------------------------------------------------
   WordPress puede generar párrafos vacíos dentro del contenido
   editorial. No deben ocupar columnas del grid especializado.
============================================================ */

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro-grid > p:empty{
    display:none;
}
/* ============================================================
   SPECIALIZED SERVICES — GRID CLEANUP
   ------------------------------------------------------------
   WordPress puede insertar párrafos de espaciado dentro del
   contenido editorial. El grid especializado solo debe
   contener los paneles de contenido.
============================================================ */

.emzo-single-service--specialized .emzo-service-editor .emzo-division-intro-grid > p{
    display:none;
}