/* ===========================================================
   SECTION SHELL (compartido por las secciones de contenido)
=========================================================== */

section{

    padding:88px 0;

}

.section-label{

    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--steel);
    font-weight:700;
    margin-bottom:14px;

}

h2{

    font-family:var(--display);
    font-size:32px;
    line-height:1.15;
    letter-spacing:-.01em;
    margin-bottom:18px;
    max-width:640px;
    color:var(--ink);

}

.section-lede{

    font-size:16px;
    color:var(--ink-muted);
    max-width:620px;
    margin-bottom:44px;

}

/* ---------- Precios (showcase) ---------- */

.price-showcase{

    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:36px;
    align-items:stretch;

}

.price-photo{

    border-radius:14px;
    overflow:hidden;
    min-height:260px;

}

.price-photo img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;

}

.price-photo:hover img{

    transform:scale(1.06);

}

.price-cards{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:16px;

}

.price-cards-featured{

    width:100%;
    max-width:420px;
    align-items:center;
    text-align:center;

}

.price-row{

    display:flex;
    align-items:center;
    gap:14px;
    max-width:420px;

}

.price-icon{

    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:10px;
    background:rgba(122,26,26,.12);
    color:var(--energy);
    display:flex;
    align-items:center;
    justify-content:center;

}

.price-icon svg{

    width:26px;
    height:26px;

}

.price-card{

    flex:1;
    background:var(--steel);
    color:#fff;
    border-radius:10px;
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    gap:6px;

}

.price-card-label{

    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);

}

.price-card-value{

    font-family:var(--display);
    font-size:24px;
    font-variant-numeric:tabular-nums;

}

.btn-quote-price{

    margin-top:10px;
    background:var(--steel);
    color:#fff;
    padding:16px 26px;
    border-radius:4px;
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:background .15s ease, transform .15s ease;

}

.btn-quote-price svg{

    width:16px;
    height:16px;
    flex-shrink:0;
    transition:transform .15s ease;

}

.btn-quote-price:hover svg{

    transform:translateX(3px);

}

.btn-quote-price:hover{

    background:var(--steel-light);
    transform:translateY(-2px);

}

.section-cta-banner{

    margin-top:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:26px 30px;
    background:var(--paper-dim);
    border-radius:10px;
    flex-wrap:wrap;

}

.section-cta-banner p{

    font-size:15px;
    color:var(--ink);
    max-width:480px;
    margin:0;

}

.section-cta-banner .btn-quote-price{

    margin-top:0;
    flex-shrink:0;

}

/* ---------- Nosotros ---------- */

.nosotros{

    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);

}

.nosotros-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;

}

.nosotros-copy p{

    margin-bottom:16px;
    font-size:15px;
    color:var(--ink-muted);

}

.stat-row{

    display:flex;
    gap:36px;
    margin-top:28px;

}

.stat b{

    display:block;
    font-family:var(--display);
    font-size:28px;
    color:var(--steel);

}

.stat span{

    font-size:12px;
    color:var(--ink-muted);
    text-transform:uppercase;
    letter-spacing:.06em;

}

.map-card{

    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(10,10,10,.06);

}

.map-card img{

    width:100%;
    height:100%;
    min-height:320px;
    object-fit:cover;
    display:block;

}

/* ---------- Servicios ---------- */

.servicio-card{

    background:var(--ink);
    color:#fff;
    border-radius:14px;
    padding:36px 40px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;

}

.servicio-card h3{

    font-family:var(--display);
    font-size:25px;
    margin-bottom:12px;

}

.servicio-card p{

    color:rgba(255,255,255,.75);
    font-size:16px;
    max-width:460px;

}

.servicio-list{

    list-style:none;
    padding-left:32px;
    border-left:1px solid rgba(255,255,255,.14);
    display:flex;
    flex-direction:column;
    gap:12px;

}

.servicio-list li{

    font-size:14px;
    color:#fff;
    display:flex;
    gap:10px;
    align-items:flex-start;

}

.servicio-list li::before{

    content:"—";
    color:var(--steel-light);
    flex-shrink:0;

}

/* ---------- Especificaciones tecnicas (Calidad) ---------- */

.specs-grid{

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;

}

.spec-card{

    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:26px 22px;
    transition:border-color .15s ease, transform .15s ease;

}

.spec-card:hover{

    border-color:var(--steel-light);
    transform:translateY(-3px);

}

.spec-icon{

    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(122,26,26,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--energy);
    margin-bottom:16px;

}

.spec-icon svg{

    width:20px;
    height:20px;

}

.spec-card h3{

    font-family:var(--display);
    font-size:15px;
    margin-bottom:8px;
    color:var(--ink);

}

.spec-card p{

    font-size:13px;
    color:var(--ink-muted);
    line-height:1.5;

}

/* ---------- Beneficios ---------- */

