/* ==========================================================================
   Jardinería Aranjuez — hoja de estilos
   Paleta: verde jardín (marca) + terracota (realce). Mobile-first.
   Tipografía: Fraunces (títulos, serif) + Mulish (texto).
   ========================================================================== */

:root {
    --verde:       #2E6B3E;   /* navy profundo: cabecera, pie, títulos */
    --verde-2:     #245631;
    --verde-soft:  #E7F1E6;
    --ocre:      #C77D3A;   /* naranja urgencia: CTA, detalles */
    --ocre-2:    #A9662A;
    --ocre-soft: #F6ECDD;
    --tinta3:       #172234;   /* texto principal */
    --gris3:        #576174;
    --gris3-2:  #8A93A4;
    --linea3:       #E2E7F0;
    --fondo3:       #FFFFFF;
    --fondo3-2:     #F3F6FB;
    --blancox:      #FFFFFF;
    --ok3:       #C77D3A;
    --sombra3-s:   0 1px 2px rgba(20,41,74,.06), 0 3px 10px rgba(20,41,74,.06);
    --sombra3:      0 10px 30px rgba(20,41,74,.12), 0 2px 8px rgba(20,41,74,.06);
    --radio3:       12px;
    --radio3-s:    8px;
    --anchox:       1140px;
    --tipo-tit:      'Fraunces', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tipo-txt:       'Mulish', 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(--tipo-txt);
    color: var(--tinta3);
    background: var(--fondo3);
    line-height: 1.68;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 { font-family: var(--tipo-tit); 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; }

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

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

/* ==========================================================================
   Botones (más cuadrados que diseño1: radio pequeño, sin pill)
   ========================================================================== */
.bt3 {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--tipo-tit); font-size: 1rem; font-weight: 700; cursor: pointer;
    padding: 14px 24px; border-radius: var(--radio3-s); border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    text-align: center; line-height: 1.1;
}
.bt3 .icono3 { width: 20px; height: 20px; }
.bt3:hover { transform: translateY(-2px); }
.bt3-1 {
    background: var(--ocre); color: #fff;
    box-shadow: 0 8px 20px rgba(199,125,58,.32);
}
.bt3-1:hover { background: var(--ocre-2); }
.bt3-2 {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.bt3-2:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.bt3-3 {
    background: var(--blancox); color: var(--verde); border-color: var(--linea3);
}
.bt3-3:hover { border-color: var(--verde); background: var(--fondo3-2); }
.bt3-full { width: 100%; }
.bt3-pulso { position: relative; }
.bt3-pulso::after {
    content: ''; position: absolute; inset: -3px; border-radius: var(--radio3-s);
    border: 2px solid var(--ocre); 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. */
.bt3-2.tonoclaro3 { color: var(--verde); border-color: var(--linea3); background: var(--blancox); }
.bt3-2.tonoclaro3:hover { border-color: var(--verde); background: var(--fondo3-2); }

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

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

.menu3 { display: none; align-items: center; gap: 26px; }
.menu3 > a { font-family: var(--tipo-tit); font-weight: 600; font-size: .93rem; color: #D5DEEC; }
.menu3 > a:hover { color: #fff; }
.testera3 .bt3 { padding: 10px 18px; font-size: .9rem; }

/* --- Botón hamburguesa (móvil) --- */
.menu3-burger {
    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;
}
.menu3-burger .icono3 { width: 24px; height: 24px; }
.bt3-top { display: none; }

/* --- Desplegables --- */
.menu3-desp { position: relative; }
.menu3-desp-bt {
    font-family: var(--tipo-tit); font-weight: 600; font-size: .93rem; color: #D5DEEC;
    background: none; border: 0; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; gap: 5px;
}
.menu3-desp-bt:hover { color: #fff; }
.icono3-chev { width: 16px; height: 16px; transition: transform .2s; }
.menu3-desp.desplegado3 .icono3-chev { transform: rotate(180deg); }
.flot3 { display: none; }
.menu3-desp.desplegado3 .flot3 { display: block; }
.ficha3 .vermas3 { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .9rem; color: var(--ocre-2); font-family: var(--tipo-tit); }
.ficha3 .vermas3 .icono3 { width: 15px; height: 15px; }

/* --- Panel del menú en móvil (hamburguesa) --- */
@media (max-width: 959px) {
    .menu3.desplegado3 {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; top: 70px; left: 0; right: 0; z-index: 49;
        background: var(--verde); border-bottom: 1px solid rgba(255,255,255,.1);
        padding: 6px 20px 18px; box-shadow: var(--sombra3);
        max-height: calc(100vh - 70px); overflow-y: auto;
    }
    .menu3.desplegado3 > a,
    .menu3 .menu3-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;
    }
    .menu3-desp { width: 100%; }
    .menu3 .flot3 { padding: 2px 0 6px; }
    .menu3 .flot3 a {
        display: flex; align-items: center; gap: 9px;
        padding: 12px 10px; font-size: .95rem; font-weight: 600; color: #C6D0E1;
    }
    .menu3 .flot3 a .icono3 { width: 17px; height: 17px; color: var(--ocre); }
    .flot3-todas { font-weight: 700; color: #fff !important; }
}

/* ==========================================================================
   Hero (dos columnas en escritorio: texto + tarjeta de confianza)
   ========================================================================== */
.hero3 {
    position: relative; overflow: hidden; color: #EAF0FA;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(199,125,58,.22), transparent 62%),
        linear-gradient(160deg, #244E2C 0%, #15311B 100%);
    padding: 54px 0 56px;
}
/* trama sutil de puntos (diferente del blob de diseño1) */
.hero3::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%);
}
.hero3-fila { position: relative; z-index: 1; display: grid; gap: 34px; grid-template-columns: 1fr; }
.hero3 .migaja3 { margin-bottom: 14px; }
.hero3 .sobretitulo3 { color: #FFC7B2; border-color: var(--ocre); }
.hero3 h1 { color: #fff; margin-bottom: 16px; }
.hero3-sub { font-size: 1.14rem; color: #B9C4D8; max-width: 620px; margin-bottom: 26px; }
.hero3-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hero3-cta .bt3 { flex: 1 1 auto; min-width: 210px; }
.hero3-avales { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; }
.hero3-avales li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #CBD5E6; list-style: none; }
.hero3-avales .icono3 { width: 19px; height: 19px; color: var(--ocre); }

/* Tarjeta lateral del hero (captación) */
.hero3-panel {
    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);
}
.hero3-panel h2 { color: #fff; font-size: 1.25rem; margin-bottom: 6px; }
.hero3-panel p.pequeno3 { color: #AEBAD0; font-size: .95rem; margin-bottom: 18px; }
.hero3-panel ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.hero3-panel li { display: flex; gap: 12px; align-items: flex-start; }
.hero3-panel li .ci3 { width: 38px; height: 38px; border-radius: 9px; background: rgba(199,125,58,.16); color: var(--ocre); display: grid; place-items: center; flex: none; }
.hero3-panel li .ci3 .icono3 { width: 20px; height: 20px; }
.hero3-panel li b { display: block; color: #fff; font-family: var(--tipo-tit); font-size: .98rem; }
.hero3-panel li span { color: #A9B6CC; font-size: .86rem; }
.hero3-panel .bt3 { width: 100%; }

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

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
section { padding: 58px 0; }
.franja-verde { background: var(--fondo3-2); }
.panelhoja3 { background: var(--verde); color: #D6DEEC; }
.panelhoja3 h2, .panelhoja3 h3 { color: #fff; }
.titular3 { max-width: 720px; margin-bottom: 34px; }
.titular3.centrado3 { margin-inline: auto; text-align: center; }
.titular3.centrado3 .sobretitulo3 { border-left: 0; border-bottom: 3px solid var(--ocre); padding: 0 0 4px; }
.entradilla3 { font-size: 1.08rem; color: var(--gris3); }
.redaccion3 p { margin-bottom: 1.1em; }
.redaccion3 strong { color: var(--tinta3); }
.redaccion3 ul, .redaccion3 ol { padding-left: 1.15em; }
.redaccion3 li { margin-bottom: .4em; }

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

.ficha3 {
    position: relative; background: var(--blancox); border: 1px solid var(--linea3);
    border-radius: var(--radio3); padding: 26px 24px; box-shadow: var(--sombra3-s);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ficha3::before {
    content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
    background: var(--ocre); border-radius: 0 0 3px 3px; transform: scaleX(0);
    transform-origin: left; transition: transform .2s ease;
}
.ficha3:hover { transform: translateY(-4px); box-shadow: var(--sombra3); border-color: #CFD8E8; }
.ficha3:hover::before { transform: scaleX(1); }
.ficha3-ico {
    width: 52px; height: 52px; border-radius: 12px; background: var(--verde-soft);
    display: grid; place-items: center; color: var(--verde); margin-bottom: 15px;
}
.ficha3-ico .icono3 { width: 27px; height: 27px; }
.ficha3 h3 { margin-bottom: 8px; }
.ficha3 p { font-size: .96rem; color: var(--gris3); margin: 0; }

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

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

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

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

/* --- Precios orientativos (diseño2: tabla-panel con filas divididas) --- */
.tarifas3 { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--linea3); border-radius: var(--radio3); overflow: hidden; background: var(--blancox); }
.tarifa3 {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border: 0; border-bottom: 1px solid var(--linea3); border-radius: 0; padding: 16px 20px;
}
.tarifa3:last-child { border-bottom: 0; }
.tarifa3:nth-child(even) { background: var(--fondo3-2); }
.tarifa3 .t3-n { font-weight: 700; font-family: var(--tipo-tit); }
.tarifa3 .t3-v { font-weight: 800; font-family: var(--tipo-tit); color: #fff; background: var(--ocre); padding: 5px 12px; border-radius: 999px; font-size: .92rem; white-space: nowrap; }
.tarifa3 small { display: block; font-weight: 500; color: var(--gris3); font-size: .82rem; font-family: var(--tipo-txt); }

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

/* --- Interlinking localidades (diseño2: listado plano con barra de acento a la izquierda) --- */
.zonasrej3 { display: grid; gap: 10px; grid-template-columns: 1fr; }
.zonaitem3 {
    display: flex; align-items: center; gap: 12px; background: var(--blancox);
    border: 1px solid var(--linea3); border-left: 3px solid var(--ocre); border-radius: var(--radio3-s);
    padding: 13px 16px; box-shadow: none;
    transition: background .15s, border-color .15s;
}
.zonaitem3:hover { background: var(--verde-soft); border-color: var(--ocre); }
.zonaitem3 .ficha3-ico { margin: 0; width: 30px; height: 30px; border-radius: 7px; background: transparent; color: var(--ocre-2); }
.zonaitem3 .ficha3-ico .icono3 { width: 20px; height: 20px; }
.zonaitem3 b { display: block; font-family: var(--tipo-tit); font-size: .98rem; }
.zonaitem3 small { color: var(--gris3); font-size: .82rem; }
.zonaitem3 .flecha3 { margin-left: auto; color: var(--ocre-2); font-size: 1.2rem; }

/* ==========================================================================
   Formulario
   ========================================================================== */
.formul3 { display: grid; gap: 16px; max-width: 560px; }
.campo3 { display: grid; gap: 6px; }
.campo3 label { font-weight: 600; font-size: .92rem; font-family: var(--tipo-tit); }
.campo3 input, .campo3 textarea, .campo3 select {
    font-family: inherit; font-size: 1rem; padding: 13px 15px; border-radius: var(--radio3-s);
    border: 1.5px solid var(--linea3); background: var(--blancox); color: var(--tinta3); width: 100%;
}
.campo3 input:focus, .campo3 textarea:focus, .campo3 select:focus {
    outline: none; border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(199,125,58,.2);
}
.campo3 textarea { min-height: 120px; resize: vertical; }
.exito3box {
    display: flex; gap: 14px; align-items: flex-start;
    background: #E7F7EC; border: 1px solid #9FE0B4; color: #12622f;
    border-radius: var(--radio3); padding: 20px 22px;
}
.exito3box .icono3 { color: var(--ok3); width: 24px; flex: none; }
.notamin3 { font-size: .82rem; color: var(--gris3-2); }

/* ==========================================================================
   Pie
   ========================================================================== */
.zocalo3 { background: #15311B; color: #A9B6CC; padding: 56px 0 30px; font-size: .93rem; }
.zocalo3-grid { display: grid; gap: 34px; grid-template-columns: 1fr; margin-bottom: 34px; }
.zocalo3 h4 { color: #fff; font-family: var(--tipo-tit); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; }
.zocalo3 a { color: #A9B6CC; }
.zocalo3 a:hover { color: var(--ocre); }
.zocalo3 ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.zocalo3 .marca3 { color: #fff; margin-bottom: 14px; }
.zocalo3 .marca3 small { color: #A9B6CC; }
.zocalo3-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;
}
.zocalo3-legal a { color: #7C879B; }

/* ==========================================================================
   Botones CTA flotantes (móvil) — ocultos hasta hacer scroll
   ========================================================================== */
.dock3 {
    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;
}
.dock3.en-vista3 { opacity: 1; visibility: visible; transform: translateY(0); }
.dock3-bt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; border-radius: var(--radio3-s);
    font-family: var(--tipo-tit); 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;
}
.dock3-bt .icono3 { width: 20px; height: 20px; flex: none; }
.dock3-bt:active { transform: scale(.97); }
.dock3-1 { background: var(--ocre); color: #fff; }
.dock3-2 { background: var(--verde); color: #fff; }
.dock3-pulso { position: relative; }
.dock3-pulso::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--radio3-s);
    border: 2px solid var(--ocre); animation: pulso 1.8s ease-out infinite;
}

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

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

/* ==========================================================================
   Índice de servicios en página de localidad (diseño2: tabla de contenidos)
   ========================================================================== */
.labor3-indice { display: grid; grid-template-columns: 1fr; border: 1px solid var(--linea3); border-radius: var(--radio3); background: var(--blancox); overflow: hidden; }
.labor3-indice a { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--linea3); transition: background .15s; }
.labor3-indice a:hover { background: var(--verde-soft); }
.labor3-indice a .li3-ico { width: 22px; height: 22px; color: var(--ocre-2); flex: none; }
.labor3-indice a b { font-family: var(--tipo-tit); font-weight: 600; flex: 1; }
.labor3-indice a .li3-mas { color: var(--gris3-2); font-size: .84rem; font-weight: 600; }

/* ==========================================================================
   Layout a dos columnas (Trabaja con nosotros: ventajas + formulario)
   ========================================================================== */
.doscol3 { display: grid; gap: 34px; grid-template-columns: 1fr; }
.ventajas3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ventajas3 li { display: flex; gap: 14px; align-items: flex-start; }
.ventajas3 li .di3 { width: 42px; height: 42px; border-radius: 10px; background: var(--ocre-soft); color: var(--ocre-2); display: grid; place-items: center; flex: none; }
.ventajas3 li b { display: block; font-family: var(--tipo-tit); font-size: 1.02rem; margin-bottom: 2px; }
.ventajas3 li span { color: var(--gris3); font-size: .95rem; }
.panelform3 { background: var(--blancox); border: 1px solid var(--linea3); border-radius: var(--radio3); padding: 26px 24px; box-shadow: var(--sombra3-s); }
.panelform3 .formul3 { max-width: none; }

/* ==========================================================================
   Modal de captación (CTA → formulario emergente, sin cambiar de página)
   ========================================================================== */
.modal3 { position: fixed; inset: 0; z-index: 100; display: none; }
.modal3.desplegado3 { display: block; }
.modal3-velo { position: absolute; inset: 0; background: rgba(9,18,35,.62); backdrop-filter: blur(2px); }
.modal3-caja {
    position: relative; z-index: 1; width: min(560px, calc(100% - 28px));
    margin: 7vh auto 0; max-height: 86vh; overflow-y: auto;
    background: var(--fondo3); 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; } }
.modal3-x {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--linea3); background: var(--fondo3-2); color: var(--gris3); cursor: pointer;
    font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
}
.modal3-x:hover { background: var(--verde-soft); color: var(--verde); }
.modal3-caja h2 { font-size: 1.5rem; margin: 0 0 6px; }
.modal3-sub { color: var(--gris3); margin: 0 0 20px; font-size: .96rem; }
.modal3-caja .formul3 { max-width: none; }
body.modal3-open { overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 720px) {
    .puntos3 { grid-template-columns: repeat(4, 1fr); }
    .labor3-indice { grid-template-columns: 1fr 1fr; }
    .labor3-indice a:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
    .labor3-indice a:last-child { border-bottom: 0; }
    .malla3-2 { grid-template-columns: repeat(2, 1fr); }
    .malla3-3 { grid-template-columns: repeat(3, 1fr); }
    .zonasrej3 { grid-template-columns: repeat(2, 1fr); }
    .zocalo3-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .hero3-cta .bt3 { flex: 0 1 auto; }
}
@media (min-width: 820px) {
    /* Banda CTA final: de centrada a alineada a la izquierda (distinta de diseño1) */
    .bandacta3 { text-align: left; padding: 48px 46px; }
    .bandacta3 p { margin-left: 0; }
    .bandacta3 .hero3-cta { justify-content: flex-start; }
}
@media (min-width: 960px) {
    .menu3 { display: flex; }
    .menu3-burger { display: none; }
    .bt3-top { display: inline-flex; }
    .doscol3 { grid-template-columns: 1.05fr 1.1fr; align-items: start; gap: 44px; }
    .malla3-3 { grid-template-columns: repeat(3, 1fr); }
    .zonasrej3 { grid-template-columns: repeat(3, 1fr); }
    .dock3 { display: none; }
    .hero3-fila { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
    .hero3 { padding: 76px 0 80px; }
    .flot3 {
        position: absolute; top: calc(100% + 14px); left: 0;
        min-width: 270px; background: #fff; border: 1px solid var(--linea3);
        border-radius: 12px; box-shadow: var(--sombra3); padding: 8px; z-index: 60;
    }
    .flot3::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
    .flot3 a {
        display: flex; align-items: center; gap: 9px; color: var(--tinta3);
        padding: 10px 12px; border-radius: 7px; font-size: .92rem; font-weight: 600;
    }
    .flot3 a:hover { background: var(--verde-soft); color: var(--verde); }
    .flot3 a .icono3 { width: 16px; height: 16px; color: var(--ocre); }
    .flot3-ancho { min-width: 470px; }
    .menu3-desp.desplegado3 .flot3-ancho { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .flot3-ancho .flot3-todas { grid-column: 1 / -1; border-top: 1px solid var(--linea3); 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) { .menu3 .menu3-movil { display: none; } }