/* ==========================================================================
   Cerrajeros Cádiz — diseño2
   Paleta: navy profundo (marca) + naranja urgencia (acento). Mobile-first.
   Voz tipográfica: Sora (títulos) + DM Sans (texto). Deliberadamente distinta
   a diseño1 (amarillo + Inter) para no parecer el mismo desarrollador.
   ========================================================================== */

:root {
    --marca:       #14294A;   /* navy profundo: cabecera, pie, títulos */
    --marca-2:     #1E3D6B;
    --marca-soft:  #EAF0F8;
    --acento:      #F4622E;   /* naranja urgencia: CTA, detalles */
    --acento-2:    #DB4E1B;
    --acento-soft: #FDE8DF;
    --grafito:       #172234;   /* texto principal */
    --tenue:        #576174;
    --tenue-2:  #8A93A4;
    --filete:       #E2E7F0;
    --lienzo:       #FFFFFF;
    --lienzo-2:     #F3F6FB;
    --nieve:      #FFFFFF;
    --logro:       #16A34A;
    --umbra-s:   0 1px 2px rgba(20,41,74,.06), 0 3px 10px rgba(20,41,74,.06);
    --umbra:      0 10px 30px rgba(20,41,74,.12), 0 2px 8px rgba(20,41,74,.06);
    --bisel:       12px;
    --bisel-s:    8px;
    --anchura:       1140px;
    --titulo:      'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --texto:       'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--texto);
    color: var(--grafito);
    background: var(--lienzo);
    line-height: 1.68;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.envoltura {
    width: 100%;
    max-width: var(--anchura);
    margin-inline: auto;
    padding-inline: 20px;
}

h1, h2, h3 { font-family: var(--titulo); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 4vw, 2.15rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }
section p:last-child { margin-bottom: 0; }

.svgi { width: 24px; height: 24px; flex: none; }

/* --- Etiqueta / eyebrow (barra lateral de acento, no pill) --- */
.antetitulo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--titulo);
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--acento-2);
    padding: 2px 0 2px 12px; margin-bottom: 16px;
    border-left: 3px solid var(--acento);
}
.antetitulo .svgi { width: 16px; height: 16px; }

/* ==========================================================================
   Botones (más cuadrados que diseño1: radio pequeño, sin pill)
   ========================================================================== */
.accion {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--titulo); font-size: 1rem; font-weight: 700; cursor: pointer;
    padding: 14px 24px; border-radius: var(--bisel-s); border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    text-align: center; line-height: 1.1;
}
.accion .svgi { width: 20px; height: 20px; }
.accion:hover { transform: translateY(-2px); }
.accion-1 {
    background: var(--acento); color: #fff;
    box-shadow: 0 8px 20px rgba(244,98,46,.32);
}
.accion-1:hover { background: var(--acento-2); }
.accion-2 {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.accion-2:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.accion-3 {
    background: var(--nieve); color: var(--marca); border-color: var(--filete);
}
.accion-3:hover { border-color: var(--marca); background: var(--lienzo-2); }
.accion-full { width: 100%; }
.accion-pulso { position: relative; }
.accion-pulso::after {
    content: ''; position: absolute; inset: -3px; border-radius: var(--bisel-s);
    border: 2px solid var(--acento); animation: pulso 1.8s ease-out infinite;
}
@keyframes pulso {
    0%   { opacity: .8; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.12); }
}

/* En secciones/hero oscuros, el botón secundario ya es claro; en claro lo forzamos. */
.accion-2.en-claro { color: var(--marca); border-color: var(--filete); background: var(--nieve); }
.accion-2.en-claro:hover { border-color: var(--marca); background: var(--lienzo-2); }

/* ==========================================================================
   Barra de urgencia superior (elemento propio de diseño2)
   ========================================================================== */
.barra-urgencia {
    background: var(--acento); color: #fff;
    font-size: .82rem; font-weight: 600; font-family: var(--titulo);
}
.barra-urgencia .envoltura {
    display: flex; align-items: center; justify-content: center; gap: 10px 26px;
    flex-wrap: wrap; padding-block: 7px; text-align: center;
}
.barra-urgencia span { display: inline-flex; align-items: center; gap: 7px; }
.barra-urgencia .svgi { width: 15px; height: 15px; }
.barra-urgencia a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Cabecera (oscura, sólida — a diferencia del blanco translúcido de diseño1)
   ========================================================================== */