.beneficios-grid{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:32px;

}

.beneficio{

    flex:0 1 calc((100% - 64px) / 3);
    display:flex;
    flex-direction:column;
    gap:12px;

}

.beneficio-icon{

    width:44px;
    height:44px;
    border-radius:10px;
    background:rgba(20,48,79,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--steel);

}

.beneficio h3{

    font-family:var(--display);
    font-size:16px;
    color:var(--ink);

}

.beneficio p{

    font-size:14px;
    color:var(--ink-muted);
    line-height:1.5;

}

/* ---------- Sectores ---------- */

.sectores-grid{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;

}

.sector-card{

    flex:0 1 calc((100% - 40px) / 3);
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    text-align:left;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;

}

.sector-card:hover{

    border-color:var(--steel-light);
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(10,10,10,.06);

}

.sector-photo{

    height:160px;
    background-color:var(--steel);
    background-image:
        linear-gradient(135deg, rgba(20,48,79,.55), rgba(10,10,10,.35));
    background-size:cover;
    background-position:center;

}

.sector-body{

    padding:18px 20px 22px;

}

.sector-card b{

    font-size:16px;
    display:block;
    margin-bottom:8px;
    font-family:var(--display);
    color:var(--ink);

}

.sector-card p{

    font-size:13px;
    color:var(--ink-muted);
    line-height:1.5;
    margin:0;

}

/* ---------- Narrativa (Vision) — se mantiene oscura a proposito ---------- */

.narrative{

    position:relative;
    background:
        linear-gradient(rgba(10,10,10,.74), rgba(10,10,10,.74)),
        url('../images/narrativa.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-color:var(--steel);
    color:#fff;
    padding:150px 0;
    overflow:hidden;

}

.narrative-inner{

    position:relative;
    z-index:2;
    max-width:760px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;

}

.narrative-quote{

    width:40px;
    height:30px;
    color:var(--energy-light);
    margin-bottom:18px;

}

.narrative .eyebrow{

    color:rgba(255,255,255,.7);
    justify-content:center;

}

.narrative blockquote{

    font-family:var(--display);
    font-size:34px;
    line-height:1.4;
    letter-spacing:-.01em;
    margin:0;

}

.narrative-link{

    margin-top:32px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:100px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    transition:border-color .15s ease, background .15s ease;

}

.narrative-link svg{

    width:15px;
    height:15px;
    flex-shrink:0;
    transition:transform .15s ease;

}

.narrative-link:hover svg{

    transform:translateX(3px);

}

.narrative-link:hover{

    border-color:var(--energy-light);
    background:rgba(122,26,26,.15);

}

/* ---------- Cotizacion — se mantiene oscura a proposito ---------- */

.cotizacion{

    background:var(--steel);
    color:#fff;

}

.cotizacion .section-label{

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

}

.cotizacion h2{

    color:#fff;

}

.cotizacion .section-lede{

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

}

.quote-panel{

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:40px;

}

.form-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;

}

.field{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.field.full{

    grid-column:1 / -1;

}

.field label{

    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);

}

.field input,
.field select,
.field textarea{

    background:rgba(255,255,255,.95);
    border:none;
    border-radius:6px;
    padding:12px 14px;
    font-size:14px;
    font-family:var(--sans);
    color:var(--ink);

}

.field textarea{

    resize:vertical;
    min-height:70px;

}

.field select{

    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    padding-right:40px;

}

.quote-submit{

    background:var(--energy);
    color:#fff;
    border:none;
    cursor:pointer;
    padding:15px 30px;
    border-radius:4px;
    font-size:15px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:background .15s ease;

}

.quote-submit:hover{

    background:var(--energy-light);

}

.quote-note{

    font-size:12px;
    color:rgba(255,255,255,.65);
    margin-top:14px;

}

/* ---------- Footer ---------- */

footer{

    background:var(--ink);
    color:rgba(255,255,255,.7);
    padding:56px 0 28px;

}

.footer-grid{

    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;

}

.footer-brand img{

    height:40px;
    width:auto;
    margin-bottom:18px;
    filter:brightness(0) invert(1);

}

.footer-brand p{

    font-size:13px;
    max-width:300px;
    color:rgba(255,255,255,.55);

}

footer h4{

    color:#fff;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:16px;

}

.footer-contact{

    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:14px;

}

.footer-contact a{

    display:flex;
    align-items:center;
    gap:10px;
    transition:color .15s ease;

}

.footer-contact a:hover{

    color:#fff;

}

.footer-social{

    display:flex;
    gap:14px;

}

.footer-social a{

    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    transition:border-color .15s ease, background .15s ease;

}

.footer-social a:hover{

    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.06);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);
    padding-top:24px;
    font-size:12px;
    color:rgba(255,255,255,.5);
    display:flex;
    justify-content:space-between;

}