*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#202020;background:#f5f3ef;line-height:1.6}
.header{height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #ddd}
.brand{text-decoration:none;color:#111;display:flex;flex-direction:column;line-height:1}
.brand span{font-size:1.45rem;font-weight:800;letter-spacing:.12em}
.brand small{margin-top:7px;color:#777}
.nav{display:flex;align-items:center;gap:24px}
.nav a{text-decoration:none;color:#222;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.btn{display:inline-block;background:#202020!important;color:white!important;text-decoration:none;border:0;padding:15px 22px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;cursor:pointer}
.btn.small{padding:11px 15px}
.menu-btn{display:none;background:none;border:0;font-size:1.6rem}
.hero{min-height:72vh;position:relative;display:flex;align-items:center;padding:8vw 7vw;color:white;
background-image: url("../img/portada.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.12))}.hero-content{position:relative;max-width:760px}.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.92;margin:.15em 0}.hero p{font-size:1.15rem;max-width:680px}.hero-sub{opacity:.82}.section{padding:95px 7vw}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.section h2{font-size:clamp(2rem,4vw,4rem);line-height:1.05;margin:.2em 0 .5em}.text-link,.card a{color:#111;font-weight:800;text-transform:uppercase;text-decoration:none;font-size:.8rem;letter-spacing:.08em}.placeholder{min-height:220px;background:linear-gradient(135deg,#d7d2c8,#a8a298);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-weight:800;letter-spacing:.1em}.placeholder.large{min-height:480px}.section-head{max-width:760px;margin-bottom:45px}.services{background:white}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#f4f1ec;border-bottom:3px solid transparent}.card.featured{border-bottom-color:#222}.card-body{padding:24px}.card h3{font-size:1.35rem;line-height:1.15;margin:0 0 12px}.card p{color:#666;font-size:.94rem}.work{background:#eeeae3}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery .tall{min-height:360px}.benefits{padding:55px 7vw;background:#202020;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.benefits div{display:flex;flex-direction:column}.benefits strong{font-size:2.2rem}.benefits span{opacity:.75}.contact{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:white}.form{display:grid;gap:12px}.form input,.form select,.form textarea{width:100%;padding:16px;border:1px solid #ccc;background:#fafafa;font:inherit}.form textarea{min-height:130px}.form small{color:#777}footer{padding:35px 7vw;background:#111;color:#fff;display:flex;gap:30px;justify-content:space-between}.whatsapp{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#222;color:#fff;text-decoration:none;font-weight:800;z-index:30}
.empresa-img {
    width: 100%;
    height: 480px;
    overflow: hidden;
}

.empresa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media(max-width:950px){.menu-btn{display:block}.nav{display:none;position:absolute;top:82px;left:0;right:0;background:white;padding:25px 7vw;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.service-grid{grid-template-columns:repeat(2,1fr)}.split,.contact{grid-template-columns:1fr}.benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.header{height:70px}.nav{top:70px}.hero{min-height:70vh;padding:90px 7vw}.hero h1{font-size:3.3rem}.section{padding:70px 6vw}.service-grid,.gallery,.benefits{grid-template-columns:1fr}.placeholder.large{min-height:320px}footer{flex-direction:column;gap:5px}}
/* =========================================
   IDENTIDAD DINECONS - AZUL + NARANJA
   ========================================= */

:root {
    --azul-dinecons: #073f78;
    --azul-oscuro: #063665;
    --naranja-dinecons: #ff4b00;
    --blanco: #ffffff;
}

/* HEADER */
.header {
    background: var(--azul-dinecons);
    border-bottom: none;
}

.brand,
.brand span,
.brand small {
    color: #fff;
}

.nav a {
    color: #fff;
}

.nav a:hover {
    color: var(--naranja-dinecons);
}

/* BOTONES */
.btn,
.btn.small {
    background: var(--naranja-dinecons) !important;
    color: #fff !important;
    border-radius: 4px;
}

.btn:hover {
    background: #e74400 !important;
}

/* SERVICIOS */
.services {
    background: #fff;
}

.service-grid {
    gap: 20px;
    align-items: stretch;
}

.card,
.card.featured {
    position: relative;
    background: var(--azul-dinecons);
    color: #fff;
    text-align: center;
    border: none;
    padding-top: 55px;
    overflow: visible;
}

.card-body {
    padding: 35px 25px 30px;
}

.card h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25rem;
    min-height: 58px;
}

.card p {
    color: rgba(255,255,255,.9);
}

.card a {
    display: inline-block;
    margin-top: 10px;
    color: #fff;
    border-bottom: 2px solid var(--naranja-dinecons);
    padding-bottom: 4px;
}

/* ICONOS DE SERVICIOS */

.service-icon {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);

    width: 100px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--naranja-dinecons);
    border-radius: 50%;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.service-icon svg {
    width: 48px;
    height: 48px;

    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Algunos iconos funcionan mejor rellenos */
.service-icon svg path {
    vector-effect: non-scaling-stroke;
}


/* Espacio para los círculos */
.service-grid {
    row-gap: 75px;
    padding-top: 50px;
}

/* DETALLES NARANJA */
.eyebrow {
    color: var(--naranja-dinecons);
}

/* BANDA DE BENEFICIOS */
.benefits {
    background: var(--azul-dinecons);
}

.benefits strong {
    color: var(--naranja-dinecons);
}

/* FOOTER */
footer {
    background: var(--azul-oscuro);
}

/* WHATSAPP */
.whatsapp {
    background: #25D366;
}

/* MOBILE */
@media(max-width:950px) {
    .nav {
        background: var(--azul-dinecons);
    }
}
/* MENÚ DESPLEGABLE SERVICIOS */

.nav-dropdown {
    position: relative;
}

.dropdown-btn {
    background: transparent;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    padding: 20px 0;
}

.dropdown-btn span {
    margin-left: 4px;
    color: #ff4b00;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 270px;

    background: #fff;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition: .2s ease;

    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    border-top: 3px solid #ff4b00;

    z-index: 100;
}

.dropdown-menu a {
    display: block;
    padding: 13px 18px;

    color: #073f78 !important;
    background: #fff;

    font-size: .78rem;
    text-transform: none;
    letter-spacing: 0;

    border-bottom: 1px solid #eee;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
    color: #ff4b00 !important;
}

/* ABRIR EN PC */

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* GALERÍA DE TRABAJOS HOME */

.work .gallery {
    max-width: 1180px;
    margin: 35px auto 0;
    padding: 0 25px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.work-image,
.work-image.tall {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 4px;
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.work-image:hover img {
    transform: scale(1.04);
}

@media (max-width: 850px) {
    .work .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .work .gallery {
        grid-template-columns: 1fr;
        padding: 0 18px;
    }

    .work-image,
    .work-image.tall {
        height: 240px;
    }
}
.mensaje-formulario {
    margin-top: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.mensaje-formulario.exito {
    color: #16803a;
}

.mensaje-formulario.error {
    color: #b42318;
}