.cab {
    position: sticky; top: 0; z-index: 50;
    background: var(--marca);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.cab-fila { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 11px; font-family: var(--titulo); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: #fff; }
.marca-icono {
    width: 40px; height: 40px; border-radius: 9px; background: var(--acento);
    display: grid; place-items: center; color: #fff; flex: none;
    box-shadow: 0 4px 12px rgba(244,98,46,.4);
}
.marca-icono .svgi { width: 23px; height: 23px; }
.marca small { display: block; font-family: var(--texto); font-size: .68rem; font-weight: 500; color: #A9B6CC; letter-spacing: .01em; }

.barra { display: none; align-items: center; gap: 26px; }
.barra > a { font-family: var(--titulo); font-weight: 600; font-size: .93rem; color: #D5DEEC; }
.barra > a:hover { color: #fff; }
.cab .accion { padding: 10px 18px; font-size: .9rem; }

/* --- Botón hamburguesa (móvil) --- */
.barra-boton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
    border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
    background: rgba(255,255,255,.06); color: #fff;
}
.barra-boton .svgi { width: 24px; height: 24px; }
.accion-cab { display: none; }

/* --- Desplegables --- */
.barra-desp { position: relative; }
.barra-desp-bt {
    font-family: var(--titulo); font-weight: 600; font-size: .93rem; color: #D5DEEC;
    background: none; border: 0; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; gap: 5px;
}
.barra-desp-bt:hover { color: #fff; }
.svgi-chev { width: 16px; height: 16px; transition: transform .2s; }
.barra-desp.desplegado .svgi-chev { transform: rotate(180deg); }
.panel { display: none; }
.barra-desp.desplegado .panel { display: block; }
.bloque .enlace-mas { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .9rem; color: var(--acento-2); font-family: var(--titulo); }
.bloque .enlace-mas .svgi { width: 15px; height: 15px; }

/* --- Panel del menú en móvil (hamburguesa) --- */
@media (max-width: 959px) {
    .barra.desplegado {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; top: 70px; left: 0; right: 0; z-index: 49;
        background: var(--marca); border-bottom: 1px solid rgba(255,255,255,.1);
        padding: 6px 20px 18px; box-shadow: var(--umbra);
        max-height: calc(100vh - 70px); overflow-y: auto;
    }
    .barra.desplegado > a,
    .barra .barra-desp-bt {
        padding: 14px 4px; width: 100%; color: #E7ECF5;
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1rem;
    }
    .barra-desp { width: 100%; }
    .barra .panel { padding: 2px 0 6px; }
    .barra .panel a {
        display: flex; align-items: center; gap: 9px;
        padding: 12px 10px; font-size: .95rem; font-weight: 600; color: #C6D0E1;
    }
    .barra .panel a .svgi { width: 17px; height: 17px; color: var(--acento); }
    .panel-todas { font-weight: 700; color: #fff !important; }
}

/* ==========================================================================
   Hero (dos columnas en escritorio: texto + tarjeta de confianza)
   ========================================================================== */
.portada {
    position: relative; overflow: hidden; color: #EAF0FA;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(244,98,46,.22), transparent 62%),
        linear-gradient(160deg, #16294A 0%, #0F1F3B 100%);
    padding: 54px 0 56px;
}
/* trama sutil de puntos (diferente del blob de diseño1) */
.portada::before {
    content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.portada-fila { position: relative; z-index: 1; display: grid; gap: 34px; grid-template-columns: 1fr; }
.portada .migas { margin-bottom: 14px; }
.portada .antetitulo { color: #FFC7B2; border-color: var(--acento); }
.portada h1 { color: #fff; margin-bottom: 16px; }
.portada-sub { font-size: 1.14rem; color: #B9C4D8; max-width: 620px; margin-bottom: 26px; }
.portada-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.portada-cta .accion { flex: 1 1 auto; min-width: 210px; }
.portada-avales { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; }
.portada-avales li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #CBD5E6; list-style: none; }
.portada-avales .svgi { width: 19px; height: 19px; color: var(--acento); }

/* Tarjeta lateral del hero (captación) */
.hero-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px; padding: 24px; backdrop-filter: blur(4px);
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.hero-card h2 { color: #fff; font-size: 1.25rem; margin-bottom: 6px; }
.hero-card p.mini { color: #AEBAD0; font-size: .95rem; margin-bottom: 18px; }
.hero-card ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.hero-card li { display: flex; gap: 12px; align-items: flex-start; }
.hero-card li .ci { width: 38px; height: 38px; border-radius: 9px; background: rgba(244,98,46,.16); color: var(--acento); display: grid; place-items: center; flex: none; }
.hero-card li .ci .svgi { width: 20px; height: 20px; }
.hero-card li b { display: block; color: #fff; font-family: var(--titulo); font-size: .98rem; }
.hero-card li span { color: #A9B6CC; font-size: .86rem; }
.hero-card .accion { width: 100%; }

/* Breadcrumb */
.migas { font-size: .84rem; color: #9FB0CB; }
.portada .migas a:hover { color: #fff; text-decoration: underline; }
.migas a:hover { color: var(--acento-2); text-decoration: underline; }
.migas span { margin: 0 6px; opacity: .5; }

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
section { padding: 58px 0; }
.franja-gris { background: var(--lienzo-2); }
.seccion-marca { background: var(--marca); color: #D6DEEC; }
.seccion-marca h2, .seccion-marca h3 { color: #fff; }
.bloque-cab { max-width: 720px; margin-bottom: 34px; }
.bloque-cab.centrado { margin-inline: auto; text-align: center; }
.bloque-cab.centrado .antetitulo { border-left: 0; border-bottom: 3px solid var(--acento); padding: 0 0 4px; }
.destacado { font-size: 1.08rem; color: var(--tenue); }
.articulo p { margin-bottom: 1.1em; }
.articulo strong { color: var(--grafito); }
.articulo ul, .articulo ol { padding-left: 1.15em; }
.articulo li { margin-bottom: .4em; }

/* --- Rejilla de servicios (tarjetas con barra de acento superior) --- */
.malla { display: grid; gap: 20px; }
.malla-2 { grid-template-columns: 1fr; }
.malla-3 { grid-template-columns: 1fr; }

.bloque {
    position: relative; background: var(--nieve); border: 1px solid var(--filete);
    border-radius: var(--bisel); padding: 26px 24px; box-shadow: var(--umbra-s);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bloque::before {
    content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
    background: var(--acento); border-radius: 0 0 3px 3px; transform: scaleX(0);
    transform-origin: left; transition: transform .2s ease;
}
.bloque:hover { transform: translateY(-4px); box-shadow: var(--umbra); border-color: #CFD8E8; }
.bloque:hover::before { transform: scaleX(1); }
.bloque-icono {
    width: 52px; height: 52px; border-radius: 12px; background: var(--marca-soft);
    display: grid; place-items: center; color: var(--marca); margin-bottom: 15px;
}
.bloque-icono .svgi { width: 27px; height: 27px; }
.bloque h3 { margin-bottom: 8px; }
.bloque p { font-size: .96rem; color: var(--tenue); margin: 0; }

/* --- Bloque de servicio detallado --- */
.item-srv { padding-top: 8px; padding-bottom: 8px; scroll-margin-top: 90px; }
.item-srv + .item-srv { border-top: 1px solid var(--filete); margin-top: 30px; padding-top: 34px; }
.item-srv-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.item-srv-cab .bloque-icono { margin: 0; }
.item-srv-cab h2 { margin: 0; }

/* --- Lista de zonas / chips (diseño2: chips rellenos tipo etiqueta, sin borde) --- */
.etiquetas { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.etiquetas li {
    background: var(--marca-soft); border: 0; border-radius: 999px; color: var(--marca);
    padding: 8px 16px; font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 7px;
    transition: background .15s, color .15s;
}
.etiquetas li:hover { background: var(--marca); color: #fff; }
.etiquetas li:hover .svgi { color: var(--acento); }
.etiquetas .svgi { width: 14px; height: 14px; color: var(--acento-2); }

/* --- Bloque destacado / aviso --- */
.recuadro {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--acento-soft); border: 1px solid #F6C3AE;
    border-radius: var(--bisel); padding: 22px 24px;
}
.recuadro .svgi { width: 26px; height: 26px; color: var(--acento-2); flex: none; margin-top: 2px; }
.recuadro p { margin: 0; }

/* --- FAQ (diseño2: panel único con filas divididas + chevron circular) --- */
.desplegables { display: block; border: 1px solid var(--filete); border-radius: var(--bisel); overflow: hidden; background: var(--nieve); }
.desplegables details { border: 0; border-bottom: 1px solid var(--filete); border-radius: 0; box-shadow: none; padding: 0 20px; }
.desplegables details:last-child { border-bottom: 0; }
.desplegables summary {
    cursor: pointer; font-family: var(--titulo); font-weight: 600; padding: 18px 0; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.desplegables summary::-webkit-details-marker { display: none; }
.desplegables summary::after {
    content: '⌄'; flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: var(--marca-soft); color: var(--marca);
    font-size: 1.1rem; line-height: 1; transition: transform .2s, background .2s, color .2s;
}
.desplegables details[open] summary { color: var(--acento-2); }
.desplegables details[open] summary::after { transform: rotate(180deg); background: var(--acento); color: #fff; }
.desplegables details p { padding: 0 0 18px; margin: 0; color: var(--tenue); }

/* --- Precios orientativos (diseño2: tabla-panel con filas divididas) --- */
.tarifas { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--filete); border-radius: var(--bisel); overflow: hidden; background: var(--nieve); }
.tarifa {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border: 0; border-bottom: 1px solid var(--filete); border-radius: 0; padding: 16px 20px;
}
.tarifa:last-child { border-bottom: 0; }
.tarifa:nth-child(even) { background: var(--lienzo-2); }
.tarifa .tf-n { font-weight: 700; font-family: var(--titulo); }
.tarifa .tf-v { font-weight: 800; font-family: var(--titulo); color: #fff; background: var(--acento); padding: 5px 12px; border-radius: 999px; font-size: .92rem; white-space: nowrap; }
.tarifa small { display: block; font-weight: 500; color: var(--tenue); font-size: .82rem; font-family: var(--texto); }

/* --- Banda CTA --- */
.reclamo { background: linear-gradient(160deg, #16294A, #0F1F3B); color: #fff; border-radius: 18px; padding: 44px 32px; text-align: center; position: relative; overflow: hidden; }
.reclamo::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(244,98,46,.3), transparent 70%); }
.reclamo h2 { color: #fff; position: relative; }
.reclamo p { color: #B9C4D8; max-width: 560px; margin: 0 auto 24px; position: relative; }
.reclamo .portada-cta { justify-content: center; position: relative; }

/* --- Interlinking localidades (diseño2: listado plano con barra de acento a la izquierda) --- */
.zonas-malla { display: grid; gap: 10px; grid-template-columns: 1fr; }
.zona-item {
    display: flex; align-items: center; gap: 12px; background: var(--nieve);
    border: 1px solid var(--filete); border-left: 3px solid var(--acento); border-radius: var(--bisel-s);
    padding: 13px 16px; box-shadow: none;
    transition: background .15s, border-color .15s;
}
.zona-item:hover { background: var(--marca-soft); border-color: var(--acento); }
.zona-item .bloque-icono { margin: 0; width: 30px; height: 30px; border-radius: 7px; background: transparent; color: var(--acento-2); }
.zona-item .bloque-icono .svgi { width: 20px; height: 20px; }
.zona-item b { display: block; font-family: var(--titulo); font-size: .98rem; }
.zona-item small { color: var(--tenue); font-size: .82rem; }
.zona-item .punta { margin-left: auto; color: var(--acento-2); font-size: 1.2rem; }

/* ==========================================================================
   Formulario
   ========================================================================== */
.formu { display: grid; gap: 16px; max-width: 560px; }
.grupo-f { display: grid; gap: 6px; }
.grupo-f label { font-weight: 600; font-size: .92rem; font-family: var(--titulo); }
.grupo-f input, .grupo-f textarea, .grupo-f select {
    font-family: inherit; font-size: 1rem; padding: 13px 15px; border-radius: var(--bisel-s);
    border: 1.5px solid var(--filete); background: var(--nieve); color: var(--grafito); width: 100%;
}
.grupo-f input:focus, .grupo-f textarea:focus, .grupo-f select:focus {
    outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(244,98,46,.2);
}
.grupo-f textarea { min-height: 120px; resize: vertical; }
.exito-box {
    display: flex; gap: 14px; align-items: flex-start;
    background: #E7F7EC; border: 1px solid #9FE0B4; color: #12622f;
    border-radius: var(--bisel); padding: 20px 22px;
}
.exito-box .svgi { color: var(--logro); width: 24px; flex: none; }
.nota-f { font-size: .82rem; color: var(--tenue-2); }

/* ==========================================================================
   Pie
   ========================================================================== */
.base { background: #0F1F3B; color: #A9B6CC; padding: 56px 0 30px; font-size: .93rem; }
.base-malla { display: grid; gap: 34px; grid-template-columns: 1fr; margin-bottom: 34px; }
.base h4 { color: #fff; font-family: var(--titulo); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; }
.base a { color: #A9B6CC; }
.base a:hover { color: var(--acento); }
.base ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.base .marca { color: #fff; margin-bottom: 14px; }
.base .marca small { color: #A9B6CC; }
.base-legal {
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
    display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
    font-size: .84rem; color: #7C879B;
}
.base-legal a { color: #7C879B; }

/* ==========================================================================
   Botones CTA flotantes (móvil) — ocultos hasta hacer scroll
   ========================================================================== */
.flotador {
    position: fixed; z-index: 60;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; gap: 10px;
    opacity: 0; visibility: hidden; transform: translateY(26px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.flotador.en-vista { opacity: 1; visibility: visible; transform: translateY(0); }
.flot-bt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; border-radius: var(--bisel-s);
    font-family: var(--titulo); font-weight: 800; font-size: .96rem; line-height: 1.1; text-align: center;
    box-shadow: 0 10px 26px rgba(15,31,59,.28);
    transition: transform .12s ease;
}
.flot-bt .svgi { width: 20px; height: 20px; flex: none; }
.flot-bt:active { transform: scale(.97); }
.flot-1 { background: var(--acento); color: #fff; }
.flot-2 { background: var(--marca); color: #fff; }
.flot-pulso { position: relative; }
.flot-pulso::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--bisel-s);
    border: 2px solid var(--acento); animation: pulso 1.8s ease-out infinite;
}

/* ==========================================================================
   Servicios en LISTA editorial (diseño2: filas con nº + hairlines, no tarjetas)
   ========================================================================== */
.servicios-lista { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--marca); }
.servicio-fila {
    display: grid; grid-template-columns: auto auto 1fr auto; gap: 16px; align-items: center;
    padding: 22px 6px; border-bottom: 1px solid var(--filete);
    transition: background .15s, padding .15s;
}
.servicio-fila:hover { background: var(--lienzo-2); }
.servicio-fila .sf-n { font-family: var(--titulo); font-weight: 800; font-size: 1.05rem; color: var(--acento); width: 2ch; }
.servicio-fila .sf-ico { width: 48px; height: 48px; border-radius: 10px; background: var(--marca-soft); color: var(--marca); display: grid; place-items: center; }
.servicio-fila .sf-ico .svgi { width: 25px; height: 25px; }
.servicio-fila .sf-cont h3 { margin: 0 0 3px; }
.servicio-fila .sf-cont p { margin: 0; color: var(--tenue); font-size: .94rem; }
.servicio-fila .sf-mas { color: var(--acento-2); font-size: 1.5rem; line-height: 1; }

/* ==========================================================================
   Banda de features (diseño2: 4 columnas sobre fondo navy, sin cajas)
   ========================================================================== */
.features { display: grid; gap: 26px; grid-template-columns: 1fr; }
.feature .fi { width: 54px; height: 54px; border-radius: 13px; background: rgba(244,98,46,.16); color: var(--acento); display: grid; place-items: center; margin-bottom: 14px; }
.feature .fi .svgi { width: 27px; height: 27px; }
.feature h3 { color: #fff; margin-bottom: 6px; }
.feature p { color: #AEBAD0; font-size: .95rem; margin: 0; }

/* ==========================================================================
   Índice de servicios en página de localidad (diseño2: tabla de contenidos)
   ========================================================================== */
.serv-indice { display: grid; grid-template-columns: 1fr; border: 1px solid var(--filete); border-radius: var(--bisel); background: var(--nieve); overflow: hidden; }
.serv-indice a { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--filete); transition: background .15s; }
.serv-indice a:hover { background: var(--marca-soft); }
.serv-indice a .si-ico { width: 22px; height: 22px; color: var(--acento-2); flex: none; }
.serv-indice a b { font-family: var(--titulo); font-weight: 600; flex: 1; }
.serv-indice a .si-mas { color: var(--tenue-2); font-size: .84rem; font-weight: 600; }

/* ==========================================================================
   Layout a dos columnas (Trabaja con nosotros: ventajas + formulario)
   ========================================================================== */
.split { display: grid; gap: 34px; grid-template-columns: 1fr; }
.ventajas { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ventajas li { display: flex; gap: 14px; align-items: flex-start; }
.ventajas li .vi { width: 42px; height: 42px; border-radius: 10px; background: var(--acento-soft); color: var(--acento-2); display: grid; place-items: center; flex: none; }
.ventajas li b { display: block; font-family: var(--titulo); font-size: 1.02rem; margin-bottom: 2px; }
.ventajas li span { color: var(--tenue); font-size: .95rem; }
.form-card { background: var(--nieve); border: 1px solid var(--filete); border-radius: var(--bisel); padding: 26px 24px; box-shadow: var(--umbra-s); }
.form-card .formu { max-width: none; }

/* ==========================================================================
   Modal de captación (CTA → formulario emergente, sin cambiar de página)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.desplegado { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(9,18,35,.62); backdrop-filter: blur(2px); }
.modal-caja {
    position: relative; z-index: 1; width: min(560px, calc(100% - 28px));
    margin: 7vh auto 0; max-height: 86vh; overflow-y: auto;
    background: var(--lienzo); border-radius: 16px; padding: 30px 26px 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: modal-in .22s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.modal-x {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--filete); background: var(--lienzo-2); color: var(--tenue); cursor: pointer;
    font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
}
.modal-x:hover { background: var(--marca-soft); color: var(--marca); }
.modal-caja h2 { font-size: 1.5rem; margin: 0 0 6px; }
.modal-sub { color: var(--tenue); margin: 0 0 20px; font-size: .96rem; }
.modal-caja .formu { max-width: none; }
body.modal-abierto { overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 720px) {
    .features { grid-template-columns: repeat(4, 1fr); }
    .serv-indice { grid-template-columns: 1fr 1fr; }
    .serv-indice a:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
    .serv-indice a:last-child { border-bottom: 0; }
    .malla-2 { grid-template-columns: repeat(2, 1fr); }
    .malla-3 { grid-template-columns: repeat(3, 1fr); }
    .zonas-malla { grid-template-columns: repeat(2, 1fr); }
    .base-malla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .portada-cta .accion { flex: 0 1 auto; }
}
@media (min-width: 820px) {
    /* Banda CTA final: de centrada a alineada a la izquierda (distinta de diseño1) */
    .reclamo { text-align: left; padding: 48px 46px; }
    .reclamo p { margin-left: 0; }
    .reclamo .portada-cta { justify-content: flex-start; }
}
@media (min-width: 960px) {
    .barra { display: flex; }
    .barra-boton { display: none; }
    .accion-cab { display: inline-flex; }
    .split { grid-template-columns: 1.05fr 1.1fr; align-items: start; gap: 44px; }
    .malla-3 { grid-template-columns: repeat(3, 1fr); }
    .zonas-malla { grid-template-columns: repeat(3, 1fr); }
    .flotador { display: none; }
    .portada-fila { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
    .portada { padding: 76px 0 80px; }
    .panel {
        position: absolute; top: calc(100% + 14px); left: 0;
        min-width: 270px; background: #fff; border: 1px solid var(--filete);
        border-radius: 12px; box-shadow: var(--umbra); padding: 8px; z-index: 60;
    }
    .panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
    .panel a {
        display: flex; align-items: center; gap: 9px; color: var(--grafito);
        padding: 10px 12px; border-radius: 7px; font-size: .92rem; font-weight: 600;
    }
    .panel a:hover { background: var(--marca-soft); color: var(--marca); }
    .panel a .svgi { width: 16px; height: 16px; color: var(--acento); }
    .panel-ancho { min-width: 470px; }
    .barra-desp.desplegado .panel-ancho { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .panel-ancho .panel-todas { grid-column: 1 / -1; border-top: 1px solid var(--filete); margin-top: 4px; padding-top: 10px; }
    body { padding-bottom: 0 !important; }
}
body { padding-bottom: 96px; } /* espacio botón flotante móvil */

/* Enlace "Contacto": visible solo en el menú móvil, oculto en escritorio */
@media (min-width: 960px) { .barra .barra-movil { display: none; } }