:root {
    --azul-oscuro: #2d251a;
    --azul-profundo: #3e3325;
    --azul: #8d6a3d;
    --celeste: #d4c3a5;
    --blanco: #ffffff;
    --gris-fondo: #f3f5f8;
    --gris-texto: #0f172a;
    --texto: #0f172a;
    --verde: #8d6a3d;
    --accent: #b99a5e;
    --sombra: 0 14px 34px rgba(16, 22, 33, 0.10);
    --radio: 14px;
    --transicion: all 0.25s ease
}

/* Selector rápido de solución en la página de servicios */
.selector-solucion { padding: 54px 0 18px; }
.selector-solucion-contenido {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center;
    padding: 34px; border: 1px solid #dfe7f1; border-radius: 22px;
    background: linear-gradient(135deg, #f5f9ff, #fff); box-shadow: 0 18px 45px rgba(25,55,91,.08);
}
.selector-solucion-contenido h2 { margin: 10px 0; color: #172b46; }
.selector-solucion-contenido p { margin: 0; color: #56657a; line-height: 1.65; }
.selector-solucion-formulario { display: grid; gap: 12px; }
.selector-solucion-formulario label { color: #243a57; font-weight: 700; }
.selector-solucion-formulario select {
    width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid #cbd7e6;
    border-radius: 10px; background: #fff; color: #243a57; font: inherit;
}
.selector-solucion-formulario .btn-principal { justify-content: center; border: 0; cursor: pointer; }
.servicio-detalle-card[id] { scroll-margin-top: 110px; }

/* Recomendador visible de servicios por rubro */
.recomendador-rubros { padding: 76px 0 34px; background: #f5f7fa; }
.recomendador-rubros-encabezado { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.recomendador-rubros-panel { overflow: hidden; border: 1px solid #ded7ca; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(45,37,26,.11); }
.recomendador-rubros-selector { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; padding: 1px; background: #e8e1d6; }
.rubro-selector { display: flex; min-height: 112px; padding: 18px 12px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; border: 0; background: #fff; color: #4a4033; font: inherit; font-size: .86rem; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; transition: background .2s ease,color .2s ease; }
.rubro-selector i { color: #9b7947; font-size: 1.45rem; }
.rubro-selector:hover { background: #faf7f1; }
.rubro-selector.activo { background: #3e3325; color: #fff; }
.rubro-selector.activo i { color: #d4b575; }
.rubro-selector:focus-visible { outline: 3px solid #b99a5e; outline-offset: -4px; }
.recomendador-rubros-resultado { padding: 34px; }
.recomendador-rubros-resumen { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.recomendador-rubros-icono { display: grid; width: 66px; height: 66px; flex: 0 0 66px; place-items: center; border-radius: 18px; background: #f2eadc; color: #8d6a3d; font-size: 1.7rem; }
.recomendador-rubros-etiqueta { color: #8d6a3d; font-size: .73rem; font-weight: 800; letter-spacing: .12em; }
.recomendador-rubros-resumen h3 { margin: 3px 0 2px; color: #2d251a; font-size: clamp(1.35rem,2.5vw,1.85rem); }
.recomendador-rubros-resumen p { margin: 0; color: #667085; }
.recomendador-servicios { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.recomendador-servicio { display: flex; min-height: 180px; padding: 22px; flex-direction: column; border: 1px solid #e6dfd5; border-radius: 16px; background: #fff; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.recomendador-servicio:hover { transform: translateY(-4px); border-color: #cbb487; box-shadow: 0 14px 28px rgba(45,37,26,.09); }
.recomendador-servicio-nivel { align-self: flex-start; margin-bottom: 13px; padding: 5px 9px; border-radius: 999px; background: #f2eadc; color: #76572f; font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.recomendador-servicio h4 { margin: 0 0 7px; color: #2d251a; font-size: 1.03rem; }
.recomendador-servicio p { margin: 0 0 16px; color: #667085; font-size: .88rem; line-height: 1.55; }
.recomendador-servicio a { margin-top: auto; color: #76572f !important; font-size: .84rem; font-weight: 800; }
.recomendador-servicio a i { margin-left: 5px; transition: transform .2s ease; }
.recomendador-servicio a:hover i { transform: translateX(4px); }
.recomendador-rubros-nota { margin: 22px 0 0; color: #667085; font-size: .83rem; text-align: center; }
.recomendador-rubros-nota i { margin-right: 6px; color: #8d6a3d; }
@media (max-width:900px) { .recomendador-rubros-selector { grid-template-columns: repeat(2,1fr); } .rubro-selector:last-child { grid-column:1/-1; } .recomendador-servicios { grid-template-columns:1fr; } }
@media (max-width:560px) { .recomendador-rubros { padding-top:54px; } .recomendador-rubros-selector { grid-template-columns:1fr; } .rubro-selector,.rubro-selector:last-child { grid-column:auto; min-height:70px; flex-direction:row; justify-content:flex-start; padding:14px 18px; text-align:left; } .recomendador-rubros-resultado { padding:24px 18px; } .recomendador-rubros-resumen { align-items:flex-start; } }

.admin-busqueda { min-width: 300px; }
.admin-busqueda small { display: block; margin-top: 5px; color: #718096; font-size: .72rem; }
.admin-filtros-solicitudes select { cursor: pointer; }
.admin-servicio-filtro { color: inherit; text-decoration: none; cursor: pointer; }
.admin-servicio-filtro:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }
.admin-servicio-filtro .admin-servicio-footer { justify-content: space-between; gap: 14px; }
.admin-servicio-filtro .admin-servicio-footer strong { color: #2563b9; font-size: .82rem; white-space: nowrap; }
.admin-servicio-filtro:hover .admin-servicio-footer strong i { transform: translateX(4px); }
.admin-servicio-filtro .admin-servicio-footer strong i { margin-left: 5px; transition: transform .2s ease; }
.admin-filtro-activo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #24446b; }
.admin-filtro-activo a { color: #1767bd; font-weight: 700; text-decoration: none; }

/* Configuración administrativa del catálogo por rubro */
.admin-sector-config { display: grid; gap: 22px; }
.admin-sector-descripcion { display: grid; grid-template-columns: minmax(220px,.45fr) 1fr; gap: 24px; align-items: center; }
.admin-sector-descripcion label { display: grid; gap: 5px; }
.admin-sector-descripcion label span,.admin-config-cabecera p { color: #718096; font-size: .86rem; }
.admin-sector-descripcion textarea,.admin-config-servicio textarea,.admin-config-servicio select,.admin-config-servicio input[type="number"] { width: 100%; padding: 11px 12px; border: 1px solid #d8dee8; border-radius: 9px; background: #fff; color: #26364c; font: inherit; }
.admin-sector-descripcion textarea { min-height: 86px; resize: vertical; }
.admin-config-cabecera { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.admin-config-cabecera h2 { margin: 0; }
.admin-config-cabecera p { margin: 4px 0 0; }
.admin-config-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.admin-config-servicio { display: grid; gap: 13px; opacity: .74; border: 1px solid transparent; transition: opacity .2s ease,border-color .2s ease; }
.admin-config-servicio.esta-visible { opacity: 1; border-color: #cdb987; }
.admin-config-servicio-top { display: flex; justify-content: space-between; align-items: center; }
.admin-config-servicio h3,.admin-config-servicio p { margin: 0; }
.admin-config-servicio>p { min-height: 42px; color: #718096; font-size: .84rem; }
.admin-config-servicio>label { display: grid; gap: 6px; color: #34445b; font-size: .8rem; font-weight: 700; }
.admin-config-servicio textarea { min-height: 74px; resize: vertical; font-size: .84rem; }
.admin-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch span { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #cbd5e1; transition: background .2s ease; }
.admin-switch span::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .2s ease; }
.admin-switch input:checked+span { background:#8d6a3d; }
.admin-switch input:checked+span::after { transform:translateX(19px); }
.admin-switch input:focus-visible+span { outline:3px solid #bfdbfe; }
.admin-config-guardar { display:flex; justify-content:flex-end; }
.admin-btn-peligro,.admin-btn-papelera,.admin-btn-restaurar,.admin-btn-eliminar-fila { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:8px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
.admin-btn-peligro { padding:10px 13px; border:1px solid #fecaca; background:#fff1f2; color:#b42318; }
.admin-btn-papelera,.admin-btn-restaurar { padding:10px 13px; border:1px solid #d6dce5; background:#fff; color:#44546a !important; }
.admin-btn-eliminar-fila { width:35px; height:35px; margin-left:6px; border:1px solid #fecaca; background:#fff1f2; color:#b42318; }
.admin-btn-peligro:hover,.admin-btn-eliminar-fila:hover { background:#fee2e2; }
.admin-btn-restaurar:hover,.admin-btn-papelera:hover { background:#f3f5f8; }
.admin-servicio-config-form { display:grid; gap:22px; }
.admin-servicio-config-campos { margin-top:20px; }
.admin-campo-ancho { grid-column:1/-1; }
.admin-iconos-selector { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-icono-opcion input { position:absolute; opacity:0; pointer-events:none; }
.admin-icono-opcion span { display:flex; min-height:82px; padding:12px; align-items:center; justify-content:center; flex-direction:column; gap:7px; border:1px solid #d8dee8; border-radius:10px; background:#fff; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.admin-icono-opcion i { color:#8d6a3d; font-size:1.3rem; }
.admin-icono-opcion small { color:#5f6f84; text-align:center; }
.admin-icono-opcion input:checked+span { border-color:#8d6a3d; background:#f7f1e7; box-shadow:0 0 0 2px rgba(141,106,61,.12); }
.admin-icono-opcion input:focus-visible+span { outline:3px solid #bfdbfe; }
.admin-servicio-rubros { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-servicio-rubro { display:flex; padding:14px; align-items:center; gap:11px; border:1px solid #e2e8f0; border-radius:10px; }
.admin-servicio-rubro>i { color:#94a3b8; }
.admin-servicio-rubro.visible>i { color:#8d6a3d; }
.admin-servicio-rubro span { display:grid; flex:1; }
.admin-servicio-rubro small { color:#718096; }
.admin-servicio-rubro a { color:#76572f !important; font-size:.78rem; font-weight:700; }
@media(max-width:800px){.admin-iconos-selector{grid-template-columns:repeat(2,1fr)}.admin-servicio-rubros{grid-template-columns:1fr}}
@media (max-width:800px) { .admin-sector-descripcion,.admin-config-grid { grid-template-columns:1fr; } .admin-config-cabecera { align-items:stretch; flex-direction:column; } }

@media (max-width: 768px) {
    .selector-solucion-contenido { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .admin-busqueda { min-width: 100%; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    background: var(--blanco);
    line-height: 1.6;
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit !important;
}

a:hover {
    color: inherit !important;
}

.contenedor :not([class*="fa-"]) {
    color: var(--texto) !important;
}

body :not(.header) :not([class*="fa-"]) {
    color: var(--texto) !important;
}

.fa-phone {
    color: #8d6a3d !important;
}

.fa-whatsapp {
    color: #25d366 !important;
}

.fa-envelope {
    color: #8d6a3d !important;
}

.fa-headset,
.fa-shield-halved,
.fa-shield,
.fa-lock {
    color: #0f172a !important;
}

.fa-house,
.fa-building,
.fa-store,
.fa-building-columns,
.fa-building-shield {
    color: #4a3c2d !important;
}

.fa-gas-pump {
    color: #d97706 !important;
}

button {
    font-family: inherit
}

.contenedor {
    width: min(1180px, 90%);
    margin: auto
}

.centro {
    text-align: center;
    margin-top: 45px
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background-image: url("../img/banner-header-seguridad.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: var(--transicion);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header.scrolled {
    background: rgba(33, 24, 14, 0.96);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px)
}

.navbar {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blanco)
}

.logo-imagen {
    display: block;
    width: 190px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}

.logo-icono {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #b99a5e, #8d6a3d);
    border-radius: 12px;
    font-size: 20px
}

.logo-texto {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.logo-texto span {
    font-size: 12px;
    letter-spacing: 2px
}

.logo-texto strong {
    font-size: 21px
}

.menu {
    display: flex;
    align-items: center;
    gap: 38px
}

.menu a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 600;
    position: relative;
    transition: var(--transicion)
}

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transicion)
}

.menu a:hover,
.menu a.activo {
    color: var(--blanco)
}

.header-chatbot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 52px;
    min-width: 138px;
    padding: 10px 16px;
    border: 1px solid #0d318d;
    border-radius: 10px;
    color: #ffffff;
    background: #153faf;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(21, 63, 175, 0.2);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.header-chatbot:hover {
    color: #ffffff;
    background: #0d318d;
    box-shadow: 0 12px 24px rgba(13, 49, 141, 0.27);
    transform: translateY(-2px);
}

.header-chatbot i {
    color: #ffffff;
}

.header-busqueda + .header-chatbot {
    margin-left: 12px;
}

.btn-header {
    padding: 12px 21px;
    color: var(--blanco);
    background: var(--accent);
    border-radius: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 8px 18px rgba(185, 154, 94, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease
}

.btn-header:hover {
    transform: translateY(-3px);
    background: #9f823f;
    box-shadow: 0 13px 26px rgba(185, 154, 94, 0.26)
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 25px;
    cursor: pointer
}

.hero {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-carrusel {
    background: #0b1d36;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.7s ease;
    transform: scale(1.02);
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-overlay,
.pagina-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .90);
    opacity: 1;
    z-index: 1;
}

.hero::before,
.pagina-hero::before,
.rubro-hero::before,
.casa-hero::before,
.comercio-hero::before,
.institucion-hero::before,
.grifos-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .24;
    pointer-events: none;
    background-size: 150% 150%;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    background: linear-gradient(120deg, rgba(112, 84, 54, .55), rgba(26, 24, 20, .22), rgba(112, 84, 54, .55));
}

.pagina-hero::before {
    background: linear-gradient(120deg, rgba(149, 121, 74, .35), rgba(56, 47, 31, .18), rgba(149, 121, 74, .35));
}

.rubro-hero::before {
    background: linear-gradient(120deg, rgba(78, 97, 115, .55), rgba(27, 39, 56, .28), rgba(78, 97, 115, .55));
}

.casa-hero::before {
    background: linear-gradient(120deg, rgba(59, 78, 96, .55), rgba(18, 27, 42, .28), rgba(59, 78, 96, .55));
}

.comercio-hero::before {
    background: linear-gradient(120deg, rgba(61, 79, 98, .55), rgba(16, 25, 39, .28), rgba(61, 79, 98, .55));
}

.institucion-hero::before {
    background: linear-gradient(120deg, rgba(60, 79, 104, .55), rgba(18, 28, 43, .28), rgba(60, 79, 104, .55));
}

.grifos-hero::before {
    background: linear-gradient(120deg, rgba(88, 70, 67, .55), rgba(20, 30, 42, .28), rgba(88, 70, 67, .55));
}

.hero-contenido,
.pagina-hero-contenido,
.rubro-hero-grid,
.casa-hero-grid,
.comercio-hero-grid,
.institucion-hero-grid,
.grifos-hero-grid {
    position: relative;
    z-index: 2;
}

.hero-overlay,
.pagina-hero-overlay {
    z-index: 1;
}

.hero::before,
.pagina-hero::before,
.rubro-hero::before,
.casa-hero::before,
.comercio-hero::before,
.institucion-hero::before,
.grifos-hero::before {
    z-index: 0;
}

.hero,
.pagina-hero,
.rubro-hero,
.casa-hero,
.comercio-hero,
.institucion-hero,
.grifos-hero {
    position: relative;
}

.hero-decoracion-1,
.hero-decoracion-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-decoracion-1 {
    width: 350px;
    height: 350px;
    right: -100px;
    top: 80px;
    background: rgba(185, 154, 94, 0.16);
}

.hero-decoracion-2 {
    width: 300px;
    height: 300px;
    left: -160px;
    bottom: 50px;
    background: rgba(71, 90, 114, 0.20);
}

.hero-contenido {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;
    padding-top: 85px;
}

.hero-cotiza-ahora {
    position: absolute;
    z-index: 3;
    top: 64%;
    right: 13%;
    min-width: 390px !important;
    min-height: 104px !important;
    padding: 28px 42px !important;
    border: 3px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.hero-cotiza-ahora:hover {
    transform: translateY(-3px);
}

html body .hero .hero-cotiza-ahora {
    min-height: 104px !important;
    padding: 28px 42px !important;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem) !important;
}

.hero-carrusel-puntos {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform: translateX(-50%);
}

.hero-carrusel-punto {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-carrusel-punto.is-active {
    width: 30px;
    border-radius: 999px;
    background: #ffffff;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d0c09b;
    background: rgba(185, 154, 94, 0.10);
    border: 1px solid rgba(185, 154, 94, 0.30);
    padding: 8px 13px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 22px
}

.hero h1 {
    color: var(--blanco);
    font-size: clamp(44px, 5.4vw, 66px);
    line-height: 1.06;
    letter-spacing: -1.5px;
    max-width: 680px
}

.hero h1 span {
    display: block;
    color: var(--accent)
}

.hero-texto>p {
    margin-top: 25px;
    max-width: 620px;
    color: #c6ccd5;
    font-size: 18px
}

.hero-botones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px
}

.btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 9px;
    color: var(--blanco);
    background: #b6734a;
    font-weight: 700;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
    box-shadow: 0 8px 20px rgba(185, 154, 94, 0.20)
}

.btn-principal:hover {
    transform: translateY(-3px);
    background: #995f39;
    box-shadow: 0 13px 27px rgba(185, 154, 94, 0.28)
}

/* Acción principal de cotización dentro del hero. */
.btn-hero-grande {
    padding: 22px 38px;
    font-size: 1.15rem;
    border-radius: 12px;
}

.btn-cotiza-hero {
    min-width: 260px;
    background: #1d4ed8;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.34);
}

.btn-cotiza-hero:hover {
    background: #1640b5;
    box-shadow: 0 16px 32px rgba(29, 78, 216, 0.42);
}

.btn-estado-cotizacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.btn-estado-cotizacion:hover {
    color: #1640b5;
    text-decoration: underline;
}
.btn-hero-grande i {
    font-size: 1.05rem;
}
@media (max-width: 600px) {
    .hero-cotiza-ahora {
        top: auto;
        right: 50%;
        bottom: 38px;
        min-width: 0 !important;
        width: min(82vw, 320px) !important;
        min-height: 64px !important;
        padding: 17px 20px !important;
        border-width: 2px;
        border-radius: 13px;
        font-size: 1.05rem !important;
        transform: translateX(50%);
    }

    .hero-cotiza-ahora:hover {
        transform: translate(50%, -3px);
    }

    html body .hero .hero-cotiza-ahora {
        min-height: 64px !important;
        padding: 17px 20px !important;
        font-size: 1.05rem !important;
    }

    .btn-hero-grande {
        padding: 18px 28px;
        font-size: 1.02rem;
        width: 100%;
        justify-content: center;
    }
}

.btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: #f5f5f5;
    font-weight: 600
}

.btn-secundario i {
    color: var(--accent);
    font-size: 25px
}

.hero-confianza {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    color: #c9d6e3;
    font-size: 14px
}

.hero-confianza div {
    display: flex;
    gap: 8px;
    align-items: center
}

.hero-confianza i {
    color: var(--accent)
}

.hero-panel {
    display: flex;
    justify-content: center
}

.panel-seguridad {
    width: min(100%, 480px);
    padding: 28px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24)
}

.panel-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 25px
}

.panel-superior span {
    color: #95a9bf;
    font-size: 11px;
    letter-spacing: 1.4px
}

.panel-superior h3 {
    margin-top: 4px;
    font-size: 22px
}

.estado {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #7cf0a4
}

.estado span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30df6c;
    box-shadow: 0 0 12px #30df6c
}

.camara-preview {
    min-height: 220px;
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(145deg, #2c2d27, #181712);
    display: flex;
    align-items: flex-end;
    gap: 16px;
    color: white;
    position: relative;
    overflow: hidden
}

.camara-preview::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(185, 154, 94, .25);
    border-radius: 50%;
    top: -80px;
    right: -60px;
    box-shadow: 0 0 60px rgba(185, 154, 94, .12)
}

.camara-icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--azul);
    border-radius: 13px;
    font-size: 21px
}

.camara-preview span {
    display: block;
    color: #91a9bf;
    font-size: 13px
}

.camara-preview strong {
    display: block;
    margin-top: 2px;
    font-size: 17px
}

.panel-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px
}

.panel-item {
    padding: 17px 12px;
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, .06);
    border-radius: 13px
}

.panel-item i {
    color: #b99a5e;
    font-size: 20px;
    margin-bottom: 8px
}

.panel-item span,
.panel-item strong {
    display: block
}

.panel-item span {
    color: #a6b9ca;
    font-size: 12px
}

.panel-item strong {
    font-size: 10px;
    margin-top: 3px
}

.franja-confianza {
    background: white;
    box-shadow: 0 12px 45px rgba(15, 23, 42, .06)
}

.confianza-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.confianza-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 25px;
    border-right: 1px solid #edf1f5
}

.confianza-item:last-child {
    border-right: none
}

.confianza-item>i {
    color: var(--azul);
    font-size: 27px
}

.confianza-item strong,
.confianza-item span {
    display: block
}

.confianza-item strong {
    font-size: 14px
}

.confianza-item span {
    color: var(--gris-texto);
    font-size: 12px
}

.marcas-franja {
    padding: 18px 0 28px;
    background: #e8f1ff;
}

.marcas-franja .marcas-ticker-container {
    margin-top: 0;
}

.marcas-franja .marcas-inicio-pie {
    margin-top: 12px;
}

.marcas-inicio-oculta {
    display: none !important;
}

.seccion {
    padding: 105px 0
}

.encabezado-seccion {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center
}

.subtitulo {
    color: var(--azul);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px
}

.encabezado-seccion h2,
.nosotros-contenido h2 {
    margin-top: 10px;
    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.15;
    letter-spacing: -1px
}

.encabezado-seccion h2 span,
.nosotros-contenido h2 span {
    color: var(--azul)
}

.encabezado-seccion p {
    margin-top: 18px;
    color: var(--gris-texto);
    font-size: 17px
}

.servicios-home {
    background: var(--gris-fondo)
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.servicio-card {
    position: relative;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 7px 22px rgba(8, 28, 48, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease
}

.servicio-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(var(--azul), var(--celeste));
    transition: var(--transicion)
}

.servicio-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 104, 179, 0.20);
    box-shadow: 0 18px 38px rgba(8, 28, 48, 0.10)
}

.servicio-card:hover::before {
    height: 100%
}

.servicio-icono {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #8d6a3d;
    background: #f7f1e5;
    font-size: 23px;
    margin-bottom: 24px
}

.numero-servicio {
    position: absolute;
    right: 28px;
    top: 25px;
    color: #e1e7ee;
    font-size: 35px;
    font-weight: 800
}

.servicio-card h3 {
    font-size: 20px;
    margin-bottom: 12px
}

.servicio-card p {
    color: var(--gris-texto);
    min-height: 77px
}

.servicio-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--azul);
    font-weight: 700
}

.nosotros-home {
    background: white
}

.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px
}

.nosotros-visual {
    min-height: 520px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.visual-principal {
    width: 85%;
    height: 440px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(185, 154, 94, .20), transparent 48%), linear-gradient(145deg, #3f3527, #2e261c);
    color: white;
    box-shadow: 0 30px 70px rgba(7, 23, 44, .20)
}

.visual-principal i {
    font-size: 110px;
    color: var(--celeste);
    margin-bottom: 20px
}

.visual-principal span {
    letter-spacing: 7px;
    font-weight: 700;
    color: #c9d9e8
}

.experiencia-card {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 175px;
    padding: 24px;
    border-radius: 17px;
    background: white;
    box-shadow: var(--sombra)
}

.experiencia-card strong {
    display: block;
    color: var(--azul);
    font-size: 45px;
    line-height: 1
}

.experiencia-card span {
    display: block;
    margin-top: 7px;
    color: var(--gris-texto);
    font-size: 13px
}

.nosotros-contenido>p {
    margin: 22px 0 30px;
    color: var(--gris-texto);
    font-size: 17px
}

.beneficios {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 32px
}

.beneficio {
    display: flex;
    gap: 15px
}

.beneficio>i {
    color: var(--azul);
    font-size: 21px;
    margin-top: 3px
}

.beneficio h4 {
    font-size: 17px
}

.beneficio p {
    color: var(--gris-texto);
    font-size: 14px;
    margin-top: 3px
}

.estadisticas {
    padding: 70px 0;
    color: white;
    background: linear-gradient(125deg, var(--azul-oscuro), #0b3a67)
}

.estadisticas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.estadistica {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .15)
}

.estadistica:last-child {
    border-right: none
}

.estadistica strong {
    font-size: 48px;
    line-height: 1
}

.estadistica span {
    color: var(--celeste);
    font-size: 28px;
    font-weight: 700
}

.estadistica p {
    margin-top: 7px;
    color: #b8c9da
}

.cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #8d6a3d, #d4c3a5);
    color: white
}

.cta-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px
}

.cta span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity: .85
}

.cta h2 {
    max-width: 680px;
    margin-top: 8px;
    font-size: 36px;
    line-height: 1.2
}

.btn-blanco {
    flex-shrink: 0;
    padding: 15px 24px;
    border-radius: 11px;
    background: white;
    color: var(--azul);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transicion)
}

.btn-blanco:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .17)
}

.footer {
    background: linear-gradient(180deg, #3c3224 0%, #201a13 100%);
    color: #e6d9c0
}

.footer-grid {
    padding: 75px 0 55px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px
}

.logo-footer {
    display: inline-flex;
    margin-bottom: 20px
}

.logo-footer .logo-imagen {
    width: 230px;
    max-height: 72px;
}

.footer-info>p {
    max-width: 320px;
    color: #9ba5b0;
    font-size: 14px
}

.redes {
    display: flex;
    gap: 10px;
    margin-top: 23px
}

.redes a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: #c7d3df;
    transition: var(--transicion)
}

.redes a:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-3px)
}

.footer-columna {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.footer-columna h3 {
    margin-bottom: 9px;
    font-size: 16px
}

.footer-columna a,
.footer-columna p {
    color: #9ba5b0;
    font-size: 14px;
    transition: var(--transicion)
}

.footer-columna a:hover {
    color: white;
    transform: translateX(4px)
}

.footer-columna p i {
    width: 22px;
    color: var(--accent)
}

.footer-bottom {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #7e8c9b;
    font-size: 13px
}

.whatsapp {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    z-index: 999;
    border-radius: 50%;
    background: #25d366;
    color: white;
    font-size: 29px;
    box-shadow: 0 10px 35px rgba(37, 211, 102, .40);
    transition: var(--transicion)
}

.whatsapp:hover {
    transform: scale(1.04)
}

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .75s ease, transform .75s ease
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

.btn-principal,
.btn-header,
.btn-blanco,
.btn-secundario,
.btn-animado {
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease
}

.btn-principal:hover,
.btn-header:hover,
.btn-blanco:hover,
.btn-secundario:hover,
.btn-animado:hover {
    transform: translateY(-3px)
}

.btn-principal:active,
.btn-header:active,
.btn-blanco:active,
.btn-secundario:active,
.btn-animado:active {
    transform: translateY(-1px)
}

.btn-principal i,
.btn-header i,
.btn-blanco i,
.btn-secundario i,
.link-animado i {
    transition: transform 0.22s ease
}

.btn-principal:hover i,
.btn-header:hover i,
.btn-blanco:hover i,
.link-animado:hover i {
    transform: translateX(3px)
}

.menu a {
    transition: color 0.22s ease
}

.confianza-item,
.micro-card {
    position: relative;
    transition: transform 0.25s ease, background-color 0.25s ease
}

.confianza-item:hover,
.micro-card:hover {
    transform: translateY(-3px);
    background: #f8fafc
}

.servicio-card,
.card-interactiva {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease
}

.servicio-card:hover,
.card-interactiva:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 104, 179, 0.20);
    box-shadow: 0 18px 38px rgba(8, 28, 48, 0.10)
}

.servicio-card:active,
.card-interactiva:active {
    transform: translateY(-2px)
}

.servicio-icono {
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease
}

.servicio-card:hover .servicio-icono,
.card-interactiva:hover .servicio-icono {
    transform: translateY(-2px);
    background: #e7f2fa;
    color: var(--azul)
}

.servicio-card a i {
    transition: transform 0.22s ease
}

.servicio-card a:hover i {
    transform: translateX(3px)
}

.hero-panel,
.interactivo-destacado {
    position: relative;
    z-index: 5
}

.panel-seguridad {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease
}

.hero-panel:hover .panel-seguridad,
.interactivo-destacado:hover .panel-seguridad {
    transform: translateY(-5px);
    border-color: rgba(59, 154, 216, 0.32);
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.28)
}

.hero-panel.panel-activo .panel-seguridad,
.interactivo-destacado.panel-activo .panel-seguridad {
    transform: translateY(-6px);
    border-color: rgba(59, 154, 216, 0.42)
}

.hero-panel::after,
.interactivo-destacado::after {
    display: none
}

.camara-preview,
.panel-item,
.camara-icono {
    transition: transform 0.25s ease, background-color 0.25s ease
}

.camara-preview:hover {
    transform: none
}

.panel-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.09)
}

.visual-principal,
.media-interactiva {
    transition: transform 0.28s ease, box-shadow 0.28s ease
}

.visual-principal:hover,
.media-interactiva:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(8, 28, 48, 0.18)
}

.experiencia-card,
.card-flotante {
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.experiencia-card:hover,
.card-flotante:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(8, 28, 48, 0.13)
}

.beneficio,
.item-interactivo {
    padding: 10px;
    margin-left: -10px;
    border-radius: 10px;
    transition: transform 0.25s ease, background-color 0.25s ease
}

.beneficio:hover,
.item-interactivo:hover {
    transform: translateX(4px);
    background: rgba(18, 104, 179, 0.045)
}

.estadistica,
.stat-interactiva {
    transition: transform 0.25s ease
}

.estadistica:hover,
.stat-interactiva:hover {
    transform: translateY(-2px)
}

.cta-contenido,
.cta-interactiva {
    transition: none
}

.whatsapp {
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 28px rgba(37, 211, 102, 0.34)
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(59, 154, 216, 0.45);
    outline-offset: 3px;
    border-radius: 7px
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important
    }
}

.pagina-hero {
    position: relative;
    background: #f6f8fb;
    padding: 80px 0 60px;
}

.pagina-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    z-index: 0;
}

.pagina-decoracion,
.pagina-decoracion-1,
.pagina-decoracion-2 {
    display: none;
}

.pagina-hero-contacto {
    position: relative;
}

.contacto-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 32px;
    align-items: start;
    z-index: 1;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #0f172a;
    font-size: 13px;
}

.breadcrumb a {
    color: #0f172a;
    transition: color .25s ease;
}

.breadcrumb a:hover {
    color: #0f172a;
}

.breadcrumb i {
    font-size: 9px;
}

.breadcrumb span {
    color: #0f172a;
}

.contacto-hero-texto h1,
.pagina-hero h1 {
    max-width: 700px;
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -1px;
    color: #0f172a;
}

.contacto-hero-texto h1 span,
.pagina-hero h1 span {
    display: block;
    color: #0f172a;
}

.contacto-hero-texto p,
.pagina-hero-contenido>div:first-child>p {
    max-width: 650px;
    margin-top: 24px;
    color: #334155;
    font-size: 17px;
    line-height: 1.8;
}

.contacto-hero-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.contacto-hero-beneficios div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #faf9f5;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.contacto-hero-beneficios i {
    color: #0f172a;
    font-size: 16px;
}

.contacto-hero-summary {
    margin-top: 28px;
    padding: 24px;
    border-radius: 20px;
    background: #faf9f5;
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.contacto-hero-summary strong {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 15px;
}

.contacto-hero-summary p {
    margin: 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.75;
}

.contacto-hero-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px;
    padding: 36px;
    border-radius: 26px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 32px 70px rgba(83, 100, 113, 0.08);
    border: 1px solid #e2e8f0;
}

.contacto-hero-panel-top span {
    display: block;
    color: #0f172a;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.contacto-hero-panel-top strong {
    display: block;
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.8px;
    color: #0f172a;
}

.contacto-hero-card p {
    margin-top: 28px;
    color: #334155;
    font-size: 15px;
    line-height: 1.85;
}

.contacto-hero-panel-list {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.contacto-hero-panel-list > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

.contacto-hero-panel-list i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 18px;
}

.contacto-hero-panel-list strong {
    margin-top: 6px;
    font-size: 16px;
    color: #0f172a;
}

.contacto-hero-panel-list span {
    display: block;
    color: #475569;
    font-size: 13px;
}

.contacto-hero-panel-cta {
    margin-top: 32px;
}

.contacto-hero-panel-cta .btn-principal {
    width: 100%;
    justify-content: center;
}

@media (max-width: 960px) {
    .contacto-hero-grid {
        grid-template-columns: 1fr;
    }

    .contacto-hero-beneficios {
        grid-template-columns: 1fr;
    }
}

.pagina-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 32px
}

.servicios-hero-panel {
    display: flex;
    justify-content: center
}

.servicios-monitor {
    width: min(100%, 470px);
    padding: 27px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .30);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease
}

.servicios-monitor:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(32, 164, 243, .45);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .34), 0 0 35px rgba(32, 164, 243, .12)
}

.servicios-monitor-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

.servicios-monitor-top>div:first-child span {
    display: block;
    color: #90a7bd;
    font-size: 10px;
    letter-spacing: 1.5px
}

.servicios-monitor-top strong {
    display: block;
    margin-top: 3px;
    font-size: 18px
}

.monitor-centro {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(185, 154, 94, .18), transparent 45%), linear-gradient(145deg, #2a261f, #231f18);
    overflow: hidden
}

.monitor-centro::before,
.monitor-centro::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(185, 154, 94, .14);
    border-radius: 50%
}

.monitor-centro::before {
    width: 230px;
    height: 230px
}

.monitor-centro::after {
    width: 170px;
    height: 170px
}

.monitor-circulo {
    position: relative;
    z-index: 2;
    width: 85px;
    height: 85px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #b99a5e, #8d6a3d);
    font-size: 35px;
    box-shadow: 0 0 40px rgba(185, 154, 94, .25)
}

.monitor-centro>span,
.monitor-centro>strong {
    position: relative;
    z-index: 2
}

.monitor-centro>span {
    color: #d4c3a5;
    font-size: 10px;
    letter-spacing: 2px
}

.monitor-centro>strong {
    margin-top: 4px;
    font-size: 18px
}

.monitor-estados {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 13px
}

.monitor-estados div {
    padding: 14px 8px;
    text-align: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
    transition: transform .3s ease, background .3s ease
}

.monitor-estados div:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .10)
}

.monitor-estados i {
    display: block;
    margin-bottom: 6px;
    color: #b99a5e;
    font-size: 17px
}

.monitor-estados span {
    color: #7b705b;
    font-size: 10px
}

.servicios-pagina {
    background: var(--gris-fondo)
}

.servicios-detalle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.servicio-detalle-card {
    position: relative;
    padding: 34px;
    overflow: hidden;
    background: white;
    border: 1px solid #e8eef4;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(7, 23, 44, .045);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.servicio-detalle-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #b99a5e, #8d6a3d);
    transition: height .35s ease
}

.servicio-detalle-card:hover {
    transform: translateY(-5px);
    border-color: rgba(185, 154, 94, .30);
    box-shadow: 0 20px 45px rgba(7, 23, 44, .12)
}

.servicio-detalle-card:hover::before {
    height: 100%
}

.servicio-detalle-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.servicio-detalle-icono {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--azul);
    background: #eaf5ff;
    font-size: 23px;
    transition: transform .35s ease, color .35s ease, box-shadow .35s ease
}

.servicio-detalle-card:hover .servicio-detalle-icono {
    transform: scale(1.04) rotate(-1deg);
    color: var(--celeste);
    box-shadow: 0 12px 25px rgba(32, 164, 243, .17)
}

.servicio-numero {
    color: #e2e9ef;
    font-size: 37px;
    font-weight: 800
}

.servicio-detalle-card h3 {
    margin-top: 24px;
    font-size: 21px
}

.servicio-detalle-card>p {
    margin-top: 11px;
    color: var(--gris-texto)
}

.servicio-detalle-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 22px;
    list-style: none
}

.servicio-detalle-card li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4d5c70;
    font-size: 14px
}

.servicio-detalle-card li i {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: var(--azul);
    font-size: 9px
}

.servicio-detalle-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: var(--azul);
    font-weight: 700
}

.servicio-detalle-link i {
    transition: transform .25s ease
}

.servicio-detalle-link:hover i {
    transform: translateX(5px)
}

.solucion-integral {
    background: white
}

.solucion-integral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 90px
}

.solucion-integral-contenido h2 {
    margin-top: 10px;
    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.15;
    letter-spacing: -1px
}

.solucion-integral-contenido h2 span {
    display: block;
    color: var(--azul)
}

.solucion-integral-contenido>p {
    margin-top: 20px;
    color: var(--gris-texto);
    font-size: 17px
}

.solucion-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 30px 0
}

.solucion-lista div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 11px;
    transition: transform .3s ease, background .3s ease
}

.solucion-lista div:hover {
    transform: translateX(5px);
    background: rgba(32, 164, 243, .055)
}

.solucion-lista i {
    color: var(--azul)
}

.solucion-integral-visual {
    min-height: 520px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.nucleo-seguridad {
    position: relative;
    width: 410px;
    height: 410px;
    display: flex;
    align-items: center;
    justify-content: center
}

.nucleo-seguridad::before,
.nucleo-seguridad::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(141, 106, 61, .14)
}

.nucleo-seguridad::before {
    width: 350px;
    height: 350px
}

.nucleo-seguridad::after {
    width: 270px;
    height: 270px
}

.nucleo-centro {
    position: relative;
    z-index: 3;
    width: 175px;
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: radial-gradient(circle at 40% 30%, #b99a5e, #4e3f2d);
    box-shadow: 0 25px 70px rgba(7, 23, 44, .25);
    transition: transform .4s ease, box-shadow .4s ease
}

.nucleo-centro:hover {
    transform: scale(1.03);
    box-shadow: 0 22px 55px rgba(7, 23, 44, .30), 0 0 35px rgba(185, 154, 94, .15)
}

.nucleo-centro i {
    color: var(--celeste);
    font-size: 50px;
    margin-bottom: 10px
}

.nucleo-centro strong {
    font-size: 14px;
    letter-spacing: 2px
}

.nucleo-centro span {
    color: #9bb4c8;
    font-size: 10px;
    letter-spacing: 2px
}

.nucleo-item {
    position: absolute;
    z-index: 4;
    width: 95px;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--texto);
    background: white;
    box-shadow: 0 16px 45px rgba(7, 23, 44, .12);
    transition: transform .35s ease, box-shadow .35s ease
}

.nucleo-item:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 22px 55px rgba(7, 23, 44, .18)
}

.nucleo-item i {
    color: var(--azul);
    font-size: 23px;
    margin-bottom: 7px
}

.nucleo-item span {
    font-size: 12px;
    font-weight: 700
}

.nucleo-cctv {
    top: 10px;
    left: 157px
}

.nucleo-alarma {
    right: 0;
    top: 158px
}

.nucleo-acceso {
    bottom: 10px;
    left: 157px
}

.nucleo-monitor {
    left: 0;
    top: 158px
}

.proceso-servicios {
    background: var(--gris-fondo)
}

.proceso-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 15px
}

.proceso-card {
    position: relative;
    padding: 30px 20px;
    text-align: center;
    transition: transform .35s ease
}

.proceso-card:hover {
    transform: translateY(-4px)
}

.proceso-numero {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #dee7ef;
    font-size: 30px;
    font-weight: 800
}

.proceso-icono {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 17px;
    color: white;
    background: linear-gradient(135deg, var(--azul), var(--celeste));
    font-size: 23px;
    box-shadow: 0 15px 30px rgba(185, 154, 94, .20);
    transition: transform .35s ease
}

.proceso-card:hover .proceso-icono {
    transform: scale(1.04) rotate(-1deg)
}

.proceso-card h3 {
    font-size: 18px
}

.proceso-card p {
    margin-top: 8px;
    color: var(--gris-texto);
    font-size: 14px
}

.proceso-linea {
    width: 45px;
    height: 1px;
    background: linear-gradient(90deg, #c6d8e8, var(--celeste))
}

.sectores {
    background: #f6f8fc;
    padding: 100px 0;
}

.sectores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.sector-card {
    position: relative;
    min-height: auto;
    overflow: hidden;
    border: 1px solid rgba(141, 154, 171, 0.15);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(18, 42, 80, 0.06);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sector-card:hover {
    transform: translateY(-6px);
    border-color: rgba(18, 104, 179, 0.22);
    box-shadow: 0 24px 45px rgba(18, 42, 80, 0.10);
}

.sector-card i {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    border-radius: 18px;
    color: var(--azul);
    background: rgba(133, 179, 242, 0.14);
    font-size: 27px;
    transition: transform .35s ease, background-color .35s ease;
}

.sector-card:hover i {
    transform: scale(1.08) rotate(-1deg);
    background: rgba(89, 139, 225, 0.18);
}

.sector-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: var(--azul);
}

.sector-card p {
    margin: 0;
    color: #6e7d95;
    font-size: 15px;
    line-height: 1.75;
    flex-grow: 1;
}

.nosotros-hero-panel {
    display: flex;
    justify-content: center
}

.empresa-panel {
    width: min(100%, 470px);
    padding: 28px;
    border-radius: 18px;
    color: white;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .30);
    transition: transform .40s ease, box-shadow .40s ease, border-color .40s ease
}

.empresa-panel:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(32, 164, 243, .45);
    box-shadow: 0 40px 95px rgba(0, 0, 0, .35), 0 0 35px rgba(32, 164, 243, .13)
}

.empresa-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
}

.empresa-panel-top>div:first-child span {
    display: block;
    color: #90a7bd;
    font-size: 10px;
    letter-spacing: 1.5px
}

.empresa-panel-top strong {
    display: block;
    margin-top: 3px;
    font-size: 18px
}

.empresa-panel-centro {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(185, 154, 94, .20), transparent 47%), linear-gradient(145deg, #7d6546, #4e3f2d)
}

.empresa-panel-centro::before,
.empresa-panel-centro::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(185, 154, 94, .15)
}

.empresa-panel-centro::before {
    width: 240px;
    height: 240px
}

.empresa-panel-centro::after {
    width: 180px;
    height: 180px
}

.empresa-escudo {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul), var(--celeste));
    font-size: 37px;
    box-shadow: 0 0 40px rgba(185, 154, 94, .30);
    transition: transform .35s ease
}

.empresa-panel:hover .empresa-escudo {
    transform: scale(1.03)
}

.empresa-panel-centro span,
.empresa-panel-centro h3,
.empresa-panel-centro p {
    position: relative;
    z-index: 2
}

.empresa-panel-centro>span {
    color: #89a7bf;
    font-size: 10px;
    letter-spacing: 2px
}

.empresa-panel-centro h3 {
    margin-top: 4px;
    font-size: 20px
}

.empresa-panel-centro p {
    max-width: 280px;
    margin-top: 8px;
    color: #a7bacb;
    font-size: 13px
}

.empresa-panel-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px
}

.empresa-panel-datos div {
    padding: 15px 8px;
    text-align: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
    transition: transform .3s ease, background .3s ease
}

.empresa-panel-datos div:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .10)
}

.empresa-panel-datos i {
    display: block;
    margin-bottom: 6px;
    color: var(--celeste);
    font-size: 18px
}

.empresa-panel-datos span {
    color: #a9bdce;
    font-size: 11px
}

.quienes-somos {
    background: white
}

.quienes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px
}

.quienes-visual {
    min-height: 520px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.quienes-imagen {
    width: 88%;
    height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
    color: white;
    background: radial-gradient(circle, rgba(32, 164, 243, .25), transparent 46%), linear-gradient(145deg, #07172c, #0a315a);
    box-shadow: 0 30px 70px rgba(7, 23, 44, .20);
    transition: transform .4s ease, box-shadow .4s ease
}

.quienes-imagen:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 40px 85px rgba(7, 23, 44, .26)
}

.quienes-icono-principal {
    font-size: 95px;
    color: var(--celeste);
    margin-bottom: 22px;
    transition: transform .4s ease
}

.quienes-imagen:hover .quienes-icono-principal {
    transform: scale(1.03)
}

.quienes-imagen>span {
    color: #a3bbce;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px
}

.quienes-imagen>strong {
    max-width: 300px;
    margin-top: 8px;
    font-size: 21px;
    line-height: 1.3
}

.quienes-experiencia {
    position: absolute;
    right: 0;
    bottom: 25px;
    width: 180px;
    padding: 24px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 20px 55px rgba(7, 23, 44, .14);
    transition: transform .35s ease, box-shadow .35s ease
}

.quienes-experiencia:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 28px 65px rgba(7, 23, 44, .18)
}

.quienes-experiencia strong {
    display: block;
    color: var(--azul);
    font-size: 46px;
    line-height: 1
}

.quienes-experiencia span {
    display: block;
    margin-top: 7px;
    color: var(--gris-texto);
    font-size: 13px
}

.quienes-contenido h2 {
    margin-top: 10px;
    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.15;
    letter-spacing: -1px
}

.quienes-contenido h2 span {
    display: block;
    color: var(--azul)
}

.quienes-contenido>p {
    margin-top: 20px;
    color: var(--gris-texto);
    font-size: 16px
}

.quienes-puntos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 28px 0 32px
}

.quienes-puntos div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border-radius: 11px;
    transition: transform .3s ease, background .3s ease
}

.quienes-puntos div:hover {
    transform: translateX(5px);
    background: rgba(32, 164, 243, .055)
}

.quienes-puntos i {
    color: var(--azul)
}

.identidad-empresa {
    background: var(--gris-fondo)
}

.identidad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.identidad-card {
    position: relative;
    padding: 36px;
    overflow: hidden;
    border-radius: 16px;
    background: white;
    border: 1px solid #e8eef4;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.identidad-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(var(--azul), var(--celeste));
    transition: height .35s ease
}

.identidad-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 164, 243, .30);
    box-shadow: 0 18px 40px rgba(7, 23, 44, .12)
}

.identidad-card:hover::before {
    height: 100%
}

.identidad-icono {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--azul);
    background: #eaf5ff;
    font-size: 24px;
    transition: transform .35s ease, color .35s ease
}

.identidad-card:hover .identidad-icono {
    transform: scale(1.04) rotate(-1deg);
    color: var(--celeste)
}

.identidad-numero {
    position: absolute;
    right: 28px;
    top: 25px;
    color: #e1e7ee;
    font-size: 36px;
    font-weight: 800
}

.identidad-card h3 {
    margin-top: 25px;
    font-size: 21px
}

.identidad-card p {
    margin-top: 12px;
    color: var(--gris-texto)
}

.valores-empresa {
    background: white
}

.valores-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 80px
}

.valores-contenido h2 {
    margin-top: 10px;
    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.15
}

.valores-contenido h2 span {
    display: block;
    color: var(--azul)
}

.valores-contenido>p {
    margin: 20px 0 30px;
    color: var(--gris-texto);
    font-size: 16px
}

.valores-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
}

.valor-card {
    display: flex;
    gap: 16px;
    padding: 25px;
    border: 1px solid #e8eef4;
    border-radius: 17px;
    background: white;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.valor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 164, 243, .30);
    box-shadow: 0 20px 45px rgba(7, 23, 44, .10)
}

.valor-icono {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--azul);
    background: #eaf5ff;
    font-size: 20px;
    transition: transform .35s ease
}

.valor-card:hover .valor-icono {
    transform: scale(1.04) rotate(-1deg)
}

.valor-card h3 {
    font-size: 17px
}

.valor-card p {
    margin-top: 5px;
    color: var(--gris-texto);
    font-size: 13px
}

.diferencia {
    background: var(--gris-fondo)
}

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

.diferencia-card {
    position: relative;
    padding: 32px 25px;
    text-align: center;
    border: 1px solid #e8eef4;
    border-radius: 18px;
    background: white;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.diferencia-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 164, 243, .30);
    box-shadow: 0 22px 50px rgba(7, 23, 44, .11)
}

.diferencia-card>span {
    position: absolute;
    right: 18px;
    top: 13px;
    color: #e1e7ee;
    font-size: 27px;
    font-weight: 800
}

.diferencia-card>i {
    width: 67px;
    height: 67px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, var(--azul), var(--celeste));
    font-size: 24px;
    box-shadow: 0 14px 30px rgba(11, 99, 206, .20);
    transition: transform .35s ease
}

.diferencia-card:hover>i {
    transform: scale(1.04) rotate(-1deg)
}

.diferencia-card h3 {
    font-size: 18px
}

.diferencia-card p {
    margin-top: 8px;
    color: var(--gris-texto);
    font-size: 14px
}

.contacto-hero-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.contacto-hero-beneficios div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 18px;
    background: white;
    border: 1px solid #e7edf5;
    color: #2f3b52;
    font-size: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.contacto-hero-beneficios i {
    color: var(--accent);
    font-size: 16px;
}

.pagina-hero-contacto {
    padding: 80px 0 60px;
    background: #f6f8fb;
    position: relative;
}

.pagina-hero-contacto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at top left, rgba(185, 154, 94, .10), transparent 35%);
}

.pagina-hero-contacto .pagina-hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 1;
    z-index: 0;
}

.contacto-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 32px;
    align-items: start;
    z-index: 1;
    background: #ffffff;
    padding: 40px;
    border-radius: 28px;
    border: 1px solid #e5e0d5;
    box-shadow: 0 40px 90px rgba(15, 23, 42, 0.08);
}

.contacto-hero-infobox {
    position: relative;
    z-index: 1;
    padding: 36px 42px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
}

.contacto-hero-infobox .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 20px;
}

.contacto-hero-infobox .breadcrumb a {
    color: #0f172a;
}

.contacto-hero-infobox .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    background: #f8f5ec;
    border: 1px solid #e2d9c7;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.7px;
    margin-bottom: 24px;
}

.contacto-hero-infobox h1 {
    color: #0f172a;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -1px;
    max-width: 680px;
    margin-bottom: 24px;
}

.contacto-hero-infobox h1 span {
    display: block;
    color: #0f172a;
}

.contacto-hero-infobox p {
    max-width: 640px;
    color: #334155;
    font-size: 17px;
    line-height: 1.8;
}

.contacto-hero-panel {
    position: relative;
    z-index: 1;
}

.contacto-hero-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px;
    padding: 36px;
    border-radius: 26px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 32px 70px rgba(83, 100, 113, 0.08);
    border: 1px solid #e5e5e5;
}

.contacto-hero-card-header span {
    display: block;
    color: #6b6b5e;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.contacto-hero-card-header strong {
    display: block;
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.8px;
}

.contacto-hero-card p {
    margin-top: 28px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.85;
}

.contacto-hero-card-list {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.contacto-hero-card-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fbf8f2;
    border: 1px solid #e6e0d8;
}

.contacto-hero-card-item i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 18px;
}

.contacto-hero-card-item i.fa-phone {
    background: #eef4e8;
    color: #436645;
}

.contacto-hero-card-item i.fa-whatsapp {
    background: #f1f6ea;
    color: #567d52;
}

.contacto-hero-card-item i.fa-envelope {
    background: #f7f2e9;
    color: #8a6f52;
}

.contacto-hero-card-item div span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.contacto-hero-card-item div strong {
    margin-top: 6px;
    font-size: 16px;
    color: #0f172a;
}

.contacto-hero-card-footer {
    margin-top: 34px;
    padding: 25px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.contacto-hero-card-footer strong {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.1px;
    color: #0f172a;
}

.contacto-hero-card-footer p {
    margin: 0;
    color: #475569;
    line-height: 1.7;
    font-size: 14px;
}

@media (max-width: 960px) {
    .contacto-hero-grid {
        grid-template-columns: 1fr;
    }

    .contacto-hero-beneficios {
        grid-template-columns: 1fr;
    }
}

.contacto-seccion {
    background: var(--gris-fondo)
}

.contacto-layout {
    display: grid;
    grid-template-columns: .62fr 1.65fr;
    align-items: start;
    gap: 30px
}

.contacto-informacion {
    padding: 30px;
    border-radius: 20px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e5e0d5;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 110px
}

.contacto-info-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px
}

.contacto-info-principal h3 {
    margin-top: 12px;
    font-size: 25px;
    line-height: 1.2
}

.contacto-info-principal p {
    margin-top: 13px;
    color: #a3afbf;
    font-size: 14px
}

.contacto-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #e8e2d8;
    transition: transform .3s ease
}

.contacto-info-item:hover {
    transform: translateX(3px)
}

.contacto-info-icono {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--accent);
    background: rgba(185, 154, 94, .12)
}

.contacto-info-item span,
.contacto-info-item strong {
    display: block
}

.contacto-info-item span {
    color: #9aa7b2;
    font-size: 11px
}

.contacto-info-item strong {
    margin-top: 2px;
    font-size: 13px
}

.contacto-beneficios {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 25px
}

.contacto-beneficios div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c6ccd5;
    font-size: 12px
}

.contacto-beneficios i {
    color: var(--accent)
}

.cotizador-contenedor {
    overflow: hidden;
    border: 1px solid #e3eaf1;
    border-radius: 16px;
    background: white;
    box-shadow: 0 20px 60px rgba(16, 22, 33, .08)
}

.cotizador-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border-bottom: 1px solid #edf1f5
}

.cotizador-cabecera span {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px
}

.cotizador-cabecera h3 {
    margin-top: 3px;
    font-size: 21px
}

.cotizador-pasos {
    display: flex;
    align-items: center
}

.cotizador-pasos span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #8d9cac;
    background: #eef3f7;
    font-size: 11px;
    font-weight: 800
}

.cotizador-pasos span.paso-activo {
    color: white;
    background: linear-gradient(135deg, var(--accent), #9e8c5d);
    box-shadow: 0 6px 18px rgba(185, 154, 94, .25)
}

.cotizador-pasos div {
    width: 20px;
    height: 2px;
    background: #e3e9ef
}

.cotizador-grid {
    display: grid;
    grid-template-columns: 1.4fr .72fr
}

.form-cotizacion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 32px
}

.campo-form {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.campo-completo {
    grid-column: 1 / -1
}

.campo-form label {
    color: #344156;
    font-size: 13px;
    font-weight: 700
}

.campo-form label i {
    width: 19px;
    color: var(--accent)
}

.campo-form input,
.campo-form select,
.campo-form textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dfe7ee;
    border-radius: 10px;
    outline: none;
    color: var(--texto);
    background: #fbfcfd;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease
}

.campo-form textarea {
    resize: vertical;
    min-height: 120px
}

.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus {
    border-color: rgba(185, 154, 94, .60);
    background: white;
    box-shadow: 0 0 0 4px rgba(185, 154, 94, .08)
}

.campo-form input::placeholder,
.campo-form textarea::placeholder {
    color: #9ca9b5
}

.campo-check {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.campo-check input {
    margin-top: 4px;
    accent-color: var(--accent)
}

.campo-check label {
    color: var(--gris-texto);
    font-size: 12px
}

.btn-enviar-cotizacion {
    border: none;
    cursor: pointer
}

.resumen-cotizacion {
    padding: 28px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.resumen-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.resumen-icono {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, var(--accent), #9e8c5d)
}

.resumen-cabecera span,
.resumen-cabecera strong {
    display: block
}

.resumen-cabecera span {
    color: #9aa7b2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px
}

.resumen-cabecera strong {
    margin-top: 2px;
    font-size: 15px
}

.resumen-contenido {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 24px 0
}

.resumen-item {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.resumen-item span,
.resumen-item strong {
    display: block
}

.resumen-item span {
    color: #9aa7b2;
    font-size: 10px
}

.resumen-item strong {
    margin-top: 3px;
    color: #d9e6f0;
    font-size: 12px
}

.recomendacion-box {
    padding: 18px;
    border: 1px solid rgba(185, 154, 94, .18);
    border-radius: 14px;
    background: rgba(185, 154, 94, .075)
}

.recomendacion-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800
}

.recomendacion-box p {
    margin-top: 10px;
    color: #c6ccd5;
    font-size: 12px;
    line-height: 1.55
}

.resumen-seguridad {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    color: #9aa7b2;
    font-size: 10px
}

.resumen-seguridad i {
    color: var(--accent);
    margin-top: 2px
}

.contacto-proceso {
    background: white
}

.contacto-proceso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.contacto-proceso-card {
    position: relative;
    padding: 30px;
    text-align: center;
    border: 1px solid #e7edf3;
    border-radius: 18px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.contacto-proceso-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 164, 243, .30);
    box-shadow: 0 22px 50px rgba(7, 23, 44, .10)
}

.contacto-proceso-card>span {
    position: absolute;
    right: 18px;
    top: 13px;
    color: #e1e8ee;
    font-size: 27px;
    font-weight: 800
}

.contacto-proceso-card>div {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 19px;
    border-radius: 17px;
    color: white;
    background: linear-gradient(135deg, var(--azul), var(--celeste));
    font-size: 23px;
    transition: transform .35s ease
}

.contacto-proceso-card:hover>div {
    transform: scale(1.04) rotate(-1deg)
}

.contacto-proceso-card h3 {
    font-size: 17px
}

.contacto-proceso-card p {
    margin-top: 8px;
    color: var(--gris-texto);
    font-size: 13px
}

body.modal-abierto {
    overflow: hidden
}

.modal-cotizacion {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease
}

.modal-cotizacion.visible {
    opacity: 1;
    visibility: visible
}

.modal-cotizacion-fondo {
    position: absolute;
    inset: 0;
    background: rgba(3, 12, 24, 0.78);
    backdrop-filter: blur(8px)
}

.modal-cotizacion-card {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 38px;
    border-radius: 24px;
    background: var(--blanco);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.35);
    transform: translateY(25px) scale(0.96);
    opacity: 0;
    transition: transform 0.30s cubic-bezier(.2, .8, .2, 1), opacity 0.30s ease
}

.modal-cotizacion.visible .modal-cotizacion-card {
    transform: translateY(0) scale(1);
    opacity: 1
}

.modal-cerrar {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 10px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease
}

.modal-cerrar:hover {
    transform: rotate(5deg) scale(1.03);
    color: var(--azul);
    background: #eaf5ff
}

.modal-exito-icono {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: var(--blanco);
    background: linear-gradient(135deg, #16a34a, #36dc78);
    font-size: 29px;
    box-shadow: 0 16px 35px rgba(34, 197, 94, 0.25);
    animation: modalCheckEntrada 0.55s ease
}

@keyframes modalCheckEntrada {
    0% {
        transform: scale(0.55);
        opacity: 0
    }

    65% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.modal-etiqueta {
    display: block;
    text-align: center;
    color: var(--azul);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px
}

.modal-cotizacion-card>h3 {
    max-width: 420px;
    margin: 8px auto 0;
    text-align: center;
    color: var(--texto);
    font-size: 27px;
    line-height: 1.2
}

.modal-descripcion {
    max-width: 450px;
    margin: 13px auto 0;
    text-align: center;
    color: var(--gris-texto);
    font-size: 13px;
    line-height: 1.6
}

.modal-codigo {
    margin-top: 25px;
    padding: 18px 20px;
    text-align: center;
    border: 1px solid rgba(32, 164, 243, 0.20);
    border-radius: 15px;
    background: linear-gradient(135deg, #f5fbff, #edf7ff)
}

.modal-codigo span {
    display: block;
    color: #6b7e91;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.modal-codigo strong {
    display: block;
    margin-top: 5px;
    color: var(--azul);
    font-size: 22px;
    letter-spacing: 1px
}

.modal-resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px
}

.modal-resumen>div {
    padding: 15px;
    border: 1px solid #e7edf3;
    border-radius: 13px;
    background: #fafcfe;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease
}

.modal-resumen>div:hover {
    transform: translateY(-3px);
    border-color: rgba(32, 164, 243, 0.28);
    box-shadow: 0 10px 25px rgba(7, 23, 44, 0.06)
}

.modal-resumen span {
    display: block;
    color: #8594a4;
    font-size: 10px;
    font-weight: 600
}

.modal-resumen strong {
    display: block;
    margin-top: 3px;
    color: #243247;
    font-size: 13px;
    word-break: break-word
}

.modal-acciones {
    display: flex;
    gap: 12px;
    margin-top: 25px
}

.btn-whatsapp-cotizacion {
    flex: 1;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 11px;
    color: var(--blanco);
    background: #25d366;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease
}

.btn-whatsapp-cotizacion:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
    box-shadow: 0 17px 35px rgba(37, 211, 102, 0.30)
}

.btn-whatsapp-cotizacion:active {
    transform: translateY(-1px) scale(0.98)
}

.btn-whatsapp-cotizacion i {
    font-size: 20px
}

.btn-cerrar-modal {
    min-width: 115px;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid #dce5ed;
    border-radius: 11px;
    color: #445268;
    background: var(--blanco);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease
}

.btn-cerrar-modal:hover {
    transform: translateY(-2px);
    border-color: rgba(11, 99, 206, 0.25);
    background: #f7fafc
}

.btn-cerrar-modal:active {
    transform: translateY(0) scale(0.98)
}

@media (max-width:650px) {
    .modal-cotizacion {
        padding: 15px
    }

    .modal-cotizacion-card {
        padding: 32px 20px 24px;
        border-radius: 20px
    }

    .modal-cotizacion-card>h3 {
        font-size: 23px
    }

    .modal-resumen {
        grid-template-columns: 1fr
    }

    .modal-acciones {
        flex-direction: column
    }

    .btn-whatsapp-cotizacion,
    .btn-cerrar-modal {
        width: 100%
    }
}

.rubro-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 80% 30%, rgba(32, 164, 243, 0.18), transparent 32%), radial-gradient(circle at 15% 80%, rgba(11, 99, 206, 0.15), transparent 30%), linear-gradient(135deg, #061326 0%, #071b34 48%, #092847 100%)
}

.rubro-hero::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -180px;
    top: -150px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%
}

.rubro-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: 40px;
    bottom: -190px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 50%
}

.rubro-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: 75px
}

.rubro-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px
}

.rubro-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.70);
    transition: color 0.25s ease
}

.rubro-hero .breadcrumb a:hover {
    color: #42b8ff
}

.rubro-hero .breadcrumb i {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35)
}

.rubro-hero-contenido .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52bcff
}

.rubro-hero-contenido h1 {
    max-width: 680px;
    margin: 19px 0 22px;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 67px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px
}

.rubro-hero-contenido h1 span {
    color: #46b8fb
}

.rubro-hero-contenido>p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.75
}

.rubro-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.rubro-hero-botones .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px)
}

.rubro-hero-botones .btn-secundario:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10)
}

.rubro-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 25px;
    margin-top: 31px
}

.rubro-confianza div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px
}

.rubro-confianza i {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #63c8ff;
    background: rgba(32, 164, 243, 0.12);
    font-size: 9px
}

.rubro-hero-visual {
    position: relative
}

.edificio-panel {
    position: relative;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease
}

.edificio-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(61, 181, 250, 0.32);
    box-shadow: 0 40px 95px rgba(0, 0, 0, 0.32)
}

.edificio-panel::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(32, 164, 243, 0.14);
    filter: blur(10px)
}

.edificio-panel-cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09)
}

.edificio-panel-cabecera>div:first-child span {
    display: block;
    margin-bottom: 5px;
    color: #54beff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px
}

.edificio-panel-cabecera strong {
    color: #ffffff;
    font-size: 20px
}

.estado-seguridad {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(66, 227, 135, 0.15);
    border-radius: 50px;
    color: #77eba8;
    background: rgba(34, 197, 94, 0.08);
    font-size: 11px;
    font-weight: 700
}

.estado-seguridad span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48dc87;
    box-shadow: 0 0 0 5px rgba(72, 220, 135, 0.10);
    animation: estadoSeguridad 2s infinite
}

@keyframes estadoSeguridad {
    50% {
        box-shadow: 0 0 0 9px rgba(72, 220, 135, 0.02)
    }
}

.edificio-esquema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 17px;
    margin-top: 23px
}

.edificio-torre {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(1, 10, 22, 0.25)
}

.piso-edificio {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease
}

.piso-edificio:hover {
    transform: translateX(4px);
    border-color: rgba(32, 164, 243, 0.30);
    background: rgba(32, 164, 243, 0.08)
}

.piso-edificio i {
    color: #56bffc;
    font-size: 15px
}

.piso-edificio.cochera {
    background: rgba(32, 164, 243, 0.08)
}

.edificio-monitoreo {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.edificio-monitoreo>div {
    flex: 1;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.25s ease, background 0.25s ease
}

.edificio-monitoreo>div:hover {
    transform: translateY(-3px);
    background: rgba(32, 164, 243, 0.09)
}

.edificio-monitoreo i {
    margin-bottom: 8px;
    color: #4fbdff;
    font-size: 19px
}

.edificio-monitoreo span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px
}

.edificio-monitoreo strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 11px
}

.rubro-introduccion {
    background: #ffffff
}

.rubro-introduccion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px
}

.rubro-introduccion h2 {
    max-width: 570px;
    margin: 14px 0 18px;
    color: #102036;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -1.2px
}

.rubro-introduccion p {
    max-width: 640px;
    margin-top: 12px;
    color: #687789;
    line-height: 1.8
}

.rubro-datos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

.rubro-dato {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 105px;
    padding: 20px;
    border: 1px solid #e7edf4;
    border-radius: 15px;
    background: #f9fbfd;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease
}

.rubro-dato:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 18px 40px rgba(7, 23, 44, 0.08)
}

.rubro-dato>i {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #0b63ce;
    background: #eaf5ff;
    font-size: 18px
}

.rubro-dato strong {
    display: block;
    color: #16283d;
    font-size: 14px
}

.rubro-dato span {
    display: block;
    margin-top: 4px;
    color: #7b8999;
    font-size: 11px;
    line-height: 1.45
}

.soluciones-rubro {
    background: #f5f8fb
}

.soluciones-rubro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 45px
}

.solucion-rubro-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 27px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 23, 44, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease
}

.solucion-rubro-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 24px 50px rgba(7, 23, 44, 0.10)
}

.solucion-rubro-card.destacada {
    border-color: rgba(32, 164, 243, 0.32);
    box-shadow: 0 18px 45px rgba(11, 99, 206, 0.10)
}

.solucion-rubro-card.destacada::before {
    content: "RECOMENDADO";
    position: absolute;
    right: 15px;
    top: 17px;
    padding: 5px 8px;
    border-radius: 6px;
    color: #0b63ce;
    background: #eaf5ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px
}

.solucion-rubro-icono {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 14px;
    color: #0b63ce;
    background: linear-gradient(135deg, #e9f5ff, #f2f9ff);
    font-size: 22px;
    transition: transform 0.28s ease
}

.solucion-rubro-card:hover .solucion-rubro-icono {
    transform: translateY(-3px) rotate(-1deg)
}

.solucion-numero {
    position: absolute;
    right: 20px;
    bottom: 17px;
    color: #eff3f7;
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none
}

.solucion-rubro-card h3 {
    position: relative;
    z-index: 2;
    color: #14263c;
    font-size: 19px
}

.solucion-rubro-card>p {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: #758395;
    font-size: 13px;
    line-height: 1.7
}

.solucion-rubro-card ul {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 22px;
    padding: 0;
    list-style: none
}

.solucion-rubro-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #59697b;
    font-size: 12px
}

.solucion-rubro-card li i {
    margin-top: 2px;
    color: #16a34a;
    font-size: 10px
}

.solucion-rubro-card>a {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0b63ce;
    font-size: 12px;
    font-weight: 700
}

.solucion-rubro-card>a i {
    transition: transform 0.25s ease
}

.solucion-rubro-card>a:hover i {
    transform: translateX(5px)
}

.zonas-edificio {
    background: #ffffff
}

.zonas-edificio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 42px
}

.zona-edificio-card {
    position: relative;
    min-height: 225px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid #e5ebf1;
    border-radius: 17px;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease
}

.zona-edificio-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.zona-edificio-card>span {
    position: absolute;
    right: 20px;
    top: 16px;
    color: #edf2f6;
    font-size: 42px;
    font-weight: 900
}

.zona-edificio-card>i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 12px;
    color: #0b63ce;
    background: #edf7ff;
    font-size: 19px
}

.zona-edificio-card h3 {
    position: relative;
    color: #182a3f;
    font-size: 17px
}

.zona-edificio-card p {
    position: relative;
    margin-top: 9px;
    color: #788697;
    font-size: 12px;
    line-height: 1.65
}

.problemas-rubro {
    background: #07172c
}

.problemas-rubro-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 80px
}

.problemas-rubro-contenido h2 {
    margin: 15px 0 18px;
    color: #ffffff;
    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.12
}

.problemas-rubro-contenido>p {
    max-width: 510px;
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.75
}

.problemas-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.problema-item {
    display: flex;
    gap: 15px;
    min-height: 155px;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease
}

.problema-item:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 164, 243, 0.28);
    background: rgba(32, 164, 243, 0.08)
}

.problema-item>div {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #55beff;
    background: rgba(32, 164, 243, 0.10)
}

.problema-item h3 {
    color: #ffffff;
    font-size: 14px
}

.problema-item p {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    line-height: 1.6
}

.proceso-rubro {
    background: #f7f9fc
}

.proceso-rubro-grid {
    display: grid;
    grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr;
    align-items: center;
    margin-top: 48px
}

.paso-rubro {
    position: relative;
    min-height: 245px;
    padding: 25px;
    border: 1px solid #e4ebf2;
    border-radius: 17px;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease
}

.paso-rubro:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.paso-rubro-numero {
    margin-bottom: 24px;
    color: #0b63ce;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px
}

.paso-rubro>i {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    color: #0b63ce;
    background: #edf7ff;
    font-size: 18px
}

.paso-rubro h3 {
    color: #172a40;
    font-size: 17px
}

.paso-rubro p {
    margin-top: 8px;
    color: #798696;
    font-size: 12px;
    line-height: 1.65
}

.proceso-rubro-linea {
    height: 1px;
    margin: 0 8px;
    background: linear-gradient(90deg, #d8e2eb, #8ccaf2, #d8e2eb)
}

.recomendacion-edificio {
    background: #ffffff
}

.recomendacion-edificio-card {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 30px;
    padding: 42px;
    overflow: hidden;
    border-radius: 23px;
    background: linear-gradient(135deg, #4e3f2d, #7d6546);
    box-shadow: 0 25px 65px rgba(7, 23, 44, 0.16)
}

.recomendacion-edificio-card::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -120px;
    border-radius: 50%;
    background: rgba(185, 154, 94, 0.12)
}

.recomendacion-edificio-icono {
    position: relative;
    z-index: 2;
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #54bfff;
    background: rgba(255, 255, 255, 0.06);
    font-size: 37px
}

.recomendacion-edificio-contenido {
    position: relative;
    z-index: 2
}

.recomendacion-edificio-contenido>span {
    color: #52bdff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px
}

.recomendacion-edificio-contenido h2 {
    max-width: 700px;
    margin: 7px 0 11px;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.15
}

.recomendacion-edificio-contenido p {
    max-width: 750px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.7
}

.recomendacion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 19px
}

.recomendacion-tags span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px
}

.recomendacion-tags i {
    color: #50bcff
}

.cta-rubro {
    padding: 85px 0;
    background: #0b63ce
}

.cta-rubro-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px
}

.etiqueta-clara {
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px
}

.cta-rubro h2 {
    max-width: 670px;
    margin: 9px 0;
    color: #ffffff;
    font-size: clamp(29px, 4vw, 43px);
    line-height: 1.1
}

.cta-rubro p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65
}

.cta-rubro-botones {
    flex-shrink: 0;
    display: flex;
    gap: 11px
}

.btn-cta-rubro,
.btn-cta-rubro-secundario {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease
}

.btn-cta-rubro {
    color: #0b63ce;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13)
}

.btn-cta-rubro:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.19)
}

.btn-cta-rubro-secundario {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08)
}

.btn-cta-rubro-secundario:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14)
}

.sectores-home {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%)
}

.sectores-home::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -200px;
    top: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 164, 243, 0.08), transparent 68%);
    pointer-events: none
}

.sectores-home::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    left: -180px;
    bottom: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 99, 206, 0.06), transparent 70%);
    pointer-events: none
}

.sectores-home .contenedor {
    position: relative;
    z-index: 2
}

.sectores-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 46px
}

.sector-card:nth-child(1),
.sector-card:nth-child(2),
.sector-card:nth-child(3) {
    grid-column: span 2
}

.sector-card:nth-child(4),
.sector-card:nth-child(5) {
    grid-column: span 3
}

.sector-card {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    border: 1px solid #e3eaf1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(7, 23, 44, 0.045);
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease
}

.sector-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 99, 206, 0.22);
    box-shadow: 0 18px 40px rgba(7, 23, 44, 0.11)
}

.sector-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #b99a5e, #d4c3a5);
    transition: width 0.35s ease
}

.sector-card:hover::before {
    width: 100%
}

.sector-card-fondo {
    position: absolute;
    right: -15px;
    bottom: -30px;
    color: #edf3f8;
    font-size: 125px;
    line-height: 1;
    transform: rotate(-7deg);
    transition: transform 0.45s ease, color 0.45s ease;
    pointer-events: none
}

.sector-card:hover .sector-card-fondo {
    transform: rotate(-2deg) scale(1.04);
    color: #e7f3fb
}

.sector-card-contenido {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 29px
}

.sector-icono {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border: 1px solid rgba(185, 154, 94, 0.08);
    border-radius: 15px;
    color: #8d6a3d;
    background: linear-gradient(135deg, #faf2e4, #f2e7d5);
    font-size: 23px;
    box-shadow: 0 10px 24px rgba(185, 154, 94, 0.08);
    transition: transform 0.30s ease, box-shadow 0.30s ease, background 0.30s ease
}

.sector-card:hover .sector-icono {
    transform: translateY(-2px);
    background: #fff3df;
    box-shadow: 0 10px 22px rgba(141, 106, 61, 0.10)
}

.sector-etiqueta {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin-bottom: 10px;
    border-radius: 6px;
    color: #8d6a3d;
    background: #faf1df;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px
}

.sector-card h3 {
    max-width: 300px;
    margin: 0;
    color: #14263b;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.3px
}

.sector-card p {
    max-width: 330px;
    margin: 12px 0 0;
    color: #748294;
    font-size: 13px;
    line-height: 1.7
}

.sector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px
}

.sector-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #e5edf4;
    border-radius: 50px;
    color: #617185;
    background: rgba(248, 251, 253, 0.9);
    font-size: 10px;
    font-weight: 600;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease
}

.sector-tags span:hover {
    transform: translateY(-2px);
    border-color: rgba(185, 154, 94, 0.22);
    color: #8d6a3d;
    background: #fbf1df
}

.sector-tags i {
    color: #b99a5e;
    font-size: 10px
}

.sector-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 23px;
    color: #8d6a3d;
    font-size: 12px;
    font-weight: 750;
    transition: color 0.25s ease
}

.sector-link i {
    font-size: 11px;
    transition: transform 0.25s ease
}

.sector-link:hover {
    color: #b99a5e
}

.sector-link:hover i {
    transform: translateX(5px)
}

.sector-card-destacada {
    border-color: rgba(185, 154, 94, 0.26);
    background: linear-gradient(145deg, #ffffff 0%, #f9f2e6 100%);
    box-shadow: 0 17px 42px rgba(141, 106, 61, 0.08)
}

.sector-card-destacada::after {
    content: "DESTACADO";
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 5;
    padding: 6px 9px;
    border-radius: 6px;
    color: #8d6a3d;
    background: rgba(185, 154, 94, 0.10);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px
}

.sector-card:nth-child(2) .sector-icono {
    color: #168a54;
    background: #ebfaf3
}

.sector-card:nth-child(2) .sector-etiqueta {
    color: #168a54;
    background: #ebfaf3
}

.sector-card:nth-child(3) .sector-icono {
    color: #d17b14;
    background: #fff7e9
}

.sector-card:nth-child(3) .sector-etiqueta {
    color: #bb6c0e;
    background: #fff7e9
}

.sector-card:nth-child(4) .sector-icono {
    color: #6355c7;
    background: #f2efff
}

.sector-card:nth-child(4) .sector-etiqueta {
    color: #6355c7;
    background: #f2efff
}

.sector-card:nth-child(5) .sector-icono {
    color: #ce4343;
    background: #fff0f0
}

.sector-card:nth-child(5) .sector-etiqueta {
    color: #be3838;
    background: #fff0f0
}

.sectores-home-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 28px;
    padding: 26px 28px;
    overflow: hidden;
    border: 1px solid #e2eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(7, 23, 44, 0.045);
    transition: transform 0.30s ease, box-shadow 0.30s ease, border-color 0.30s ease
}

.sectores-home-footer:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 154, 94, 0.16);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.sectores-home-footer>div {
    display: flex;
    align-items: center;
    gap: 16px
}

.sectores-footer-icono {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(135deg, #b99a5e, #d4c3a5);
    font-size: 19px;
    box-shadow: 0 12px 25px rgba(185, 154, 94, 0.18);
    transition: transform 0.28s ease
}

.sectores-home-footer:hover .sectores-footer-icono {
    transform: rotate(-1deg) scale(1.03)
}

.sectores-home-footer strong {
    display: block;
    color: #17283d;
    font-size: 15px
}

.sectores-home-footer p {
    margin-top: 4px;
    color: #798697;
    font-size: 12px;
    line-height: 1.5
}

.sector-card-contenido::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(32, 164, 243, 0.06);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none
}

.sector-card:hover .sector-card-contenido::after {
    opacity: 1;
    transform: scale(1.5)
}

@media (prefers-reduced-motion:reduce) {

    .sector-card,
    .sector-icono,
    .sector-link i,
    .sector-card-fondo,
    .sector-tags span,
    .sectores-home-footer,
    .sectores-footer-icono {
        transition: none
    }
}

.casa-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 82% 25%, rgba(32, 164, 243, 0.17), transparent 30%), radial-gradient(circle at 12% 85%, rgba(11, 99, 206, 0.14), transparent 30%), linear-gradient(135deg, #061326 0%, #071b34 50%, #0a2948 100%)
}

.casa-hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    top: -180px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%
}

.casa-hero::after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -130px;
    bottom: -130px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 50%
}

.casa-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: 75px
}

.casa-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px
}

.casa-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.25s ease
}

.casa-hero .breadcrumb a:hover {
    color: #4fc0ff
}

.casa-hero .breadcrumb i {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35)
}

.casa-hero-contenido .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52bdff
}

.casa-hero-contenido h1 {
    max-width: 690px;
    margin: 19px 0 22px;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 67px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px
}

.casa-hero-contenido h1 span {
    color: #46b8fb
}

.casa-hero-contenido>p {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.75
}

.casa-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.casa-hero-botones .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px)
}

.casa-hero-botones .btn-secundario:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10)
}

.casa-hero-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 30px
}

.casa-hero-confianza div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px
}

.casa-hero-confianza i {
    color: #55c1ff;
    font-size: 12px
}

.casa-panel {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease
}

.casa-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 164, 243, 0.30);
    box-shadow: 0 42px 95px rgba(0, 0, 0, 0.31)
}

.casa-panel-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.casa-panel-superior div:first-child span {
    display: block;
    margin-bottom: 5px;
    color: #53bdff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.casa-panel-superior strong {
    color: #ffffff;
    font-size: 20px
}

.casa-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 50px;
    color: #79eaa8;
    background: rgba(34, 197, 94, 0.08);
    font-size: 11px;
    font-weight: 700
}

.casa-estado span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.10);
    animation: casaEstado 2s infinite
}

@keyframes casaEstado {
    50% {
        box-shadow: 0 0 0 9px rgba(70, 220, 135, 0.02)
    }
}

.casa-esquema {
    position: relative;
    max-width: 350px;
    margin: 38px auto 28px
}

.casa-techo {
    width: 230px;
    height: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: auto;
    padding-top: 34px;
    color: #5fc5ff;
    background: linear-gradient(145deg, rgba(32, 164, 243, 0.15), rgba(32, 164, 243, 0.04));
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    font-size: 20px
}

.casa-cuerpo {
    min-height: 145px;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr;
    align-items: end;
    gap: 12px;
    margin: -1px auto 0;
    padding: 25px 25px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px 5px 12px 12px;
    background: rgba(255, 255, 255, 0.045)
}

.casa-ventana {
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(32, 164, 243, 0.22);
    border-radius: 9px;
    color: #58c2ff;
    background: rgba(32, 164, 243, 0.07);
    transition: transform 0.25s ease, background 0.25s ease
}

.casa-ventana:hover {
    transform: translateY(-3px);
    background: rgba(32, 164, 243, 0.13)
}

.casa-puerta {
    height: 100px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07)
}

.casa-cochera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.035);
    font-size: 11px
}

.casa-cochera i {
    color: #51bcfb
}

.casa-panel-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px
}

.casa-panel-items>div {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, background 0.25s ease
}

.casa-panel-items>div:hover {
    transform: translateY(-4px);
    background: rgba(32, 164, 243, 0.08)
}

.casa-panel-items i {
    margin-bottom: 8px;
    color: #56c1ff;
    font-size: 18px
}

.casa-panel-items span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px
}

.casa-panel-items strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 10px
}

.casa-puntos {
    background: #ffffff
}

.casa-puntos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-top: 44px
}

.casa-punto-card {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e4ebf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 23, 44, 0.035);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.casa-punto-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 22px 48px rgba(7, 23, 44, 0.09)
}

.casa-punto-card>span {
    position: absolute;
    right: 18px;
    top: 15px;
    color: #edf2f6;
    font-size: 43px;
    font-weight: 900
}

.casa-punto-icono {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 13px;
    color: #168a54;
    background: #ebfaf3;
    font-size: 19px;
    transition: transform 0.28s ease
}

.casa-punto-card:hover .casa-punto-icono {
    transform: translateY(-3px) rotate(-1deg)
}

.casa-punto-card h3 {
    position: relative;
    color: #17293f;
    font-size: 17px
}

.casa-punto-card p {
    position: relative;
    margin-top: 9px;
    color: #788697;
    font-size: 12px;
    line-height: 1.7
}

.asesor-casa {
    position: relative;
    background: #f5f8fb
}

.asesor-casa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.85fr);
    align-items: start;
    gap: 35px
}

.asesor-casa-formulario {
    padding: 37px;
    border: 1px solid #e2eaf1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7, 23, 44, 0.055)
}

.asesor-casa-formulario h2 {
    margin: 12px 0 10px;
    color: #15283e;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.15
}

.asesor-casa-formulario>p {
    max-width: 620px;
    color: #748295;
    line-height: 1.7
}

.asesor-preguntas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-top: 30px
}

.asesor-campo {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.asesor-campo label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #34465b;
    font-size: 12px;
    font-weight: 700
}

.asesor-campo label span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 7px;
    color: #0b63ce;
    background: #edf7ff;
    font-size: 9px
}

.asesor-campo select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 14px;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    outline: none;
    color: #46566a;
    background: #fbfcfe;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease
}

.asesor-campo select:hover {
    border-color: rgba(185, 154, 94, 0.30)
}

.asesor-campo select:focus {
    border-color: #b99a5e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(185, 154, 94, 0.09)
}

.resultado-casa {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    color: #0f172a;
    background: linear-gradient(145deg, #f6f1e6, #f0e8db);
    box-shadow: 0 25px 60px rgba(7, 23, 44, 0.10)
}

.resultado-casa::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(185, 154, 94, 0.10)
}

.resultado-casa-cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.resultado-casa-cabecera span {
    display: block;
    margin-bottom: 5px;
    color: #55bdff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.resultado-casa-cabecera h3 {
    color: #ffffff;
    font-size: 22px
}

.resultado-casa-cabecera>i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    color: #54bfff;
    background: rgba(255, 255, 255, 0.05);
    font-size: 21px
}

.resultado-casa-estado {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 23px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04)
}

.resultado-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #f5b942;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.10)
}

.resultado-casa-estado p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.55
}

.resultado-casa-servicios {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px
}

.resultado-servicio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease
}

.resultado-servicio:hover {
    transform: translateX(3px)
}

.resultado-servicio.activo {
    opacity: 1;
    border-color: rgba(32, 164, 243, 0.28);
    background: rgba(32, 164, 243, 0.09)
}

.resultado-servicio>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #55c0ff;
    background: rgba(32, 164, 243, 0.10);
    font-size: 15px
}

.resultado-servicio strong {
    display: block;
    color: #ffffff;
    font-size: 11px
}

.resultado-servicio span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px
}

.resultado-casa-mensaje {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(245, 185, 66, 0.11);
    border-radius: 11px;
    background: rgba(245, 185, 66, 0.055)
}

.resultado-casa-mensaje i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #f5b942
}

.resultado-casa-mensaje p {
    color: rgba(255, 255, 255, 0.63);
    font-size: 10px;
    line-height: 1.6
}

.btn-casa-cotizar {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b63ce, #20a4f3);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 13px 27px rgba(11, 99, 206, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.btn-casa-cotizar:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(11, 99, 206, 0.30)
}

.resultado-casa>small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    line-height: 1.5
}

.casa-soluciones {
    background: #ffffff
}

.casa-soluciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px;
    margin-top: 43px
}

.casa-solucion-card {
    position: relative;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(7, 23, 44, 0.04);
    transition: transform 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease
}

.casa-solucion-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 23px 50px rgba(7, 23, 44, 0.10)
}

.casa-solucion-icono {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 14px;
    color: #168a54;
    background: #ebfaf3;
    font-size: 21px;
    transition: transform 0.28s ease
}

.casa-solucion-card:hover .casa-solucion-icono {
    transform: translateY(-4px) rotate(-1deg)
}

.casa-solucion-card h3 {
    color: #17293f;
    font-size: 19px
}

.casa-solucion-card>p {
    margin-top: 10px;
    color: #748294;
    font-size: 13px;
    line-height: 1.7
}

.casa-solucion-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0 20px;
    padding: 0;
    list-style: none
}

.casa-solucion-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c6c7f;
    font-size: 11px
}

.casa-solucion-card li i {
    color: #16a34a;
    font-size: 9px
}

.casa-solucion-card>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0b63ce;
    font-size: 12px;
    font-weight: 700
}

.casa-solucion-card>a i {
    transition: transform 0.25s ease
}

.casa-solucion-card>a:hover i {
    transform: translateX(5px)
}

.casa-escenarios {
    background: #f6f8fb
}

.casa-escenarios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 42px
}

.casa-escenario {
    position: relative;
    min-height: 285px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease
}

.casa-escenario:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.casa-escenario>div {
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    margin-bottom: 23px;
    border-radius: 14px;
    color: #0b63ce;
    background: #edf7ff;
    font-size: 19px
}

.casa-escenario>span {
    display: block;
    margin-bottom: 7px;
    color: #168a54;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px
}

.casa-escenario h3 {
    color: #17293f;
    font-size: 18px
}

.casa-escenario p {
    margin-top: 10px;
    color: #758395;
    font-size: 12px;
    line-height: 1.7
}

.casa-cta {
    background: linear-gradient(135deg, #0b63ce, #1687dc)
}

.resultado-punto {
    transition: background 0.3s ease, box-shadow 0.3s ease
}

.resultado-punto.resultado-punto-listo {
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.12)
}

.comercio-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 82% 25%, rgba(32, 164, 243, 0.17), transparent 31%), radial-gradient(circle at 12% 85%, rgba(11, 99, 206, 0.14), transparent 30%), linear-gradient(135deg, #061326 0%, #071b34 50%, #0a2948 100%)
}

.comercio-hero::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -190px;
    top: -180px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%
}

.comercio-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: -140px;
    bottom: -140px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 50%
}

.comercio-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: 75px
}

.comercio-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px
}

.comercio-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.25s ease
}

.comercio-hero .breadcrumb a:hover {
    color: #4fc0ff
}

.comercio-hero .breadcrumb i {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35)
}

.comercio-hero-contenido .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52bdff
}

.comercio-hero-contenido h1 {
    max-width: 720px;
    margin: 19px 0 22px;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px
}

.comercio-hero-contenido h1 span {
    color: #46b8fb
}

.comercio-hero-contenido>p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.75
}

.comercio-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.comercio-hero-botones .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px)
}

.comercio-hero-botones .btn-secundario:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10)
}

.comercio-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 30px
}

.comercio-confianza div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px
}

.comercio-confianza i {
    color: #55c1ff;
    font-size: 12px
}

.comercio-panel {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease
}

.comercio-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 164, 243, 0.30);
    box-shadow: 0 42px 95px rgba(0, 0, 0, 0.31)
}

.comercio-panel-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.comercio-panel-superior div:first-child span {
    display: block;
    margin-bottom: 5px;
    color: #53bdff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.comercio-panel-superior strong {
    color: #ffffff;
    font-size: 20px
}

.comercio-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 50px;
    color: #79eaa8;
    background: rgba(34, 197, 94, 0.08);
    font-size: 11px;
    font-weight: 700
}

.comercio-estado span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.10);
    animation: comercioEstado 2s infinite
}

@keyframes comercioEstado {
    50% {
        box-shadow: 0 0 0 9px rgba(70, 220, 135, 0.02)
    }
}

.local-mapa {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(1, 10, 22, 0.24)
}

.local-zona {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease
}

.local-zona:hover {
    transform: translateY(-4px);
    border-color: rgba(32, 164, 243, 0.28);
    background: rgba(32, 164, 243, 0.09)
}

.local-zona i {
    margin-bottom: 9px;
    color: #55c0ff;
    font-size: 20px
}

.local-zona span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700
}

.local-zona small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px
}

.local-zona-caja {
    border-color: rgba(245, 185, 66, 0.17);
    background: rgba(245, 185, 66, 0.055)
}

.local-zona-caja i {
    color: #f5b942
}

.local-zona-almacen {
    border-color: rgba(162, 125, 255, 0.16);
    background: rgba(162, 125, 255, 0.04)
}

.local-zona-almacen i {
    color: #a98cff
}

.comercio-panel-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 10px
}

.comercio-panel-items>div {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, background 0.25s ease
}

.comercio-panel-items>div:hover {
    transform: translateY(-4px);
    background: rgba(32, 164, 243, 0.08)
}

.comercio-panel-items i {
    margin-bottom: 8px;
    color: #56c1ff;
    font-size: 18px
}

.comercio-panel-items span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px
}

.comercio-panel-items strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 10px
}

.comercio-puntos {
    background: #ffffff
}

.comercio-puntos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 44px
}

.comercio-punto-card {
    position: relative;
    min-height: 225px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e4ebf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 23, 44, 0.035);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.comercio-punto-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 99, 206, 0.20);
    box-shadow: 0 22px 48px rgba(7, 23, 44, 0.09)
}

.comercio-punto-card>span {
    position: absolute;
    right: 18px;
    top: 15px;
    color: #edf2f6;
    font-size: 43px;
    font-weight: 900
}

.comercio-punto-icono {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 13px;
    color: #d17b14;
    background: #fff7e9;
    font-size: 19px;
    transition: transform 0.28s ease
}

.comercio-punto-card:hover .comercio-punto-icono {
    transform: translateY(-3px) rotate(-1deg)
}

.comercio-punto-card h3 {
    position: relative;
    color: #17293f;
    font-size: 17px
}

.comercio-punto-card p {
    position: relative;
    margin-top: 9px;
    color: #788697;
    font-size: 12px;
    line-height: 1.7
}

.diagnostico-comercio {
    background: #f5f8fb
}

.diagnostico-comercio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.85fr);
    align-items: start;
    gap: 35px
}

.diagnostico-comercio-form {
    padding: 37px;
    border: 1px solid #e2eaf1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7, 23, 44, 0.055)
}

.diagnostico-comercio-form h2 {
    margin: 12px 0 10px;
    color: #15283e;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.15
}

.diagnostico-comercio-form>p {
    max-width: 620px;
    color: #748295;
    line-height: 1.7
}

.diagnostico-preguntas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-top: 30px
}

.diagnostico-campo {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.diagnostico-campo label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #34465b;
    font-size: 12px;
    font-weight: 700
}

.diagnostico-campo label span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 7px;
    color: #d17b14;
    background: #fff7e9;
    font-size: 9px
}

.diagnostico-campo select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 14px;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    outline: none;
    color: #46566a;
    background: #fbfcfe;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease
}

.diagnostico-campo select:hover {
    border-color: rgba(209, 123, 20, 0.35)
}

.diagnostico-campo select:focus {
    border-color: #d17b14;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(209, 123, 20, 0.09)
}

.resultado-comercio {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(145deg, #07172c, #0a2949);
    box-shadow: 0 25px 60px rgba(7, 23, 44, 0.18)
}

.resultado-comercio::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(209, 123, 20, 0.10)
}

.resultado-comercio-cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.resultado-comercio-cabecera span {
    display: block;
    margin-bottom: 5px;
    color: #f5b942;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.resultado-comercio-cabecera h3 {
    color: #ffffff;
    font-size: 22px
}

.resultado-comercio-cabecera>i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    color: #f5b942;
    background: rgba(245, 185, 66, 0.06);
    font-size: 21px
}

.resultado-comercio-estado {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 23px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04)
}

.comercio-resultado-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #f5b942;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease
}

.comercio-resultado-punto.resultado-listo {
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.12)
}

.resultado-comercio-estado p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.55
}

.resultado-comercio-servicios {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px
}

.resultado-comercio-servicio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease
}

.resultado-comercio-servicio:hover {
    transform: translateX(3px)
}

.resultado-comercio-servicio.activo {
    opacity: 1;
    border-color: rgba(245, 185, 66, 0.25);
    background: rgba(245, 185, 66, 0.07)
}

.resultado-comercio-servicio>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #f5b942;
    background: rgba(245, 185, 66, 0.08);
    font-size: 15px
}

.resultado-comercio-servicio strong {
    display: block;
    color: #ffffff;
    font-size: 11px
}

.resultado-comercio-servicio span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px
}

.resultado-comercio-mensaje {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 11px;
    background: rgba(32, 164, 243, 0.05)
}

.resultado-comercio-mensaje i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #53bdff
}

.resultado-comercio-mensaje p {
    color: rgba(255, 255, 255, 0.63);
    font-size: 10px;
    line-height: 1.6
}

.btn-comercio-cotizar {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #d17b14, #f5a623);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 13px 27px rgba(209, 123, 20, 0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.btn-comercio-cotizar:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(209, 123, 20, 0.29)
}

.resultado-comercio>small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    line-height: 1.5
}

.comercio-soluciones {
    background: #ffffff
}

.comercio-soluciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 43px
}

.comercio-solucion-card {
    min-height: 405px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(7, 23, 44, 0.04);
    transition: transform 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease
}

.comercio-solucion-card:hover {
    transform: translateY(-5px);
    border-color: rgba(209, 123, 20, 0.22);
    box-shadow: 0 23px 50px rgba(7, 23, 44, 0.10)
}

.comercio-solucion-icono {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #d17b14;
    background: #fff7e9;
    font-size: 21px;
    transition: transform 0.28s ease
}

.comercio-solucion-card:hover .comercio-solucion-icono {
    transform: translateY(-4px) rotate(-1deg)
}

.comercio-solucion-card>span {
    margin-bottom: 7px;
    color: #d17b14;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px
}

.comercio-solucion-card h3 {
    color: #17293f;
    font-size: 19px
}

.comercio-solucion-card>p {
    margin-top: 10px;
    color: #748294;
    font-size: 13px;
    line-height: 1.7
}

.comercio-solucion-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0;
    padding: 0;
    list-style: none
}

.comercio-solucion-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c6c7f;
    font-size: 11px
}

.comercio-solucion-card li i {
    color: #16a34a;
    font-size: 9px
}

.comercio-solucion-card>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0b63ce;
    font-size: 12px;
    font-weight: 700
}

.comercio-solucion-card>a i {
    transition: transform 0.25s ease
}

.comercio-solucion-card>a:hover i {
    transform: translateX(5px)
}

.comercio-momentos {
    background: #f6f8fb
}

.comercio-momentos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-top: 42px
}

.comercio-momento {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease
}

.comercio-momento:hover {
    transform: translateY(-4px);
    border-color: rgba(209, 123, 20, 0.20);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.comercio-momento>span {
    position: absolute;
    right: 18px;
    top: 16px;
    color: #edf2f6;
    font-size: 40px;
    font-weight: 900
}

.comercio-momento>div {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 13px;
    color: #d17b14;
    background: #fff7e9;
    font-size: 19px
}

.comercio-momento h3 {
    position: relative;
    color: #17293f;
    font-size: 17px
}

.comercio-momento p {
    position: relative;
    margin-top: 9px;
    color: #758395;
    font-size: 12px;
    line-height: 1.7
}

.comercio-cta {
    background: linear-gradient(135deg, #0b63ce, #1687dc)
}

.institucion-hero {
    position: relative;
    min-height: 740px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 82% 25%, rgba(99, 85, 199, 0.18), transparent 31%), radial-gradient(circle at 15% 85%, rgba(32, 164, 243, 0.13), transparent 30%), linear-gradient(135deg, #061326 0%, #071b34 50%, #102748 100%)
}

.institucion-hero::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: -200px;
    top: -190px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%
}

.institucion-hero::after {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    left: -145px;
    bottom: -145px;
    border: 1px solid rgba(99, 85, 199, 0.12);
    border-radius: 50%
}

.institucion-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.95fr);
    align-items: center;
    gap: 70px
}

.institucion-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px
}

.institucion-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.25s ease
}

.institucion-hero .breadcrumb a:hover {
    color: #67c5ff
}

.institucion-hero .breadcrumb i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 9px
}

.institucion-hero-contenido .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9e93ff
}

.institucion-hero-contenido h1 {
    max-width: 720px;
    margin: 19px 0 22px;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px
}

.institucion-hero-contenido h1 span {
    color: #8f83ff
}

.institucion-hero-contenido>p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.75
}

.institucion-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.institucion-hero-botones .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px)
}

.institucion-hero-botones .btn-secundario:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10)
}

.institucion-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 30px
}

.institucion-confianza div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px
}

.institucion-confianza i {
    color: #9d94ff;
    font-size: 12px
}

.institucion-panel {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease
}

.institucion-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(158, 147, 255, 0.28);
    box-shadow: 0 42px 95px rgba(0, 0, 0, 0.31)
}

.institucion-panel-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.institucion-panel-superior div:first-child span {
    display: block;
    margin-bottom: 5px;
    color: #9e93ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.institucion-panel-superior strong {
    color: #ffffff;
    font-size: 20px
}

.institucion-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 50px;
    color: #79eaa8;
    background: rgba(34, 197, 94, 0.08);
    font-size: 11px;
    font-weight: 700
}

.institucion-estado span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.10);
    animation: institucionEstado 2s infinite
}

@keyframes institucionEstado {
    50% {
        box-shadow: 0 0 0 9px rgba(70, 220, 135, 0.02)
    }
}

.campus-mapa {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 24px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(1, 10, 22, 0.24)
}

.campus-zona {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease
}

.campus-zona:hover {
    transform: translateY(-4px);
    border-color: rgba(158, 147, 255, 0.25);
    background: rgba(99, 85, 199, 0.10)
}

.campus-zona i {
    margin-bottom: 8px;
    color: #a69cff;
    font-size: 19px
}

.campus-zona span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700
}

.campus-zona small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px
}

.campus-acceso {
    border-color: rgba(32, 164, 243, 0.16);
    background: rgba(32, 164, 243, 0.05)
}

.campus-acceso i {
    color: #55c0ff
}

.campus-estacionamiento {
    border-color: rgba(32, 164, 243, 0.14)
}

.campus-restringida {
    border-color: rgba(245, 185, 66, 0.16);
    background: rgba(245, 185, 66, 0.05)
}

.campus-restringida i {
    color: #f5b942
}

.campus-administracion {
    border-color: rgba(99, 85, 199, 0.18)
}

.institucion-panel-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 10px
}

.institucion-panel-items>div {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, background 0.25s ease
}

.institucion-panel-items>div:hover {
    transform: translateY(-4px);
    background: rgba(99, 85, 199, 0.09)
}

.institucion-panel-items i {
    margin-bottom: 8px;
    color: #a59cff;
    font-size: 18px
}

.institucion-panel-items span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px
}

.institucion-panel-items strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 10px
}

.institucion-areas {
    background: #ffffff
}

.institucion-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 44px
}

.institucion-area-card {
    position: relative;
    min-height: 225px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e4ebf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 23, 44, 0.035);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.institucion-area-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 85, 199, 0.22);
    box-shadow: 0 22px 48px rgba(7, 23, 44, 0.09)
}

.institucion-area-card>span {
    position: absolute;
    right: 18px;
    top: 15px;
    color: #edf2f6;
    font-size: 43px;
    font-weight: 900
}

.institucion-area-icono {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 13px;
    color: #6355c7;
    background: #f2efff;
    font-size: 19px;
    transition: transform 0.28s ease
}

.institucion-area-card:hover .institucion-area-icono {
    transform: translateY(-3px) rotate(-1deg)
}

.institucion-area-card h3 {
    position: relative;
    color: #17293f;
    font-size: 17px
}

.institucion-area-card p {
    position: relative;
    margin-top: 9px;
    color: #788697;
    font-size: 12px;
    line-height: 1.7
}

.diagnostico-institucion {
    background: #f5f8fb
}

.diagnostico-institucion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    align-items: start;
    gap: 35px
}

.diagnostico-institucion-form {
    padding: 37px;
    border: 1px solid #e2eaf1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7, 23, 44, 0.055)
}

.diagnostico-institucion-form h2 {
    margin: 12px 0 10px;
    color: #15283e;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.15
}

.diagnostico-institucion-form>p {
    max-width: 650px;
    color: #748295;
    line-height: 1.7
}

.institucion-preguntas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-top: 30px
}

.institucion-campo {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.institucion-campo label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #34465b;
    font-size: 12px;
    font-weight: 700
}

.institucion-campo label span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 7px;
    color: #6355c7;
    background: #f2efff;
    font-size: 9px
}

.institucion-campo select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 14px;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    outline: none;
    color: #46566a;
    background: #fbfcfe;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease
}

.institucion-campo select:hover {
    border-color: rgba(99, 85, 199, 0.30)
}

.institucion-campo select:focus {
    border-color: #6355c7;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 85, 199, 0.09)
}

.resultado-institucion {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(145deg, #07172c, #102748);
    box-shadow: 0 25px 60px rgba(7, 23, 44, 0.18)
}

.resultado-institucion::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(99, 85, 199, 0.13)
}

.resultado-institucion-cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.resultado-institucion-cabecera span {
    display: block;
    margin-bottom: 5px;
    color: #a59cff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.resultado-institucion-cabecera h3 {
    color: #ffffff;
    font-size: 22px
}

.resultado-institucion-cabecera>i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    color: #a59cff;
    background: rgba(99, 85, 199, 0.10);
    font-size: 21px
}

.resultado-institucion-estado {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 23px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04)
}

.institucion-resultado-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #f5b942;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease
}

.institucion-resultado-punto.resultado-listo {
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.12)
}

.resultado-institucion-estado p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.55
}

.resultado-institucion-servicios {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px
}

.resultado-institucion-servicio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease
}

.resultado-institucion-servicio:hover {
    transform: translateX(3px)
}

.resultado-institucion-servicio.activo {
    opacity: 1;
    border-color: rgba(158, 147, 255, 0.28);
    background: rgba(99, 85, 199, 0.11)
}

.resultado-institucion-servicio>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #a59cff;
    background: rgba(99, 85, 199, 0.11);
    font-size: 15px
}

.resultado-institucion-servicio strong {
    display: block;
    color: #ffffff;
    font-size: 11px
}

.resultado-institucion-servicio span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px
}

.resultado-institucion-mensaje {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 11px;
    background: rgba(32, 164, 243, 0.05)
}

.resultado-institucion-mensaje i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #53bdff
}

.resultado-institucion-mensaje p {
    color: rgba(255, 255, 255, 0.63);
    font-size: 10px;
    line-height: 1.6
}

.btn-institucion-cotizar {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #6355c7, #8174e8);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 13px 27px rgba(99, 85, 199, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.btn-institucion-cotizar:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(99, 85, 199, 0.31)
}

.resultado-institucion>small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    line-height: 1.5
}

.institucion-soluciones {
    background: #ffffff
}

.institucion-soluciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 43px
}

.institucion-solucion-card {
    min-height: 405px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(7, 23, 44, 0.04);
    transition: transform 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease
}

.institucion-solucion-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 85, 199, 0.22);
    box-shadow: 0 23px 50px rgba(7, 23, 44, 0.10)
}

.institucion-solucion-icono {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #6355c7;
    background: #f2efff;
    font-size: 21px;
    transition: transform 0.28s ease
}

.institucion-solucion-card:hover .institucion-solucion-icono {
    transform: translateY(-4px) rotate(-1deg)
}

.institucion-solucion-card>span {
    margin-bottom: 7px;
    color: #6355c7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px
}

.institucion-solucion-card h3 {
    color: #17293f;
    font-size: 19px
}

.institucion-solucion-card>p {
    margin-top: 10px;
    color: #748294;
    font-size: 13px;
    line-height: 1.7
}

.institucion-solucion-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0;
    padding: 0;
    list-style: none
}

.institucion-solucion-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c6c7f;
    font-size: 11px
}

.institucion-solucion-card li i {
    color: #16a34a;
    font-size: 9px
}

.institucion-solucion-card>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0b63ce;
    font-size: 12px;
    font-weight: 700
}

.institucion-solucion-card>a i {
    transition: transform 0.25s ease
}

.institucion-solucion-card>a:hover i {
    transform: translateX(5px)
}

.institucion-flujo {
    background: #f6f8fb
}

.institucion-flujo-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 45px
}

.institucion-flujo-card {
    position: relative;
    min-height: 250px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.institucion-flujo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 85, 199, 0.20);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.institucion-flujo-numero {
    position: absolute;
    right: 16px;
    top: 14px;
    color: #edf1f6;
    font-size: 37px;
    font-weight: 900
}

.institucion-flujo-card>i {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 10px auto 20px;
    border-radius: 14px;
    color: #6355c7;
    background: #f2efff;
    font-size: 20px
}

.institucion-flujo-card h3 {
    color: #17293f;
    font-size: 17px
}

.institucion-flujo-card p {
    margin-top: 9px;
    color: #758395;
    font-size: 11px;
    line-height: 1.7
}

.institucion-flujo-linea {
    width: 32px;
    height: 2px;
    position: relative;
    background: linear-gradient(90deg, #cfd9e3, #6355c7)
}

.institucion-flujo-linea::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #6355c7;
    border-right: 2px solid #6355c7;
    transform: translateY(-50%) rotate(45deg)
}

.institucion-cta {
    background: linear-gradient(135deg, #4338a3, #6355c7 48%, #0b63ce)
}

@media (prefers-reduced-motion:reduce) {

    .institucion-panel,
    .campus-zona,
    .institucion-panel-items>div,
    .institucion-area-card,
    .institucion-solucion-card,
    .institucion-flujo-card,
    .btn-institucion-cotizar {
        transition: none
    }

    .institucion-estado span {
        animation: none
    }
}

.grifos-hero {
    position: relative;
    min-height: 740px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 82% 24%, rgba(206, 67, 67, 0.15), transparent 31%), radial-gradient(circle at 12% 85%, rgba(32, 164, 243, 0.13), transparent 30%), linear-gradient(135deg, #061326 0%, #071b34 52%, #102743 100%)
}

.grifos-hero::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -200px;
    top: -200px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%
}

.grifos-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -150px;
    border: 1px solid rgba(206, 67, 67, 0.10);
    border-radius: 50%
}

.grifos-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.95fr);
    align-items: center;
    gap: 70px
}

.grifos-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px
}

.grifos-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.25s ease
}

.grifos-hero .breadcrumb a:hover {
    color: #5bc3ff
}

.grifos-hero .breadcrumb i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 9px
}

.grifos-hero-contenido .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff7777
}

.grifos-hero-contenido h1 {
    max-width: 720px;
    margin: 19px 0 22px;
    color: #ffffff;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px
}

.grifos-hero-contenido h1 span {
    color: #ff7373
}

.grifos-hero-contenido>p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.75
}

.grifos-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.grifos-hero-botones .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px)
}

.grifos-hero-botones .btn-secundario:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10)
}

.grifos-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 30px
}

.grifos-confianza div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px
}

.grifos-confianza i {
    color: #ff7777;
    font-size: 12px
}

.grifos-panel {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(10px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease
}

.grifos-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 119, 119, 0.25);
    box-shadow: 0 42px 95px rgba(0, 0, 0, 0.31)
}

.grifos-panel-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.grifos-panel-superior div:first-child span {
    display: block;
    margin-bottom: 5px;
    color: #ff7777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.grifos-panel-superior strong {
    color: #ffffff;
    font-size: 20px
}

.grifos-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 50px;
    color: #79eaa8;
    background: rgba(34, 197, 94, 0.08);
    font-size: 11px;
    font-weight: 700
}

.grifos-estado span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.10);
    animation: grifosEstado 2s infinite
}

@keyframes grifosEstado {
    50% {
        box-shadow: 0 0 0 9px rgba(70, 220, 135, 0.02)
    }
}

.grifos-mapa {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 24px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(1, 10, 22, 0.24)
}

.grifo-zona {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease
}

.grifo-zona:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 119, 119, 0.24);
    background: rgba(206, 67, 67, 0.08)
}

.grifo-zona i {
    margin-bottom: 8px;
    color: #ff7777;
    font-size: 19px
}

.grifo-zona span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700
}

.grifo-zona small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px
}

.grifo-caja {
    border-color: rgba(245, 185, 66, 0.16);
    background: rgba(245, 185, 66, 0.045)
}

.grifo-caja i {
    color: #f5b942
}

.grifo-acceso {
    border-color: rgba(32, 164, 243, 0.16);
    background: rgba(32, 164, 243, 0.045)
}

.grifo-acceso i {
    color: #58c2ff
}

.grifo-perimetro {
    border-color: rgba(99, 85, 199, 0.17);
    background: rgba(99, 85, 199, 0.045)
}

.grifo-perimetro i {
    color: #a59cff
}

.grifos-panel-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 10px
}

.grifos-panel-items>div {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, background 0.25s ease
}

.grifos-panel-items>div:hover {
    transform: translateY(-4px);
    background: rgba(206, 67, 67, 0.08)
}

.grifos-panel-items i {
    margin-bottom: 8px;
    color: #ff7777;
    font-size: 18px
}

.grifos-panel-items span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px
}

.grifos-panel-items strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 10px
}

.grifos-zonas {
    background: #ffffff
}

.grifos-zonas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 44px
}

.grifo-zona-card {
    position: relative;
    min-height: 225px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e4ebf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 23, 44, 0.035);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.grifo-zona-card:hover {
    transform: translateY(-4px);
    border-color: rgba(206, 67, 67, 0.20);
    box-shadow: 0 22px 48px rgba(7, 23, 44, 0.09)
}

.grifo-zona-card>span {
    position: absolute;
    right: 18px;
    top: 15px;
    color: #edf2f6;
    font-size: 43px;
    font-weight: 900
}

.grifo-zona-icono {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 13px;
    color: #ce4343;
    background: #fff0f0;
    font-size: 19px;
    transition: transform 0.28s ease
}

.grifo-zona-card:hover .grifo-zona-icono {
    transform: translateY(-3px) rotate(-1deg)
}

.grifo-zona-card h3 {
    position: relative;
    color: #17293f;
    font-size: 17px
}

.grifo-zona-card p {
    position: relative;
    margin-top: 9px;
    color: #788697;
    font-size: 12px;
    line-height: 1.7
}

.diagnostico-grifos {
    background: #f5f8fb
}

.diagnostico-grifos-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(370px, 0.85fr);
    align-items: start;
    gap: 35px
}

.diagnostico-grifos-form {
    padding: 37px;
    border: 1px solid #e2eaf1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7, 23, 44, 0.055)
}

.diagnostico-grifos-form h2 {
    margin: 12px 0 10px;
    color: #15283e;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.15
}

.diagnostico-grifos-form>p {
    max-width: 650px;
    color: #748295;
    line-height: 1.7
}

.grifos-preguntas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-top: 30px
}

.grifo-campo {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.grifo-campo label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #34465b;
    font-size: 12px;
    font-weight: 700
}

.grifo-campo label span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 7px;
    color: #ce4343;
    background: #fff0f0;
    font-size: 9px
}

.grifo-campo select {
    width: 100%;
    min-height: 50px;
    padding: 0 42px 0 14px;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    outline: none;
    color: #46566a;
    background: #fbfcfe;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease
}

.grifo-campo select:hover {
    border-color: rgba(206, 67, 67, 0.30)
}

.grifo-campo select:focus {
    border-color: #ce4343;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(206, 67, 67, 0.09)
}

.resultado-grifos {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(145deg, #07172c, #102743);
    box-shadow: 0 25px 60px rgba(7, 23, 44, 0.18)
}

.resultado-grifos::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(206, 67, 67, 0.12)
}

.resultado-grifos-cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.resultado-grifos-cabecera span {
    display: block;
    margin-bottom: 5px;
    color: #ff7777;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.resultado-grifos-cabecera h3 {
    color: #ffffff;
    font-size: 22px
}

.resultado-grifos-cabecera>i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    color: #ff7777;
    background: rgba(206, 67, 67, 0.10);
    font-size: 21px
}

.resultado-grifos-estado {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 23px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04)
}

.grifo-resultado-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #f5b942;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease
}

.grifo-resultado-punto.resultado-listo {
    background: #46dc87;
    box-shadow: 0 0 0 5px rgba(70, 220, 135, 0.12)
}

.resultado-grifos-estado p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.55
}

.resultado-grifos-servicios {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px
}

.resultado-grifo-servicio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    opacity: 0.52;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease
}

.resultado-grifo-servicio:hover {
    transform: translateX(3px)
}

.resultado-grifo-servicio.activo {
    opacity: 1;
    border-color: rgba(255, 119, 119, 0.25);
    background: rgba(206, 67, 67, 0.09)
}

.resultado-grifo-servicio>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #ff7777;
    background: rgba(206, 67, 67, 0.10);
    font-size: 15px
}

.resultado-grifo-servicio strong {
    display: block;
    color: #ffffff;
    font-size: 11px
}

.resultado-grifo-servicio span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px
}

.resultado-grifos-mensaje {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(32, 164, 243, 0.10);
    border-radius: 11px;
    background: rgba(32, 164, 243, 0.05)
}

.resultado-grifos-mensaje i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #53bdff
}

.resultado-grifos-mensaje p {
    color: rgba(255, 255, 255, 0.63);
    font-size: 10px;
    line-height: 1.6
}

.btn-grifo-cotizar {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #ce4343, #ee6262);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 13px 27px rgba(206, 67, 67, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.btn-grifo-cotizar:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(206, 67, 67, 0.31)
}

.resultado-grifos>small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    line-height: 1.5
}

.grifos-soluciones {
    background: #ffffff
}

.grifos-soluciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 43px
}

.grifo-solucion-card {
    min-height: 405px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(7, 23, 44, 0.04);
    transition: transform 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease
}

.grifo-solucion-card:hover {
    transform: translateY(-5px);
    border-color: rgba(206, 67, 67, 0.20);
    box-shadow: 0 23px 50px rgba(7, 23, 44, 0.10)
}

.grifo-solucion-icono {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #ce4343;
    background: #fff0f0;
    font-size: 21px;
    transition: transform 0.28s ease
}

.grifo-solucion-card:hover .grifo-solucion-icono {
    transform: translateY(-4px) rotate(-1deg)
}

.grifo-solucion-card>span {
    margin-bottom: 7px;
    color: #ce4343;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px
}

.grifo-solucion-card h3 {
    color: #17293f;
    font-size: 19px
}

.grifo-solucion-card>p {
    margin-top: 10px;
    color: #748294;
    font-size: 13px;
    line-height: 1.7
}

.grifo-solucion-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0;
    padding: 0;
    list-style: none
}

.grifo-solucion-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c6c7f;
    font-size: 11px
}

.grifo-solucion-card li i {
    color: #16a34a;
    font-size: 9px
}

.grifo-solucion-card>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0b63ce;
    font-size: 12px;
    font-weight: 700
}

.grifo-solucion-card>a i {
    transition: transform 0.25s ease
}

.grifo-solucion-card>a:hover i {
    transform: translateX(5px)
}

.grifos-operacion {
    background: #f6f8fb
}

.grifos-operacion-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 45px
}

.grifo-operacion-card {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #e3eaf1;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease
}

.grifo-operacion-card:hover {
    transform: translateY(-4px);
    border-color: rgba(206, 67, 67, 0.20);
    box-shadow: 0 20px 45px rgba(7, 23, 44, 0.08)
}

.grifo-operacion-numero {
    position: absolute;
    right: 16px;
    top: 14px;
    color: #edf1f6;
    font-size: 37px;
    font-weight: 900
}

.grifo-operacion-card>i {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 10px auto 20px;
    border-radius: 14px;
    color: #ce4343;
    background: #fff0f0;
    font-size: 20px
}

.grifo-operacion-card h3 {
    color: #17293f;
    font-size: 17px
}

.grifo-operacion-card p {
    margin-top: 9px;
    color: #758395;
    font-size: 11px;
    line-height: 1.7
}

.grifo-operacion-linea {
    width: 32px;
    height: 2px;
    position: relative;
    background: linear-gradient(90deg, #cfd9e3, #ce4343)
}

.grifo-operacion-linea::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #ce4343;
    border-right: 2px solid #ce4343;
    transform: translateY(-50%) rotate(45deg)
}

.grifos-cta {
    background: linear-gradient(135deg, #7d2525, #ce4343 48%, #0b63ce)
}

@media (prefers-reduced-motion:reduce) {

    .grifos-panel,
    .grifo-zona,
    .grifos-panel-items>div,
    .grifo-zona-card,
    .resultado-grifo-servicio,
    .grifo-solucion-card,
    .grifo-operacion-card,
    .btn-grifo-cotizar {
        transition: none
    }

    .grifos-estado span {
        animation: none
    }
}

/* ==========================================================
   MENÚ SECTORES
========================================================== */

.header {
    overflow: visible !important
}

.navbar {
    overflow: visible !important
}

.menu {
    overflow: visible !important
}

.menu-sectores {
    position: relative !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important
}

.menu-sectores>summary {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 !important;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    outline: none;
    transition: color 0.25s ease
}

.menu-sectores>summary::-webkit-details-marker {
    display: none
}

.menu-sectores>summary::marker {
    display: none;
    content: ""
}

.menu-sectores>summary:hover {
    color: #ffffff
}

.menu-sectores>summary i {
    margin-left: 2px;
    font-size: 9px;
    transition: transform 0.25s ease
}

.menu-sectores[open]>summary i {
    transform: rotate(180deg)
}

.menu-sectores>summary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 5px;
    background: #b99a5e;
    transform: scaleX(0);
    transition: transform 0.25s ease
}

.menu-sectores:hover>summary::after,
.menu-sectores[open]>summary::after,
.menu-sectores.activo>summary::after {
    transform: scaleX(1)
}

.menu-sectores.activo>summary {
    color: #ffffff
}

.menu-sectores .submenu-sectores {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    z-index: 99999 !important;
    width: 345px !important;
    display: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #4e3f2d, #7d6546) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.26) !important;
    transform: translateX(-50%) !important;
    overflow: visible !important
}

.menu-sectores[open] .submenu-sectores {
    display: block !important
}

.menu-sectores .submenu-sectores::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #4e3f2d;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    transform: translateX(-50%) rotate(45deg)
}

.submenu-sectores-cabecera {
    display: block !important;
    padding: 10px 12px 14px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.submenu-sectores-cabecera span {
    display: block !important;
    margin: 0 0 4px !important;
    color: #b99a5e !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px;
    line-height: 1.4
}

.submenu-sectores-cabecera strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.4
}

.menu .submenu-sectores>a {
    position: relative;
    width: 100% !important;
    min-height: 58px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 11px !important;
    margin: 2px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #ffffff !important;
    text-align: left !important;
    white-space: normal !important;
    background: transparent !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease
}

.menu .submenu-sectores>a::after,
.menu .submenu-sectores>a::before {
    display: none !important
}

.menu .submenu-sectores>a:hover {
    transform: translateX(3px);
    border-color: rgba(185, 154, 94, 0.14) !important;
    background: rgba(185, 154, 94, 0.08) !important
}

.menu .submenu-sectores>a.submenu-activo {
    border-color: rgba(185, 154, 94, 0.20) !important;
    background: rgba(185, 154, 94, 0.12) !important
}

.submenu-sector-icono {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px;
    margin: 0 !important;
    border-radius: 10px;
    color: #8d6a3d;
    background: rgba(185, 154, 94, 0.11)
}

.submenu-sector-icono i {
    margin: 0 !important;
    font-size: 15px !important
}

.submenu-sectores>a>div:last-child {
    display: block !important;
    flex: 1;
    min-width: 0;
    margin: 0 !important
}

.submenu-sectores>a>div:last-child strong {
    display: block !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important
}

.submenu-sectores>a>div:last-child span {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(255, 255, 255, 0.48) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important
}

/* ==========================================================
   PLANES
========================================================== */

.planes {
    background: #f6f8fb;
    overflow: hidden
}

.planes-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 42px
}

.planes-intro h2 {
    color: var(--azul-oscuro);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin-top: 10px
}

.planes-intro h2 span {
    color: var(--azul)
}

.planes-intro>p {
    max-width: 430px;
    color: var(--gris-texto)
}

.planes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch
}

.plan-card {
    position: relative;
    padding: 30px;
    background: var(--blanco);
    border: 1px solid #dfe6ed;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(8, 28, 48, 0.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 104, 179, 0.25);
    box-shadow: 0 18px 38px rgba(8, 28, 48, .10)
}

.plan-card-destacado {
    color: var(--blanco);
    background: #0b2946;
    border-color: #0b2946
}

.plan-recomendado {
    position: absolute;
    top: -12px;
    right: 24px;
    padding: 6px 11px;
    border-radius: 8px;
    color: #0a3559;
    background: #d8edf9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px
}

.plan-icono {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--azul);
    background: #e7f3ff;
    font-size: 20px;
    margin-bottom: 20px
}

.plan-card-destacado .plan-icono {
    color: #063267;
    background: #b7e6ff
}

.plan-etiqueta {
    display: block;
    color: var(--azul);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.1px
}

.plan-card h3 {
    margin: 8px 0;
    color: var(--azul-oscuro);
    font-size: 25px
}

.plan-card p {
    min-height: 52px;
    color: var(--gris-texto);
    font-size: 15px
}

.plan-card ul {
    display: grid;
    gap: 11px;
    margin: 25px 0 28px;
    padding: 0;
    list-style: none;
    font-size: 14px
}

.plan-card li i {
    color: var(--verde);
    margin-right: 8px
}

.plan-enlace {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--azul);
    font-weight: 800
}

.plan-card-destacado .plan-etiqueta,
.plan-card-destacado h3,
.plan-card-destacado p,
.plan-card-destacado .plan-enlace {
    color: var(--blanco)
}

.plan-card-destacado li i {
    color: #a9e0ff
}

/* ==========================================================
   RUTA COTIZACIÓN
========================================================== */

.ruta-cotizacion {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding: 22px 26px;
    border: 1px solid #dfe7ee;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(8, 28, 48, 0.04)
}

.ruta-cotizacion-icono {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--blanco);
    background: linear-gradient(135deg, var(--azul), var(--celeste))
}

.ruta-cotizacion strong,
.ruta-cotizacion span {
    display: block
}

.ruta-cotizacion strong {
    color: var(--azul-oscuro)
}

.ruta-cotizacion span {
    color: var(--gris-texto);
    font-size: 14px
}

.ruta-cotizacion .btn-principal {
    margin-left: auto;
    white-space: nowrap
}

.diagnostico-importado {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    color: #12633a;
    background: #eafbf1;
    font-size: 13px;
    line-height: 1.45
}

.diagnostico-importado i {
    margin-top: 3px;
    color: var(--verde)
}

/* ==========================================================
   MARCAS
========================================================== */

.marcas-home {
    padding: 72px 0;
    background: #ffffff;
    border-top: 1px solid #edf1f4
}

.marcas-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.marca-item {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(8, 28, 48, 0.035);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease
}

.marca-item:hover {
    transform: translateY(-4px);
    border-color: rgba(18, 104, 179, 0.22);
    box-shadow: 0 13px 28px rgba(8, 28, 48, 0.08)
}

.marca-item img {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 58px;
    object-fit: contain;
    opacity: 0.88;
    filter: grayscale(18%);
    transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease
}

.marca-item:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.02)
}

/* ==========================================================
   REDISEÑO CLARO POR SECTOR
   Se eliminan los paneles visuales grandes y el azul oscuro.
   ========================================================== */

:root {
    --azul-oscuro: #27313a;
    --azul-profundo: #3b4650;
    --azul: #b65045;
    --celeste: #d29b4c;
    --verde: #2d8065;
    --gris-fondo: #f8f6f2;
    --texto: #27313a;
    --gris-texto: #62707a;
    --borde: #dfe3e2;
    --sombra: 0 12px 28px rgba(39, 49, 58, .08);
    --radio: 9px;
    --sector: #b65045;
    --sector-suave: #fdeeee;
}

body {
    color: var(--texto) !important;
    background: #ffffff !important;
}

main .contenedor,
main [class*="grid"],
main [class*="card"],
main [class*="panel"],
main [class*="contenido"],
main [class*="form"] {
    min-width: 0;
}

main :is(h1, h2, h3, h4, p, span, a, strong, small, label) {
    overflow-wrap: break-word;
}

/* Cabecera clara: no más barra azul o negra. */
.header,
.header.scrolled {
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 1px solid #e2e5e4 !important;
    box-shadow: 0 4px 18px rgba(39, 49, 58, .07) !important;
    backdrop-filter: none !important;
}

.logo,
.logo-texto strong,
.menu a {
    color: #27313a !important;
}

.logo-texto span {
    color: #7b858c !important;
}

.logo-icono {
    background: #b65045 !important;
    border-color: #b65045 !important;
    color: #ffffff !important;
}

.menu a::after {
    background: #b65045 !important;
}

.menu a:hover,
.menu a.activo {
    color: #8f3d34 !important;
}

/* Submenú de sectores claro también en escritorio. */
.menu-sectores > summary,
.menu-sectores.activo > summary {
    color: #27313a !important;
}

.menu-sectores > summary:hover,
.menu-sectores.activo > summary {
    color: #8f3d34 !important;
}

.menu-sectores > summary::after {
    background: #b65045 !important;
}

.menu-sectores .submenu-sectores {
    border-color: #dfe3e2 !important;
    background: #ffffff !important;
    box-shadow: 0 16px 36px rgba(39, 49, 58, .12) !important;
}

.menu-sectores .submenu-sectores::before {
    background: #ffffff !important;
    border-color: #dfe3e2 !important;
}

.submenu-sectores-cabecera {
    border-bottom-color: #e2e5e4 !important;
}

.submenu-sectores-cabecera span {
    color: #b65045 !important;
}

.submenu-sectores-cabecera strong,
.submenu-sectores > a > div:last-child strong {
    color: #27313a !important;
}

.submenu-sectores > a > div:last-child span {
    color: #62707a !important;
}

.menu .submenu-sectores > a {
    color: #27313a !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.menu .submenu-sectores > a:hover,
.menu .submenu-sectores > a.submenu-activo {
    color: #27313a !important;
    background: #fff0ed !important;
    border-color: #dfb5af !important;
}

.submenu-sector-icono {
    color: #b65045 !important;
    background: #fff0ed !important;
}

.btn-header,
.btn-principal {
    color: #ffffff !important;
    background: #b65045 !important;
    border-color: #b65045 !important;
    box-shadow: none !important;
}

.btn-header:hover,
.btn-principal:hover {
    background: #92382f !important;
    border-color: #92382f !important;
    transform: translateY(-2px);
}

.menu-toggle {
    color: #27313a !important;
    border-color: #d7ddda !important;
    background: #ffffff !important;
}

/* Todos los hero se vuelven claros y limpios. */

.pagina-hero,
.rubro-hero,
.casa-hero,
.comercio-hero,
.institucion-hero,
.grifos-hero {
    position: relative;
    min-height: 460px !important;
    color: #27313a !important;
    background: var(--sector-suave) !important;
}

.hero {
    --sector: #b65045;
    --sector-suave: #fff0ed;
}

.pagina-hero-servicios {
    --sector: #b65045;
    --sector-suave: #fff0ed;
}

.pagina-hero-nosotros {
    --sector: #6f5a8a;
    --sector-suave: #f3eff8;
}

.pagina-hero-contacto {
    --sector: #2d8065;
    --sector-suave: #eaf6f0;
}

.rubro-hero,
.rubro-hero-edificios {
    --sector: #6f5a8a;
    --sector-suave: #f3eff8;
}

.casa-hero {
    --sector: #c46c3b;
    --sector-suave: #fff2e8;
}

.comercio-hero {
    --sector: #2d8065;
    --sector-suave: #eaf6f0;
}

.institucion-hero {
    --sector: #a9772a;
    --sector-suave: #fff6e7;
}

.grifos-hero {
    --sector: #b65045;
    --sector-suave: #fdeeee;
}

.hero::before,
.hero::after,
.pagina-hero::before,
.pagina-hero::after,
.rubro-hero::before,
.rubro-hero::after,
.casa-hero::before,
.casa-hero::after,
.comercio-hero::before,
.comercio-hero::after,
.institucion-hero::before,
.institucion-hero::after,
.grifos-hero::before,
.grifos-hero::after,
.hero-overlay,
.pagina-hero-overlay,
.hero-decoracion,
.pagina-decoracion {
    display: none !important;
}

.hero-contenido,
.pagina-hero-contenido,
.contacto-hero-grid,
.rubro-hero-grid,
.casa-hero-grid,
.comercio-hero-grid,
.institucion-hero-grid,
.grifos-hero-grid {
    grid-template-columns: minmax(0, 820px) !important;
    justify-content: start !important;
    gap: 0 !important;
}

.hero-contenido,
.pagina-hero-contenido,
.contacto-hero-grid {
    padding-top: 128px !important;
    padding-bottom: 78px !important;
}

.rubro-hero-grid,
.casa-hero-grid,
.comercio-hero-grid,
.institucion-hero-grid,
.grifos-hero-grid {
    padding-top: 128px !important;
    padding-bottom: 78px !important;
}

.hero h1,
.pagina-hero h1,
.contacto-hero-texto h1,
.rubro-hero h1,
.casa-hero h1,
.comercio-hero h1,
.institucion-hero h1,
.grifos-hero h1 {
    color: #27313a !important;
    text-shadow: none !important;
}

.hero h1 span,
.pagina-hero h1 span,
.contacto-hero-texto h1 span,
.rubro-hero h1 span,
.casa-hero h1 span,
.comercio-hero h1 span,
.institucion-hero h1 span,
.grifos-hero h1 span {
    color: var(--sector) !important;
}

.etiqueta,
.etiqueta-seccion,
.subtitulo,
.breadcrumb a,
.breadcrumb span,
.rubro-hero-contenido .etiqueta-seccion,
.casa-hero-contenido .etiqueta-seccion,
.comercio-hero-contenido .etiqueta-seccion,
.institucion-hero-contenido .etiqueta-seccion,
.grifos-hero-contenido .etiqueta-seccion {
    color: var(--sector) !important;
}

.hero-texto > p,
.pagina-hero-contenido > div:first-child > p,
.contacto-hero-texto > p,
.rubro-hero-contenido > p,
.casa-hero-contenido > p,
.comercio-hero-contenido > p,
.institucion-hero-contenido > p,
.grifos-hero-contenido > p,
.hero-confianza,
.rubro-confianza,
.casa-hero-confianza,
.comercio-confianza,
.institucion-confianza,
.grifos-confianza,
.contacto-hero-beneficios {
    color: #56636c !important;
}

.hero-confianza i,
.rubro-confianza i,
.casa-hero-confianza i,
.comercio-confianza i,
.institucion-confianza i,
.grifos-confianza i,
.contacto-hero-beneficios i {
    color: var(--sector) !important;
}

.hero .btn-principal,
.pagina-hero .btn-principal,
.contacto-hero-texto .btn-principal,
.rubro-hero .btn-principal,
.casa-hero .btn-principal,
.comercio-hero .btn-principal,
.institucion-hero .btn-principal,
.grifos-hero .btn-principal {
    background: var(--sector) !important;
    border-color: var(--sector) !important;
}

.hero .btn-secundario,
.pagina-hero .btn-secundario,
.contacto-hero-texto .btn-secundario,
.rubro-hero .btn-secundario,
.casa-hero .btn-secundario,
.comercio-hero .btn-secundario,
.institucion-hero .btn-secundario,
.grifos-hero .btn-secundario {
    color: var(--sector) !important;
    background: #ffffff !important;
    border-color: color-mix(in srgb, var(--sector) 42%, #ffffff) !important;
}

/* Botones de los cinco sectores: CTA claro, consistente y sin azul. */
.rubro-hero .btn-primario,
.casa-hero .btn-primario,
.comercio-hero .btn-primario,
.institucion-hero .btn-primario,
.grifos-hero .btn-primario {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 50px !important;
    padding: 13px 20px !important;
    border: 1px solid var(--sector) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    background: var(--sector) !important;
    box-shadow: 0 9px 20px rgba(39, 49, 58, .10) !important;
    font-weight: 700 !important;
}

.rubro-hero .btn-primario:hover,
.casa-hero .btn-primario:hover,
.comercio-hero .btn-primario:hover,
.institucion-hero .btn-primario:hover,
.grifos-hero .btn-primario:hover {
    transform: translateY(-2px) !important;
    filter: brightness(.93);
}

.cta-rubro {
    --sector: #6f5a8a;
    --sector-suave: #f3eff8;
}

.casa-cta {
    --sector: #c46c3b;
    --sector-suave: #fff2e8;
}

.comercio-cta {
    --sector: #2d8065;
    --sector-suave: #eaf6f0;
}

.institucion-cta {
    --sector: #a9772a;
    --sector-suave: #fff6e7;
}

.grifos-cta {
    --sector: #b65045;
    --sector-suave: #fdeeee;
}

.btn-cta-rubro,
.btn-casa-cotizar,
.btn-comercio-cotizar,
.btn-institucion-cotizar,
.btn-grifo-cotizar {
    color: #ffffff !important;
    background: var(--sector) !important;
    border-color: var(--sector) !important;
    box-shadow: 0 9px 20px rgba(39, 49, 58, .10) !important;
}

.btn-cta-rubro-secundario {
    color: var(--sector) !important;
    border-color: var(--sector) !important;
    background: #ffffff !important;
}

:is(
    .solucion-rubro-card,
    .casa-solucion-card,
    .comercio-solucion-card,
    .institucion-solucion-card,
    .grifo-solucion-card
) > a,
.paso-rubro-numero {
    color: var(--sector) !important;
}

/* Se quitan todas las ilustraciones y paneles grandes hechos con CSS. */
.hero-panel,
.servicios-hero-panel,
.nosotros-hero-panel,
.contacto-hero-card,
.rubro-hero-visual,
.casa-hero-visual,
.comercio-hero-visual,
.institucion-hero-visual,
.grifos-hero-visual,
.nosotros-visual,
.quienes-visual,
.solucion-integral-visual {
    display: none !important;
}

.nosotros-grid,
.quienes-grid,
.solucion-integral-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Superficies claras, tipografía legible y tarjetas menos artificiales. */
.servicios-home,
.servicios-pagina,
.identidad-empresa,
.diferencia,
.contacto-seccion,
.soluciones-rubro,
.proceso-rubro,
.casa-escenarios,
.asesor-casa,
.comercio-momentos,
.institucion-flujo,
.grifos-operacion,
.planes {
    background: #f8f6f2 !important;
}

:is(
    .servicio-card,
    .servicio-detalle-card,
    .identidad-card,
    .valor-card,
    .diferencia-card,
    .sector-card,
    .solucion-rubro-card,
    .zona-edificio-card,
    .casa-punto-card,
    .casa-solucion-card,
    .casa-escenario,
    .comercio-punto-card,
    .comercio-solucion-card,
    .comercio-momento,
    .institucion-area-card,
    .institucion-solucion-card,
    .grifo-zona-card,
    .grifo-solucion-card,
    .problema-item,
    .paso-rubro,
    .institucion-flujo-card,
    .grifo-operacion-card,
    .contacto-proceso-card,
    .plan-card,
    .marca-item,
    .cotizador-contenedor,
    .ruta-cotizacion,
    .recomendacion-edificio-card
) {
    color: #27313a !important;
    background: #ffffff !important;
    border: 1px solid #dfe3e2 !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 20px rgba(39, 49, 58, .05) !important;
}

:is(
    .servicio-card,
    .servicio-detalle-card,
    .identidad-card,
    .sector-card,
    .solucion-rubro-card,
    .casa-solucion-card,
    .comercio-solucion-card,
    .institucion-solucion-card,
    .grifo-solucion-card
) {
    border-top: 3px solid var(--sector) !important;
}

:is(
    .servicio-card,
    .servicio-detalle-card,
    .identidad-card,
    .valor-card,
    .diferencia-card,
    .sector-card,
    .solucion-rubro-card,
    .zona-edificio-card,
    .casa-punto-card,
    .casa-solucion-card,
    .casa-escenario,
    .comercio-punto-card,
    .comercio-solucion-card,
    .comercio-momento,
    .institucion-area-card,
    .institucion-solucion-card,
    .grifo-zona-card,
    .grifo-solucion-card,
    .problema-item,
    .paso-rubro,
    .institucion-flujo-card,
    .grifo-operacion-card,
    .contacto-proceso-card,
    .plan-card
):hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--sector) 45%, #ffffff) !important;
    box-shadow: var(--sombra) !important;
}

:is(
    .servicio-card,
    .servicio-detalle-card,
    .identidad-card,
    .valor-card,
    .diferencia-card,
    .sector-card,
    .solucion-rubro-card,
    .zona-edificio-card,
    .casa-punto-card,
    .casa-solucion-card,
    .casa-escenario,
    .comercio-punto-card,
    .comercio-solucion-card,
    .comercio-momento,
    .institucion-area-card,
    .institucion-solucion-card,
    .grifo-zona-card,
    .grifo-solucion-card,
    .problema-item,
    .paso-rubro,
    .institucion-flujo-card,
    .grifo-operacion-card,
    .contacto-proceso-card,
    .plan-card
) :is(h2, h3, h4, strong) {
    color: #27313a !important;
}

:is(
    .servicio-card,
    .servicio-detalle-card,
    .identidad-card,
    .valor-card,
    .diferencia-card,
    .sector-card,
    .solucion-rubro-card,
    .zona-edificio-card,
    .casa-punto-card,
    .casa-solucion-card,
    .casa-escenario,
    .comercio-punto-card,
    .comercio-solucion-card,
    .comercio-momento,
    .institucion-area-card,
    .institucion-solucion-card,
    .grifo-zona-card,
    .grifo-solucion-card,
    .problema-item,
    .paso-rubro,
    .institucion-flujo-card,
    .grifo-operacion-card,
    .contacto-proceso-card,
    .plan-card
) :is(p, span, li, small) {
    color: #62707a !important;
}

.casa-punto-card,
.casa-solucion-card,
.casa-escenario {
    --sector: #c46c3b;
    border-top-color: #c46c3b !important;
}

.comercio-punto-card,
.comercio-solucion-card,
.comercio-momento {
    --sector: #2d8065;
    border-top-color: #2d8065 !important;
}

.institucion-area-card,
.institucion-solucion-card,
.institucion-flujo-card {
    --sector: #a9772a;
    border-top-color: #a9772a !important;
}

.grifo-zona-card,
.grifo-solucion-card,
.grifo-operacion-card {
    --sector: #b65045;
    border-top-color: #b65045 !important;
}

.solucion-rubro-card,
.zona-edificio-card,
.paso-rubro,
.recomendacion-edificio-card {
    --sector: #6f5a8a;
    border-top-color: #6f5a8a !important;
}

/* La recomendación de edificios también queda clara, sin bloque oscuro. */
.recomendacion-edificio-card {
    background: #f3eff8 !important;
    border: 1px solid #dcd4e7 !important;
    box-shadow: 0 12px 28px rgba(39, 49, 58, .08) !important;
}

.recomendacion-edificio-card::after {
    display: none !important;
}

.recomendacion-edificio-icono {
    color: #6f5a8a !important;
    border-color: #dcd4e7 !important;
    background: #ffffff !important;
}

.recomendacion-edificio-contenido > span,
.recomendacion-tags i {
    color: #6f5a8a !important;
}

.recomendacion-edificio-contenido h2 {
    color: #27313a !important;
}

.recomendacion-edificio-contenido p,
.recomendacion-tags span {
    color: #62707a !important;
}

.recomendacion-tags span {
    border-color: #dcd4e7 !important;
    background: #ffffff !important;
}

.plan-card-destacado {
    color: #27313a !important;
    background: #ffffff !important;
    border-color: #dfe3e2 !important;
}

.plan-card-destacado .plan-icono {
    color: #b65045 !important;
    background: #fff0ed !important;
}

.plan-card-destacado .plan-etiqueta,
.plan-card-destacado h3,
.plan-card-destacado p,
.plan-card-destacado .plan-enlace {
    color: #27313a !important;
}

.sectores-home::before,
.sectores-home::after {
    display: none !important;
}

/* El contenido antes oscuro ahora se lee sobre blanco. */
.problemas-rubro,
.estadisticas,
.cta,
.cta-rubro,
.casa-cta,
.comercio-cta,
.institucion-cta,
.grifos-cta {
    color: #27313a !important;
    background: #f8f6f2 !important;
    border-top: 1px solid #e2e5e4 !important;
    border-bottom: 1px solid #e2e5e4 !important;
}

.problemas-rubro :is(h2, h3, p, span, strong),
.estadisticas :is(h2, h3, p, span, strong),
.cta :is(h2, h3, p, span, strong),
.cta-rubro :is(h2, h3, p, span, strong),
.casa-cta :is(h2, h3, p, span, strong),
.comercio-cta :is(h2, h3, p, span, strong),
.institucion-cta :is(h2, h3, p, span, strong),
.grifos-cta :is(h2, h3, p, span, strong) {
    color: #27313a !important;
}

.problema-item > div,
.paso-rubro > i,
.institucion-flujo-card > i,
.grifo-operacion-card > i,
.servicio-icono,
.servicio-detalle-icono,
.identidad-icono,
.valor-icono,
.diferencia-card > i,
.solucion-rubro-icono,
.zona-edificio-card > i,
.casa-punto-icono,
.casa-solucion-icono,
.comercio-punto-icono,
.comercio-solucion-icono,
.institucion-area-icono,
.institucion-solucion-icono,
.grifo-zona-icono,
.grifo-solucion-icono {
    color: var(--sector) !important;
    background: var(--sector-suave) !important;
    box-shadow: none !important;
}

.contacto-informacion,
.resumen-cotizacion,
.resultado-casa,
.resultado-comercio,
.resultado-institucion,
.resultado-grifos {
    color: #27313a !important;
    background: #ffffff !important;
    border: 1px solid #dfe3e2 !important;
    box-shadow: 0 8px 20px rgba(39, 49, 58, .06) !important;
}

.contacto-informacion :is(h2, h3, h4, p, span, strong, small),
.resumen-cotizacion :is(h2, h3, h4, p, span, strong, small),
.resultado-casa :is(h2, h3, h4, p, span, strong, small),
.resultado-comercio :is(h2, h3, h4, p, span, strong, small),
.resultado-institucion :is(h2, h3, h4, p, span, strong, small),
.resultado-grifos :is(h2, h3, h4, p, span, strong, small) {
    color: #56636c !important;
}

.campo-form input,
.campo-form select,
.campo-form textarea,
.asesor-campo select,
.diagnostico-campo select,
.institucion-campo select,
.grifo-campo select {
    color: #27313a !important;
    background: #ffffff !important;
    border-color: #cfd7d4 !important;
    border-radius: 7px !important;
}

.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus,
.asesor-campo select:focus,
.diagnostico-campo select:focus,
.institucion-campo select:focus,
.grifo-campo select:focus {
    border-color: var(--sector) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sector) 16%, transparent) !important;
}

.footer {
    color: #27313a !important;
    background: #f3f1ed !important;
    border-top: 1px solid #dfe3e2 !important;
}

.footer :is(h2, h3, h4, strong, a, p, span) {
    color: #56636c !important;
}

.footer h3,
.footer .logo-texto strong {
    color: #27313a !important;
}

.footer a:hover {
    color: #b65045 !important;
}

.footer-bottom {
    color: #7b858c !important;
    border-top-color: #dfe3e2 !important;
}

.redes a {
    color: #b65045 !important;
    border-color: #d7ddda !important;
    background: #ffffff !important;
}

.redes a:hover {
    color: #ffffff !important;
    background: #b65045 !important;
    border-color: #b65045 !important;
}

.whatsapp {
    border-radius: 50% !important;
}

/* ==========================================================
   BOTONES PROFESIONALES - IP TECNOLOGIA
   Este bloque mejora los botones de Inicio, Sectores y CTA.
   No modifica PHP ni la base de datos.
========================================================== */

/* ----------------------------------------------------------
   1. SEPARACIÓN ENTRE BOTONES
---------------------------------------------------------- */
.hero-botones,
.pagina-hero-botones,
.rubro-hero-botones,
.casa-hero-botones,
.comercio-hero-botones,
.institucion-hero-botones,
.grifos-hero-botones,
.cta-rubro-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px !important;
}


/* ----------------------------------------------------------
   2. BOTÓN PRINCIPAL
   Ejemplo: "Solicitar evaluación" y "Cotiza ahora".
---------------------------------------------------------- */
.btn-principal,
.btn-primario,
.btn-casa-cotizar,
.btn-comercio-cotizar,
.btn-grifo-cotizar,
.btn-institucion-cotizar,
.btn-cta-rubro,
.btn-header {
    min-height: 52px !important;
    padding: 14px 24px !important;

    border: 1px solid #a9443a !important;
    border-radius: 12px !important;

    background: linear-gradient(135deg, #c25a4e, #ad463c) !important;
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: 0 10px 22px rgba(173, 70, 60, 0.22) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease !important;
}


/* Efecto cuando pasas el mouse por el botón principal */
.btn-principal:hover,
.btn-primario:hover,
.btn-casa-cotizar:hover,
.btn-comercio-cotizar:hover,
.btn-grifo-cotizar:hover,
.btn-institucion-cotizar:hover,
.btn-cta-rubro:hover,
.btn-header:hover {
    background: linear-gradient(135deg, #ad463c, #91382f) !important;

    transform: translateY(-4px) !important;

    box-shadow: 0 16px 30px rgba(145, 56, 47, 0.30) !important;

    filter: none !important;
}


/* Efecto cuando haces clic */
.btn-principal:active,
.btn-primario:active,
.btn-casa-cotizar:active,
.btn-comercio-cotizar:active,
.btn-grifo-cotizar:active,
.btn-institucion-cotizar:active,
.btn-cta-rubro:active,
.btn-header:active {
    transform: translateY(-1px) scale(0.98) !important;
}


/* ----------------------------------------------------------
   3. BOTÓN SECUNDARIO
   Ejemplo: "Ver soluciones" y "Ver servicios".
---------------------------------------------------------- */
.btn-secundario,
.btn-blanco,
.btn-cta-rubro-secundario {
    min-height: 52px !important;
    padding: 14px 24px !important;

    border: 1px solid #dfbbb4 !important;
    border-radius: 12px !important;

    background: #fff9f7 !important;
    color: #303941 !important;

    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: 0 8px 18px rgba(52, 45, 43, 0.08) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease !important;
}


/* Efecto cuando pasas el mouse por el botón secundario */
.btn-secundario:hover,
.btn-blanco:hover,
.btn-cta-rubro-secundario:hover {
    border-color: #bd5145 !important;

    background: #f9e9e5 !important;

    transform: translateY(-4px) !important;

    box-shadow: 0 16px 28px rgba(104, 65, 59, 0.16) !important;

    filter: none !important;
}


/* ----------------------------------------------------------
   4. MOVIMIENTO SUAVE DE LAS FLECHAS
---------------------------------------------------------- */
.btn-principal i,
.btn-primario i,
.btn-casa-cotizar i,
.btn-comercio-cotizar i,
.btn-grifo-cotizar i,
.btn-institucion-cotizar i,
.btn-cta-rubro i,
.btn-secundario i,
.btn-blanco i,
.btn-cta-rubro-secundario i {
    transition: transform 0.22s ease !important;
}


.btn-principal:hover i,
.btn-primario:hover i,
.btn-casa-cotizar:hover i,
.btn-comercio-cotizar:hover i,
.btn-grifo-cotizar:hover i,
.btn-institucion-cotizar:hover i,
.btn-cta-rubro:hover i,
.btn-secundario:hover i,
.btn-blanco:hover i,
.btn-cta-rubro-secundario:hover i {
    transform: translateX(5px) !important;
}


/* ----------------------------------------------------------
   5. AJUSTE PARA CELULARES
---------------------------------------------------------- */
@media (max-width: 560px) {
    .hero-botones,
    .pagina-hero-botones,
    .rubro-hero-botones,
    .casa-hero-botones,
    .comercio-hero-botones,
    .institucion-hero-botones,
    .grifos-hero-botones,
    .cta-rubro-botones {
        width: 100%;
    }

    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-grifo-cotizar,
    .btn-institucion-cotizar,
    .btn-cta-rubro,
    .btn-secundario,
    .btn-blanco,
    .btn-cta-rubro-secundario {
        width: 100%;
    }
}
/* ==========================================================
   SOLO REEMPLAZA ÍCONOS DE ESCUDO POR IP
   No cambia casas, tiendas, cámaras, alarmas ni flechas.
========================================================== */

/* Detecta únicamente íconos Font Awesome que tengan "shield". */
i[class*="fa-shield"] {
    font-size: 0 !important;
    font-style: normal !important;
}


/* Oculta el dibujo original del escudo. */
i[class*="fa-shield"]::before {
    content: none !important;
}


/* Muestra IP en lugar del escudo de seguridad. */
i[class*="fa-shield"]::after {
    content: "IP";

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
    line-height: 1 !important;

    color: #26323b !important;
}
/* ==========================================================
   HEADER: INGRESAR, REGÍSTRATE Y COTIZA AHORA — AZUL REY

   Reemplaza el bloque anterior de "HEADER: INGRESAR Y
   REGÍSTRATE" por este. Pégalo al FINAL de:
   assets/css/estilos.css

   Paleta usada:
   - Azul rey principal: #153FAF
   - Azul rey al pasar el mouse: #0D318D
   - Azul claro de apoyo: #EEF3FF

   Este bloque es solamente visual: no toca la base de datos,
   sesiones ni las páginas login.php / registro.php.
========================================================== */


/* ----------------------------------------------------------
   1. GRUPO DE ACCIONES — ESCRITORIO
---------------------------------------------------------- */
.header-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-shrink: 0;
    margin-left: auto;
}


/* Búsqueda al lado derecho del menú, antes de las acciones. */
.header-busqueda {
    flex: 0 1 230px;
    min-width: 150px;
    margin-left: 18px;
}

.header-busqueda + .header-chatbot {
    margin-left: 10px;
}

.header-busqueda-caja {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #344054;
}

.header-busqueda-caja input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263546;
    font: inherit;
    font-size: 12px;
}

.header-busqueda-caja input::placeholder {
    color: #667085;
}


/* Base compartida para los tres botones del header. */
.btn-acceso,
.header-acciones .btn-header {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}


.btn-acceso i,
.header-acciones .btn-header i {
    font-size: 14px;
    transition: transform 0.22s ease;
}


/* ----------------------------------------------------------
   2. BOTÓN "INGRESAR"
   Claro y elegante: es una acción secundaria.
---------------------------------------------------------- */
.btn-ingresar {
    border: 1px solid #c5d4f7;
    color: #153faf !important;
    background: #ffffff !important;
    box-shadow: none !important;
}


.btn-ingresar:hover {
    border-color: #153faf;
    color: #0d318d !important;
    background: #eef3ff !important;
    box-shadow: 0 8px 18px rgba(21, 63, 175, 0.13) !important;
    transform: translateY(-3px);
}


/* ----------------------------------------------------------
   3. BOTÓN "REGÍSTRATE"
   Azul suave para llamar la atención sin competir con Cotiza.
---------------------------------------------------------- */
.btn-registro {
    border: 1px solid #c3d2f8;
    color: #153faf !important;
    background: #eef3ff !important;
    box-shadow: none !important;
}


.btn-registro:hover {
    border-color: #153faf;
    color: #ffffff !important;
    background: #153faf !important;
    box-shadow: 0 9px 20px rgba(21, 63, 175, 0.23) !important;
    transform: translateY(-3px);
}


/* ----------------------------------------------------------
   4. BOTÓN "COTIZA AHORA"
   Acción principal del header en azul rey.
---------------------------------------------------------- */
.header-acciones .btn-header {
    border: 1px solid #0d318d !important;
    color: #ffffff !important;
    background: #153faf !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    box-shadow: 0 9px 20px rgba(21, 63, 175, 0.20) !important;
}


.header-acciones .btn-header:hover {
    border-color: #08256c !important;
    color: #ffffff !important;
    background: #0d318d !important;
    box-shadow: 0 14px 26px rgba(13, 49, 141, 0.27) !important;
    filter: none !important;
    transform: translateY(-3px) !important;
}


/* Movimiento pequeño del ícono: moderno, sin exagerar. */
.btn-acceso:hover i,
.header-acciones .btn-header:hover i {
    transform: translateX(3px) !important;
}

.header-acciones .header-dashboard {
    border: 1px solid #c5d4f7;
    color: #153faf !important;
    background: #ffffff !important;
}

.header-acciones .header-dashboard:hover {
    border-color: #153faf;
    color: #0d318d !important;
    background: #eef3ff !important;
}

.header-acciones .header-cerrar-sesion {
    border: 1px solid #f0b8b8;
    color: #a62929 !important;
    background: #fff7f7 !important;
}

.header-acciones .header-cerrar-sesion:hover {
    border-color: #c03939;
    color: #ffffff !important;
    background: #c03939 !important;
}

.estado-documento {
    display: block;
    min-height: 18px;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.estado-documento-valido {
    color: #16803c;
}

.estado-documento-error {
    color: #b42318;
}

.form-cotizacion input[readonly] {
    color: #344054;
    background: #f5f8fc;
    cursor: not-allowed;
}

.necesidad-opciones,
.necesidad-subopciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.necesidad-subopciones[hidden] {
    display: none !important;
}

.necesidad-opciones button,
.necesidad-subopciones button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    min-height: 74px;
    padding: 15px 18px;
    border: 1px solid #d4deef;
    border-radius: 14px;
    color: #243b63;
    background: linear-gradient(145deg, #ffffff, #f7faff);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(35, 73, 130, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.necesidad-opciones button:hover,
.necesidad-subopciones button:hover,
.necesidad-opciones button.activo,
.necesidad-subopciones button.activo {
    border-color: #2f6fed;
    background: linear-gradient(145deg, #f2f6ff, #e7efff);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.necesidad-opciones strong,
.necesidad-subopciones strong {
    display: block;
    color: #153faf;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.necesidad-opciones span,
.necesidad-subopciones span {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.necesidad-opciones button::after,
.necesidad-subopciones button::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #7d9bd1;
    border-right: 2px solid #7d9bd1;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.necesidad-categoria::after {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.necesidad-categoria.activo::after {
    transform: translateY(-25%) rotate(135deg);
}

.necesidad-opciones button.activo::after,
.necesidad-subopciones button.activo::after {
    border-color: #2563eb;
}

.necesidad-seleccionada {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
}

@media (max-width: 560px) {
    .necesidad-opciones,
    .necesidad-subopciones {
        grid-template-columns: 1fr;
    }
}


/* Estado visible para navegar usando el teclado. */
.btn-acceso:focus-visible,
.header-acciones .btn-header:focus-visible,
.menu-acceso-movil a:focus-visible {
    outline: 3px solid rgba(21, 63, 175, 0.28);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   5. ENLACES DE ACCESO PARA CELULAR
   Por defecto están ocultos. Solo aparecen dentro del menú
   desplegable cuando se abre el botón hamburguesa.
---------------------------------------------------------- */
.menu-acceso-movil {
    display: none;
}


/* ----------------------------------------------------------
   6. AJUSTE PARA PANTALLAS MEDIANAS
---------------------------------------------------------- */
@media (max-width: 1250px) and (min-width: 1001px) {
    .navbar {
        gap: 14px;
    }

    .menu {
        gap: 28px !important;
    }

    .header-acciones {
        gap: 6px;
    }

    .header-chatbot {
        min-height: 52px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .btn-acceso,
    .header-acciones .btn-header {
        padding: 9px 11px;
        font-size: 12px;
    }
}


/* ----------------------------------------------------------
   7. MENÚ RESPONSIVE — CELULAR Y TABLET
---------------------------------------------------------- */
@media (max-width: 1250px) {
    /* En celular se ocultan los botones de la barra superior. */
    .header-busqueda {
        display: none !important;
    }

    .header-acciones {
        display: none !important;
    }

    /* Se muestran dentro del menú al abrirlo. */
    .menu.menu-activo .menu-acceso-movil {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(21, 63, 175, 0.18);
    }

    .menu.menu-activo .menu-acceso-movil a {
        width: 100% !important;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 750;
        text-decoration: none;
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .menu.menu-activo .menu-acceso-movil a::after {
        display: none !important;
    }

    /* Botón Ingresar del menú móvil. */
    .menu.menu-activo .menu-ingresar {
        border: 1px solid #c5d4f7;
        color: #153faf !important;
        background: #ffffff;
    }

    .menu.menu-activo .menu-ingresar:hover {
        border-color: #153faf;
        background: #eef3ff;
        box-shadow: 0 7px 16px rgba(21, 63, 175, 0.12);
        transform: translateY(-2px);
    }

    /* Botón Regístrate del menú móvil. */
    .menu.menu-activo .menu-registro {
        border: 1px solid #0d318d;
        color: #ffffff !important;
        background: #153faf;
    }

    .menu.menu-activo .menu-registro:hover {
        border-color: #08256c;
        color: #ffffff !important;
        background: #0d318d;
        box-shadow: 0 8px 18px rgba(21, 63, 175, 0.23);
        transform: translateY(-2px);
    }
}


/* En celulares angostos los botones se apilan para no apretarse. */
@media (max-width: 420px) {
    .menu.menu-activo .menu-acceso-movil {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   CORRECCIÓN: ESPACIO ENTRE LOGO Y MENÚ
========================================================== */
@media (min-width: 1001px) {
    .navbar {
        justify-content: flex-start !important;
    }

    /* Separa el logo del menú. */
    .navbar > .logo {
        flex: 0 0 auto;
        margin-right: clamp(28px, 2.6vw, 50px);
    }

    /* Evita que el menú invada el logo. */
    .navbar > .menu {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Mantiene los botones a la derecha. */
    .navbar > .header-acciones {
        flex: 0 0 auto;
        margin-left: auto !important;
    }
}

/* Ajuste para laptops. */
@media (max-width: 1250px) and (min-width: 1001px) {
    .navbar > .logo {
        margin-right: 24px;
    }

    .menu {
        gap: 15px !important;
    }
}
/* ==========================================================
   PÁGINAS VISUALES: INGRESAR Y REGÍSTRATE
   Fondo claro, azul rey y formularios profesionales.
========================================================== */

.acceso-pagina {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 76px);
    padding: 78px 0 92px;
    background: #f5f8ff;
}


/* Detalles de fondo suaves. */

.acceso-pagina::before,
.acceso-pagina::after {
    position: absolute;
    z-index: 0;
    display: block;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(21, 63, 175, 0.09);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}


.acceso-pagina::before {
    top: -220px;
    left: -160px;
}


.acceso-pagina::after {
    right: -230px;
    bottom: -260px;
    width: 520px;
    height: 520px;
}


.acceso-contenido {
    position: relative;
    z-index: 1;
}


.acceso-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
    align-items: center;
    gap: clamp(42px, 7vw, 92px);
}


/* Migas de navegación. */

.acceso-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    color: #65748a;
    font-size: 13px;
}


.acceso-breadcrumb a {
    color: #153faf;
    font-weight: 700;
    text-decoration: none;
}


.acceso-breadcrumb i {
    color: #95a6c8;
    font-size: 10px;
}


/* Etiqueta superior. */

.acceso-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 10px;
    border: 1px solid #c9d7f6;
    border-radius: 7px;
    color: #153faf;
    background: #eef3ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    line-height: 1;
    text-transform: uppercase;
}


/* Texto izquierdo. */

.acceso-presentacion h1 {
    max-width: 590px;
    margin: 0;
    color: #263544;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.08;
}


.acceso-presentacion h1 span {
    color: #153faf;
}


.acceso-descripcion {
    max-width: 570px;
    margin: 22px 0 0;
    color: #536375;
    font-size: 17px;
    line-height: 1.75;
}


.acceso-beneficios {
    display: grid;
    gap: 13px;
    max-width: 520px;
    margin: 32px 0 0;
}


.acceso-beneficio {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #354557;
    font-size: 14px;
    font-weight: 650;
}


.acceso-beneficio i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border-radius: 7px;
    color: #153faf;
    background: #e7efff;
    font-size: 13px;
}


/* Tarjeta del formulario. */

.acceso-tarjeta {
    padding: clamp(27px, 4vw, 42px);
    border: 1px solid #dbe5f8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(21, 63, 175, 0.09);
}


.acceso-tarjeta-cabecera {
    margin-bottom: 27px;
}


.acceso-tarjeta-cabecera h2 {
    margin: 0;
    color: #273647;
    font-size: 25px;
    letter-spacing: -0.025em;
    line-height: 1.2;
}


.acceso-tarjeta-cabecera p {
    margin: 8px 0 0;
    color: #68778a;
    font-size: 14px;
    line-height: 1.55;
}


.acceso-formulario {
    display: grid;
    gap: 17px;
}


.acceso-campos-dos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}


.acceso-campo {
    display: grid;
    gap: 7px;
}


.acceso-campo label {
    color: #354557;
    font-size: 13px;
    font-weight: 750;
}


.acceso-campo input {
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid #c9d7f6;
    border-radius: 8px;
    outline: none;
    color: #273647;
    background: #ffffff;
    font: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}


.acceso-campo input::placeholder {
    color: #9aa9bd;
}


.acceso-campo input:focus {
    border-color: #153faf;
    background: #fbfcff;
    box-shadow: 0 0 0 4px rgba(21, 63, 175, 0.11);
}


/* Opciones y enlaces. */

.acceso-opciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #526276;
    font-size: 13px;
}


.acceso-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


.acceso-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #153faf;
}


.acceso-link {
    color: #153faf;
    font-weight: 750;
    text-decoration: none;
}


.acceso-link:hover {
    color: #0d318d;
    text-decoration: underline;
}


/* Botón principal. */

.acceso-boton {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 3px;
    padding: 12px 16px;
    border: 1px solid #0d318d;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    background: #153faf;
    box-shadow: 0 9px 20px rgba(21, 63, 175, 0.20);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}


.acceso-boton:hover {
    border-color: #08256c;
    background: #0d318d;
    box-shadow: 0 14px 25px rgba(13, 49, 141, 0.27);
    transform: translateY(-3px);
}


.acceso-boton i {
    transition: transform 0.22s ease;
}


.acceso-boton:hover i {
    transform: translateX(3px);
}


.acceso-pie-formulario {
    margin: 5px 0 0;
    color: #67778a;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}


.acceso-terminos {
    margin: 2px 0 0;
    color: #718096;
    font-size: 12px;
    line-height: 1.55;
}


/* Diseño para tablet y celular. */

@media (max-width: 900px) {
    .acceso-pagina {
        padding: 58px 0 70px;
    }

    .acceso-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .acceso-presentacion {
        max-width: 650px;
    }

    .acceso-tarjeta {
        max-width: 620px;
    }
}


@media (max-width: 520px) {
    .acceso-pagina {
        padding: 42px 0 56px;
    }

    .acceso-breadcrumb {
        margin-bottom: 22px;
    }

    .acceso-presentacion h1 {
        font-size: 35px;
    }

    .acceso-descripcion {
        font-size: 15px;
    }

    .acceso-campos-dos {
        grid-template-columns: 1fr;
    }

    .acceso-opciones {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .acceso-tarjeta {
        padding: 25px 20px;
    }
}
/* ==========================================================
   ICONOS CON COLORES Y WHATSAPP VISIBLE
========================================================== */

/* Colores de las seis tarjetas de servicios. */

.servicios-detalle-grid .servicio-detalle-card:nth-child(1) .servicio-detalle-icono {
    color: #1976d2 !important;      /* Cámara: azul */
    background: #eaf3ff !important;
}

.servicios-detalle-grid .servicio-detalle-card:nth-child(2) .servicio-detalle-icono {
    color: #dc4c5a !important;      /* Alarma: rojo */
    background: #fff0f1 !important;
}

.servicios-detalle-grid .servicio-detalle-card:nth-child(3) .servicio-detalle-icono {
    color: #7357d8 !important;      /* Acceso: morado */
    background: #f1edff !important;
}

.servicios-detalle-grid .servicio-detalle-card:nth-child(4) .servicio-detalle-icono {
    color: #118c84 !important;      /* Monitoreo: turquesa */
    background: #e8f8f5 !important;
}

.servicios-detalle-grid .servicio-detalle-card:nth-child(5) .servicio-detalle-icono {
    color: #d99c00 !important;      /* Rayo: amarillo */
    background: #fff7d9 !important;
}

.servicios-detalle-grid .servicio-detalle-card:nth-child(6) .servicio-detalle-icono {
    color: #e46f27 !important;      /* Herramientas: naranja */
    background: #fff0e7 !important;
}

.servicios-detalle-grid .servicio-detalle-card:hover .servicio-detalle-icono {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 9px 20px rgba(26, 48, 79, 0.10) !important;
}


/* Colores de iconos similares en las demás tarjetas claras. */

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-video, .fa-camera, .fa-house, .fa-building) {
    color: #1976d2 !important;
}

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-bell, .fa-triangle-exclamation) {
    color: #dc4c5a !important;
}

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-fingerprint, .fa-key, .fa-school, .fa-graduation-cap) {
    color: #7357d8 !important;
}

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-eye, .fa-tower-broadcast) {
    color: #118c84 !important;
}

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-bolt, .fa-plug, .fa-gas-pump) {
    color: #d99c00 !important;
}

:is(
    .servicio-icono,
    .servicio-detalle-icono,
    .sector-icono,
    .solucion-rubro-icono,
    .casa-solucion-icono,
    .comercio-solucion-icono,
    .institucion-solucion-icono,
    .grifo-solucion-icono
) :is(.fa-screwdriver-wrench, .fa-wrench, .fa-store) {
    color: #e46f27 !important;
}


/* ==========================================================
   BOTÓN FLOTANTE DE WHATSAPP
========================================================== */

.whatsapp {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 9999 !important;
    width: 56px !important;
    height: 56px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: #25d366 !important;
    box-shadow: 0 11px 27px rgba(37, 211, 102, 0.34) !important;
    text-decoration: none !important;
}

.whatsapp i,
.whatsapp i.fa-whatsapp {
    display: inline-block !important;
    color: #ffffff !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 29px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.whatsapp i.fa-whatsapp::before {
    content: "\f232" !important;
}

.whatsapp:hover {
    background: #1ebe5d !important;
    transform: translateY(-4px) scale(1.05) !important;
}

@media (max-width: 520px) {
    .whatsapp {
        right: 16px !important;
        bottom: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
}
/* ==========================================================
   COLORES: HOGARES, COMERCIOS, EMPRESAS Y ALMACENES
========================================================== */

/* Hogares: verde */
.sectores-grid .sector-card:nth-child(1) > i {
    color: #168a54 !important;
    background: #ebfaf3 !important;
}

/* Comercios: naranja */
.sectores-grid .sector-card:nth-child(2) > i {
    color: #d17b14 !important;
    background: #fff7e9 !important;
}

/* Empresas: azul */
.sectores-grid .sector-card:nth-child(3) > i {
    color: #1976d2 !important;
    background: #eaf3ff !important;
}

/* Almacenes: rojo */
.sectores-grid .sector-card:nth-child(4) > i {
    color: #dc4c5a !important;
    background: #fff0f1 !important;
}

/* Efecto suave al pasar el mouse. */
.sectores-grid .sector-card:hover > i {
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow: 0 9px 20px rgba(26, 48, 79, 0.10) !important;
}
/* ==========================================================
   FOOTER: TRES COLORES CONECTADOS Y EN MOVIMIENTO
   Azul rey izquierda, morado centro y rojo derecha.
========================================================== */

.footer {
    background: linear-gradient(
        105deg,
        #dce9ff 0%,
        #dce9ff 28%,
        #e5dcff 43%,
        #f0dcff 57%,
        #ffe0e8 74%,
        #ffe0e8 100%
    ) !important;

    background-repeat: no-repeat !important;
    background-size: 165% 100% !important;
    background-position: 0% 50% !important;

    /* Movimiento lento y profesional. */
    animation: footer-degrade-conectado 16s ease-in-out infinite alternate;
}

@keyframes footer-degrade-conectado {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* El texto y los íconos siempre quedan encima del fondo. */
.footer .footer-grid,
.footer .footer-bottom {
    position: relative;
    z-index: 1;
}

/* Para equipos que desactivan animaciones. */
@media (prefers-reduced-motion: reduce) {
    .footer {
        animation: none;
        background-position: 50% 50% !important;
    }
}
/* ==========================================================
   FOOTER CLARO: AZUL REY + MORADO + ROJO, CON MOVIMIENTO
========================================================== */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top-color: #c7d6f2 !important;
    background: linear-gradient(
        100deg,
        #e7f0ff 0%,
        #d8e7ff 27%,
        #e4dcff 41%,
        #f1e5ff 58%,
        #ffdfe7 74%,
        #fff0f3 100%
    ) !important;
    background-size: 100% 100% !important;
    animation: none !important;
}

/* Movimiento suave de los tres colores. */
.footer::before {
    content: "";
    position: absolute;
    inset: -34px -80px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 43% 120% at 12% 50%, rgba(47, 110, 229, 0.20) 0%, rgba(47, 110, 229, 0.11) 54%, transparent 75%),
        radial-gradient(ellipse 43% 120% at 50% 50%, rgba(138, 80, 218, 0.19) 0%, rgba(138, 80, 218, 0.10) 54%, transparent 75%),
        radial-gradient(ellipse 43% 120% at 88% 50%, rgba(224, 75, 101, 0.18) 0%, rgba(224, 75, 101, 0.09) 54%, transparent 75%);
    filter: saturate(1.08);
    transform: translate3d(-1.5%, 0, 0) scale(1.03);
    animation: footer-ondas-color 14s ease-in-out infinite alternate;
}

@keyframes footer-ondas-color {
    0% {
        transform: translate3d(-2.5%, -1%, 0) scale(1.03);
        filter: saturate(1.03) brightness(1.02);
    }

    50% {
        transform: translate3d(0%, 1%, 0) scale(1.07);
        filter: saturate(1.13) brightness(1.04);
    }

    100% {
        transform: translate3d(2.5%, -1%, 0) scale(1.04);
        filter: saturate(1.07) brightness(1.03);
    }
}

/* Textos oscuros y legibles. */
.footer .footer-columna h3,
.footer .footer-info > p,
.footer .footer-columna a,
.footer .footer-columna p,
.footer .footer-bottom p,
.footer-bottom p {
    color: #1f2d3d !important;
}

/* Parte inferior integrada al degradado. */
.footer .footer-bottom,
.footer-bottom {
    background: rgba(255, 255, 255, 0.18) !important;
    border-top-color: rgba(35, 59, 102, 0.14) !important;
}

/* ==========================================================
   REDES SOCIALES: COLORES ORIGINALES
========================================================== */
.footer .redes a {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(34, 57, 100, 0.14) !important;
}

/* Facebook */
.footer .redes a:nth-child(1) i,
.footer .redes a:nth-child(1) i::before {
    color: #1877f2 !important;
}

/* Instagram: amarillo, rosa y morado */
.footer .redes a:nth-child(2) i,
.footer .redes a:nth-child(2) i::before {
    color: transparent !important;
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* TikTok: negro, celeste y rojo */
.footer .redes a:nth-child(3) i,
.footer .redes a:nth-child(3) i::before {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: 1px 1px 0 #fe2c55, -1px -1px 0 #25f4ee !important;
}

/* LinkedIn */
.footer .redes a:nth-child(4) i,
.footer .redes a:nth-child(4) i::before {
    color: #0a66c2 !important;
}

/* Fondos al pasar el mouse */
.footer .redes a:nth-child(1):hover { background: #eaf3ff !important; border-color: #1877f2 !important; }
.footer .redes a:nth-child(2):hover { background: #fff0f8 !important; border-color: #ee2a7b !important; }
.footer .redes a:nth-child(3):hover { background: #eefcff !important; border-color: #25f4ee !important; }
.footer .redes a:nth-child(4):hover { background: #eaf4ff !important; border-color: #0a66c2 !important; }

/* Iconos de contacto */
.footer .fa-location-dot { color: #e5484d !important; }
.footer .fa-phone { color: #20a464 !important; }
.footer .fa-envelope { color: #1a73e8 !important; }
.footer .fa-clock { color: #e5a000 !important; }

@media (prefers-reduced-motion: reduce) {
    .footer::before {
        animation: none !important;
        transform: none !important;
    }
}
/* ==========================================================
   HEADER: BANNER VISIBLE Y ENFOCADO
========================================================== */
.header,
.header.scrolled,
#header {
    isolation: isolate;
    border-bottom: 1px solid rgba(46, 73, 122, 0.3) !important;

    /* Capa suave (solo 30% de oscuridad) para que los detalles brillen y las letras blancas sigan legibles */
    background-image: linear-gradient(rgba(10, 18, 36, 0.35), rgba(10, 18, 36, 0.35)), url("../img/banner-header-seguridad.jpeg") !important;
    background-size: cover !important;
    
    /* 'center 60%' enfoca los edificios iluminados y el resplandor */
    background-position: center 60% !important;
    background-repeat: no-repeat !important;

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
}

/* Movimiento suave del fondo superior */
.header::before,
#header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(47, 110, 229, 0.13) 0%,
        rgba(117, 78, 211, 0.10) 48%,
        rgba(224, 75, 101, 0.12) 100%
    );
    background-size: 170% 100%;
    animation: header-fondo-conectado 14s ease-in-out infinite alternate;
}

/* El contenido queda encima del fondo */
.header .navbar,
#header .navbar {
    position: relative;
    z-index: 1;
}

@keyframes header-fondo-conectado {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* =========================================================
   TEXTOS DEL HEADER SOBRE FONDO AZUL
========================================================= */

/* Logo */
.header .logo-texto strong,
#header .logo-texto strong {
    color: #ffffff !important;
}

.header .logo-texto span,
#header .logo-texto span {
    color: rgba(255, 255, 255, 0.72) !important;
}


/* Opciones principales del menú */
.header .menu > a,
.header .menu-sectores > summary,
#header .menu > a,
#header .menu-sectores > summary {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* Inicio activo y hover */
.header .menu > a:hover,
.header .menu > a.activo,
.header .menu-sectores > summary:hover,
.header .menu-sectores.activo > summary,
.header .menu-sectores[open] > summary,
#header .menu > a:hover,
#header .menu > a.activo,
#header .menu-sectores > summary:hover,
#header .menu-sectores.activo > summary,
#header .menu-sectores[open] > summary {
    color: #6fa3ff !important;
}


/* Línea debajo de Inicio */
.header .menu > a::after,
.header .menu-sectores > summary::after,
#header .menu > a::after,
#header .menu-sectores > summary::after {
    background: #6fa3ff !important;
}
/* Opción activa y hover azul rey */
.header .menu > a:hover,
.header .menu > a.activo,
.header .menu-sectores > summary:hover,
.header .menu-sectores.activo > summary,
.header .menu-sectores[open] > summary,
#header .menu > a:hover,
#header .menu > a.activo,
#header .menu-sectores > summary:hover,
#header .menu-sectores.activo > summary,
#header .menu-sectores[open] > summary {
    color: #153faf !important;
}

.header .menu > a::after,
.header .menu-sectores > summary::after,
#header .menu > a::after,
#header .menu-sectores > summary::after {
    background: #153faf !important;
}

/* Menú desplegable de Sectores */
.header .menu-sectores .submenu-sectores,
#header .menu-sectores .submenu-sectores {
    border-color: #cbd9f2 !important;
    background: linear-gradient(
        135deg,
        #f6f9ff 0%,
        #f3ecff 52%,
        #fff4f6 100%
    ) !important;
    box-shadow: 0 14px 30px rgba(42, 61, 101, 0.15) !important;
}

.header .menu-sectores .submenu-sectores::before,
#header .menu-sectores .submenu-sectores::before {
    background: #f6f9ff !important;
}

.header .submenu-sectores-cabecera strong,
.header .submenu-sectores > a > div:last-child strong,
.header .submenu-sectores > a > div:last-child span,
#header .submenu-sectores-cabecera strong,
#header .submenu-sectores > a > div:last-child strong,
#header .submenu-sectores > a > div:last-child span {
    color: #263546 !important;
}

/* También se ve bien en celular */
@media (max-width: 1000px) {
    .header .menu,
    #header .menu {
        border-color: #cbd9f2 !important;
        background: linear-gradient(
            145deg,
            #edf4ff 0%,
            #f0e7ff 52%,
            #fff0f3 100%
        ) !important;
    }

    .header .menu > a,
    .header .menu-sectores > summary,
    #header .menu > a,
    #header .menu-sectores > summary {
        color: #263546 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header::before,
    #header::before {
        animation: none !important;
    }
}
/* ==========================================================
   CORRECCIÓN: AZUL REY SUAVE
   Mantiene tarjetas, líneas, bordes y botones.
========================================================== */
:root {
    --fondo-azul-suave: #eef4ff;
    --fondo-azul-suave-2: #e6efff;
    --texto-sobre-azul-suave: #263546;
    --azul-destacado-suave: #153faf;
}

html,
body {
    background: var(--fondo-azul-suave) !important;
}

/* Fondo suave y profesional */
body {
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(255, 255, 255, 0.78) 0%,
            transparent 27%
        ),
        linear-gradient(
            150deg,
            #f7faff 0%,
            var(--fondo-azul-suave) 48%,
            var(--fondo-azul-suave-2) 100%
        ) fixed !important;
}

/* Solo cambia el fondo de cada sección */
body > main,
body > section:not(.footer),
body > main > section:not(.footer) {
    background: var(--fondo-azul-suave) !important;
    background-image: none !important;
}
/* Fondo del hero principal */
body > section.hero {
    min-height: 790px !important;

    background-image: url("../img/hero-seguridad.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Títulos oscuros */
body > section:not(.footer) h1,
body > main > section:not(.footer) h1,
body > section:not(.footer) .encabezado-seccion h2,
body > main > section:not(.footer) .encabezado-seccion h2,
body > section:not(.footer) .planes-intro h2,
body > section:not(.footer) .nosotros-contenido h2,
body > section:not(.footer) .quienes-contenido h2,
body > section:not(.footer) .valores-contenido h2,
body > section:not(.footer) .solucion-integral-contenido h2,
body > section:not(.footer) .problemas-rubro-contenido h2,
body > section:not(.footer) .rubro-introduccion h2 {
    color: var(--texto-sobre-azul-suave) !important;
}

/* Palabras destacadas en azul rey */
body > section:not(.footer) h1 span,
body > main > section:not(.footer) h1 span,
body > section:not(.footer) .encabezado-seccion h2 span,
body > main > section:not(.footer) .encabezado-seccion h2 span,
body > section:not(.footer) .planes-intro h2 span,
body > section:not(.footer) .nosotros-contenido h2 span,
body > section:not(.footer) .quienes-contenido h2 span,
body > section:not(.footer) .valores-contenido h2 span,
body > section:not(.footer) .solucion-integral-contenido h2 span,
body > section:not(.footer) .problemas-rubro-contenido h2 span,
body > section:not(.footer) .rubro-introduccion h2 span {
    color: var(--azul-destacado-suave) !important;
}

/* Textos principales */
body > section:not(.footer) .encabezado-seccion > p,
body > main > section:not(.footer) .encabezado-seccion > p,
body > section:not(.footer) .planes-intro > p,
body > section:not(.footer) .nosotros-contenido > p,
body > section:not(.footer) .quienes-contenido > p,
body > section:not(.footer) .valores-contenido > p,
body > section:not(.footer) .solucion-integral-contenido > p,
body > section:not(.footer) .problemas-rubro-contenido > p,
body > section:not(.footer) .rubro-introduccion > p,
.hero-texto > p,
.pagina-hero p,
.rubro-hero p,
.casa-hero p,
.comercio-hero p,
.institucion-hero p,
.grifos-hero p {
    color: #40536b !important;
}

/* Breadcrumbs y etiquetas */
body > section:not(.footer) .breadcrumb,
body > section:not(.footer) .breadcrumb a,
body > main > section:not(.footer) .breadcrumb,
body > main > section:not(.footer) .breadcrumb a,
.hero-confianza,
.rubro-confianza,
.casa-hero-confianza,
.comercio-confianza,
.institucion-confianza,
.grifos-confianza {
    color: #40536b !important;
}

body > section:not(.footer) .etiqueta,
body > section:not(.footer) .etiqueta-seccion,
body > main > section:not(.footer) .etiqueta,
body > main > section:not(.footer) .etiqueta-seccion {
    color: var(--azul-destacado-suave) !important;
}

/* Cotizaciones y CTA siguen como tarjetas claras */
.cta-contenido,
.cta-rubro-contenido {
    border: 1px solid #ccdafa !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 24px rgba(40, 68, 126, 0.09) !important;
}

.cta-contenido h2,
.cta-contenido span,
.cta-rubro-contenido h2,
.cta-rubro-contenido span {
    color: var(--texto-sobre-azul-suave) !important;
}
/* ==========================================================
   AJUSTE GLOBAL DEL FONDO Y CTA FINAL
========================================================== */
:root {
    --fondo-azul-suave: #e4efff;
    --fondo-azul-suave-2: #d9e8ff;
}

body {
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(255, 255, 255, 0.60) 0%,
            transparent 27%
        ),
        linear-gradient(
            150deg,
            #eef5ff 0%,
            var(--fondo-azul-suave) 48%,
            var(--fondo-azul-suave-2) 100%
        ) fixed !important;
}

/* ==========================================================
   BLOQUE FINAL: COTIZACIÓN DE TODAS LAS PÁGINAS
========================================================== */
.cta,
.cta-rubro {
    padding: 70px 0 !important;
    background: var(--fondo-azul-suave) !important;
}

.cta .cta-contenido,
.cta-rubro .cta-rubro-contenido {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 32px !important;
    min-height: 154px;
    padding: 30px 36px !important;
    border: 1px solid #c5d7f5 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 28px rgba(35, 65, 123, 0.10) !important;
}

.cta .cta-contenido > div:first-child,
.cta-rubro .cta-rubro-contenido > div:first-child {
    min-width: 0;
}

.cta .cta-contenido h2,
.cta-rubro .cta-rubro-contenido h2 {
    max-width: 760px !important;
    margin: 5px 0 0 !important;
    color: #263546 !important;
    font-size: clamp(29px, 3.1vw, 44px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.028em !important;
}

.cta .cta-contenido span,
.cta-rubro .cta-rubro-contenido span {
    display: block;
    color: #153faf !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    opacity: 1 !important;
}

/* Botón principal */
.cta .btn-blanco,
.cta-rubro .btn-cta-rubro {
    flex-shrink: 0;
    min-height: 50px !important;
    padding: 13px 21px !important;
    border: 1px solid #153faf !important;
    border-radius: 9px !important;
    background: #153faf !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(21, 63, 175, 0.18) !important;
}

.cta .btn-blanco:hover,
.cta-rubro .btn-cta-rubro:hover {
    border-color: #0d318d !important;
    background: #0d318d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Segundo botón de las categorías */
.cta-rubro .btn-cta-rubro-secundario {
    min-height: 50px !important;
    padding: 13px 21px !important;
    border: 1px solid #b9cbed !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #153faf !important;
}

.cta-rubro .cta-rubro-botones {
    flex-shrink: 0;
    margin-top: 0 !important;
}

/* Celular */
@media (max-width: 760px) {
    .cta,
    .cta-rubro {
        padding: 50px 0 !important;
    }

    .cta .cta-contenido,
    .cta-rubro .cta-rubro-contenido {
        grid-template-columns: 1fr !important;
        min-height: 0;
        gap: 22px !important;
        padding: 27px 24px !important;
    }

    .cta .cta-contenido h2,
    .cta-rubro .cta-rubro-contenido h2 {
        font-size: clamp(27px, 8vw, 37px) !important;
    }

    .cta .btn-blanco,
    .cta-rubro .cta-rubro-botones,
    .cta-rubro .btn-cta-rubro,
    .cta-rubro .btn-cta-rubro-secundario {
        width: 100%;
    }

    .cta-rubro .cta-rubro-botones {
        display: grid;
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   BOTONES PRINCIPALES UNIFICADOS
========================================================== */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
) {
    border-color: #1b49bc !important;
    background: #1b49bc !important;
    color: #263546 !important;
    box-shadow: 0 8px 18px rgba(21, 63, 175, 0.18) !important;
    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
) i {
    color: currentColor !important;
    transition: color 0.22s ease, transform 0.22s ease !important;
}

/* Hover: sube y el texto se vuelve blanco */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
):hover {
    border-color: #0d318d !important;
    background: #0d318d !important;
    color: #ffffff !important;
    box-shadow: 0 13px 24px rgba(13, 49, 141, 0.28) !important;
    transform: translateY(-3px) !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
):hover i {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
):active {
    transform: translateY(0) !important;
}
/* ==========================================================
   TÍTULOS: SOLO CATEGORÍAS DE SECTORES
========================================================== */
:is(
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero
) h1 {
    max-width: 900px !important;
    margin: 14px 0 22px !important;
    color: #263546 !important;
    font-size: clamp(52px, 5vw, 72px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.048em !important;
    line-height: 1.08 !important;
}

:is(
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero
) h1 span {
    color: #263546 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Etiqueta superior azul */
:is(
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero
) .etiqueta-seccion {
    border-color: #c4d6fb !important;
    background: #eaf1ff !important;
    color: #153faf !important;
}

/* ==========================================================
   BOTONES PRINCIPALES: ROJO A AZUL REY
========================================================== */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion
) {
    border-color: #1b49bc !important;
    background: #1b49bc !important;
    color: #263546 !important;
    box-shadow: 0 8px 18px rgba(21, 63, 175, 0.18) !important;
    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion
) i {
    color: currentColor !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion
):hover {
    border-color: #0d318d !important;
    background: #0d318d !important;
    color: #ffffff !important;
    box-shadow: 0 13px 24px rgba(13, 49, 141, 0.28) !important;
    transform: translateY(-3px) !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion
):hover i {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}
/* ==========================================================
   AJUSTE FINAL: TÍTULOS DE SECTORES + BOTONES AZUL REY

   - No modifica el título de Inicio.
   - Solo cambia Casas, Condominios, Tiendas, Universidades
     y Grifos para que tengan el mismo formato de Inicio.
========================================================== */

/* TÍTULOS DE LAS CATEGORÍAS DE SECTORES */
:is(
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero
) h1 {
    color: #263546 !important;
    font-size: clamp(52px, 5vw, 72px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.048em !important;
    line-height: 1.08 !important;
}

/* Elimina degradados o colores antiguos dentro del título */
:is(
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero
) h1 span {
    color: #263546 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}


/* BOTONES ROJOS: AHORA AZUL REY */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header
) {
    background: #1b49bc !important;
    border-color: #1b49bc !important;
    color: #263546 !important;
    box-shadow: 0 8px 18px rgba(27, 73, 188, 0.18) !important;
    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* BOTONES DORADOS: AHORA AZUL REY */
:is(.btn-secundario, .btn-cta-rubro-secundario) {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: #9db7ef !important;
    color: #153faf !important;
    box-shadow: 0 7px 16px rgba(21, 63, 175, 0.08) !important;
    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* ÍCONOS DEL MISMO COLOR DEL BOTÓN */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header,
    .btn-secundario,
    .btn-cta-rubro-secundario
) i {
    color: currentColor !important;
    transition: color 0.22s ease, transform 0.22s ease !important;
}


/* EFECTO AL PASAR EL MOUSE */
:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header,
    .btn-secundario,
    .btn-cta-rubro-secundario
):hover {
    background: #0d318d !important;
    border-color: #0d318d !important;
    color: #ffffff !important;
    box-shadow: 0 13px 24px rgba(13, 49, 141, 0.28) !important;
    transform: translateY(-3px) !important;
}

:is(
    .btn-principal,
    .btn-primario,
    .btn-casa-cotizar,
    .btn-comercio-cotizar,
    .btn-institucion-cotizar,
    .btn-grifo-cotizar,
    .btn-cta-rubro,
    .btn-blanco,
    .btn-enviar-cotizacion,
    .btn-header,
    .btn-secundario,
    .btn-cta-rubro-secundario
):hover i {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}


/* AJUSTE PARA CELULAR */
@media (max-width: 760px) {
    :is(
        .rubro-hero,
        .casa-hero,
        .comercio-hero,
        .institucion-hero,
        .grifos-hero
    ) h1 {
        font-size: clamp(38px, 10vw, 52px) !important;
        line-height: 1.1 !important;
    }
}
/* =========================================================
   TEXTO DEL HERO PRINCIPAL SOBRE IMAGEN
========================================================= */

body > section.hero .hero-texto h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.30);
}

body > section.hero .hero-texto h1 span {
    color: #7da9ff !important;
}

body > section.hero .hero-texto > p {
    color: rgba(255, 255, 255, 0.90) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body > section.hero .hero-confianza,
body > section.hero .hero-confianza div {
    color: #ffffff !important;
}

body > section.hero .hero-confianza i {
    color: #ff725f !important;
}

/* Etiqueta Seguridad inteligente 24/7 */
body > section.hero .etiqueta {
    color: #ffffff !important;
    background: rgba(11, 44, 105, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(5px);
}

body > section.hero .etiqueta i {
    color: #ffffff !important;
}
/* =========================================================
   CORRECCIÓN FINAL - MENÚ HEADER SIEMPRE BLANCO
========================================================= */

/* Logo */
.header .logo-texto strong,
.header .logo-texto span,
#header .logo-texto strong,
#header .logo-texto span {
    color: #ffffff !important;
}


/* Menú normal */
.header .menu > a,
.header .menu > a:link,
.header .menu > a:visited,
.header .menu-sectores > summary,
#header .menu > a,
#header .menu > a:link,
#header .menu > a:visited,
#header .menu-sectores > summary {
    color: #ffffff !important;
}


/* Al pasar el mouse */
.header .menu > a:hover,
.header .menu-sectores > summary:hover,
#header .menu > a:hover,
#header .menu-sectores > summary:hover {
    color: #ffffff !important;
}


/* Al hacer clic */
.header .menu > a:active,
.header .menu-sectores > summary:active,
#header .menu > a:active,
#header .menu-sectores > summary:active {
    color: #ffffff !important;
}


/* Página seleccionada */
.header .menu > a.activo,
.header .menu-sectores.activo > summary,
.header .menu-sectores[open] > summary,
#header .menu > a.activo,
#header .menu-sectores.activo > summary,
#header .menu-sectores[open] > summary {
    color: #ffffff !important;
}


/* Cuando queda seleccionado con clic o teclado */
.header .menu > a:focus,
.header .menu > a:focus-visible,
.header .menu-sectores > summary:focus,
.header .menu-sectores > summary:focus-visible {
    color: #ffffff !important;
}


/* Línea de la opción activa */
.header .menu > a::after,
.header .menu-sectores > summary::after {
    background: #ffffff !important;
}
/* =========================================================
   CORRECCIÓN DEFINITIVA - SECTORES BLANCO
========================================================= */

.header details.menu-sectores > summary,
.header details.menu-sectores > summary:hover,
.header details.menu-sectores > summary:active,
.header details.menu-sectores > summary:focus,
.header details.menu-sectores > summary:focus-visible,
.header details.menu-sectores[open] > summary,
.header details.menu-sectores.activo > summary,
#header details.menu-sectores > summary,
#header details.menu-sectores > summary:hover,
#header details.menu-sectores > summary:active,
#header details.menu-sectores > summary:focus,
#header details.menu-sectores > summary:focus-visible,
#header details.menu-sectores[open] > summary,
#header details.menu-sectores.activo > summary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Flechita de Sectores */
.header details.menu-sectores > summary i,
#header details.menu-sectores > summary i {
    color: #ffffff !important;
}

/* Línea inferior */
.header details.menu-sectores > summary::after,
#header details.menu-sectores > summary::after {
    background: #ffffff !important;
}
/* =========================================================
   COLORES PRINCIPALES - AZUL REY
========================================================= */

/* Cuadro IP del logo */
.header .logo-icono,
#header .logo-icono {
    background: #1f5eff !important;
    color: #ffffff !important;
}


/* Botón principal */
.hero .btn-principal {
    background: #1f5eff !important;
    border-color: #1f5eff !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(31, 94, 255, 0.25) !important;
}


/* Hover botón principal */
.hero .btn-principal:hover {
    background: #153faf !important;
    border-color: #153faf !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* Ícono/flecha del botón */
.hero .btn-principal i {
    color: #ffffff !important;
}


/* Checks de Atención especializada */
.hero .hero-confianza i {
    color: #6fa3ff !important;
}


/* Palabra destacada */
.hero h1 span {
    color: #7da9ff !important;
}
/* =========================================================
   TODOS LOS CUADROS "IP" EN AZUL REY
========================================================= */

.logo-icono,
.header .logo-icono,
.footer .logo-icono,
.logo-footer .logo-icono,
.sectores-footer-icono {
    background: #153faf !important;
    border-color: #153faf !important;
    color: #ffffff !important;

    box-shadow: 0 8px 20px rgba(21, 63, 175, 0.22) !important;
}


/* Asegura que las letras IP sean blancas */
.logo-icono *,
.sectores-footer-icono strong {
    color: #ffffff !important;
}
/* =========================================================
   IMAGEN DE FONDO - PÁGINA SERVICIOS
========================================================= */

body > section.pagina-hero-servicios,
.pagina-hero-servicios {
    min-height: 560px !important;

    background-image: url("/SEGURIDAD_WEB/assets/img/banner-servicios-seguridad.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* Capa suave para que el texto se lea mejor */
.pagina-hero-servicios .pagina-hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(7, 24, 65, 0.78) 0%,
        rgba(12, 43, 105, 0.55) 42%,
        rgba(12, 43, 105, 0.18) 75%,
        rgba(12, 43, 105, 0.06) 100%
    ) !important;
    display: block !important;
}
/* =========================================================
   SERVICIOS - MISMO TITULO QUE INICIO
========================================================= */

/* Título blanco */
html body > section.pagina-hero.pagina-hero-servicios h1 {
    color: #ffffff !important;

    font-size: clamp(54px, 5.5vw, 78px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -2px !important;

    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.30) !important;
}


/* Segunda parte azul claro */
html body > section.pagina-hero.pagina-hero-servicios h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* Descripción blanca */
html body > section.pagina-hero.pagina-hero-servicios
.pagina-hero-contenido > div:first-child > p {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.75 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}


/* Breadcrumb Inicio > Servicios */
html body > section.pagina-hero.pagina-hero-servicios .breadcrumb,
html body > section.pagina-hero.pagina-hero-servicios .breadcrumb a {
    color: rgba(255, 255, 255, 0.82) !important;
}


/* Etiqueta SOLUCIONES PROFESIONALES */
html body > section.pagina-hero.pagina-hero-servicios .etiqueta {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(15, 50, 120, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS - MISMA ESTRUCTURA QUE INICIO
========================================================= */

.rubro-hero-edificios {
    min-height: 650px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 22, 52, 0.76) 0%,
            rgba(8, 22, 52, 0.54) 38%,
            rgba(8, 22, 52, 0.18) 68%,
            rgba(8, 22, 52, 0.03) 100%
        ),
        url("/assets/img/banner-edificios-condominios.png") !important;

    background-size: cover !important;
    background-position: center 48% !important;
    background-repeat: no-repeat !important;
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS - HERO PROFESIONAL
   MISMA LÓGICA VISUAL QUE INICIO
========================================================= */

html body .rubro-hero-edificios {
    position: relative !important;

    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 20, 48, 0.72) 0%,
            rgba(7, 20, 48, 0.50) 38%,
            rgba(7, 20, 48, 0.16) 68%,
            rgba(7, 20, 48, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-edificios-condominios.png") !important;

    background-size: cover !important;
    background-position: center 52% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}


/* Quitamos los fondos artificiales anteriores */
html body .rubro-hero-edificios::before,
html body .rubro-hero-edificios::after {
    display: none !important;
}


/* Contenido */
html body .rubro-hero-edificios .rubro-hero-grid {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 105px !important;
    padding-bottom: 70px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TÍTULO */
html body .rubro-hero-edificios h1 {
    max-width: 880px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.03 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 24px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* Parte azul del título */
html body .rubro-hero-edificios h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* Descripción */
html body .rubro-hero-edificios .rubro-hero-contenido > p {
    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    margin-top: 0 !important;
}


/* Etiqueta superior */
html body .rubro-hero-edificios .etiqueta-seccion {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(31, 94, 255, 0.18) !important;
    border: 1px solid rgba(125, 169, 255, 0.50) !important;

    border-radius: 8px !important;
}


/* Breadcrumb */
html body .rubro-hero-edificios .breadcrumb,
html body .rubro-hero-edificios .breadcrumb a,
html body .rubro-hero-edificios .breadcrumb span {
    color: rgba(255, 255, 255, 0.82) !important;
}
/* =========================================================
   SERVICIOS - HERO PROFESIONAL
   MISMA ESTRUCTURA VISUAL QUE INICIO
========================================================= */

html body .pagina-hero-servicios {
    position: relative !important;

    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 20, 48, 0.74) 0%,
            rgba(7, 20, 48, 0.52) 38%,
            rgba(7, 20, 48, 0.16) 68%,
            rgba(7, 20, 48, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-servicios-seguridad.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}


/* Quitamos decoraciones que puedan tapar la foto */
html body .pagina-hero-servicios::before,
html body .pagina-hero-servicios::after {
    display: none !important;
}


/* Contenido */
html body .pagina-hero-servicios .pagina-hero-contenido {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 105px !important;
    padding-bottom: 70px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TÍTULO */
html body .pagina-hero-servicios h1 {
    max-width: 900px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.03 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 24px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* Parte azul claro */
html body .pagina-hero-servicios h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* Descripción */
html body .pagina-hero-servicios
.pagina-hero-contenido > div:first-child > p {

    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    margin-top: 0 !important;
}


/* Breadcrumb */
html body .pagina-hero-servicios .breadcrumb,
html body .pagina-hero-servicios .breadcrumb a,
html body .pagina-hero-servicios .breadcrumb span {

    color: rgba(255, 255, 255, 0.84) !important;
}


/* Etiqueta IP SOLUCIONES PROFESIONALES */
html body .pagina-hero-servicios .etiqueta-seccion {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(31, 94, 255, 0.18) !important;
    border: 1px solid rgba(125, 169, 255, 0.50) !important;

    border-radius: 8px !important;
}


/* Botón principal azul rey */
html body .pagina-hero-servicios .btn-principal {
    background: #153faf !important;
    border-color: #153faf !important;
    color: #ffffff !important;
}

html body .pagina-hero-servicios .btn-principal:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;
}
/* =========================================================
   ETIQUETAS HERO - MISMO DISEÑO EN TODA LA WEB
========================================================= */

html body .hero .etiqueta,
html body .pagina-hero .etiqueta-seccion,
html body .rubro-hero .etiqueta-seccion,
html body .rubro-hero-edificios .etiqueta-seccion,
html body .casa-hero .etiqueta-seccion,
html body .comercio-hero .etiqueta-seccion,
html body .institucion-hero .etiqueta-seccion,
html body .grifos-hero .etiqueta-seccion {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    width: fit-content !important;
    max-width: 100% !important;

    padding: 9px 16px !important;

    /* Igual a tu referencia */
    background: rgba(15, 47, 108, 0.46) !important;

    border: 1px solid rgba(255, 255, 255, 0.38) !important;

    border-radius: 999px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    letter-spacing: 0.25px !important;

    text-transform: uppercase !important;

    box-shadow: none !important;

    backdrop-filter: blur(3px) !important;

    white-space: nowrap !important;
}


/* Íconos / IP dentro de las etiquetas */
html body .hero .etiqueta i,
html body .pagina-hero .etiqueta-seccion i,
html body .rubro-hero .etiqueta-seccion i,
html body .rubro-hero-edificios .etiqueta-seccion i,
html body .casa-hero .etiqueta-seccion i,
html body .comercio-hero .etiqueta-seccion i,
html body .institucion-hero .etiqueta-seccion i,
html body .grifos-hero .etiqueta-seccion i,
html body .hero .etiqueta strong,
html body .pagina-hero .etiqueta-seccion strong,
html body .rubro-hero .etiqueta-seccion strong {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-weight: 900 !important;
}
/* =========================================================
   CASAS - FONDO PRINCIPAL
   MISMA ESTRUCTURA VISUAL QUE LOS OTROS HERO
========================================================= */

html body > section.casa-hero,
html body > main > section.casa-hero {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 25, 32, 0.70) 0%,
            rgba(20, 25, 32, 0.46) 38%,
            rgba(20, 25, 32, 0.12) 68%,
            rgba(20, 25, 32, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-casas.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   CASAS - CONTENIDO HERO PROFESIONAL
========================================================= */

/* CONTENIDO */
html body .casa-hero .casa-hero-grid {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 105px !important;
    padding-bottom: 70px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TITULO PRINCIPAL */
html body .casa-hero h1 {
    max-width: 900px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 24px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* PARTE AZUL DEL TITULO */
html body .casa-hero h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* DESCRIPCION */
html body .casa-hero .casa-hero-contenido > p {
    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}


/* BREADCRUMB */
html body .casa-hero .breadcrumb,
html body .casa-hero .breadcrumb a,
html body .casa-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* BOTON PRINCIPAL */
html body .casa-hero .btn-primario,
html body .casa-hero .btn-principal,
html body .casa-hero .btn-casa-cotizar {
    background: #153faf !important;
    border-color: #153faf !important;
    color: #ffffff !important;
}

html body .casa-hero .btn-primario:hover,
html body .casa-hero .btn-principal:hover,
html body .casa-hero .btn-casa-cotizar:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;
    transform: translateY(-2px) !important;
}


/* CHECKS DE ABAJO */
html body .casa-hero .casa-hero-confianza {
    color: #ffffff !important;
}

html body .casa-hero .casa-hero-confianza i {
    color: #7da9ff !important;
}
/* =========================================================
   CASAS - TEXTOS DE CONFIANZA VISIBLES
========================================================= */

html body .casa-hero .casa-hero-confianza,
html body .casa-hero .casa-hero-confianza span,
html body .casa-hero .casa-hero-confianza div {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Checks azul claro */
html body .casa-hero .casa-hero-confianza i {
    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;
}
/* =========================================================
   TIENDAS Y LOCALES - FONDO PRINCIPAL
========================================================= */

html body > section.comercio-hero,
html body > main > section.comercio-hero {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(24, 24, 24, 0.72) 0%,
            rgba(24, 24, 24, 0.48) 38%,
            rgba(24, 24, 24, 0.14) 68%,
            rgba(24, 24, 24, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-tiendas-locales.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   TIENDAS Y LOCALES - HERO PROFESIONAL
========================================================= */

/* CONTENIDO */
html body .comercio-hero .comercio-hero-grid {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 105px !important;
    padding-bottom: 70px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TITULO */
html body .comercio-hero h1 {
    max-width: 900px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 24px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* PARTE AZUL DEL TITULO */
html body .comercio-hero h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* DESCRIPCION */
html body .comercio-hero .comercio-hero-contenido > p {
    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}


/* BREADCRUMB */
html body .comercio-hero .breadcrumb,
html body .comercio-hero .breadcrumb a,
html body .comercio-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* BOTON PRINCIPAL AZUL REY */
html body .comercio-hero .btn-primario,
html body .comercio-hero .btn-principal,
html body .comercio-hero .btn-comercio-cotizar {
    background: #153faf !important;
    border-color: #153faf !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .comercio-hero .btn-primario:hover,
html body .comercio-hero .btn-principal:hover,
html body .comercio-hero .btn-comercio-cotizar:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;
    transform: translateY(-2px) !important;
}


/* BOTON SECUNDARIO */
html body .comercio-hero .btn-secundario {
    background: #ffffff !important;
    border-color: #ffffff !important;

    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}


/* TEXTOS INFERIORES */
html body .comercio-hero .comercio-confianza,
html body .comercio-hero .comercio-confianza div,
html body .comercio-hero .comercio-confianza span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* CHECKS */
html body .comercio-hero .comercio-confianza i {
    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;
}
/* =========================================================
   TIENDAS Y LOCALES - SUBIR CONTENIDO DEL HERO
========================================================= */

html body .comercio-hero .comercio-hero-grid {
    padding-top: 70px !important;
    padding-bottom: 65px !important;
}

html body .comercio-hero h1 {
    margin-top: 18px !important;
}
/* =========================================================
   UNIVERSIDADES - FONDO PRINCIPAL
========================================================= */

html body > section.institucion-hero,
html body > main > section.institucion-hero {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(22, 25, 30, 0.70) 0%,
            rgba(22, 25, 30, 0.46) 38%,
            rgba(22, 25, 30, 0.12) 68%,
            rgba(22, 25, 30, 0.02) 100%
        ),
        url("/assets/img/banner-universidades.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   UNIVERSIDADES E INSTITUCIONES - HERO PROFESIONAL
========================================================= */

/* Contenido */
html body .institucion-hero .institucion-hero-grid {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 75px !important;
    padding-bottom: 65px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TÍTULO */
html body .institucion-hero h1 {
    max-width: 900px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 20px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* Segunda parte azul claro */
html body .institucion-hero h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* Descripción */
html body .institucion-hero .institucion-hero-contenido > p {
    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}


/* Breadcrumb */
html body .institucion-hero .breadcrumb,
html body .institucion-hero .breadcrumb a,
html body .institucion-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* BOTÓN PRINCIPAL - AZUL REY */
html body .institucion-hero .btn-primario,
html body .institucion-hero .btn-principal,
html body .institucion-hero .btn-institucion-cotizar {
    background: #153faf !important;
    border-color: #153faf !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .institucion-hero .btn-primario:hover,
html body .institucion-hero .btn-principal:hover,
html body .institucion-hero .btn-institucion-cotizar:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;

    transform: translateY(-2px) !important;
}


/* Botón secundario */
html body .institucion-hero .btn-secundario {
    background: #ffffff !important;
    border-color: #ffffff !important;

    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}


/* Textos inferiores */
html body .institucion-hero .institucion-confianza,
html body .institucion-hero .institucion-confianza div,
html body .institucion-hero .institucion-confianza span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Checks inferiores */
html body .institucion-hero .institucion-confianza i {
    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;
}
/* =========================================================
   GRIFOS Y OTROS RUBROS - FONDO PRINCIPAL
========================================================= */

html body > section.grifos-hero,
html body > main > section.grifos-hero {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(22, 25, 30, 0.72) 0%,
            rgba(22, 25, 30, 0.48) 38%,
            rgba(22, 25, 30, 0.14) 68%,
            rgba(22, 25, 30, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-grifos-rubros.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   GRIFOS Y OTROS RUBROS - HERO PROFESIONAL
========================================================= */

/* CONTENIDO */
html body .grifos-hero .grifos-hero-grid {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 75px !important;
    padding-bottom: 65px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TÍTULO */
html body .grifos-hero h1 {
    max-width: 900px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 20px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.25) !important;
}


/* PARTE AZUL CLARO */
html body .grifos-hero h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* DESCRIPCIÓN */
html body .grifos-hero .grifos-hero-contenido > p {
    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}


/* BREADCRUMB */
html body .grifos-hero .breadcrumb,
html body .grifos-hero .breadcrumb a,
html body .grifos-hero .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* BOTÓN PRINCIPAL AZUL REY */
html body .grifos-hero .btn-primario,
html body .grifos-hero .btn-principal,
html body .grifos-hero .btn-grifo-cotizar {
    background: #153faf !important;
    border-color: #153faf !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .grifos-hero .btn-primario:hover,
html body .grifos-hero .btn-principal:hover,
html body .grifos-hero .btn-grifo-cotizar:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;

    transform: translateY(-2px) !important;
}


/* BOTÓN SECUNDARIO */
html body .grifos-hero .btn-secundario {
    background: #ffffff !important;
    border-color: #ffffff !important;

    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}


/* TEXTOS INFERIORES */
html body .grifos-hero .grifos-confianza,
html body .grifos-hero .grifos-confianza div,
html body .grifos-hero .grifos-confianza span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* CHECKS */
html body .grifos-hero .grifos-confianza i {
    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;
}
/* =========================================================
   NOSOTROS - FONDO PRINCIPAL
========================================================= */

html body > section.pagina-hero-nosotros,
html body > main > section.pagina-hero-nosotros {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(18, 22, 28, 0.72) 0%,
            rgba(18, 22, 28, 0.48) 38%,
            rgba(18, 22, 28, 0.14) 68%,
            rgba(18, 22, 28, 0.02) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-nosotros.png") !important;

    background-size: cover !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   NOSOTROS - HERO PROFESIONAL
========================================================= */

/* Contenido */
html body .pagina-hero-nosotros .pagina-hero-contenido {
    grid-template-columns: minmax(0, 900px) !important;

    padding-top: 75px !important;
    padding-bottom: 65px !important;

    position: relative !important;
    z-index: 2 !important;
}


/* TÍTULO */
html body .pagina-hero-nosotros h1 {
    max-width: 850px !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    margin-top: 20px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.28) !important;
}


/* Segunda parte azul claro */
html body .pagina-hero-nosotros h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* Descripción */
html body .pagina-hero-nosotros
.pagina-hero-contenido > div:first-child > p {

    max-width: 720px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}


/* Breadcrumb */
html body .pagina-hero-nosotros .breadcrumb,
html body .pagina-hero-nosotros .breadcrumb a,
html body .pagina-hero-nosotros .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* Etiqueta NUESTRA EMPRESA */
html body .pagina-hero-nosotros .etiqueta-seccion {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(15, 47, 108, 0.46) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;

    border-radius: 999px !important;
}


/* Botón principal azul rey */
html body .pagina-hero-nosotros .btn-principal {
    background: #153faf !important;
    border-color: #153faf !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .pagina-hero-nosotros .btn-principal:hover {
    background: #0d318d !important;
    border-color: #0d318d !important;

    transform: translateY(-2px) !important;
}


/* Botón secundario blanco */
html body .pagina-hero-nosotros .btn-secundario {
    background: #ffffff !important;
    border-color: #ffffff !important;

    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}
/* =========================================================
   CONTACTO - FONDO PRINCIPAL
========================================================= */

html body > section.pagina-hero-contacto,
html body > main > section.pagina-hero-contacto {

    position: relative !important;
    min-height: 610px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 23, 28, 0.64) 0%,
            rgba(20, 23, 28, 0.38) 38%,
            rgba(20, 23, 28, 0.08) 65%,
            rgba(20, 23, 28, 0.01) 100%
        ),
        url("/SEGURIDAD_WEB/assets/img/banner-contacto.png") !important;

    background-size: cover !important;

    /* La persona queda principalmente a la derecha */
    background-position: center 50% !important;

    background-repeat: no-repeat !important;

    overflow: hidden !important;
}
/* =========================================================
   CONTACTO - HERO SOBRE LA IMAGEN
========================================================= */

/* Quitamos la tarjeta blanca gigante */
html body .pagina-hero-contacto .contacto-hero-grid {
    position: relative !important;
    z-index: 2 !important;

    grid-template-columns: minmax(0, 720px) !important;
    justify-content: start !important;
    align-items: center !important;

    gap: 0 !important;

    padding: 75px 0 65px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* TÍTULO */
html body .pagina-hero-contacto .contacto-hero-texto h1 {
    max-width: 720px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: clamp(48px, 4.3vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.8px !important;
    font-weight: 800 !important;

    margin-top: 20px !important;
    margin-bottom: 22px !important;

    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.28) !important;
}


/* PARTE AZUL DEL TÍTULO */
html body .pagina-hero-contacto .contacto-hero-texto h1 span {
    display: block !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* DESCRIPCIÓN */
html body .pagina-hero-contacto .contacto-hero-texto > p {
    max-width: 650px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;
    line-height: 1.7 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}


/* BREADCRUMB */
html body .pagina-hero-contacto .breadcrumb,
html body .pagina-hero-contacto .breadcrumb a,
html body .pagina-hero-contacto .breadcrumb span {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* ETIQUETA SUPERIOR */
html body .pagina-hero-contacto .etiqueta-seccion {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(15, 47, 108, 0.46) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;

    border-radius: 999px !important;
}


/* BENEFICIOS */
html body .pagina-hero-contacto .contacto-hero-beneficios {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 28px !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios > div {
    padding: 11px 16px !important;

    background: rgba(10, 22, 42, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;

    border-radius: 8px !important;
    box-shadow: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios i {
    color: #7da9ff !important;
}


/* HORARIO */
html body .pagina-hero-contacto .contacto-hero-summary {
    max-width: 650px !important;

    background: rgba(10, 22, 42, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;

    border-radius: 10px !important;
    box-shadow: none !important;

    color: #ffffff !important;
}

html body .pagina-hero-contacto .contacto-hero-summary strong,
html body .pagina-hero-contacto .contacto-hero-summary p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* ==========================================================
   IP TECNOLOGÍA
   PANEL ADMINISTRATIVO
   admin/assets/css/admin.css

   COLORES PRINCIPALES
   Azul rey:       #153FAF
   Azul hover:     #0D318D
   Azul claro:     #EEF3FF
   Fondo:          #F5F7FB
   Texto oscuro:   #263544
========================================================== */


/* ==========================================================
   1. VARIABLES GENERALES
========================================================== */

:root {

    --admin-azul:
        #153faf;

    --admin-azul-hover:
        #0d318d;

    --admin-azul-oscuro:
        #08256c;

    --admin-azul-claro:
        #eef3ff;

    --admin-azul-muy-claro:
        #f5f8ff;

    --admin-fondo:
        #f5f7fb;

    --admin-blanco:
        #ffffff;

    --admin-texto:
        #263544;

    --admin-texto-secundario:
        #68778a;

    --admin-borde:
        #dde4ef;

    --admin-borde-azul:
        #cbd9f7;

    --admin-verde:
        #198754;

    --admin-verde-fondo:
        #eaf7f0;

    --admin-rojo:
        #c53b4c;

    --admin-rojo-fondo:
        #fff0f2;

    --admin-amarillo:
        #b57c09;

    --admin-amarillo-fondo:
        #fff7df;

    --admin-sidebar-ancho:
        255px;

    --admin-header-alto:
        72px;

    --admin-radio:
        10px;

    --admin-sombra:
        0 8px 24px rgba(35, 55, 86, 0.07);

    --admin-sombra-hover:
        0 16px 34px rgba(21, 63, 175, 0.12);

}



/* ==========================================================
   2. RESET
========================================================== */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    color:
        var(--admin-texto);

    background:
        var(--admin-fondo);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.5;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}



/* ==========================================================
   3. ESTRUCTURA GENERAL DEL ADMIN
========================================================== */

.admin-layout {

    min-height:
        100vh;

    background:
        var(--admin-fondo);

}


.admin-main {

    min-height:
        100vh;

    margin-left:
        var(--admin-sidebar-ancho);

    padding:
        calc(var(--admin-header-alto) + 34px)
        34px
        45px;

    transition:
        margin-left .25s ease;

}



/* ==========================================================
   4. HEADER SUPERIOR DEL ADMIN
========================================================== */

.admin-header {

    position:
        fixed;

    z-index:
        900;

    top:
        0;

    right:
        0;

    left:
        var(--admin-sidebar-ancho);

    height:
        var(--admin-header-alto);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        0 30px;

    border-bottom:
        1px solid var(--admin-borde);

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 3px 14px rgba(36, 53, 77, 0.04);

    transition:
        left .25s ease;

}


.admin-header-izquierda {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.admin-header-titulo {

    display:
        grid;

    gap:
        2px;

}


.admin-header-titulo strong {

    color:
        var(--admin-texto);

    font-size:
        16px;

    font-weight:
        800;

}


.admin-header-titulo span {

    color:
        var(--admin-texto-secundario);

    font-size:
        12px;

}


.admin-header-derecha {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}



/* ==========================================================
   5. BOTÓN HAMBURGUESA
========================================================== */

.admin-menu-toggle {

    width:
        42px;

    height:
        42px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid var(--admin-borde);

    border-radius:
        8px;

    color:
        var(--admin-azul);

    background:
        #ffffff;

    font-size:
        18px;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;

}


.admin-menu-toggle:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    box-shadow:
        0 8px 18px rgba(21, 63, 175, .12);

}



/* ==========================================================
   6. PERFIL EN HEADER
========================================================== */

.admin-perfil-mini {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        6px 9px;

    border:
        1px solid transparent;

    border-radius:
        8px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.admin-perfil-mini:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--admin-borde-azul);

    background:
        var(--admin-azul-claro);

}


.admin-perfil-mini-avatar {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 38px;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        var(--admin-azul);

    font-weight:
        800;

}


.admin-perfil-mini-texto {

    display:
        grid;

    gap:
        1px;

}


.admin-perfil-mini-texto strong {

    color:
        var(--admin-texto);

    font-size:
        13px;

}


.admin-perfil-mini-texto span {

    color:
        var(--admin-texto-secundario);

    font-size:
        11px;

}



/* ==========================================================
   7. SIDEBAR
========================================================== */

.admin-sidebar {

    position:
        fixed;

    z-index:
        1000;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        var(--admin-sidebar-ancho);

    display:
        flex;

    flex-direction:
        column;

    overflow-y:
        auto;

    border-right:
        1px solid rgba(255, 255, 255, .08);

    background:
        #101d36;

    box-shadow:
        8px 0 26px rgba(19, 34, 61, .08);

    transition:
        transform .25s ease;

}



/* ==========================================================
   8. LOGO DEL ADMIN
========================================================== */

.admin-sidebar-logo {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        18px 21px;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);

}


.admin-logo-cuadro {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 44px;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        var(--admin-azul);

    font-size:
        16px;

    font-weight:
        900;

    box-shadow:
        0 8px 18px rgba(21, 63, 175, .28);

}

.admin-sidebar-logo-imagen {
    display: block;
    width: 145px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
}

.admin-header-logo-imagen {
    display: block;
    width: 120px;
    height: auto;
    max-height: 34px;
    object-fit: contain;
}


.admin-sidebar-logo-texto {

    display:
        grid;

    line-height:
        1.1;

}


.admin-sidebar-logo-texto strong {

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        800;

}


.admin-sidebar-logo-texto span {

    margin-top:
        4px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}



/* ==========================================================
   9. NAVEGACIÓN DEL SIDEBAR
========================================================== */

.admin-nav {

    display:
        grid;

    gap:
        5px;

    padding:
        24px 14px;

}


.admin-nav-titulo {

    margin:
        14px 10px 7px;

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.admin-nav a {

    position:
        relative;

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 13px;

    border:
        1px solid transparent;

    border-radius:
        8px;

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

    font-size:
        13px;

    font-weight:
        650;

    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease,
        border-color .2s ease;

}


.admin-nav a i {

    width:
        21px;

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

    font-size:
        15px;

    text-align:
        center;

    transition:
        color .2s ease,
        transform .2s ease;

}


.admin-nav a:hover {

    transform:
        translateX(3px);

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .07);

    border-color:
        rgba(255, 255, 255, .07);

}


.admin-nav a:hover i {

    color:
        #8eb2ff;

    transform:
        scale(1.05);

}


.admin-nav a.activo {

    color:
        #ffffff;

    background:
        var(--admin-azul);

    border-color:
        rgba(255, 255, 255, .08);

    box-shadow:
        0 8px 20px rgba(21, 63, 175, .25);

}


.admin-nav a.activo i {

    color:
        #ffffff;

}


.admin-nav a.activo::before {

    position:
        absolute;

    left:
        -14px;

    width:
        4px;

    height:
        24px;

    border-radius:
        0 3px 3px 0;

    background:
        #7da9ff;

    content:
        "";

}



/* ==========================================================
   10. CERRAR SESIÓN
========================================================== */

.admin-sidebar-footer {

    margin-top:
        auto;

    padding:
        15px;

    border-top:
        1px solid rgba(255, 255, 255, .08);

}


.admin-logout {

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    width:
        100%;

    padding:
        11px 14px;

    border:
        1px solid rgba(255, 255, 255, .13);

    border-radius:
        8px;

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

    background:
        rgba(255, 255, 255, .04);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        background .22s ease;

}


.admin-logout:hover {

    transform:
        translateY(-2px);

    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, .24);

    background:
        rgba(197, 59, 76, .18);

}



/* ==========================================================
   11. CABECERA DE PÁGINA
========================================================== */

.admin-page-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        28px;

}


.admin-eyebrow {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--admin-azul);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.admin-page-header h1 {

    margin:
        0;

    color:
        var(--admin-texto);

    font-size:
        clamp(28px, 3vw, 38px);

    font-weight:
        800;

    letter-spacing:
        -1px;

    line-height:
        1.1;

}


.admin-page-header p {

    margin:
        8px 0 0;

    color:
        var(--admin-texto-secundario);

    font-size:
        14px;

}



/* ==========================================================
   12. BOTONES ADMIN
========================================================== */

.admin-btn-principal,
.admin-btn-secundario {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 16px;

    border-radius:
        8px;

    font-size:
        13px;

    font-weight:
        750;

    white-space:
        nowrap;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        color .22s ease,
        background .22s ease,
        border-color .22s ease;

}


.admin-btn-principal {

    color:
        #ffffff;

    border:
        1px solid var(--admin-azul-hover);

    background:
        var(--admin-azul);

    box-shadow:
        0 8px 18px rgba(21, 63, 175, .16);

}


.admin-btn-principal:hover {

    transform:
        translateY(-3px);

    color:
        #ffffff;

    border-color:
        var(--admin-azul-oscuro);

    background:
        var(--admin-azul-hover);

    box-shadow:
        0 14px 25px rgba(21, 63, 175, .24);

}


.admin-btn-secundario {

    color:
        var(--admin-azul);

    border:
        1px solid var(--admin-borde-azul);

    background:
        #ffffff;

}


.admin-btn-secundario:hover {

    transform:
        translateY(-3px);

    color:
        var(--admin-azul-hover);

    border-color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    box-shadow:
        0 10px 22px rgba(21, 63, 175, .11);

}



/* ==========================================================
   13. TARJETAS DE ESTADÍSTICAS
========================================================== */

.admin-stats {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        28px;

}


.admin-stat-card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    min-height:
        145px;

    padding:
        22px;

    overflow:
        hidden;

    border:
        1px solid var(--admin-borde);

    border-radius:
        var(--admin-radio);

    background:
        var(--admin-blanco);

    box-shadow:
        var(--admin-sombra);

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;

}


.admin-stat-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--admin-borde-azul);

    box-shadow:
        var(--admin-sombra-hover);

}


.admin-stat-card::after {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        58px;

    height:
        3px;

    background:
        var(--admin-azul);

    content:
        "";

}


.admin-stat-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 48px;

    border-radius:
        9px;

    color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    font-size:
        18px;

    transition:
        transform .24s ease,
        color .24s ease,
        background .24s ease;

}


.admin-stat-card:hover .admin-stat-icon {

    transform:
        translateY(-2px);

    color:
        #ffffff;

    background:
        var(--admin-azul);

}


.admin-stat-card > div:last-child {

    display:
        grid;

    gap:
        3px;

}


.admin-stat-card span {

    color:
        var(--admin-texto-secundario);

    font-size:
        12px;

    font-weight:
        650;

}


.admin-stat-card strong {

    margin:
        2px 0;

    color:
        var(--admin-texto);

    font-size:
        28px;

    font-weight:
        850;

    line-height:
        1.1;

}


.admin-stat-card a {

    margin-top:
        5px;

    color:
        var(--admin-azul);

    font-size:
        12px;

    font-weight:
        750;

}


.admin-stat-card a:hover {

    color:
        var(--admin-azul-hover);

}



/* ==========================================================
   14. PANELES GENERALES
========================================================== */

.admin-panel {

    padding:
        24px;

    border:
        1px solid var(--admin-borde);

    border-radius:
        var(--admin-radio);

    background:
        #ffffff;

    box-shadow:
        var(--admin-sombra);

}


.admin-panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


.admin-panel-header h2 {

    margin:
        0;

    color:
        var(--admin-texto);

    font-size:
        18px;

    font-weight:
        800;

}

.admin-notificacion-contador {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.admin-nav .admin-notificacion-contador {
    color: #fff !important;
}


.admin-panel-header p {

    margin:
        5px 0 0;

    color:
        var(--admin-texto-secundario);

    font-size:
        13px;

}


.admin-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--admin-azul);

    font-size:
        13px;

    font-weight:
        750;

    transition:
        gap .2s ease,
        color .2s ease;

}


.admin-link:hover {

    gap:
        10px;

    color:
        var(--admin-azul-hover);

}



/* ==========================================================
   15. TABLAS
========================================================== */

.admin-tabla-contenedor {

    width:
        100%;

    overflow-x:
        auto;

}


.admin-tabla {

    width:
        100%;

    border-collapse:
        collapse;

    background:
        #ffffff;

}


.admin-tabla th {

    padding:
        13px 15px;

    border-bottom:
        1px solid var(--admin-borde);

    color:
        #748297;

    background:
        #f8faff;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .7px;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


.admin-tabla td {

    padding:
        15px;

    border-bottom:
        1px solid #edf1f6;

    color:
        #435267;

    font-size:
        13px;

    vertical-align:
        middle;

}


.admin-tabla tbody tr {

    transition:
        background .18s ease;

}


.admin-tabla tbody tr:hover {

    background:
        #f8faff;

}


.admin-tabla tbody tr:last-child td {

    border-bottom:
        0;

}


.admin-tabla td strong {

    display:
        block;

    color:
        var(--admin-texto);

    font-size:
        13px;

    font-weight:
        750;

}


.admin-tabla td small {

    display:
        block;

    margin-top:
        3px;

    color:
        #8390a1;

    font-size:
        11px;

}



/* ==========================================================
   16. ESTADOS
========================================================== */

.admin-estado {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        26px;

    padding:
        5px 9px;

    border:
        1px solid #d6e0f4;

    border-radius:
        999px;

    color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;

}


.admin-estado.activo {

    color:
        var(--admin-verde);

    border-color:
        #c9e8d7;

    background:
        var(--admin-verde-fondo);

}


.admin-estado.inactivo {

    color:
        var(--admin-rojo);

    border-color:
        #f0ccd1;

    background:
        var(--admin-rojo-fondo);

}



/* ==========================================================
   17. ROLES
========================================================== */

.admin-rol {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        5px 10px;

    border-radius:
        6px;

    color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    font-size:
        11px;

    font-weight:
        750;

}



/* ==========================================================
   18. USUARIOS
========================================================== */

.admin-usuario {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.admin-avatar {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 38px;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        var(--admin-azul);

    font-size:
        14px;

    font-weight:
        850;

    box-shadow:
        0 6px 15px rgba(21, 63, 175, .16);

}



/* ==========================================================
   19. FILTROS DE COTIZACIONES
========================================================== */

.admin-filtros {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        22px;

}


.admin-filtros a {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 13px;

    border:
        1px solid var(--admin-borde);

    border-radius:
        7px;

    color:
        #58677a;

    background:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.admin-filtros a:hover {

    transform:
        translateY(-2px);

    color:
        var(--admin-azul);

    border-color:
        var(--admin-borde-azul);

    background:
        var(--admin-azul-claro);

}


.admin-filtros a.activo {

    color:
        #ffffff;

    border-color:
        var(--admin-azul);

    background:
        var(--admin-azul);

    box-shadow:
        0 7px 16px rgba(21, 63, 175, .17);

}



/* ==========================================================
   20. SERVICIOS Y SECTORES
========================================================== */

.admin-servicios-grid {

    display:
        grid;

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

    gap:
        18px;

}


.admin-servicio-card {

    position:
        relative;

    min-height:
        245px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        23px;

    overflow:
        hidden;

    border:
        1px solid var(--admin-borde);

    border-radius:
        var(--admin-radio);

    background:
        #ffffff;

    box-shadow:
        var(--admin-sombra);

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;

}


.admin-servicio-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--admin-borde-azul);

    box-shadow:
        var(--admin-sombra-hover);

}


.admin-servicio-card::after {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        3px;

    background:
        var(--admin-azul);

    content:
        "";

}


.admin-servicio-superior {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;

}


.admin-servicio-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        var(--admin-azul);

    background:
        var(--admin-azul-claro);

    font-size:
        18px;

    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease;

}


.admin-servicio-card:hover
.admin-servicio-icon {

    transform:
        translateY(-2px);

    color:
        #ffffff;

    background:
        var(--admin-azul);

}


.admin-servicio-numero {

    color:
        #8996a8;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1px;

}


.admin-servicio-card h2 {

    margin:
        7px 0 10px;

    color:
        var(--admin-texto);

    font-size:
        18px;

    font-weight:
        800;

    letter-spacing:
        -.3px;

}


.admin-servicio-card > p {

    margin:
        0;

    color:
        var(--admin-texto-secundario);

    font-size:
        13px;

    line-height:
        1.65;

}


.admin-servicio-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        auto;

    padding-top:
        20px;

}


.admin-servicio-footer span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #8693a4;

    font-size:
        11px;

}


.admin-servicio-footer i {

    color:
        var(--admin-azul);

}



/* ==========================================================
   21. ESTADO VACÍO
========================================================== */

.admin-vacio {

    padding:
        45px 24px !important;

    color:
        #8190a3 !important;

    text-align:
        center !important;

    font-size:
        13px !important;

}



/* ==========================================================
   22. FORMULARIOS DEL ADMIN
========================================================== */

.admin-form {

    display:
        grid;

    gap:
        18px;

}


.admin-form-grid {

    display:
        grid;

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

    gap:
        18px;

}


.admin-campo {

    display:
        grid;

    gap:
        7px;

}


.admin-campo.full {

    grid-column:
        1 / -1;

}


.admin-campo label {

    color:
        #425166;

    font-size:
        12px;

    font-weight:
        750;

}


.admin-campo input,
.admin-campo select,
.admin-campo textarea {

    width:
        100%;

    min-height:
        45px;

    padding:
        11px 13px;

    border:
        1px solid #ccd6e5;

    border-radius:
        8px;

    outline:
        none;

    color:
        var(--admin-texto);

    background:
        #ffffff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.admin-campo textarea {

    min-height:
        120px;

    resize:
        vertical;

}


.admin-campo input:focus,
.admin-campo select:focus,
.admin-campo textarea:focus {

    border-color:
        var(--admin-azul);

    background:
        #fbfcff;

    box-shadow:
        0 0 0 4px rgba(21, 63, 175, .10);

}



/* ==========================================================
   23. ACCIONES PEQUEÑAS
========================================================== */

.admin-acciones {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.admin-accion {

    width:
        35px;

    height:
        35px;

    display:
        inline-grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid var(--admin-borde);

    border-radius:
        7px;

    color:
        #5e6d80;

    background:
        #ffffff;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.admin-accion:hover {

    transform:
        translateY(-2px);

    color:
        var(--admin-azul);

    border-color:
        var(--admin-borde-azul);

    background:
        var(--admin-azul-claro);

    box-shadow:
        0 7px 16px rgba(21, 63, 175, .10);

}


.admin-accion.eliminar:hover {

    color:
        var(--admin-rojo);

    border-color:
        #efc7cd;

    background:
        var(--admin-rojo-fondo);

}



/* ==========================================================
   24. BOTONES FLOTANTES
   Efecto profesional, no exagerado
========================================================== */

.admin-flotantes {

    position:
        fixed;

    z-index:
        850;

    right:
        25px;

    bottom:
        25px;

    display:
        grid;

    gap:
        10px;

}


.admin-btn-flotante {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--admin-azul-hover);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--admin-azul);

    box-shadow:
        0 9px 24px rgba(21, 63, 175, .27);

    font-size:
        17px;

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;

}


.admin-btn-flotante:hover {

    transform:
        translateY(-4px) scale(1.03);

    color:
        #ffffff;

    background:
        var(--admin-azul-hover);

    box-shadow:
        0 14px 30px rgba(13, 49, 141, .32);

}



/* ==========================================================
   25. MENSAJES / ALERTAS
========================================================== */

.admin-alerta {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        20px;

    padding:
        13px 15px;

    border:
        1px solid #cbd9f7;

    border-radius:
        8px;

    color:
        #294b96;

    background:
        #eef3ff;

    font-size:
        13px;

}


.admin-alerta.exito {

    color:
        #176841;

    border-color:
        #c9e8d7;

    background:
        var(--admin-verde-fondo);

}


.admin-alerta.error {

    color:
        #a52f3d;

    border-color:
        #efcbd0;

    background:
        var(--admin-rojo-fondo);

}



/* ==========================================================
   26. OVERLAY DEL SIDEBAR PARA CELULAR
========================================================== */

.admin-sidebar-overlay {

    position:
        fixed;

    z-index:
        950;

    inset:
        0;

    display:
        none;

    background:
        rgba(10, 20, 38, .48);

}



/* ==========================================================
   27. TABLET
========================================================== */

@media (max-width: 1150px) {

    .admin-stats {

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

    }


    .admin-servicios-grid {

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

    }

}



/* ==========================================================
   28. MENÚ RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .admin-sidebar {

        transform:
            translateX(-100%);

    }


    body.admin-menu-abierto
    .admin-sidebar {

        transform:
            translateX(0);

    }


    body.admin-menu-abierto
    .admin-sidebar-overlay {

        display:
            block;

    }


    .admin-header {

        left:
            0;

        padding:
            0 20px;

    }


    .admin-main {

        margin-left:
            0;

        padding:
            calc(var(--admin-header-alto) + 28px)
            22px
            40px;

    }


    .admin-menu-toggle {

        display:
            inline-flex;

    }


    .admin-page-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .admin-form-grid {

        grid-template-columns:
            1fr;

    }

}



/* ==========================================================
   29. CELULAR
========================================================== */

@media (max-width: 650px) {

    .admin-main {

        padding-right:
            16px;

        padding-left:
            16px;

    }


    .admin-header {

        padding:
            0 15px;

    }


    .admin-header-titulo {

        display:
            none;

    }


    .admin-perfil-mini-texto {

        display:
            none;

    }


    .admin-page-header {

        margin-bottom:
            22px;

    }


    .admin-page-header h1 {

        font-size:
            29px;

    }


    .admin-stats {

        grid-template-columns:
            1fr;

        gap:
            13px;

    }


    .admin-stat-card {

        min-height:
            125px;

    }


    .admin-servicios-grid {

        grid-template-columns:
            1fr;

    }


    .admin-panel {

        padding:
            18px;

    }


    .admin-panel-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .admin-filtros {

        width:
            100%;

    }


    .admin-filtros a {

        flex:
            1 1 auto;

    }


    .admin-flotantes {

        right:
            17px;

        bottom:
            17px;

    }


    .admin-btn-flotante {

        width:
            47px;

        height:
            47px;

    }

}



/* ==========================================================
   30. CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 420px) {

    .admin-sidebar {

        width:
            min(86vw, 275px);

    }


    .admin-page-header h1 {

        font-size:
            27px;

    }


    .admin-btn-principal,
    .admin-btn-secundario {

        width:
            100%;

    }


    .admin-page-header {

        width:
            100%;

    }

}

/* Asistente digital de seguridad */
.asistente-seguridad{position:fixed;right:24px;bottom:24px;z-index:1100;font-family:inherit}.asistente-boton{display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:10px 18px 10px 10px;background:#b71920;color:#fff;font-weight:700;box-shadow:0 12px 35px rgba(20,25,35,.28);cursor:pointer}.asistente-boton-icono{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);font-size:18px}.asistente-panel{position:absolute;right:0;bottom:64px;width:min(390px,calc(100vw - 28px));height:min(650px,calc(100vh - 110px));overflow:hidden;border:1px solid #e3e7ed;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(12,22,38,.28)}.asistente-panel[hidden]{display:none}.asistente-cabecera{display:flex;align-items:center;gap:11px;padding:16px 18px;background:#101b2d;color:#fff}.asistente-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#b71920}.asistente-cabecera>div:nth-child(2){display:flex;flex:1;flex-direction:column}.asistente-cabecera strong{font-size:15px}.asistente-cabecera span{font-size:12px;color:#cbd3df}.asistente-cabecera span i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#45d483}.asistente-cerrar{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}.asistente-progreso{height:4px;background:#edf0f4}.asistente-progreso span{display:block;width:0;height:100%;background:#b71920;transition:width .25s}.asistente-conversacion{height:calc(100% - 190px);min-height:260px;overflow-y:auto;padding:18px;background:#f5f7fa}.asistente-mensaje{width:fit-content;max-width:88%;margin:0 0 12px;padding:11px 14px;border-radius:4px 15px 15px;background:#fff;color:#263246;font-size:14px;line-height:1.45;box-shadow:0 2px 8px rgba(20,30,45,.07)}.asistente-mensaje.usuario{margin-left:auto;border-radius:15px 4px 15px 15px;background:#b71920;color:#fff}.asistente-mensaje.error{background:#fff0f0;color:#a31319}.asistente-acciones{max-height:215px;overflow-y:auto;padding:12px 16px;background:#fff}.asistente-opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}.asistente-opcion{border:1px solid #d9dee6;border-radius:10px;padding:10px;background:#fff;color:#263246;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}.asistente-opcion:hover{border-color:#b71920;color:#b71920}.asistente-opcion.principal{width:100%;border-color:#b71920;background:#b71920;color:#fff}.asistente-opcion.texto{width:100%;border:0;background:transparent;color:#667085}.asistente-opcion:disabled{opacity:.65;cursor:wait}.asistente-entrada{display:flex;flex-wrap:wrap;gap:8px}.asistente-entrada input,.asistente-entrada select{width:100%;border:1px solid #ccd3dd;border-radius:10px;padding:11px 12px;font:inherit;color:#263246;background:#fff}.asistente-entrada .invalido{border-color:#b71920;background:#fff7f7}.asistente-resumen{margin-bottom:10px;padding:4px 12px;border:1px solid #e4e8ee;border-radius:12px;background:#f8f9fb}.asistente-resumen p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:7px 0;border-bottom:1px solid #e8ebf0;font-size:12px}.asistente-resumen p:last-child{border:0}.asistente-resumen span{color:#697386}.asistente-resumen strong{text-align:right;color:#243047}.asistente-privacidad{position:absolute;right:0;bottom:0;left:0;margin:0;padding:8px 12px;background:#fff;color:#7b8492;text-align:center;font-size:10px}.asistente-seguridad.abierto+.whatsapp{display:none}@media(max-width:600px){.asistente-seguridad{right:14px;bottom:14px}.asistente-panel{position:fixed;right:10px;bottom:10px;left:10px;width:auto;height:calc(100dvh - 20px);max-height:720px}.asistente-boton{padding-right:14px}.asistente-conversacion{height:calc(100% - 190px)}}

@media (max-width: 900px) {
    .admin-detalle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .admin-detalle-cabecera { display: grid; }
    .admin-detalle-cabecera-acciones { width: 100%; }
    .admin-detalle-cabecera-acciones > * { flex: 1; }
}

/* Ficha de cotizaciones */
.admin-btn-detalle, .admin-btn-whatsapp, .admin-volver { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; }
.admin-btn-detalle { padding: 8px 11px; border: 1px solid var(--admin-borde-azul); border-radius: 7px; color: var(--admin-azul); background: var(--admin-azul-claro); white-space: nowrap; }
.admin-btn-detalle:hover { color: #fff; background: var(--admin-azul); }
.admin-detalle-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.admin-volver { margin-bottom: 13px; color: #64748b; font-size: 13px; }
.admin-volver:hover { color: var(--admin-azul); }
.admin-detalle-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-btn-whatsapp { min-height: 43px; padding: 10px 16px; border-radius: 8px; color: #fff; background: #16a34a; box-shadow: 0 8px 18px rgba(22,163,74,.16); }
.admin-btn-whatsapp:hover { color: #fff; background: #15803d; transform: translateY(-2px); }
.admin-detalle-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 20px; margin-bottom: 20px; }
.admin-detalle-resumen { display: flex; flex-direction: column; }
.admin-datos-lista { display: grid; gap: 13px; }
.admin-datos-lista > div { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid #e6ebf2; border-radius: 9px; background: #fbfcff; }
.admin-datos-lista i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--admin-azul); background: var(--admin-azul-claro); }
.admin-datos-lista span { display: grid; gap: 3px; color: #718096; font-size: 12px; }.admin-datos-lista strong { color: var(--admin-texto); font-size: 14px; }
.admin-mensaje-cliente { margin-top: 18px; padding: 16px; border-radius: 9px; background: #f8fafc; border-left: 3px solid var(--admin-azul); }.admin-mensaje-cliente span { color: var(--admin-azul); font-size: 11px; font-weight: 800; letter-spacing: .08em; }.admin-mensaje-cliente p { margin: 9px 0 0; color: #4a5568; line-height: 1.6; }

/* Posición final: separado del acceso flotante de WhatsApp */
.asistente-seguridad { right: 24px; bottom: 98px; }
.asistente-panel { height: min(560px, calc(100vh - 190px)); }
.asistente-seguridad.abierto + .whatsapp { display: block; }

/* Formulario compacto de datos del asistente */
.asistente-panel.modo-formulario .asistente-conversacion { height: 96px; min-height: 96px; padding: 14px 16px; }
.asistente-panel.modo-formulario .asistente-acciones { max-height: calc(100% - 193px); padding: 0; background: #f8fafc; }
.asistente-formulario-datos { display: grid; gap: 13px; padding: 16px; }
.asistente-form-titulo { padding-bottom: 4px; }
.asistente-form-titulo > span { display: block; margin-bottom: 3px; color: #b71920; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.asistente-form-titulo strong { display: block; color: #142033; font-size: 18px; }
.asistente-form-titulo p { margin: 3px 0 0; color: #778295; font-size: 11px; }
.asistente-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asistente-campo { display: grid; gap: 5px; color: #273449; font-size: 12px; font-weight: 700; }
.asistente-campo > span { display: flex; align-items: center; justify-content: space-between; }
.asistente-campo em { padding: 2px 6px; border-radius: 99px; background: #e9edf3; color: #788396; font-size: 9px; font-style: normal; font-weight: 700; }
.asistente-campo > div { display: flex; align-items: center; min-height: 44px; overflow: hidden; border: 1px solid #ccd4df; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.asistente-campo > div:focus-within { border-color: #2356b6; box-shadow: 0 0 0 3px rgba(35,86,182,.1); }
.asistente-campo i { width: 40px; color: #7a8795; text-align: center; }
.asistente-campo b { flex: 0 0 auto; padding: 0 9px; border-right: 1px solid #e1e5eb; color: #445064; font-size: 12px; }
.asistente-campo input,.asistente-campo select { min-width: 0; width: 100%; height: 42px; border: 0; outline: 0; padding: 0 10px 0 0; background: transparent; color: #17243a; font: inherit; font-weight: 500; }
.asistente-campo select { cursor: pointer; }
.asistente-campo small { display: none; color: #b71920; font-size: 10px; font-weight: 600; }
.asistente-campo.tiene-error > div { border-color: #b71920; background: #fff8f8; }
.asistente-campo.tiene-error small { display: block; }
.asistente-consentimiento { display: flex; align-items: flex-start; gap: 8px; color: #687386; font-size: 10px; line-height: 1.35; cursor: pointer; }
.asistente-consentimiento input { margin-top: 1px; accent-color: #b71920; }
.asistente-continuar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.asistente-boton { min-height: 56px; padding: 8px 18px 8px 8px; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg,#15233a,#0d1728); box-shadow: 0 12px 30px rgba(9,19,35,.3); }
.asistente-boton-icono { position: relative; background: #b71920; box-shadow: 0 5px 14px rgba(183,25,32,.32); }
.asistente-boton-icono::after { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border: 2px solid #15233a; border-radius: 50%; background: #38d17c; content: ''; }

/* Distribución estable: ninguna acción queda debajo del aviso de privacidad */
.asistente-panel:not([hidden]) { display: flex; flex-direction: column; }
.asistente-cabecera,.asistente-progreso,.asistente-privacidad { flex: 0 0 auto; }
.asistente-conversacion { flex: 1 1 auto; min-height: 110px; height: auto; }
.asistente-acciones { flex: 0 0 auto; max-height: 58%; overflow-y: auto; }
.asistente-privacidad { position: static; border-top: 1px solid #edf0f4; }
.asistente-panel.modo-formulario .asistente-conversacion { flex: 0 0 96px; }
.asistente-panel.modo-formulario .asistente-acciones { flex: 1 1 auto; max-height: none; min-height: 0; }
.asistente-panel.modo-resumen .asistente-conversacion { flex: 0 0 90px; min-height: 90px; }
.asistente-panel.modo-resumen .asistente-acciones { flex: 1 1 auto; max-height: none; min-height: 0; padding-bottom: 16px; }
.admin-filtros-solicitudes { display: flex; flex: 1 1 100%; align-items: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid #e4e9f0; border-radius: 10px; background: #f8fafc; }
.admin-filtros-solicitudes label { display: grid; min-width: 155px; gap: 5px; color: #64748b; font-size: 11px; font-weight: 750; }
.admin-filtros-solicitudes select { height: 40px; border: 1px solid #ced6e2; border-radius: 8px; padding: 0 34px 0 10px; background: #fff; color: #273449; }
.admin-filtros-solicitudes input { height:40px; border:1px solid #ced6e2; border-radius:8px; padding:0 10px; background:#fff; }
.admin-acciones-masivas { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0; }.admin-acciones-masivas strong{margin-right:auto}.admin-acciones-masivas select{min-height:40px;border:1px solid #ced6e2;border-radius:8px;padding:0 10px;background:#fff}.admin-paginacion{display:flex;justify-content:center;gap:6px;margin-top:18px}.admin-paginacion a{display:grid;place-items:center;min-width:36px;height:36px;border:1px solid #d8e0eb;border-radius:7px;color:#46556b}.admin-paginacion a.activo{background:var(--admin-azul);color:#fff}
.admin-filtros-solicitudes .admin-btn-principal { min-height: 40px; padding: 8px 14px; }
.admin-limpiar-filtros { min-height: 40px; padding: 10px; color: #64748b; font-size: 12px; font-weight: 700; }
.admin-filtros > a { display: none; }
@media (max-width: 600px) {
    .asistente-seguridad { right: 14px; bottom: 88px; }
    .asistente-panel { right: 10px; bottom: 82px; left: 10px; height: calc(100dvh - 102px); }
    .asistente-form-fila { grid-template-columns: 1fr; }
}
.admin-historial { margin-bottom: 25px; }.admin-linea-tiempo { margin: 3px 0 0; padding: 0; list-style: none; }.admin-linea-tiempo li { position: relative; display: flex; gap: 13px; padding: 0 0 20px; }.admin-linea-tiempo li:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: #dbe5f4; }.admin-linea-punto { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 3px; border: 3px solid #dce7ff; border-radius: 50%; background: var(--admin-azul); }.admin-linea-tiempo strong, .admin-linea-tiempo small { display: block; }.admin-linea-tiempo small { margin-top: 3px; color: #718096; }.admin-linea-tiempo p { margin: 6px 0 0; color: #4a5568; }
/* =========================================
   MENÚ DE USUARIO
========================================= */

.usuario-menu {
    display: none !important;
    position: relative;
}

.usuario-menu summary {
    list-style: none;
}

.usuario-menu summary::-webkit-details-marker {
    display: none;
}

.usuario-menu-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    cursor: pointer;
    color: #172033;
    transition: 0.2s;
}

.usuario-menu-boton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.usuario-menu-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #1d4ed8;
}

.usuario-menu-datos {
    display: flex;
    flex-direction: column;
}

.usuario-menu-datos strong {
    font-size: 13px;
}

.usuario-menu-datos small {
    font-size: 11px;
    color: #64748b;
}

.usuario-menu-desplegable {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    padding: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16);
    z-index: 9999;
}

.usuario-menu-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.usuario-menu-cabecera div:last-child {
    display: flex;
    flex-direction: column;
}

.usuario-menu-cabecera span {
    font-size: 12px;
    color: #64748b;
}

.usuario-menu-linea {
    height: 1px;
    background: #e5e7eb;
    margin: 7px 0;
}

.usuario-menu-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 7px;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.usuario-menu-opcion:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.usuario-menu-salir {
    color: #b42318;
}

.usuario-menu-salir:hover {
    background: #fff1f0;
    color: #b42318;
}

/* Cotiza ahora */
.header-acciones .btn-header,
.header-acciones .btn-header i {
    color: white;
}
/* =========================================================
   ÚLTIMOS AJUSTES DEL HEADER
========================================================= */

/* Cotiza ahora: texto e icono blancos */
.header-acciones .btn-header,
.header-acciones .btn-header span,
.header-acciones .btn-header i {
    color: #ffffff !important;
}


/* =========================================================
   ASISTENTE DE SEGURIDAD
   Quitar el rectángulo blanco exterior
========================================================= */

.asistente-seguridad {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
}

.asistente-boton {
    margin: 0 !important;
}
/* =========================================================
   TÍTULOS PRINCIPALES
   MISMO TAMAÑO Y ESTILO QUE EL INICIO
========================================================= */

.hero h1,
.pagina-hero h1,
.contacto-hero-texto h1,
.rubro-hero-contenido h1,
.casa-hero-contenido h1,
.comercio-hero-contenido h1,
.institucion-hero-contenido h1,
.grifos-hero-contenido h1 {

    max-width: 680px !important;

    font-size: clamp(44px, 5.4vw, 66px) !important;

    line-height: 1.06 !important;

    letter-spacing: -1.5px !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    margin-top: 19px !important;
    margin-bottom: 22px !important;
}


/* =========================================================
   PARTE AZUL DEL TÍTULO
   MISMO AZUL QUE INICIO
========================================================= */

.hero h1 span,
.pagina-hero h1 span,
.contacto-hero-texto h1 span,
.rubro-hero-contenido h1 span,
.casa-hero-contenido h1 span,
.comercio-hero-contenido h1 span,
.institucion-hero-contenido h1 span,
.grifos-hero-contenido h1 span {

    display: block !important;

    color: #7da9ff !important;

    -webkit-text-fill-color: #7da9ff !important;

    font-size: inherit !important;

    font-weight: 800 !important;
}


/* =========================================================
   CHECKS
   MISMO TAMAÑO LIMPIO DE LAS PÁGINAS DE SECTORES
========================================================= */

.hero-confianza,
.rubro-confianza,
.casa-hero-confianza,
.comercio-confianza,
.institucion-confianza,
.grifos-confianza {

    display: flex;
    flex-wrap: wrap;

    gap: 12px 24px !important;

    font-size: 12px !important;
}


.hero-confianza div,
.rubro-confianza div,
.casa-hero-confianza div,
.comercio-confianza div,
.institucion-confianza div,
.grifos-confianza div {

    display: flex;
    align-items: center;

    gap: 7px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: rgba(255, 255, 255, 0.82) !important;
}


/* CHECK AZUL, SIN ROJO */

.hero-confianza i,
.rubro-confianza i,
.casa-hero-confianza i,
.comercio-confianza i,
.institucion-confianza i,
.grifos-confianza i {

    color: #55c1ff !important;

    font-size: 12px !important;

    background: transparent !important;

    width: auto !important;
    height: auto !important;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .hero h1,
    .pagina-hero h1,
    .contacto-hero-texto h1,
    .rubro-hero-contenido h1,
    .casa-hero-contenido h1,
    .comercio-hero-contenido h1,
    .institucion-hero-contenido h1,
    .grifos-hero-contenido h1 {

        font-size: clamp(36px, 10vw, 48px) !important;

        line-height: 1.08 !important;
    }

}
/* =========================================================
   TÍTULOS DE PÁGINAS DE SECTORES
   MÁS PEQUEÑOS Y ORDENADOS
========================================================= */

.casa-hero-contenido h1,
.comercio-hero-contenido h1,
.institucion-hero-contenido h1,
.grifos-hero-contenido h1,
.rubro-hero-contenido h1 {

    max-width: 760px !important;

    font-size: clamp(38px, 4.2vw, 54px) !important;

    line-height: 1.08 !important;

    letter-spacing: -1px !important;

    font-weight: 800 !important;

    margin-top: 18px !important;
    margin-bottom: 18px !important;
}


/* Parte azul del título */

.casa-hero-contenido h1 span,
.comercio-hero-contenido h1 span,
.institucion-hero-contenido h1 span,
.grifos-hero-contenido h1 span,
.rubro-hero-contenido h1 span {

    font-size: inherit !important;

    line-height: inherit !important;

    color: #7da9ff !important;

    -webkit-text-fill-color: #7da9ff !important;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .casa-hero-contenido h1,
    .comercio-hero-contenido h1,
    .institucion-hero-contenido h1,
    .grifos-hero-contenido h1,
    .rubro-hero-contenido h1 {

        font-size: 38px !important;

        line-height: 1.1 !important;
    }

}
/* =========================================================
   TITULOS DE SECTORES - TAMAÑO FINAL
   PEQUEÑOS, LIMPIOS Y ORDENADOS
========================================================= */

html body .rubro-hero .rubro-hero-contenido h1,
html body .casa-hero .casa-hero-contenido h1,
html body .comercio-hero .comercio-hero-contenido h1,
html body .institucion-hero .institucion-hero-contenido h1,
html body .grifos-hero .grifos-hero-contenido h1 {

    /* Más ancho para evitar cortes feos */
    max-width: 850px !important;

    /* MUCHO más pequeño */
    font-size: clamp(36px, 3.4vw, 46px) !important;

    line-height: 1.08 !important;

    letter-spacing: -1px !important;

    font-weight: 800 !important;

    margin-top: 18px !important;
    margin-bottom: 18px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   PARTE AZUL
========================================================= */

html body .rubro-hero .rubro-hero-contenido h1 span,
html body .casa-hero .casa-hero-contenido h1 span,
html body .comercio-hero .comercio-hero-contenido h1 span,
html body .institucion-hero .institucion-hero-contenido h1 span,
html body .grifos-hero .grifos-hero-contenido h1 span {

    display: block !important;

    font-size: inherit !important;
    line-height: inherit !important;

    color: #7da9ff !important;
    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    html body .rubro-hero .rubro-hero-contenido h1,
    html body .casa-hero .casa-hero-contenido h1,
    html body .comercio-hero .comercio-hero-contenido h1,
    html body .institucion-hero .institucion-hero-contenido h1,
    html body .grifos-hero .grifos-hero-contenido h1 {

        max-width: 100% !important;

        font-size: 34px !important;

        line-height: 1.1 !important;
    }

}
/* =========================================
   SOLO PÁGINA SERVICIOS
========================================= */

.pagina-hero-servicios h1 {
    max-width: 760px !important;
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.8px !important;
}

.pagina-hero-servicios h1 span {
    font-size: 40px !important;
    line-height: 1.08 !important;
}
/* =========================================================
   CHECKS DEL INICIO
   MISMO ESTILO AZUL Y TAMAÑO DE LOS SECTORES
========================================================= */

.hero-confianza {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 30px;
}


/* Cada beneficio */

.hero-confianza div {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 14px !important;
    font-weight: 600 !important;

    color: #ffffff !important;
}


/* Círculo azul del check */

.hero-confianza div i {
    width: 16px !important;
    height: 16px !important;

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

    flex-shrink: 0;

    border-radius: 50% !important;

    background: #7da9ff !important;

    color: #ffffff !important;

    font-size: 8px !important;
}
/* =========================================================
   1. CHECKS DEL INICIO
   CÍRCULO AZUL + CHECK BLANCO
========================================================= */

body > section.hero .hero-confianza i {
    width: 15px !important;
    height: 15px !important;

    display: inline-grid !important;
    place-items: center !important;

    flex-shrink: 0;

    border-radius: 50% !important;

    background: #6fa3ff !important;

    color: #ffffff !important;

    font-size: 0 !important;
}


/* Check blanco dentro del círculo */

body > section.hero .hero-confianza i::before {
    content: "\f00c" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 8px !important;

    color: #ffffff !important;
}


/* Texto de los beneficios */

body > section.hero .hero-confianza div {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}


/* =========================================================
   2. COLORES DEL ASISTENTE SEGÚN CADA PÁGINA
========================================================= */

/* Color por defecto / INICIO */

body {
    --asistente-fondo: #123b82;
    --asistente-acento: #2f6fff;
}


/* SERVICIOS */

body:has(.pagina-hero-servicios) {
    --asistente-fondo: #0b347d;
    --asistente-acento: #3778ff;
}


/* NOSOTROS */

body:has(.pagina-hero-nosotros) {
    --asistente-fondo: #40365f;
    --asistente-acento: #7565a2;
}


/* CONTACTO */

body:has(.pagina-hero-contacto) {
    --asistente-fondo: #175b49;
    --asistente-acento: #38a17e;
}


/* EDIFICIOS Y CONDOMINIOS */

body:has(.rubro-hero-edificios) {
    --asistente-fondo: #413761;
    --asistente-acento: #7565a2;
}


/* CASAS */

body:has(.casa-hero) {
    --asistente-fondo: #78401f;
    --asistente-acento: #d47b45;
}


/* TIENDAS Y LOCALES */

body:has(.comercio-hero) {
    --asistente-fondo: #175b49;
    --asistente-acento: #38a17e;
}


/* UNIVERSIDADES */

body:has(.institucion-hero) {
    --asistente-fondo: #36316e;
    --asistente-acento: #7166d9;
}


/* GRIFOS */

body:has(.grifos-hero) {
    --asistente-fondo: #652d35;
    --asistente-acento: #c95058;
}


/* =========================================================
   BOTÓN FLOTANTE DEL ASISTENTE
========================================================= */

.asistente-boton {
    background: var(--asistente-fondo) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    box-shadow:
        0 10px 28px rgba(7, 20, 45, 0.28) !important;
}


.asistente-boton > span:last-child {
    color: #ffffff !important;
}


/* Círculo IP */

.asistente-boton-icono {
    background: var(--asistente-acento) !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* Punto verde */

.asistente-boton-icono::after {
    border-color: var(--asistente-fondo) !important;
}


/* =========================================================
   CUANDO SE ABRE EL ASISTENTE
========================================================= */

.asistente-cabecera {
    background: var(--asistente-fondo) !important;
}


.asistente-avatar,
.asistente-progreso span,
.asistente-opcion.principal,
.asistente-mensaje.usuario {
    background: var(--asistente-acento) !important;
}


.asistente-opcion:hover {
    border-color: var(--asistente-acento) !important;

    color: var(--asistente-acento) !important;
}
/* =========================================================
   QUITAR FONDO DETRÁS DEL ASISTENTE FLOTANTE
========================================================= */

html body > section.asistente-seguridad {
    background: transparent !important;
    background-image: none !important;

    padding: 0 !important;
    margin: 0 !important;

    width: auto !important;
    min-height: 0 !important;

    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   SIDEBAR ADMIN IP TECNOLOGÍA
========================================================= */

.admin-sidebar {
    background: #101827 !important;
    border-right: 1px solid #273244 !important;
    box-shadow: none !important;
}


/* =========================================================
   LOGO
========================================================= */

.admin-sidebar-logo {
    min-height: 82px !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 18px 20px !important;

    background: #101827 !important;

    border-bottom: 1px solid #273244 !important;
}


.admin-logo-cuadro {
    width: 44px !important;
    height: 44px !important;

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

    flex-shrink: 0 !important;

    background: #163f73 !important;

    border: 1px solid #315d8c !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 900 !important;

    box-shadow: none !important;
}


.admin-sidebar-logo-texto {
    display: flex !important;
    flex-direction: column !important;
}


.admin-sidebar-logo-texto strong {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    letter-spacing: 0.2px !important;
}


.admin-sidebar-logo-texto span {
    margin-top: 2px !important;

    color: #8496ad !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: 0.8px !important;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.admin-nav {
    padding: 18px 12px !important;
}


.admin-nav-titulo {
    display: block !important;

    margin: 18px 12px 7px !important;

    color: #71849e !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 1.4px !important;
}


/* =========================================================
   OPCIONES
========================================================= */

.admin-nav a {
    position: relative !important;

    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    margin: 2px 0 !important;

    padding: 10px 13px !important;

    color: #c2ccda !important;

    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 6px !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
}


.admin-nav a span {
    color: inherit !important;
}


/* Hover */

.admin-nav a:hover {
    background: #182334 !important;

    border-color: #2b394d !important;

    color: #ffffff !important;

    transform: none !important;

    box-shadow: none !important;
}


/* =========================================================
   PÁGINA ACTIVA
========================================================= */

.admin-nav a.activo {
    background: #1b2738 !important;

    border-color: #33445c !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* Línea lateral */

.admin-nav a.activo::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 9px;

    width: 3px;
    height: 25px;

    border-radius: 0 3px 3px 0;

    background: #55c2d9;
}


/* =========================================================
   ICONOS
========================================================= */

.admin-nav a i {
    width: 20px !important;

    text-align: center !important;

    font-size: 15px !important;

    opacity: 1 !important;
}


/* Dashboard */
.admin-nav .icon-dashboard {
    color: #5ba9d6 !important;
}


/* Cotizaciones */
.admin-nav .icon-cotizaciones {
    color: #e1a747 !important;
}


/* Servicios */
.admin-nav .icon-servicios {
    color: #dc6767 !important;
}


/* Sectores */
.admin-nav .icon-sectores {
    color: #9386d8 !important;
}


/* Usuarios */
.admin-nav .icon-usuarios {
    color: #4cbd8c !important;
}


/* Ver sitio */
.admin-nav .icon-web {
    color: #4eb4c0 !important;
}


/* =========================================================
   CERRAR SESIÓN
========================================================= */

.admin-sidebar-footer {
    padding: 14px !important;

    background: #101827 !important;

    border-top: 1px solid #273244 !important;
}


.admin-logout {
    min-height: 44px !important;

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

    gap: 9px !important;

    background: #172131 !important;

    border: 1px solid #344157 !important;
    border-radius: 6px !important;

    color: #d4dbe5 !important;

    text-decoration: none !important;

    box-shadow: none !important;
}


.admin-logout i {
    color: #dc6767 !important;
}


.admin-logout span {
    color: inherit !important;
}


.admin-logout:hover {
    background: #28202a !important;

    border-color: #63404b !important;

    color: #ffffff !important;

    transform: none !important;
}
/* =========================================================
   TEXTO BLANCO EN EL MENÚ IZQUIERDO DEL ADMIN
========================================================= */

/* Texto principal del logo */
.admin-sidebar-logo-texto strong {
    color: #ffffff !important;
}

/* Texto secundario del logo */
.admin-sidebar-logo-texto span {
    color: #d7e0ec !important;
}

/* Títulos pequeños:
   OPERACIONES / CATÁLOGO / ADMINISTRACIÓN */
.admin-nav-titulo {
    color: #9fb2c9 !important;
}

/* Texto de opciones del menú */
.admin-nav a,
.admin-nav a span {
    color: #ffffff !important;
}

/* Hover */
.admin-nav a:hover,
.admin-nav a:hover span {
    color: #ffffff !important;
}

/* Activo */
.admin-nav a.activo,
.admin-nav a.activo span {
    color: #ffffff !important;
}

/* Cerrar sesión */
.admin-logout,
.admin-logout span {
    color: #ffffff !important;
}
/* =========================================================
   CORRECCIÓN FINAL - TEXTO BLANCO SIDEBAR ADMIN
   NO MODIFICA LOS COLORES DE LOS ICONOS
========================================================= */

/* Opciones del menú */
html body .admin-sidebar .admin-nav > a {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Texto dentro de las opciones */
html body .admin-sidebar .admin-nav > a > span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* También cuando NO está seleccionado */
html body .admin-sidebar .admin-nav > a:not(.activo) {
    color: #ffffff !important;
}

/* Página seleccionada */
html body .admin-sidebar .admin-nav > a.activo {
    color: #ffffff !important;
}

/* Hover */
html body .admin-sidebar .admin-nav > a:hover {
    color: #ffffff !important;
}


/* =========================================================
   LOGO
========================================================= */

html body .admin-sidebar .admin-sidebar-logo-texto strong {
    color: #ffffff !important;
    opacity: 1 !important;
}

html body .admin-sidebar .admin-sidebar-logo-texto span {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

html body .admin-sidebar .admin-sidebar-logo {
    flex-wrap: wrap;
    row-gap: 2px;
}

html body .admin-sidebar .admin-sidebar-logo-texto {
    flex: 0 0 100%;
    margin-left: 4px;
}

html body .admin-sidebar .admin-sidebar-logo-texto span {
    font-size: 8px !important;
    letter-spacing: 0.6px !important;
    white-space: nowrap;
}


/* =========================================================
   OPERACIONES / CATÁLOGO / ADMINISTRACIÓN
========================================================= */

html body .admin-sidebar .admin-nav-titulo {
    color: #94a3b8 !important;
    opacity: 1 !important;
}


/* =========================================================
   CERRAR SESIÓN
========================================================= */

html body .admin-sidebar .admin-logout {
    color: #ffffff !important;
    opacity: 1 !important;
}

html body .admin-sidebar .admin-logout span {
    color: #ffffff !important;
}
/* =========================================================
   ADMIN - AZUL PROFESIONAL MÁS SUAVE
========================================================= */


/* =========================================================
   LOGO IP DEL SIDEBAR
========================================================= */

html body .admin-logo-cuadro {
    background: #2f6fb8 !important;
    border: 1px solid #4b86c5 !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* =========================================================
   ICONO DEL ADMINISTRADOR ARRIBA A LA DERECHA
========================================================= */

html body .admin-perfil-mini-avatar {
    background: #eaf3ff !important;

    color: #2f6fb8 !important;

    border: 1px solid #c9ddf4 !important;

    box-shadow: none !important;
}

html body .admin-perfil-mini-avatar i {
    color: #2f6fb8 !important;
}


/* =========================================================
   ICONOS DE LAS TARJETAS
   CCTV / ALARMAS / ACCESO / MONITOREO / ETC.
========================================================= */

html body .admin-servicio-icon {
    background: #eaf3ff !important;

    color: #2f6fb8 !important;

    border: 1px solid #d1e2f5 !important;

    box-shadow: none !important;
}


/* El icono interior también azul */

html body .admin-servicio-icon i {
    color: #2f6fb8 !important;
}


/* =========================================================
   ENLACES PEQUEÑOS DE LAS TARJETAS
========================================================= */

html body .admin-servicio-footer i {
    color: #3d7fc5 !important;
}

html body .admin-servicio-footer span {
    color: #526273 !important;
}


/* =========================================================
   LÍNEA INFERIOR DE LAS TARJETAS
   AZUL MÁS SUAVE
========================================================= */

html body .admin-servicio-card::after {
    background: #5b8fc9 !important;
}


/* =========================================================
   ESTADO ACTIVO
   VERDE SUAVE Y PROFESIONAL
========================================================= */

html body .admin-estado.activo {
    background: #edf8f3 !important;

    color: #18734f !important;

    border-color: #c8e7d8 !important;
}
/* =========================================================
   CORRECCIÓN DE LOS 2 ICONOS QUE FALTAN
========================================================= */

/* LOGO IP SUPERIOR */
html body .admin-logo-cuadro {
    background: #3f7fd1 !important;
    border: 1px solid #6aa2e6 !important;
    color: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(63, 127, 209, 0.10) !important;
}


/* Texto IP dentro del logo */
html body .admin-logo-cuadro,
html body .admin-logo-cuadro i {
    color: #ffffff !important;
}


/* ICONO SERVICIOS */
html body .admin-nav .icon-servicios {
    color: #ff6b6b !important;
    opacity: 1 !important;
}


/* Por si alguna regla antigua oscurece el icono */
html body .admin-nav a .icon-servicios {
    color: #ff6b6b !important;
}


/* Cuando Servicios está activo */
html body .admin-nav a.activo .icon-servicios {
    color: #ff7a7a !important;
}


/* Dar un poco más de presencia a TODOS los iconos */
html body .admin-nav a i {
    opacity: 1 !important;
    filter: none !important;
}


/* Logo con un azul vivo pero no chillón */
html body .admin-sidebar-logo:hover .admin-logo-cuadro {
    background: #4a89d8 !important;
}
/* =========================================================
   ASISTENTE - TEXTO BLANCO EN CABECERA Y OPCIÓN SELECCIONADA
========================================================= */

/* CABECERA DEL ASISTENTE */
.asistente-cabecera {
    color: #ffffff !important;
}

/* Título y textos de la cabecera */
.asistente-cabecera h3,
.asistente-cabecera strong,
.asistente-cabecera span,
.asistente-cabecera p,
.asistente-cabecera small {
    color: #ffffff !important;
}

/* Texto "En línea" un poquito más suave, pero blanco/visible */
.asistente-cabecera .asistente-estado,
.asistente-cabecera .asistente-subtitulo {
    color: #dbeafe !important;
}

/* BOTÓN DE CERRAR (X) */
.asistente-cabecera .asistente-cerrar,
.asistente-cabecera .asistente-cerrar i,
.asistente-cabecera button,
.asistente-cabecera button i {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Si el botón cerrar tiene círculo o fondo */
.asistente-cabecera .asistente-cerrar {
    border-color: rgba(255, 255, 255, 0.25) !important;
}


/* =========================================================
   OPCIÓN SELECCIONADA
   Ejemplo: Mi casa / Un negocio / Una empresa
========================================================= */

.asistente-opcion.activa,
.asistente-opcion.seleccionada,
.asistente-opcion.seleccionado,
.asistente-opcion.principal,
.asistente-opcion[aria-pressed="true"] {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Texto interno de la opción seleccionada */
.asistente-opcion.activa *,
.asistente-opcion.seleccionada *,
.asistente-opcion.seleccionado *,
.asistente-opcion.principal *,
.asistente-opcion[aria-pressed="true"] * {
    color: #ffffff !important;
}
/* =========================================================
   ASISTENTE - TEXTO CABECERA BLANCO
   CORRECCIÓN DEFINITIVA
========================================================= */

/* "Asistente de seguridad" */
html body .asistente-seguridad
.asistente-cabecera
> div:nth-child(2)
> strong {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;
}


/* "En línea" */
html body .asistente-seguridad
.asistente-cabecera
> div:nth-child(2)
> span {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;
}


/* Mantener el puntito verde */
html body .asistente-seguridad
.asistente-cabecera
> div:nth-child(2)
> span
i {

    background: #45d483 !important;

    color: #45d483 !important;
}


/* =========================================================
   X DE CERRAR - BLANCA
========================================================= */

html body .asistente-seguridad
.asistente-cerrar {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    background: transparent !important;
}


/* Por si la X está hecha con icono */
html body .asistente-seguridad
.asistente-cerrar i {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Por si la X está hecha con SVG */
html body .asistente-seguridad
.asistente-cerrar svg {

    color: #ffffff !important;

    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* =========================================================
   OPCIÓN ELEGIDA POR EL USUARIO
   TEXTO BLANCO
========================================================= */

html body .asistente-seguridad
.asistente-mensaje.usuario {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


html body .asistente-seguridad
.asistente-mensaje.usuario * {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Botones principales seleccionados */
html body .asistente-seguridad
.asistente-opcion.principal {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


html body .asistente-seguridad
.asistente-opcion.principal * {

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
   INICIO - SERVICIOS RENOVADOS
   Pegar al FINAL de assets/css/estilos.css
========================================================= */

.servicios-home-renovado {
    background: #f4f7fb !important;
}

.encabezado-servicios-renovado {
    max-width: 720px;
    margin-bottom: 46px;
}

.encabezado-servicios-renovado h2 {
    color: #162238;
}

.encabezado-servicios-renovado h2 span {
    color: #2f6fff;
}

.encabezado-servicios-renovado p {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    color: #647184;
}


/* =========================================================
   GRID
========================================================= */

.servicios-home-renovado .servicios-grid-renovado {
    align-items: stretch;
    gap: 22px;
}


/* =========================================================
   TARJETA BASE
========================================================= */

.servicios-home-renovado .servicio-card-renovado {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #dde5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
    overflow: hidden;
    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}

.servicios-home-renovado .servicio-card-renovado::before,
.servicios-home-renovado .servicio-card-renovado::after {
    display: none !important;
}

.servicios-home-renovado .servicio-card-renovado:hover {
    transform: translateY(-3px);
    border-color: #bccbe0;
    box-shadow: 0 13px 28px rgba(15, 23, 42, 0.075);
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.servicios-home-renovado .servicio-card-superior {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 23px;
}

.servicios-home-renovado .servicio-icono {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 20px;
    box-shadow: none;
}

.servicios-home-renovado .servicio-icono i {
    color: inherit !important;
}

.servicios-home-renovado .numero-servicio {
    position: static !important;
    display: block;
    color: #bcc5d1 !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* =========================================================
   COLORES DE ÍCONOS
========================================================= */

.servicios-home-renovado .servicio-icono-cctv {
    color: #2878d4;
    background: #eaf3ff;
    border-color: #d8e8fb;
}

.servicios-home-renovado .servicio-icono-alarmas {
    color: #dc4f5c;
    background: #fff0f2;
    border-color: #f8dce0;
}

.servicios-home-renovado .servicio-icono-acceso {
    color: #7556c9;
    background: #f2efff;
    border-color: #e4defb;
}

.servicios-home-renovado .servicio-icono-monitoreo {
    color: #159581;
    background: #eaf8f5;
    border-color: #d6eee9;
}

.servicios-home-renovado .servicio-icono-cercos {
    color: #d99400;
    background: #fff7df;
    border-color: #f5e7b9;
}

.servicios-home-renovado .servicio-icono-soporte {
    color: #e66a2c;
    background: #fff1e9;
    border-color: #f5dfd3;
}


/* =========================================================
   CONTENIDO
========================================================= */

.servicios-home-renovado .servicio-card-contenido {
    flex: 1;
}

.servicios-home-renovado .servicio-card-contenido h3 {
    min-height: 48px;
    margin: 0 0 11px;
    color: #172234;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.25;
}

.servicios-home-renovado .servicio-card-contenido p {
    min-height: 72px !important;
    margin: 0;
    color: #617084;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   ENLACE
========================================================= */

.servicios-home-renovado .servicio-card-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 24px !important;
    color: #245fc8 !important;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.servicios-home-renovado .servicio-card-link i {
    color: #245fc8 !important;
    transition: transform .18s ease;
}

.servicios-home-renovado .servicio-card-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BOTÓN INFERIOR
========================================================= */

.servicios-home-renovado .servicios-home-accion {
    margin-top: 38px;
}


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

@media (max-width: 980px) {

    .servicios-home-renovado .servicios-grid-renovado {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 640px) {

    .servicios-home-renovado .servicios-grid-renovado {
        grid-template-columns: 1fr;
    }

    .servicios-home-renovado .servicio-card-renovado {
        min-height: auto;
        padding: 24px;
    }

    .servicios-home-renovado .servicio-card-contenido h3,
    .servicios-home-renovado .servicio-card-contenido p {
        min-height: auto !important;
    }

}
/* =========================================================
   DETALLE CCTV - SERVICIOS
   Pegar al FINAL de assets/css/estilos.css
========================================================= */

.cctv-detalle {
    background: #f4f7fb;
}

.cctv-detalle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr);
    align-items: stretch;
    gap: 46px;
}

.cctv-detalle-contenido {
    padding: 8px 0;
}

.cctv-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: #1f63d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.cctv-etiqueta i {
    color: #2f7bdc;
    font-size: 15px;
}

.cctv-detalle-contenido h2 {
    max-width: 650px;
    margin: 0;
    color: #142238;
    font-size: clamp(34px, 3.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.cctv-detalle-contenido h2 span {
    display: block;
    color: #2f6fbd;
}

.cctv-intro {
    max-width: 650px;
    margin: 20px 0 30px;
    color: #5d6b7d;
    font-size: 16px;
    line-height: 1.75;
}

.cctv-beneficios {
    display: grid;
    gap: 14px;
}

.cctv-beneficio {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #dfe6ee;
}

.cctv-beneficio:last-child {
    border-bottom: 0;
}

.cctv-beneficio-icono {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 17px;
}

.cctv-icono-azul {
    color: #2f7bdc;
    background: #eaf3ff;
}

.cctv-icono-verde {
    color: #23956b;
    background: #eaf8f2;
}

.cctv-icono-naranja {
    color: #cf7a25;
    background: #fff2e4;
}

.cctv-beneficio strong {
    display: block;
    margin: 1px 0 5px;
    color: #17263b;
    font-size: 15px;
}

.cctv-beneficio p {
    margin: 0;
    color: #687689;
    font-size: 13px;
    line-height: 1.6;
}

.cctv-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
}

.cctv-enlace-secundario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #30435c;
    font-size: 13px;
    font-weight: 750;
}

.cctv-enlace-secundario i {
    color: #2f6fbd;
    transition: transform .2s ease;
}

.cctv-enlace-secundario:hover i {
    transform: translateY(3px);
}


/* PANEL DERECHO */

.cctv-panel {
    min-height: 100%;
    overflow: hidden;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 35, 62, .07);
}

.cctv-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5ebf1;
    background: #10233e;
}

.cctv-panel-cabecera > div {
    display: grid;
    gap: 3px;
}

.cctv-panel-cabecera > div > span {
    color: #9fb4cf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.cctv-panel-cabecera strong {
    color: #ffffff;
    font-size: 15px;
}

.cctv-panel-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dbe8f6;
    font-size: 9px;
    font-weight: 800;
}

.cctv-panel-estado i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42c784;
}

.cctv-zonas {
    display: grid;
    gap: 0;
    padding: 8px 20px;
}

.cctv-zona {
    display: grid;
    grid-template-columns: 43px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 18px 0;
    border-bottom: 1px solid #edf1f5;
}

.cctv-zona:last-child {
    border-bottom: 0;
}

.cctv-zona-icono {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 16px;
}

.zona-azul {
    color: #2e77c7;
    background: #eaf3ff;
}

.zona-verde {
    color: #248e68;
    background: #eaf7f1;
}

.zona-naranja {
    color: #c77728;
    background: #fff2e5;
}

.zona-morado {
    color: #7057b7;
    background: #f0edfb;
}

.cctv-zona > div {
    display: grid;
    gap: 4px;
}

.cctv-zona strong {
    color: #1c2b40;
    font-size: 13px;
}

.cctv-zona > div > span {
    color: #7a8798;
    font-size: 11px;
}

.cctv-zona > .fa-circle-check {
    color: #3e9f79;
    font-size: 15px;
}

.cctv-panel-pie {
    display: flex;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 14px 15px;
    border: 1px solid #e2e8ef;
    border-radius: 9px;
    background: #f8fafc;
}

.cctv-panel-pie > i {
    margin-top: 2px;
    color: #2f6fbd;
}

.cctv-panel-pie p {
    margin: 0;
    color: #697789;
    font-size: 11px;
    line-height: 1.55;
}


/* FRANJA INFERIOR */

.cctv-franja {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 10px;
    background: #ffffff;
}

.cctv-franja-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-right: 1px solid #e4eaf1;
}

.cctv-franja-item:last-child {
    border-right: 0;
}

.cctv-franja-item > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #2f6fbd;
    background: #edf4fc;
}

.cctv-franja-item > div {
    display: grid;
    gap: 3px;
}

.cctv-franja-item strong {
    color: #1d2b3f;
    font-size: 13px;
}

.cctv-franja-item span {
    color: #758294;
    font-size: 11px;
    line-height: 1.45;
}


/* DESTACAR SOLO CCTV EN LA CUADRÍCULA */

.servicio-detalle-card-cctv {
    border-color: #bed4ee;
}

.servicio-detalle-card-cctv .servicio-detalle-icono {
    color: #2f7bdc;
    background: #eaf3ff;
}


/* RESPONSIVE */

@media (max-width: 980px) {
    .cctv-detalle-grid {
        grid-template-columns: 1fr;
    }

    .cctv-panel {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .cctv-franja {
        grid-template-columns: 1fr;
    }

    .cctv-franja-item {
        border-right: 0;
        border-bottom: 1px solid #e4eaf1;
    }

    .cctv-franja-item:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    .cctv-detalle-contenido h2 {
        font-size: 33px;
    }

    .cctv-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .cctv-acciones .btn-principal,
    .cctv-enlace-secundario {
        width: 100%;
        justify-content: center;
    }

    .cctv-panel-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   IMAGEN EN TARJETA - VIDEOVIGILANCIA CCTV
========================================================= */

.servicio-imagen-cctv {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen adaptada al cuadro */
.servicio-imagen-cctv img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* mantiene visible la cámara */
    object-position: 72% center;
}


/* Un pequeño ajuste en celular */
@media (max-width: 768px) {
    .servicio-imagen-cctv {
        height: 170px;
    }
}
/* =========================================================
   IMAGEN - ALARMAS DE SEGURIDAD
========================================================= */

.servicio-imagen-alarmas {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen adaptada al cuadro */
.servicio-imagen-alarmas img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* Mantiene la alarma centrada */
    object-position: center;
}


/* Responsive */
@media (max-width: 768px) {

    .servicio-imagen-alarmas {
        height: 140px;
    }

}
/* =========================================================
   IMAGEN - CONTROL DE ACCESO
========================================================= */

.servicio-imagen-acceso {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen adaptada al cuadro */
.servicio-imagen-acceso img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* Mantiene visible el lector y la tarjeta */
    object-position: center;
}


/* Responsive */
@media (max-width: 768px) {

    .servicio-imagen-acceso {
        height: 140px;
    }

}
/* =========================================================
   IMAGEN - MONITOREO 24/7
========================================================= */

.servicio-imagen-monitoreo {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen adaptada al cuadro */
.servicio-imagen-monitoreo img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* Mantiene visible al operador y los monitores */
    object-position: center;
}


/* Responsive */
@media (max-width: 768px) {

    .servicio-imagen-monitoreo {
        height: 140px;
    }

}
/* =========================================================
   IMAGEN - CERCOS ELÉCTRICOS
========================================================= */

.servicio-imagen-cercos {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen adaptada al cuadro */
.servicio-imagen-cercos img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* Mantiene visible el cerco y el muro */
    object-position: center;
}


/* Responsive */
@media (max-width: 768px) {

    .servicio-imagen-cercos {
        height: 140px;
    }

}
/* =========================================================
   IMAGEN - SOPORTE Y MANTENIMIENTO
========================================================= */

.servicio-imagen-soporte {
    width: 100%;
    height: 150px;

    margin-bottom: 22px;

    overflow: hidden;

    border-radius: 8px;

    background: #eef3f8;
}


/* Imagen de soporte */
.servicio-imagen-soporte img {
    width: 110%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
       Subimos el encuadre para que se vea:
       - el técnico
       - sus manos
       - la cámara que está reparando
    */
    object-position: 55% 18%;
}


/* Responsive */
@media (max-width: 768px) {

    .servicio-imagen-soporte {
        height: 140px;
    }

    .servicio-imagen-soporte img {
        object-position: 55% 18%;
    }
}
/* =========================================================
   OCULTAR ICONO Y NÚMERO DE LAS 6 TARJETAS
========================================================= */

.servicios-detalle-grid .servicio-detalle-top {
    display: none !important;
}
/* =========================================================
   COMO TRABAJAMOS - ICONOS NUEVOS
========================================================= */

/* Caja general del icono */
.proceso-icono {
    width: 74px !important;
    height: 74px !important;

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

    margin: 0 auto 20px !important;

    border-radius: 20px !important;

    background: #f4f7fb !important;
    background-image: none !important;

    border: 1px solid #dbe5f1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

/* Icono interno */
.proceso-icono i {
    font-size: 2rem !important;
    color: #1f2f46 !important;
}


/* =========================================================
   PASO 01 - EVALUACIÓN
========================================================= */
.proceso-grid > .proceso-card:nth-child(1) .proceso-icono {
    background: #eaf2ff !important;
    border-color: #cfe0ff !important;
}

.proceso-grid > .proceso-card:nth-child(1) .proceso-icono i {
    color: #2563eb !important;
}


/* =========================================================
   PASO 02 - DISEÑO
========================================================= */
.proceso-grid > .proceso-card:nth-child(3) .proceso-icono {
    background: #f3e8ff !important;
    border-color: #e2c9ff !important;
}

.proceso-grid > .proceso-card:nth-child(3) .proceso-icono i {
    color: #8b5cf6 !important;
}


/* =========================================================
   PASO 03 - INSTALACIÓN
========================================================= */
.proceso-grid > .proceso-card:nth-child(5) .proceso-icono {
    background: #fff1e8 !important;
    border-color: #ffd6bf !important;
}

.proceso-grid > .proceso-card:nth-child(5) .proceso-icono i {
    color: #f97316 !important;
}


/* =========================================================
   PASO 04 - SOPORTE
========================================================= */
.proceso-grid > .proceso-card:nth-child(7) .proceso-icono {
    background: #e8fbf3 !important;
    border-color: #bfeeda !important;
}

.proceso-grid > .proceso-card:nth-child(7) .proceso-icono i {
    color: #10b981 !important;
}
/* =========================================================
   HOGARES - AJUSTE FINAL
========================================================= */

.sector-card-hogares {
    padding: 0 !important;
    overflow: hidden !important;

    height: auto !important;
    min-height: 0 !important;

    align-self: start !important;

    background: #ffffff !important;
    border-radius: 14px !important;
}


/* FOTO */
.sector-imagen-hogares {
    width: calc(100% - 48px) !important;
    height: 180px !important;

    margin: 24px 24px 0 !important;

    overflow: hidden !important;
    border-radius: 10px !important;
}

.sector-imagen-hogares img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    /* Para mostrar mejor puerta + cámara + entrada */
    object-position: center 45% !important;
}


/* CONTENIDO */
.sector-card-hogares .sector-card-contenido {
    padding: 22px 24px 28px !important;
}


/* ICONO */
.sector-card-hogares .sector-icono-hogar {
    width: 56px !important;
    height: 56px !important;

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

    margin: 0 0 18px !important;
    padding: 0 !important;

    border-radius: 14px !important;

    background: #e8f7ef !important;
    box-shadow: none !important;
}


/* Evita el doble fondo que se ve en tu captura */
.sector-card-hogares .sector-icono-hogar::before,
.sector-card-hogares .sector-icono-hogar::after {
    display: none !important;
    content: none !important;
}

.sector-card-hogares .sector-icono-hogar i {
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #16a36a !important;
    font-size: 23px !important;
}


/* TÍTULO */
.sector-card-hogares h3 {
    margin: 0 0 10px !important;

    color: #1c2d44 !important;

    font-size: 1.35rem !important;
    font-weight: 800 !important;
}


/* TEXTO */
.sector-card-hogares p {
    margin: 0 !important;

    color: #536276 !important;

    line-height: 1.6 !important;
}


/* CELULAR */
@media (max-width: 768px) {

    .sector-imagen-hogares {
        width: calc(100% - 40px) !important;
        height: 160px !important;

        margin: 20px 20px 0 !important;
    }

    .sector-card-hogares .sector-card-contenido {
        padding: 20px !important;
    }
}
/* =========================================================
   CENTRAR CONTENIDO DE TARJETAS - SECTORES
========================================================= */

.sectores-grid .sector-card {
    text-align: center !important;
}

/* Centrar títulos */
.sectores-grid .sector-card h3 {
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Centrar descripciones */
.sectores-grid .sector-card p {
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Centrar iconos */
.sectores-grid .sector-card > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centrar las imágenes que tengan las tarjetas */
.sectores-grid .sector-card img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   CENTRAR TARJETAS DE SECTORES
========================================================= */

.sectores-grid .sector-card {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sectores-grid .sector-card > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto !important;
}

.sectores-grid .sector-card img {
    display: block;
    margin: 0 auto 20px auto !important;
}

.sectores-grid .sector-card h3 {
    width: 100%;
    text-align: center !important;
    margin: 0 0 14px 0;
}

.sectores-grid .sector-card p {
    width: 100%;
    text-align: center !important;
    margin: 0;
}
/* =========================================================
   CENTRAR TARJETAS DE SECTORES
========================================================= */

.sectores-grid .sector-card {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sectores-grid .sector-card > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto !important;
}

.sectores-grid .sector-card img {
    display: block;
    margin: 0 auto 20px auto !important;
}

.sectores-grid .sector-card h3 {
    width: 100%;
    text-align: center !important;
    margin: 0 0 14px 0;
}

.sectores-grid .sector-card p {
    width: 100%;
    text-align: center !important;
    margin: 0;
}
/* =========================================================
   HOGARES + COMERCIOS
   MISMO TAMAÑO Y MISMA ESTRUCTURA
========================================================= */


/* =========================================================
   TARJETAS
========================================================= */

.sector-card-hogares,
.sector-card-comercios {
    padding: 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;
}


/* =========================================================
   CAJA DE LAS IMÁGENES
   EXACTAMENTE EL MISMO TAMAÑO
========================================================= */

.sector-card-hogares .sector-imagen-hogares,
.sector-card-comercios .sector-imagen-hogares {
    width: calc(100% - 48px) !important;
    height: 220px !important;

    margin: 24px 24px 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 14px !important;

    background: #eef3f8 !important;
}


/* =========================================================
   IMÁGENES
========================================================= */

.sector-card-hogares .sector-imagen-hogares img,
.sector-card-comercios .sector-imagen-hogares img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    border-radius: 14px !important;
}


/* Encuadre de Hogares */
.sector-card-hogares .sector-imagen-hogares img {
    object-position: center 48% !important;
}


/* Encuadre de Comercios */
.sector-card-comercios .sector-imagen-comercios img {
    object-position: center center !important;
}


/* =========================================================
   CONTENIDO
========================================================= */

.sector-card-hogares .sector-card-contenido,
.sector-card-comercios .sector-card-contenido {
    width: 100% !important;

    padding: 28px 24px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ICONOS
========================================================= */

.sector-icono-hogar,
.sector-icono-comercio {
    width: 54px !important;
    height: 54px !important;

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

    margin: 0 auto 20px !important;

    padding: 0 !important;

    border-radius: 14px !important;

    box-shadow: none !important;
}


/* HOGARES */
.sector-icono-hogar {
    background: #e8f7ef !important;
}

.sector-icono-hogar i {
    color: #16a36a !important;
}


/* COMERCIOS */
.sector-icono-comercio {
    background: #fff7e9 !important;
}

.sector-icono-comercio i {
    color: #d17b14 !important;
}


/* Quitar fondos extra de los iconos */
.sector-icono-hogar i,
.sector-icono-comercio i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 23px !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   TITULOS
========================================================= */

.sector-card-hogares h3,
.sector-card-comercios h3 {
    width: 100% !important;

    margin: 0 0 12px !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: 1.45rem !important;
    font-weight: 800 !important;

    color: #1c2d44 !important;
}


/* =========================================================
   DESCRIPCIONES
========================================================= */

.sector-card-hogares p,
.sector-card-comercios p {
    width: 100% !important;

    max-width: 330px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    text-align: center !important;

    line-height: 1.6 !important;
}


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

@media (max-width: 768px) {

    .sector-card-hogares .sector-imagen-hogares,
    .sector-card-comercios .sector-imagen-hogares {
        width: calc(100% - 40px) !important;
        height: 190px !important;

        margin: 20px 20px 0 !important;
    }


    .sector-card-hogares .sector-card-contenido,
    .sector-card-comercios .sector-card-contenido {
        padding: 24px 20px 26px !important;
    }
}
/* =========================================================
   HOGARES + COMERCIOS + EMPRESAS
   MISMA ESTRUCTURA Y MISMO TAMAÑO
========================================================= */

/* =========================================================
   TARJETAS
========================================================= */

.sector-card-hogares,
.sector-card-comercios,
.sector-card-empresas {
    padding: 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONTENEDOR DE LAS IMÁGENES
   LAS 3 TIENEN EXACTAMENTE EL MISMO TAMAÑO
========================================================= */

.sector-card-hogares .sector-imagen-hogares,
.sector-card-comercios .sector-imagen-hogares,
.sector-card-empresas .sector-imagen-hogares {
    width: calc(100% - 48px) !important;
    height: 220px !important;

    margin: 24px 24px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 14px !important;

    background: #eef3f8 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   IMÁGENES
========================================================= */

.sector-card-hogares .sector-imagen img,
.sector-card-comercios .sector-imagen img,
.sector-card-empresas .sector-imagen img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 14px !important;
}


/* Ajuste de encuadre Hogares */
.sector-card-hogares .sector-imagen img {
    object-position: center 48% !important;
}


/* Ajuste de encuadre Comercios */
.sector-card-comercios .sector-imagen img {
    object-position: center center !important;
}


/* Ajuste de encuadre Empresas */
.sector-card-empresas .sector-imagen img {
    object-position: center center !important;
}


/* =========================================================
   CONTENIDO DE LAS 3 TARJETAS
========================================================= */

.sector-card-hogares .sector-card-contenido,
.sector-card-comercios .sector-card-contenido,
.sector-card-empresas .sector-card-contenido {
    width: 100% !important;

    padding: 28px 24px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ICONOS
========================================================= */

.sector-icono-hogar,
.sector-icono-comercio,
.sector-icono-empresa {
    width: 54px !important;
    height: 54px !important;

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

    margin: 0 auto 20px !important;
    padding: 0 !important;

    border-radius: 14px !important;

    box-shadow: none !important;
}


/* HOGARES */
.sector-icono-hogar {
    background: #e8f7ef !important;
}

.sector-icono-hogar i {
    color: #16a36a !important;
}


/* COMERCIOS */
.sector-icono-comercio {
    background: #fff7e9 !important;
}

.sector-icono-comercio i {
    color: #d17b14 !important;
}


/* EMPRESAS */
.sector-icono-empresa {
    background: #eaf3ff !important;
}

.sector-icono-empresa i {
    color: #1976d2 !important;
}


/* Quitar fondos o estilos extras de los iconos */
.sector-icono-hogar i,
.sector-icono-comercio i,
.sector-icono-empresa i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 23px !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

.sector-card-hogares h3,
.sector-card-comercios h3,
.sector-card-empresas h3 {
    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 1.45rem !important;
    font-weight: 800 !important;

    color: #1c2d44 !important;
}


/* =========================================================
   DESCRIPCIONES
========================================================= */

.sector-card-hogares p,
.sector-card-comercios p,
.sector-card-empresas p {
    width: 100% !important;
    max-width: 330px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    line-height: 1.6 !important;

    color: #26384d !important;
}


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

@media (max-width: 768px) {

    .sector-card-hogares .sector-imagen-hogares,
    .sector-card-comercios .sector-imagen-hogares,
    .sector-card-empresas .sector-imagen-hogares {
        width: calc(100% - 40px) !important;
        height: 190px !important;

        margin: 20px 20px 0 !important;
    }


    .sector-card-hogares .sector-card-contenido,
    .sector-card-comercios .sector-card-contenido,
    .sector-card-empresas .sector-card-contenido {
        padding: 24px 20px 26px !important;
    }
}
/* =========================================================
   SECTORES
   HOGARES + COMERCIOS + EMPRESAS + ALMACENES
   MISMA ESTRUCTURA Y MISMO TAMAÑO
========================================================= */


/* =========================================================
   TARJETAS
========================================================= */

.sector-card-hogares,
.sector-card-comercios,
.sector-card-empresas,
.sector-card-almacenes {
    padding: 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CAJA DE IMAGEN
   MISMO TAMAÑO PARA LAS 4
========================================================= */

.sector-card-hogares .sector-imagen,
.sector-card-comercios .sector-imagen,
.sector-card-empresas .sector-imagen,
.sector-card-almacenes .sector-imagen {
    width: calc(100% - 48px) !important;
    height: 220px !important;

    margin: 24px 24px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 14px !important;

    background: #eef3f8 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   IMÁGENES
========================================================= */

.sector-card-hogares .sector-imagen img,
.sector-card-comercios .sector-imagen img,
.sector-card-empresas .sector-imagen img,
.sector-card-almacenes .sector-imagen img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 14px !important;
}


/* Encuadre Hogares */
.sector-card-hogares .sector-imagen img {
    object-position: center 48% !important;
}


/* Encuadre Comercios */
.sector-card-comercios .sector-imagen img {
    object-position: center center !important;
}


/* Encuadre Empresas */
.sector-card-empresas .sector-imagen img {
    object-position: center center !important;
}


/* Encuadre Almacenes */
.sector-card-almacenes .sector-imagen img {
    object-position: center center !important;
}


/* =========================================================
   CONTENIDO
========================================================= */

.sector-card-hogares .sector-card-contenido,
.sector-card-comercios .sector-card-contenido,
.sector-card-empresas .sector-card-contenido,
.sector-card-almacenes .sector-card-contenido {
    width: 100% !important;

    padding: 28px 24px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ICONOS
========================================================= */

.sector-icono-hogar,
.sector-icono-comercio,
.sector-icono-empresa,
.sector-icono-almacen {
    width: 54px !important;
    height: 54px !important;

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

    margin: 0 auto 20px !important;
    padding: 0 !important;

    border-radius: 14px !important;

    box-shadow: none !important;
}


/* Hogares */
.sector-icono-hogar {
    background: #e8f7ef !important;
}

.sector-icono-hogar i {
    color: #16a36a !important;
}


/* Comercios */
.sector-icono-comercio {
    background: #fff7e9 !important;
}

.sector-icono-comercio i {
    color: #d17b14 !important;
}


/* Empresas */
.sector-icono-empresa {
    background: #eaf3ff !important;
}

.sector-icono-empresa i {
    color: #1976d2 !important;
}


/* Almacenes */
.sector-icono-almacen {
    background: #f3edff !important;
}

.sector-icono-almacen i {
    color: #6f42c1 !important;
}


/* =========================================================
   LIMPIEZA DE ICONOS
========================================================= */

.sector-icono-hogar i,
.sector-icono-comercio i,
.sector-icono-empresa i,
.sector-icono-almacen i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 23px !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

.sector-card-hogares h3,
.sector-card-comercios h3,
.sector-card-empresas h3,
.sector-card-almacenes h3 {
    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 1.45rem !important;
    font-weight: 800 !important;

    color: #1c2d44 !important;
}


/* =========================================================
   DESCRIPCIONES
========================================================= */

.sector-card-hogares p,
.sector-card-comercios p,
.sector-card-empresas p,
.sector-card-almacenes p {
    width: 100% !important;
    max-width: 330px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    line-height: 1.6 !important;

    color: #26384d !important;
}


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

@media (max-width: 768px) {

    .sector-card-hogares .sector-imagen,
    .sector-card-comercios .sector-imagen,
    .sector-card-empresas .sector-imagen,
    .sector-card-almacenes .sector-imagen {
        width: calc(100% - 40px) !important;
        height: 190px !important;

        margin: 20px 20px 0 !important;
    }


    .sector-card-hogares .sector-card-contenido,
    .sector-card-comercios .sector-card-contenido,
    .sector-card-empresas .sector-card-contenido,
    .sector-card-almacenes .sector-card-contenido {
        padding: 24px 20px 26px !important;
    }
}
/* =========================================================
   SECTORES - DISEÑO FINAL LIMPIO
   HOGARES | COMERCIOS | EMPRESAS | ALMACENES
========================================================= */

/* CONTENEDOR */
.sectores .contenedor {
    width: min(1280px, 92%) !important;
}


/* =========================================================
   GRID - 4 TARJETAS EN LA MISMA FILA
========================================================= */

.sectores-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-top: 45px !important;
}


/* Anula los tamaños antiguos que mandaban tarjetas abajo */
.sectores-grid .sector-card:nth-child(1),
.sectores-grid .sector-card:nth-child(2),
.sectores-grid .sector-card:nth-child(3),
.sectores-grid .sector-card:nth-child(4),
.sectores-grid .sector-card:nth-child(5) {
    grid-column: auto !important;
}


/* =========================================================
   TARJETAS
========================================================= */

.sectores-grid .sector-card {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Línea superior */
.sectores-grid .sector-card::before {
    width: 100% !important;
    height: 3px !important;

    background: #cf4b3d !important;
}


/* Hover profesional */
.sectores-grid .sector-card:hover {
    transform: translateY(-5px) !important;

    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.11) !important;
}


/* =========================================================
   IMÁGENES
========================================================= */

.sectores-grid .sector-imagen {
    width: calc(100% - 28px) !important;
    height: 165px !important;

    margin: 14px 14px 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    background: #eef3f8 !important;
}


/* FOTO */
.sectores-grid .sector-imagen img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 12px !important;

    transition: transform 0.3s ease !important;
}


/* Zoom suave */
.sectores-grid .sector-card:hover .sector-imagen img {
    transform: scale(1.025) !important;
}


/* Ajustes individuales de encuadre */
.sector-card-hogares .sector-imagen img {
    object-position: center 50% !important;
}

.sector-card-comercios .sector-imagen img {
    object-position: center 50% !important;
}

.sector-card-empresas .sector-imagen img {
    object-position: center 50% !important;
}

.sector-card-almacenes .sector-imagen img {
    object-position: center 50% !important;
}


/* =========================================================
   CONTENIDO
========================================================= */

.sectores-grid .sector-card-contenido {
    width: 100% !important;

    height: auto !important;

    padding: 18px 18px 24px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 0 !important;

    text-align: center !important;
}


/* =========================================================
   ICONOS
========================================================= */

.sector-icono-hogar,
.sector-icono-comercio,
.sector-icono-empresa,
.sector-icono-almacen {
    width: 52px !important;
    height: 52px !important;

    flex: 0 0 52px !important;

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

    margin: 0 auto 16px !important;
    padding: 0 !important;

    border-radius: 14px !important;

    box-shadow: none !important;

    transform: none !important;
}


/* HOGARES */
.sector-icono-hogar {
    background: #e8f7ef !important;
}

.sector-icono-hogar i {
    color: #16a36a !important;
}


/* COMERCIOS */
.sector-icono-comercio {
    background: #fff5e8 !important;
}

.sector-icono-comercio i {
    color: #e87519 !important;
}


/* EMPRESAS */
.sector-icono-empresa {
    background: #eaf3ff !important;
}

.sector-icono-empresa i {
    color: #1976d2 !important;
}


/* ALMACENES */
.sector-icono-almacen {
    background: #f2ecff !important;
}

.sector-icono-almacen i {
    color: #7442d3 !important;
}


/* Limpia estilos viejos de los íconos */
.sector-icono-hogar i,
.sector-icono-comercio i,
.sector-icono-empresa i,
.sector-icono-almacen i {
    width: auto !important;
    height: auto !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    font-size: 22px !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

.sectores-grid .sector-card h3 {
    width: 100% !important;

    margin: 0 0 9px !important;
    padding: 0 !important;

    text-align: center !important;

    color: #172b45 !important;

    font-size: 1.25rem !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
}


/* =========================================================
   DESCRIPCIONES
========================================================= */

.sectores-grid .sector-card p {
    width: 100% !important;
    max-width: 245px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    flex-grow: 0 !important;

    text-align: center !important;

    color: #506078 !important;

    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .sectores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sectores-grid .sector-imagen {
        height: 190px !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .sectores-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .sectores-grid .sector-imagen {
        height: 205px !important;
    }
}
/* =========================================================
   CHECKS DE SERVICIOS - AZUL / CELESTE
========================================================= */

.servicios-pagina .servicio-detalle-card li i {
    width: 20px !important;
    height: 20px !important;

    display: grid !important;
    place-items: center !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    /* Fondo celeste profesional */
    background: #60a5fa !important;

    /* Check blanco */
    color: #ffffff !important;

    font-size: 10px !important;

    box-shadow: none !important;
}
/* =========================================================
   MARCAS LÍDERES - INICIO
========================================================= */

.marcas-inicio {
    background: #ffffff;
    padding: 85px 0;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.marcas-inicio-encabezado {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.marcas-inicio-encabezado .subtitulo {
    display: inline-block;
    margin-bottom: 10px;

    color: #1d4ed8 !important;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.marcas-inicio-encabezado h2 {
    margin: 0;

    color: #1c2d44 !important;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;
}

.marcas-inicio-encabezado h2 span {
    color: #1d4ed8 !important;
}

.marcas-inicio-encabezado p {
    max-width: 650px;
    margin: 18px auto 0;

    color: #64748b !important;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID DE MARCAS
========================================================= */

.marcas-inicio-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 22px;

    align-items: stretch;
}


/* =========================================================
   TARJETAS
========================================================= */

.marca-inicio-card {
    min-height: 155px;

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

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* HOVER PROFESIONAL */
.marca-inicio-card:hover {
    transform: translateY(-4px);

    border-color: #bfdbfe;

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.10);
}


/* =========================================================
   CONTENEDOR DEL LOGO
========================================================= */

.marca-inicio-logo {
    width: 100%;
    height: 85px;

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


/* =========================================================
   LOGOS
========================================================= */

.marca-inicio-logo img {
    width: auto;
    height: auto;

    max-width: 82%;
    max-height: 58px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


/* Zoom muy suave */
.marca-inicio-card:hover .marca-inicio-logo img {
    transform: scale(1.04);
}


/* =========================================================
   AJUSTES INDIVIDUALES
   PARA QUE SE VEAN DEL MISMO TAMAÑO VISUAL
========================================================= */

.marca-inicio-card:nth-child(1) img {
    max-height: 48px;
}

.marca-inicio-card:nth-child(2) img {
    max-height: 52px;
}

.marca-inicio-card:nth-child(3) img {
    max-height: 50px;
}

.marca-inicio-card:nth-child(4) img {
    max-height: 54px;
}


/* =========================================================
   PIE DE MARCAS
========================================================= */

.marcas-inicio-pie {
    max-width: 850px;

    margin: 35px auto 0;
    padding: 18px 24px;

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

    gap: 14px;

    text-align: center;

    background: #f8fbff;

    border: 1px solid #dbeafe;
    border-radius: 14px;
}

.marcas-inicio-pie i {
    flex-shrink: 0;

    color: #2563eb !important;

    font-size: 22px;
}

.marcas-inicio-pie p {
    margin: 0;

    color: #475569 !important;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .marcas-inicio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .marcas-inicio {
        padding: 65px 0;
    }

    .marcas-inicio-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .marca-inicio-card {
        min-height: 135px;

        padding: 20px;
    }

    .marca-inicio-logo {
        height: 75px;
    }

    .marca-inicio-pie {
        flex-direction: column;

        padding: 18px;
    }
}
/* =========================================================
   MARCAS LÍDERES - INICIO
   DISEÑO FINAL ACTUALIZADO
========================================================= */

.marcas-inicio {
    padding: 65px 0 70px !important;

    background:
        linear-gradient(
            180deg,
            rgba(222, 236, 255, 0.78) 0%,
            rgba(232, 242, 255, 0.68) 100%
        ) !important;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.marcas-inicio-encabezado {
    width: 100%;
    max-width: 720px;

    margin: 0 auto 34px !important;

    text-align: center;
}


.marcas-inicio-encabezado .subtitulo {
    display: inline-block;

    margin-bottom: 9px;

    color: #1746b7 !important;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


.marcas-inicio-encabezado h2 {
    margin: 0;

    color: #1c2d44 !important;

    font-size: clamp(30px, 3.6vw, 43px) !important;
    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -0.7px;
}


.marcas-inicio-encabezado h2 span {
    color: #1746b7 !important;
}


.marcas-inicio-encabezado p {
    max-width: 620px;

    margin: 15px auto 0;

    color: #53657c !important;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   GRID DE LAS 5 MARCAS
========================================================= */

.marcas-inicio-grid {
    width: 100%;
    max-width: 1030px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(5, minmax(145px, 180px));

    justify-content: center;
    align-items: stretch;

    gap: 20px;
}


/* =========================================================
   TARJETAS
========================================================= */

.marca-inicio-card {
    width: 100%;

    min-height: 145px !important;

    padding: 18px !important;

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

    /*
       Fondo transparente para que no se vea
       como una caja blanca pesada
    */
    background: rgba(255, 255, 255, 0.55) !important;

    border:
        1px solid rgba(191, 210, 235, 0.62) !important;

    border-radius: 15px !important;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    box-shadow:
        0 7px 18px rgba(30, 64, 120, 0.05) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease !important;

    cursor: pointer;
}


/* =========================================================
   HOVER
========================================================= */

.marca-inicio-card:hover {
    transform:
        translateY(-8px)
        scale(1.025) !important;

    /*
       Se aclara un poco al pasar el mouse,
       haciendo que el logo resalte más
    */
    background: rgba(255, 255, 255, 0.80) !important;

    border-color:
        rgba(59, 130, 246, 0.42) !important;

    box-shadow:
        0 17px 34px rgba(37, 99, 235, 0.14) !important;
}


/* Efecto al hacer clic */
.marca-inicio-card:active {
    transform:
        translateY(-3px)
        scale(0.99) !important;
}


/* =========================================================
   CONTENEDOR DEL LOGO
========================================================= */

.marca-inicio-logo {
    width: 100%;
    height: 72px !important;

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


/* =========================================================
   LOGOS
========================================================= */

.marca-inicio-logo img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 84% !important;
    max-height: 52px !important;

    margin: 0 auto;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.28s ease,
        filter 0.28s ease !important;
}


/* Logo resalta al pasar el mouse */
.marca-inicio-card:hover .marca-inicio-logo img {
    transform: scale(1.07) !important;

    filter:
        contrast(1.04)
        saturate(1.05);
}


/* =========================================================
   TAMAÑOS INDIVIDUALES DE LOGOS
========================================================= */

/* Hagroy */
.marca-inicio-card:nth-child(1) img {
    max-height: 47px !important;
}


/* Hikvision */
.marca-inicio-card:nth-child(2) img {
    max-height: 43px !important;
}


/* Dahua */
.marca-inicio-card:nth-child(3) img {
    max-height: 48px !important;
}


/* Imou */
.marca-inicio-card:nth-child(4) img {
    max-height: 48px !important;
}


/* TP-Link / Tapo */
.marca-inicio-card:nth-child(5) img {
    max-height: 45px !important;
}


/* =========================================================
   BLOQUE INFERIOR
========================================================= */

.marcas-inicio-pie {
    width: fit-content;
    max-width: 850px;

    margin: 32px auto 0 !important;

    padding: 15px 24px !important;

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

    gap: 13px;

    /*
       También transparente para mantener
       el mismo estilo de las tarjetas
    */
    background:
        rgba(255, 255, 255, 0.42) !important;

    border:
        1px solid rgba(191, 210, 235, 0.58) !important;

    border-radius: 13px;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    text-align: center;

    box-shadow:
        0 6px 16px rgba(30, 64, 120, 0.04);
}


.marcas-inicio-pie i {
    flex-shrink: 0;

    color: #1746b7 !important;

    font-size: 20px;
}


.marcas-inicio-pie p {
    margin: 0;

    color: #475569 !important;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   TABLET GRANDE
========================================================= */

@media (max-width: 1050px) {

    .marcas-inicio-grid {
        max-width: 680px;

        grid-template-columns:
            repeat(3, minmax(160px, 190px));
    }


    /* Centrar las últimas dos */
    .marca-inicio-card:nth-child(4) {
        grid-column: 1 / 2;

        transform: translateX(50%);
    }


    .marca-inicio-card:nth-child(5) {
        grid-column: 2 / 3;

        transform: translateX(50%);
    }


    .marca-inicio-card:nth-child(4):hover,
    .marca-inicio-card:nth-child(5):hover {
        transform:
            translateX(50%)
            translateY(-8px)
            scale(1.025) !important;
    }
}


/* =========================================================
   TABLET / CELULAR
========================================================= */

@media (max-width: 700px) {

    .marcas-inicio {
        padding: 55px 0 60px !important;
    }


    .marcas-inicio-grid {
        max-width: 470px;

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

        gap: 15px;
    }


    .marca-inicio-card:nth-child(4),
    .marca-inicio-card:nth-child(5) {
        grid-column: auto;

        transform: none;
    }


    .marca-inicio-card:nth-child(4):hover,
    .marca-inicio-card:nth-child(5):hover {
        transform:
            translateY(-8px)
            scale(1.025) !important;
    }


    /* Quinta marca centrada */
    .marca-inicio-card:nth-child(5) {
        grid-column: 1 / -1;

        width: calc(50% - 8px);

        justify-self: center;
    }


    .marcas-inicio-pie {
        width: 100%;

        padding: 15px 20px !important;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .marcas-inicio-grid {
        max-width: 290px;

        grid-template-columns: 1fr;
    }


    .marca-inicio-card,
    .marca-inicio-card:nth-child(5) {
        width: 100%;

        grid-column: auto;
    }


    .marca-inicio-card {
        min-height: 135px !important;
    }


    .marcas-inicio-pie {
        flex-direction: column;

        gap: 8px;

        padding: 15px 18px !important;
    }
}
/* =========================================================
   ENCABEZADO DE MARCAS - ESTILO PROFESIONAL
========================================================= */

.marcas-inicio-encabezado {
    width: 100%;
    max-width: 780px;

    margin: 0 auto 38px !important;

    text-align: center;

    position: relative;
}


/* TEXTO PEQUEÑO SUPERIOR */
.marcas-inicio-encabezado .subtitulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    padding: 7px 15px;

    color: #1746b7 !important;

    background: rgba(37, 99, 235, 0.08);

    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* TÍTULO PRINCIPAL */
.marcas-inicio-encabezado h2 {
    max-width: 720px;

    margin: 0 auto !important;

    color: #1c2d44 !important;

    font-size: clamp(34px, 4vw, 48px) !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -1px;
}


/* PARTE AZUL */
.marcas-inicio-encabezado h2 span {
    color: #1746b7 !important;
}


/* LÍNEA DECORATIVA */
.marcas-inicio-encabezado h2::after {
    content: "";

    display: block;

    width: 58px;
    height: 4px;

    margin: 18px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #1746b7,
            #60a5fa
        );
}


/* DESCRIPCIÓN */
.marcas-inicio-encabezado p {
    max-width: 650px;

    margin: 18px auto 0 !important;

    color: #53657c !important;

    font-size: 15px;
    line-height: 1.7;
}
/* =========================================================
   PLANES - INICIO
   DISEÑO FINAL COMPLETO
========================================================= */

.planes-renovados {
    position: relative;

    padding: 85px 0 78px !important;

    overflow: hidden;

    background: #edf5ff !important;
}


/* =========================================================
   IMAGEN DE FONDO
   CÁMARA / EDIFICIO CONCENTRADOS A LA DERECHA
========================================================= */

.planes-renovados::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        url("../img/planes/fondo-planes.png");

    background-repeat: no-repeat;

    /*
       Desplazamos visualmente la zona importante
       de la imagen hacia la derecha.
    */
    background-position: 78% center;

    background-size: cover;

    opacity: 0.24;

    filter: blur(0.3px);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   CAPA PROTECTORA
   IZQUIERDA LIMPIA / DERECHA MÁS VISIBLE
========================================================= */

.planes-renovados::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(242, 248, 255, 0.99) 0%,

            rgba(242, 248, 255, 0.97) 22%,

            rgba(239, 247, 255, 0.90) 42%,

            rgba(234, 244, 255, 0.70) 62%,

            rgba(225, 239, 255, 0.42) 82%,

            rgba(219, 235, 255, 0.30) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* Todo el contenido encima del fondo */
.planes-contenedor {
    position: relative;

    z-index: 2;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.planes-intro-renovado {
    max-width: 880px;

    margin: 0 auto 48px !important;

    display: block !important;

    text-align: center;
}


/* Subtítulo */
.planes-intro-renovado .subtitulo {
    display: inline-flex;

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

    margin-bottom: 13px;

    padding: 7px 15px;

    color: #1746b7 !important;

    background:
        rgba(219, 234, 254, 0.72);

    border:
        1px solid rgba(37, 99, 235, 0.16);

    border-radius: 999px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* Título */
.planes-intro-renovado h2 {
    max-width: 850px;

    margin: 0 auto !important;

    color: #1c2d44 !important;

    font-size:
        clamp(34px, 4.3vw, 52px) !important;

    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -1.2px;
}


/* Segunda línea azul */
.planes-intro-renovado h2 span {
    display: block;

    margin-top: 5px;

    color: #1746b7 !important;
}


/* Descripción */
.planes-intro-renovado p {
    max-width: 680px;

    margin: 20px auto 0 !important;

    color: #53657c !important;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   GRID DE PLANES
========================================================= */

.planes-grid-renovado {
    display: grid !important;

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

    gap: 24px !important;

    max-width: 1120px;

    margin: 0 auto !important;

    align-items: stretch !important;
}


/* =========================================================
   TARJETAS
========================================================= */

.planes-renovados .plan-card {
    position: relative;

    min-height: 440px !important;

    padding:
        30px 28px 28px !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: visible !important;

    background:
        rgba(255, 255, 255, 0.66) !important;

    border:
        1px solid
        rgba(181, 202, 230, 0.72) !important;

    border-radius: 18px !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 12px 30px
        rgba(29, 78, 216, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease !important;
}


/* Hover */
.planes-renovados .plan-card:hover {
    transform:
        translateY(-8px) !important;

    background:
        rgba(255, 255, 255, 0.86) !important;

    border-color:
        rgba(96, 165, 250, 0.65) !important;

    box-shadow:
        0 20px 42px
        rgba(29, 78, 216, 0.14) !important;
}


/* =========================================================
   PLAN INTEGRAL DESTACADO
========================================================= */

.planes-renovados
.plan-card-destacado {
    border:
        2px solid #2563eb !important;

    background:
        rgba(255, 255, 255, 0.82) !important;

    box-shadow:
        0 18px 42px
        rgba(37, 99, 235, 0.15) !important;

    transform:
        translateY(-8px);
}


.planes-renovados
.plan-card-destacado:hover {
    transform:
        translateY(-14px) !important;

    box-shadow:
        0 25px 50px
        rgba(37, 99, 235, 0.20) !important;
}


/* =========================================================
   ETIQUETA MÁS CONSULTADO
========================================================= */

.planes-renovados
.plan-recomendado {
    position: absolute;

    top: -18px;
    left: 50%;

    transform:
        translateX(-50%);

    min-width: max-content;

    padding: 8px 17px;

    display: flex;

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

    gap: 7px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1746b7,
            #2563eb
        ) !important;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.8px;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.24);
}


.planes-renovados
.plan-recomendado i {
    color: #ffffff !important;

    font-size: 11px;
}


/* =========================================================
   ICONOS
========================================================= */

.planes-renovados
.plan-icono {
    width: 58px !important;
    height: 58px !important;

    margin:
        0 0 18px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 16px !important;

    box-shadow: none !important;

    transition:
        transform 0.28s ease !important;
}


.planes-renovados
.plan-card:hover
.plan-icono {
    transform:
        translateY(-3px)
        scale(1.05);
}


.planes-renovados
.plan-icono i {
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background:
        transparent !important;

    font-size: 24px !important;

    box-shadow: none !important;
}


/* =========================================================
   PLAN HOGAR - AZUL
========================================================= */

.planes-renovados
.plan-icono-hogar {
    background:
        rgba(219, 234, 254, 0.92) !important;
}


.planes-renovados
.plan-icono-hogar i {
    color: #2563eb !important;
}


.plan-card-hogar
.plan-etiqueta {
    color: #2563eb !important;
}


/* =========================================================
   PLAN NEGOCIO - NARANJA
========================================================= */

.planes-renovados
.plan-icono-negocio {
    background:
        rgba(255, 237, 213, 0.92) !important;
}


.planes-renovados
.plan-icono-negocio i {
    color: #ea580c !important;
}


.plan-card-negocio
.plan-etiqueta {
    color: #ea580c !important;
}


/* =========================================================
   PLAN EMPRESA - VERDE
========================================================= */

.planes-renovados
.plan-icono-empresa {
    background:
        rgba(220, 252, 231, 0.92) !important;
}


.planes-renovados
.plan-icono-empresa i {
    color: #16a34a !important;
}


.plan-card-empresa
.plan-etiqueta {
    color: #16a34a !important;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.planes-renovados
.plan-etiqueta {
    display: block;

    margin-bottom:
        9px !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.1px !important;
}


/* =========================================================
   TÍTULOS DE LOS PLANES
========================================================= */

.planes-renovados
.plan-card h3 {
    margin:
        0 0 12px !important;

    color:
        #172b45 !important;

    font-size:
        1.55rem !important;

    font-weight:
        800 !important;

    line-height: 1.2;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.planes-renovados
.plan-descripcion {
    min-height: 52px;

    margin:
        0 0 20px !important;

    color:
        #53657c !important;

    font-size:
        14.5px !important;

    line-height:
        1.6 !important;
}


/* =========================================================
   LISTA
========================================================= */

.planes-renovados
.plan-card ul {
    width: 100%;

    margin:
        0 0 24px !important;

    padding:
        20px 0 !important;

    list-style: none;

    border-top:
        1px solid
        rgba(203, 213, 225, 0.65);

    border-bottom:
        1px solid
        rgba(203, 213, 225, 0.65);
}


.planes-renovados
.plan-card li {
    margin-bottom:
        13px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap: 10px;

    color:
        #334155 !important;

    font-size:
        14.5px;
}


.planes-renovados
.plan-card li:last-child {
    margin-bottom:
        0 !important;
}


/* =========================================================
   CHECKS
========================================================= */

.planes-renovados
.plan-card li i {
    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        #2563eb !important;

    font-size:
        16px !important;

    box-shadow:
        none !important;
}


/* Checks Empresa */
.planes-renovados
.plan-card-empresa li i {
    color:
        #16a34a !important;
}


/* =========================================================
   ENLACES
========================================================= */

.planes-renovados
.plan-enlace {
    width: fit-content;

    margin-top:
        auto !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap: 10px;

    color:
        #1746b7 !important;

    font-size:
        15px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.planes-renovados
.plan-enlace:hover {
    gap: 15px;

    color:
        #2563eb !important;
}


/* Empresa */
.plan-card-empresa
.plan-enlace {
    color:
        #16843c !important;
}


/* =========================================================
   BLOQUE DE AYUDA
========================================================= */

.ruta-cotizacion-renovada {
    max-width: 1120px;

    margin:
        34px auto 0 !important;

    padding:
        19px 22px !important;

    display:
        grid !important;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center !important;

    gap: 18px;

    background:
        rgba(255, 255, 255, 0.48) !important;

    border:
        1px solid
        rgba(181, 202, 230, 0.70) !important;

    border-radius:
        17px !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.07) !important;
}


/* =========================================================
   ICONO DE AYUDA
========================================================= */

.ruta-cotizacion-renovada
.ruta-cotizacion-icono {
    width:
        54px !important;

    height:
        54px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    border-radius:
        15px !important;

    background:
        rgba(219, 234, 254, 0.90) !important;

    color:
        #2563eb !important;

    box-shadow:
        none !important;
}


.ruta-cotizacion-renovada
.ruta-cotizacion-icono i {
    color:
        #2563eb !important;

    background:
        transparent !important;

    font-size:
        21px !important;
}


/* =========================================================
   TEXTO DE AYUDA
========================================================= */

.ruta-cotizacion-texto {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ruta-cotizacion-texto strong {
    color:
        #172b45 !important;

    font-size:
        15px;

    font-weight:
        800;
}


.ruta-cotizacion-texto span {
    color:
        #53657c !important;

    font-size:
        13.5px;
}


/* =========================================================
   BOTÓN QUIERO ASESORÍA
========================================================= */

.ruta-cotizacion-boton {
    min-width:
        185px;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #1746b7,
            #2563eb
        ) !important;

    border-color:
        #1746b7 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 9px 22px
        rgba(37, 99, 235, 0.18) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


.ruta-cotizacion-boton:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 13px 28px
        rgba(37, 99, 235, 0.24) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .planes-grid-renovado {
        grid-template-columns:
            1fr !important;

        max-width: 620px;
    }


    .planes-renovados
    .plan-card {
        min-height:
            auto !important;
    }


    .planes-renovados
    .plan-card-destacado {
        transform: none;
    }


    .planes-renovados
    .plan-card-destacado:hover {
        transform:
            translateY(-7px) !important;
    }


    .ruta-cotizacion-renovada {
        max-width: 620px;

        grid-template-columns:
            auto 1fr;
    }


    .ruta-cotizacion-boton {
        grid-column:
            1 / -1;

        width: 100%;
    }


    /* Fondo más discreto en tablet */
    .planes-renovados::before {
        opacity: 0.18;

        background-position:
            72% center;
    }


    .planes-renovados::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 248, 255, 0.98) 0%,
                rgba(242, 248, 255, 0.94) 50%,
                rgba(229, 241, 255, 0.66) 100%
            );
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .planes-renovados {
        padding:
            65px 0 !important;
    }


    .planes-intro-renovado {
        margin-bottom:
            38px !important;
    }


    .planes-renovados
    .plan-card {
        padding:
            26px 22px 24px !important;
    }


    .ruta-cotizacion-renovada {
        grid-template-columns:
            1fr;

        text-align: center;
    }


    .ruta-cotizacion-renovada
    .ruta-cotizacion-icono {
        margin:
            0 auto !important;
    }


    .ruta-cotizacion-boton {
        grid-column:
            auto;
    }


    /* Fondo todavía más suave */
    .planes-renovados::before {
        opacity:
            0.11;

        background-position:
            75% center;
    }


    .planes-renovados::after {
        background:
            rgba(
                239,
                247,
                255,
                0.90
            );
    }
}
/* =========================================================
   BOTÓN QUIERO ASESORÍA - TEXTO INTERIOR BLANCO
========================================================= */

.ruta-cotizacion-renovada .ruta-cotizacion-boton {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Fuerza blanco en TODO lo que esté dentro del botón */
.ruta-cotizacion-renovada .ruta-cotizacion-boton * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* También al pasar el mouse */
.ruta-cotizacion-renovada .ruta-cotizacion-boton:hover,
.ruta-cotizacion-renovada .ruta-cotizacion-boton:hover * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Flecha */
.ruta-cotizacion-renovada .ruta-cotizacion-boton i {
    color: #ffffff !important;
}
/* =========================================================
   SOLUCIONES POR SECTOR - INICIO
   DISEÑO PROFESIONAL HORIZONTAL
========================================================= */

.sectores-home-nuevo {
    position: relative;

    padding: 85px 0 !important;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef6ff 55%,
            #f8fbff 100%
        ) !important;
}


/* =========================================================
   DECORACIÓN DEL FONDO
========================================================= */

.sectores-home-nuevo::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: -150px;

    border:
        1px solid rgba(37, 99, 235, 0.09);

    border-radius: 50%;

    pointer-events: none;
}


.sectores-home-nuevo::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -300px;
    bottom: -280px;

    border:
        1px solid rgba(37, 99, 235, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   GRID PRINCIPAL
========================================================= */

.sectores-home-nuevo
.sectores-home-layout {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-template-areas:
        "intro casas"
        "tiendas edificios"
        "universidades universidades"
        "grifos grifos";

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   ENCABEZADO IZQUIERDO
========================================================= */

.sectores-home-nuevo
.sectores-home-intro {
    grid-area: intro;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        34px 42px 34px 5px;
}


/* SUBTÍTULO */
.sectores-home-nuevo
.sectores-home-intro
.subtitulo {
    display: inline-block;

    width: fit-content;

    margin-bottom: 16px;

    color: #1d4ed8 !important;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


/* TÍTULO */
.sectores-home-nuevo
.sectores-home-intro h2 {
    max-width: 530px;

    margin: 0 !important;

    color: #172b45 !important;

    font-size:
        clamp(35px, 4vw, 50px) !important;

    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -1.2px;
}


/* PARTE AZUL */
.sectores-home-nuevo
.sectores-home-intro h2 span {
    color: #1d4ed8 !important;
}


/* LÍNEA DECORATIVA */
.linea-azul-sectores {
    width: 48px;
    height: 4px;

    margin:
        22px 0 20px;

    display: block;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #60a5fa
        );
}


/* DESCRIPCIÓN */
.sectores-home-nuevo
.sectores-home-intro p {
    max-width: 520px;

    margin: 0 !important;

    color: #53657c !important;

    font-size: 15.5px;

    line-height: 1.75;
}


/* =========================================================
   POSICIÓN DE LAS TARJETAS
========================================================= */

.sector-card-casas {
    grid-area: casas;
}


.sector-card-tiendas {
    grid-area: tiendas;
}


.sector-card-edificios {
    grid-area: edificios;
}


.sector-card-universidades {
    grid-area: universidades;
}


/* =========================================================
   TARJETAS HORIZONTALES
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal {
    position: relative;

    min-height: 255px;

    display: grid;

    grid-template-columns:
        46% 54%;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid rgba(191, 210, 235, 0.75);

    border-radius: 18px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 10px 28px
        rgba(30, 64, 120, 0.07);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease;
}


/* HOVER */
.sectores-home-nuevo
.sector-card-horizontal:hover {
    transform:
        translateY(-7px);

    background:
        rgba(255, 255, 255, 0.96);

    border-color:
        rgba(96, 165, 250, 0.58);

    box-shadow:
        0 20px 40px
        rgba(37, 99, 235, 0.13);
}


/* =========================================================
   IMÁGENES
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-imagen {
    position: relative;

    min-width: 0;
    min-height: 255px;

    overflow: hidden;
}


.sectores-home-nuevo
.sector-card-horizontal-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.45s ease;
}


/* Zoom muy suave */
.sectores-home-nuevo
.sector-card-horizontal:hover
.sector-card-horizontal-imagen img {
    transform:
        scale(1.045);
}


/* DEGRADADO ENTRE FOTO Y TEXTO */
.sectores-home-nuevo
.sector-card-horizontal-imagen::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 68%,
            rgba(255, 255, 255, 0.82) 100%
        );

    pointer-events: none;
}


/* =========================================================
   ICONO SOBRE LA FOTO
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-icono {
    position: absolute;

    left: 22px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 3;

    width: 58px;
    height: 58px;

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

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid rgba(219, 234, 254, 0.95);

    border-radius: 50%;

    color: #1d4ed8;

    font-size: 22px;

    box-shadow:
        0 8px 22px
        rgba(15, 23, 42, 0.11);

    transition:
        transform 0.28s ease,
        background-color 0.28s ease,
        color 0.28s ease;
}


.sectores-home-nuevo
.sector-card-horizontal:hover
.sector-card-horizontal-icono {
    transform:
        translateY(-50%)
        scale(1.07);

    background: #1d4ed8;

    color: #ffffff;
}


/* =========================================================
   CONTENIDO DE TARJETA
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-contenido {
    padding:
        34px 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}


/* TÍTULO */
.sectores-home-nuevo
.sector-card-horizontal-contenido h3 {
    margin:
        0 0 10px !important;

    color: #172b45 !important;

    font-size:
        22px !important;

    font-weight: 800 !important;

    line-height: 1.2;
}


/* MINI LÍNEA */
.sectores-home-nuevo
.sector-card-linea {
    width: 32px;
    height: 3px;

    margin-bottom: 17px;

    display: block;

    border-radius: 10px;

    background: #2563eb;
}


/* TEXTO */
.sectores-home-nuevo
.sector-card-horizontal-contenido p {
    margin:
        0 0 22px !important;

    color: #53657c !important;

    font-size:
        14px;

    line-height: 1.65;
}


/* =========================================================
   ENLACE
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-link {
    width: fit-content;

    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #1d4ed8 !important;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.sectores-home-nuevo
.sector-card-horizontal-link:hover {
    gap: 15px;

    color: #1746b7 !important;
}


.sectores-home-nuevo
.sector-card-horizontal-link i {
    color: inherit !important;
}


/* =========================================================
   UNIVERSIDADES
   TARJETA MÁS ANCHA
========================================================= */

.sectores-home-nuevo
.sector-card-universidades {
    grid-template-columns:
        29% 71%;

    min-height: 210px;
}


.sectores-home-nuevo
.sector-card-universidades
.sector-card-horizontal-imagen {
    min-height: 210px;
}


.sectores-home-nuevo
.sector-card-universidades
.sector-card-horizontal-contenido {
    max-width: 520px;

    padding:
        30px 36px;
}


/* =========================================================
   GRIFOS Y OTROS RUBROS
========================================================= */

.sectores-home-nuevo
.sector-card-franja {
    grid-area: grifos;

    position: relative;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        70px 210px minmax(250px, 1fr) 150px 270px;

    align-items: center;

    gap: 20px;

    overflow: hidden;

    padding-left: 24px;

    background:
        rgba(255, 255, 255, 0.83);

    border:
        1px solid
        rgba(191, 210, 235, 0.74);

    border-radius: 17px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 10px 28px
        rgba(30, 64, 120, 0.07);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


.sectores-home-nuevo
.sector-card-franja:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(96, 165, 250, 0.58);

    box-shadow:
        0 18px 36px
        rgba(37, 99, 235, 0.12);
}


/* ICONO GRIFO */
.sectores-home-nuevo
.sector-card-franja-icono {
    width: 54px;
    height: 54px;

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

    border-radius: 50%;

    background:
        rgba(219, 234, 254, 0.88);

    color: #2563eb;

    font-size: 20px;

    transition:
        transform 0.28s ease,
        background-color 0.28s ease,
        color 0.28s ease;
}


.sectores-home-nuevo
.sector-card-franja:hover
.sector-card-franja-icono {
    transform: scale(1.07);

    background: #2563eb;

    color: #ffffff;
}


/* TÍTULO GRIFOS */
.sectores-home-nuevo
.sector-card-franja-titulo {
    padding-right: 20px;

    border-right:
        1px solid
        rgba(203, 213, 225, 0.70);
}


.sectores-home-nuevo
.sector-card-franja-titulo h3 {
    margin: 0 !important;

    color: #172b45 !important;

    font-size:
        18px !important;

    font-weight:
        800 !important;
}


/* TEXTO GRIFOS */
.sectores-home-nuevo
.sector-card-franja-texto p {
    margin: 0 !important;

    color: #53657c !important;

    font-size: 13.5px;

    line-height: 1.55;
}


/* =========================================================
   FOTO DE GRIFOS
========================================================= */

.sectores-home-nuevo
.sector-card-franja-imagen {
    align-self: stretch;

    min-width: 0;

    position: relative;

    overflow: hidden;
}


.sectores-home-nuevo
.sector-card-franja-imagen::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.20) 40%,
            transparent 75%
        );

    pointer-events: none;
}


.sectores-home-nuevo
.sector-card-franja-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.4s ease;
}


.sectores-home-nuevo
.sector-card-franja:hover
.sector-card-franja-imagen img {
    transform:
        scale(1.04);
}


/* =========================================================
   TABLET GRANDE
========================================================= */

@media (max-width: 1100px) {

    .sectores-home-nuevo
    .sectores-home-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "intro"
            "casas"
            "tiendas"
            "edificios"
            "universidades"
            "grifos";
    }


    .sectores-home-nuevo
    .sectores-home-intro {
        max-width: 700px;

        padding:
            10px 0 25px;

        text-align: center;

        margin: 0 auto;
    }


    .sectores-home-nuevo
    .sectores-home-intro
    .subtitulo {
        margin:
            0 auto 15px;
    }


    .sectores-home-nuevo
    .sectores-home-intro h2 {
        margin:
            0 auto !important;
    }


    .linea-azul-sectores {
        margin:
            20px auto;
    }


    .sectores-home-nuevo
    .sectores-home-intro p {
        margin:
            0 auto !important;
    }


    .sectores-home-nuevo
    .sector-card-franja {
        grid-template-columns:
            65px
            190px
            minmax(220px, 1fr)
            130px;

        padding:
            20px 22px;
    }


    .sectores-home-nuevo
    .sector-card-franja-imagen {
        display: none;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .sectores-home-nuevo {
        padding:
            65px 0 !important;
    }


    .sectores-home-nuevo
    .sector-card-horizontal,
    .sectores-home-nuevo
    .sector-card-universidades {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-imagen,
    .sectores-home-nuevo
    .sector-card-universidades
    .sector-card-horizontal-imagen {
        height: 220px;
        min-height: 220px;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-imagen::after {
        background:
            linear-gradient(
                180deg,
                transparent 60%,
                rgba(255, 255, 255, 0.65) 100%
            );
    }


    .sectores-home-nuevo
    .sector-card-horizontal-icono {
        top: auto;

        bottom: 18px;

        transform: none;
    }


    .sectores-home-nuevo
    .sector-card-horizontal:hover
    .sector-card-horizontal-icono {
        transform:
            scale(1.07);
    }


    .sectores-home-nuevo
    .sector-card-horizontal-contenido,
    .sectores-home-nuevo
    .sector-card-universidades
    .sector-card-horizontal-contenido {
        max-width: none;

        padding:
            26px 24px;
    }


    .sectores-home-nuevo
    .sector-card-franja {
        grid-template-columns:
            58px 1fr;

        padding:
            22px;

        gap: 14px;
    }


    .sectores-home-nuevo
    .sector-card-franja-titulo {
        padding: 0;

        border: 0;
    }


    .sectores-home-nuevo
    .sector-card-franja-texto,
    .sectores-home-nuevo
    .sector-card-franja-enlace {
        grid-column:
            1 / -1;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 480px) {

    .sectores-home-nuevo {
        padding:
            55px 0 !important;
    }


    .sectores-home-nuevo
    .sectores-home-layout {
        gap: 17px;
    }


    .sectores-home-nuevo
    .sectores-home-intro h2 {
        font-size:
            32px !important;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-imagen,
    .sectores-home-nuevo
    .sector-card-universidades
    .sector-card-horizontal-imagen {
        height: 190px;
        min-height: 190px;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-contenido {
        padding:
            24px 20px;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-contenido h3 {
        font-size:
            20px !important;
    }
}
/* =========================================================
   IMÁGENES - SOLUCIONES POR SECTOR
========================================================= */

.sectores-home-nuevo .sector-card-horizontal-imagen {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 255px;

    overflow: hidden;

    background: #eaf3ff;
}


/* IMAGEN GENERAL */
.sectores-home-nuevo .sector-card-horizontal-imagen img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover !important;
    object-position: center center !important;

    transition:
        transform 0.45s ease,
        filter 0.35s ease;
}


/* EDIFICIOS Y CONDOMINIOS */
.sectores-home-nuevo
.sector-card-edificios
.sector-card-horizontal-imagen img {
    object-position: center 53% !important;
}


/* CASAS */
.sectores-home-nuevo
.sector-card-casas
.sector-card-horizontal-imagen img {
    object-position: center 55% !important;
}


/* TIENDAS */
.sectores-home-nuevo
.sector-card-tiendas
.sector-card-horizontal-imagen img {
    object-position: center center !important;
}


/* UNIVERSIDADES */
.sectores-home-nuevo
.sector-card-universidades
.sector-card-horizontal-imagen img {
    object-position: center 52% !important;
}


/* =========================================================
   EFECTO AL PASAR EL MOUSE
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal:hover
.sector-card-horizontal-imagen img {
    transform: scale(1.045);

    filter:
        brightness(1.02)
        contrast(1.02);
}


/* =========================================================
   DEGRADADO ENTRE FOTO Y CONTENIDO
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-imagen::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 55%,
            rgba(255, 255, 255, 0.12) 70%,
            rgba(255, 255, 255, 0.82) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   ICONO ENCIMA DE LA FOTO
========================================================= */

.sectores-home-nuevo
.sector-card-horizontal-icono {
    position: absolute;

    left: 22px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 3;

    width: 58px;
    height: 58px;

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

    color: #1d4ed8;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid rgba(219, 234, 254, 0.95);

    border-radius: 50%;

    font-size: 22px;

    box-shadow:
        0 8px 22px
        rgba(15, 23, 42, 0.12);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        transform 0.28s ease,
        background-color 0.28s ease,
        color 0.28s ease;
}


/* HOVER DEL ICONO */
.sectores-home-nuevo
.sector-card-horizontal:hover
.sector-card-horizontal-icono {
    transform:
        translateY(-50%)
        scale(1.08);

    color: #ffffff;

    background: #1d4ed8;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 760px) {

    .sectores-home-nuevo
    .sector-card-horizontal-imagen {
        height: 220px;
        min-height: 220px;
    }


    .sectores-home-nuevo
    .sector-card-horizontal-imagen::after {
        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(255, 255, 255, 0.65) 100%
            );
    }


    .sectores-home-nuevo
    .sector-card-horizontal-icono {
        top: auto;

        bottom: 18px;

        transform: none;
    }


    .sectores-home-nuevo
    .sector-card-horizontal:hover
    .sector-card-horizontal-icono {
        transform: scale(1.08);
    }
}
/* =========================================================
   =========================================================
   CTA GLOBAL - MAR 3D EN TIEMPO REAL
   IP TECNOLOGÍA

   COLOR FONDO EXACTO:
   #03080e

   COLOR MAR EXACTO:
   #00c8e6

   El movimiento real será generado por Three.js
   desde main.js.
   =========================================================
========================================================= */


/* =========================================================
   1. CONTENEDOR GENERAL DEL CTA
========================================================= */

.cta-global.cta-mar-seguridad {
    position: relative !important;

    width: min(
        1180px,
        calc(100% - 48px)
    ) !important;

    min-height: 220px !important;

    margin:
        70px auto !important;

    padding: 0 !important;

    overflow: hidden !important;

    isolation: isolate !important;

    border:
        1px solid
        rgba(0, 200, 230, 0.24) !important;

    border-radius:
        22px !important;

    background:
        #03080e !important;

    box-shadow:
        0 20px 46px
        rgba(7, 20, 33, 0.20) !important;
}


/* =========================================================
   2. CONTENEDOR DEL MAR 3D
========================================================= */

.cta-mar-seguridad
#canvas-container {
    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    border-radius:
        inherit !important;

    background-color:
        #03080e !important;

    pointer-events:
        none !important;
}


/* =========================================================
   3. CANVAS GENERADO POR THREE.JS
========================================================= */

.cta-mar-seguridad
#canvas-container canvas {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1;

    pointer-events:
        none !important;
}


/* =========================================================
   4. CAPA OSCURA PARA MANTENER TEXTO LEGIBLE
========================================================= */

.cta-mar-seguridad::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 14, 0.45) 0%,
            rgba(3, 8, 14, 0.27) 42%,
            rgba(3, 8, 14, 0.10) 70%,
            rgba(3, 8, 14, 0.20) 100%
        );

    pointer-events: none;
}


/* =========================================================
   5. LUZ CYAN MUY SUAVE
========================================================= */

.cta-mar-seguridad::after {
    content: "";

    position: absolute;

    z-index: 1;

    right: 5%;
    bottom: -110px;

    width: 480px;
    height: 230px;

    border-radius: 50%;

    background:
        rgba(0, 200, 230, 0.08);

    filter:
        blur(70px);

    pointer-events:
        none;
}


/* =========================================================
   6. CONTENEDOR INTERNO
========================================================= */

.cta-mar-seguridad
> .contenedor {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   7. CONTENIDO DEL CTA
========================================================= */

.cta-mar-contenido {
    position: relative !important;

    z-index: 3 !important;

    display: flex !important;

    width: 100% !important;

    min-height:
        220px !important;

    margin: 0 !important;

    padding:
        42px 46px !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        45px !important;

    overflow:
        visible !important;

    border:
        0 !important;

    border-radius:
        22px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* =========================================================
   8. ELIMINAR LAS OLAS CSS ANTIGUAS

   Ahora las ondas las realizará Three.js.
========================================================= */

.cta-mar-contenido::before,
.cta-mar-contenido::after,
.cta-mar-seguridad
.cta-interactiva::before,
.cta-mar-seguridad
.cta-interactiva::after {
    content:
        none !important;

    display:
        none !important;

    animation:
        none !important;
}


/* =========================================================
   9. BLOQUE DEL TEXTO
========================================================= */

.cta-mar-texto {
    position: relative;

    z-index: 4;

    max-width:
        760px;
}


/* =========================================================
   10. ETIQUETA SUPERIOR
========================================================= */

.cta-mar-etiqueta {
    display:
        inline-flex !important;

    margin:
        0 0 13px !important;

    align-items:
        center !important;

    color:
        #00c8e6 !important;

    -webkit-text-fill-color:
        #00c8e6 !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        1.6px !important;

    text-transform:
        uppercase !important;

    text-shadow:
        0 0 18px
        rgba(0, 200, 230, 0.16);
}


/* PEQUEÑA LÍNEA A LA IZQUIERDA */

.cta-mar-etiqueta::before {
    content: "";

    display: block;

    width: 22px;
    height: 2px;

    margin-right: 9px;

    border-radius:
        999px;

    background:
        #00c8e6;

    box-shadow:
        0 0 10px
        rgba(0, 200, 230, 0.28);
}


/* =========================================================
   11. TÍTULO PRINCIPAL
========================================================= */

.cta-mar-texto h2 {
    max-width:
        760px !important;

    margin:
        0 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    font-size:
        clamp(
            29px,
            3vw,
            43px
        ) !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -0.7px !important;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.30);
}


/* =========================================================
   12. BOTÓN SOLICITAR COTIZACIÓN
========================================================= */

.cta-mar-seguridad
.btn-cta-mar {
    position:
        relative !important;

    z-index:
        5 !important;

    display:
        inline-flex !important;

    min-width:
        225px !important;

    min-height:
        58px !important;

    padding:
        0 24px !important;

    flex:
        0 0 auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        12px !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(0, 200, 230, 0.52) !important;

    border-radius:
        11px !important;

    /*
       No usamos un azul genérico.

       El botón toma el cyan del mar,
       pero de forma más oscura para
       conservar el estilo profesional.
    */
    background:
        rgba(0, 123, 148, 0.88) !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    font-size:
        13.5px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.23),
        0 0 20px
        rgba(0, 200, 230, 0.08) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* =========================================================
   13. TEXTO E ICONO SIEMPRE BLANCOS
========================================================= */

.cta-mar-seguridad
.btn-cta-mar,
.cta-mar-seguridad
.btn-cta-mar span,
.cta-mar-seguridad
.btn-cta-mar i {
    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


/* =========================================================
   14. BRILLO SUAVE DEL BOTÓN
========================================================= */

.cta-mar-seguridad
.btn-cta-mar::before {
    content: "";

    position:
        absolute;

    top:
        -35%;

    left:
        -95px;

    width:
        55px;

    height:
        170%;

    transform:
        rotate(18deg);

    background:
        rgba(255, 255, 255, 0.12);

    filter:
        blur(2px);

    pointer-events:
        none;

    transition:
        left 0.55s ease;
}


/* =========================================================
   15. HOVER DEL BOTÓN
========================================================= */

.cta-mar-seguridad
.btn-cta-mar:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        #00c8e6 !important;

    background:
        rgba(0, 145, 173, 0.94) !important;

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.26),
        0 0 25px
        rgba(0, 200, 230, 0.15) !important;
}


.cta-mar-seguridad
.btn-cta-mar:hover::before {
    left:
        calc(100% + 40px);
}


/* =========================================================
   16. FLECHA
========================================================= */

.cta-mar-seguridad
.btn-cta-mar i {
    position:
        relative;

    z-index:
        2;

    font-size:
        14px;

    transition:
        transform 0.25s ease;
}


.cta-mar-seguridad
.btn-cta-mar:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   17. ESTADO ACTIVO
========================================================= */

.cta-mar-seguridad
.btn-cta-mar:active {
    transform:
        translateY(-1px)
        scale(0.99) !important;
}


/* =========================================================
   18. TABLET
========================================================= */

@media (max-width: 900px) {

    .cta-global.cta-mar-seguridad {
        width:
            calc(100% - 36px) !important;

        margin:
            60px auto !important;
    }


    .cta-mar-contenido {
        min-height:
            250px !important;

        padding:
            38px 32px !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        gap:
            26px !important;
    }


    .cta-mar-texto {
        max-width:
            680px;
    }


    .cta-mar-texto h2 {
        max-width:
            680px !important;
    }


    .cta-mar-seguridad
    .btn-cta-mar {
        min-width:
            215px !important;
    }

}


/* =========================================================
   19. CELULAR
========================================================= */

@media (max-width: 600px) {

    .cta-global.cta-mar-seguridad {
        width:
            calc(100% - 24px) !important;

        min-height:
            290px !important;

        margin:
            48px auto !important;

        border-radius:
            17px !important;
    }


    .cta-mar-contenido {
        min-height:
            290px !important;

        padding:
            34px 22px !important;

        gap:
            25px !important;

        border-radius:
            17px !important;
    }


    .cta-mar-etiqueta {
        font-size:
            9.5px !important;

        letter-spacing:
            1.2px !important;
    }


    .cta-mar-etiqueta::before {
        width:
            17px;
    }


    .cta-mar-texto h2 {
        font-size:
            clamp(
                27px,
                8vw,
                36px
            ) !important;

        line-height:
            1.16 !important;
    }


    .cta-mar-seguridad
    .btn-cta-mar {
        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            55px !important;
    }


    .cta-mar-seguridad::before {
        background:
            rgba(3, 8, 14, 0.67);
    }

}


/* =========================================================
   20. ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cta-mar-seguridad
    .btn-cta-mar,

    .cta-mar-seguridad
    .btn-cta-mar i,

    .cta-mar-seguridad
    .btn-cta-mar::before {
        transition:
            none !important;
    }

}
/* =========================================================
   INICIO - ASÍ PROTEGEMOS TU ESPACIO
   ========================================================= */

.proceso-home {
    position: relative;
    overflow: hidden;
    padding: 85px 0 80px;
    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 48%,
            #f7faff 100%
        );
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.proceso-home-encabezado {
    max-width: 850px;
    margin: 0 auto 58px;
    text-align: center;
}

.proceso-home-encabezado .subtitulo {
    display: inline-block;
    margin-bottom: 12px;
    color: #1757c8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.proceso-home-encabezado h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #16253a;
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
}

.proceso-home-encabezado h2 span {
    color: #1757c8;
}


/* LÍNEAS DECORATIVAS LATERALES */

.proceso-home-encabezado h2::before,
.proceso-home-encabezado h2::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 90px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #3e73d7
    );
}

.proceso-home-encabezado h2::before {
    right: calc(100% + 26px);
}

.proceso-home-encabezado h2::after {
    left: calc(100% + 26px);
    transform: rotate(180deg);
}


/* PEQUEÑOS ROMBOS */

.proceso-home-encabezado::before,
.proceso-home-encabezado::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background: #1757c8;
    transform: rotate(45deg);
}

.proceso-home-encabezado::before {
    margin-top: 78px;
    margin-left: -114px;
}

.proceso-home-encabezado::after {
    margin-top: 78px;
    margin-left: 108px;
}


.proceso-home-encabezado p {
    max-width: 680px;
    margin: 18px auto 0;
    color: #52637a;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   GRID DE PASOS
   ========================================================= */

.proceso-home-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 38px;
    max-width: 1160px;
    margin: 0 auto;
}


/* =========================================================
   TARJETA
   ========================================================= */

.proceso-home-card {
    position: relative;
    min-height: 305px;
    padding: 53px 28px 32px;
    background: #ffffff;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    text-align: center;

    box-shadow:
        0 8px 24px rgba(26, 48, 82, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* HOVER SUAVE */

.proceso-home-card:hover {
    transform: translateY(-5px);
    border-color: #cbd9ee;

    box-shadow:
        0 15px 34px rgba(25, 66, 130, 0.12);
}


/* =========================================================
   NÚMERO SUPERIOR
   ========================================================= */

.proceso-home-numero {
    position: absolute;
    top: -22px;
    left: 50%;
    z-index: 5;

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

    width: 46px;
    height: 46px;

    background: #1757c8;
    border: 4px solid #f7faff;
    border-radius: 50%;

    color: #ffffff;
    font-size: 15px;
    font-weight: 800;

    transform: translateX(-50%);

    box-shadow:
        0 5px 14px rgba(23, 87, 200, 0.22);
}


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

.proceso-home-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    margin: 0 auto 23px;

    background: #edf4ff;
    border-radius: 50%;

    color: #173c70;
    font-size: 38px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.proceso-home-card:hover .proceso-home-icono {
    background: #e4efff;
    color: #1757c8;
    transform: translateY(-2px);
}


/* =========================================================
   TÍTULOS Y TEXTO
   ========================================================= */

.proceso-home-card h3 {
    margin: 0 0 15px;

    color: #14243a;

    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.proceso-home-card p {
    margin: 0;

    color: #57677c;

    font-size: 14.5px;
    line-height: 1.7;
}


/* =========================================================
   CONEXIÓN ENTRE TARJETAS
   ========================================================= */

.proceso-home-card:not(:last-child)::after {
    content: "\f061";

    position: absolute;
    top: 88px;
    right: -53px;
    z-index: 8;

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

    width: 30px;
    height: 30px;

    background: #1757c8;
    border: 5px solid #ffffff;
    border-radius: 50%;

    color: #ffffff;

    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0 3px 10px rgba(23, 87, 200, 0.18);
}


/* LÍNEA QUE UNE LOS PASOS */

.proceso-home-card:not(:last-child)::before {
    content: "";

    position: absolute;
    top: 102px;
    right: -42px;

    width: 45px;
    height: 2px;

    background: #1757c8;
}


/* =========================================================
   BOTÓN DE ACCIÓN
   ========================================================= */

.proceso-home-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 45px;
}

.proceso-home-accion .btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-width: 285px;

    padding: 16px 27px;

    background: #1757c8;
    border: 1px solid #1757c8;
    border-radius: 8px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(23, 87, 200, 0.20);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.proceso-home-accion .btn-principal:hover {
    background: #1049ad;

    transform: translateY(-3px);

    box-shadow:
        0 11px 24px rgba(23, 87, 200, 0.27);
}

.proceso-home-accion .btn-principal i {
    font-size: 17px;
}


/* =========================================================
   NOTA INFERIOR
   ========================================================= */

.proceso-home-nota {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 17px;

    color: #53637a;

    font-size: 14px;
    font-weight: 500;
}

.proceso-home-nota i {
    color: #1757c8;
    font-size: 14px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .proceso-home {
        padding: 75px 0;
    }

    .proceso-home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px 28px;
        max-width: 760px;
    }

    .proceso-home-card:not(:last-child)::before,
    .proceso-home-card:not(:last-child)::after {
        display: none;
    }

    .proceso-home-encabezado h2::before,
    .proceso-home-encabezado h2::after,
    .proceso-home-encabezado::before,
    .proceso-home-encabezado::after {
        display: none;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 650px) {

    .proceso-home {
        padding: 62px 0 60px;
    }

    .proceso-home-encabezado {
        margin-bottom: 52px;
        padding: 0 8px;
    }

    .proceso-home-encabezado h2 {
        font-size: 31px;
        line-height: 1.2;
    }

    .proceso-home-encabezado p {
        margin-top: 15px;

        font-size: 15px;
        line-height: 1.65;
    }

    .proceso-home-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 390px;
    }

    .proceso-home-card {
        min-height: auto;
        padding: 50px 24px 29px;
    }

    .proceso-home-icono {
        width: 82px;
        height: 82px;

        margin-bottom: 20px;

        font-size: 34px;
    }

    .proceso-home-card h3 {
        font-size: 18px;
    }

    .proceso-home-card p {
        font-size: 14px;
    }

    .proceso-home-accion {
        margin-top: 38px;
    }

    .proceso-home-accion .btn-principal {
        width: 100%;
        min-width: 0;
        max-width: 360px;
    }

    .proceso-home-nota {
        justify-content: center;
        text-align: center;

        font-size: 13px;
    }

}
/* =========================================================
   INICIO - ASÍ PROTEGEMOS TU ESPACIO
   VERSIÓN ACTUALIZADA
========================================================= */

.proceso-home {
    position: relative;
    overflow: hidden;
    padding: 85px 0 78px;

    background: linear-gradient(
        180deg,
        #edf5ff 0%,
        #f5f9ff 52%,
        #ffffff 100%
    );
}


/* =========================================================
   ENCABEZADO
========================================================= */

.proceso-home-encabezado {
    position: relative;

    width: 100%;
    max-width: 820px;

    margin: 0 auto 62px;

    text-align: center;
}


/* SUBTÍTULO */

.proceso-home-encabezado .subtitulo {
    display: block;

    width: max-content;

    margin: 0 auto 12px;

    color: #1757c8;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* TÍTULO */

.proceso-home-encabezado h2 {
    position: relative;

    display: block;

    width: fit-content;

    margin: 0 auto;

    color: #17263a;

    font-size: clamp(36px, 3vw, 47px);
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -1px;
}


.proceso-home-encabezado h2 span {
    color: #1757c8;
}


/* LÍNEAS LATERALES DEL TÍTULO */

.proceso-home-encabezado h2::before,
.proceso-home-encabezado h2::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 72px;
    height: 1px;

    background: #6b9de9;
}


.proceso-home-encabezado h2::before {
    right: calc(100% + 25px);
}


.proceso-home-encabezado h2::after {
    left: calc(100% + 25px);
}


/* TEXTO */

.proceso-home-encabezado p {
    max-width: 700px;

    margin: 18px auto 0;

    color: #475a72;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID DEL PROCESO
========================================================= */

.proceso-home-grid {
    position: relative;

    display: grid;

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

    gap: 42px;

    width: 100%;
    max-width: 1210px;

    margin: 0 auto;

    align-items: stretch;
}


/* =========================================================
   TARJETAS
========================================================= */

.proceso-home-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 390px;

    padding: 58px 27px 32px;

    background: #ffffff;

    border: 1px solid #dfe7f1;

    border-radius: 10px;

    text-align: center;

    box-shadow:
        0 8px 22px rgba(20, 48, 82, 0.07);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.proceso-home-card:hover {
    transform: translateY(-5px);

    border-color: #c8d8ee;

    box-shadow:
        0 15px 32px rgba(19, 61, 124, 0.11);
}


/* =========================================================
   NÚMEROS
========================================================= */

.proceso-home-numero {
    position: absolute;

    top: -23px;
    left: 50%;

    z-index: 10;

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

    width: 48px;
    height: 48px;

    background: #1757c8;

    border: 4px solid #ffffff;

    border-radius: 50%;

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 800;

    line-height: 1;

    transform: translateX(-50%);

    box-shadow:
        0 5px 14px rgba(23, 87, 200, 0.25);
}


/* =========================================================
   CÍRCULO DE LOS ICONOS
========================================================= */

.proceso-home-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 95px;
    height: 95px;

    margin: 0 auto 25px;

    border-radius: 50%;

    font-size: 37px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.proceso-home-card:hover .proceso-home-icono {
    transform: translateY(-3px);
}


/* =========================================================
   COLORES INDIVIDUALES DE LOS ICONOS
========================================================= */


/* 01 - EVALUACIÓN */

.proceso-home-card:nth-child(1) .proceso-home-icono {
    background: #eaf7f0;
}

.proceso-home-card:nth-child(1) .proceso-home-icono i {
    color: #23945f !important;
}


/* 02 - DISEÑO / SEGURIDAD */

.proceso-home-card:nth-child(2) .proceso-home-icono {
    background: #eaf2ff;
}

.proceso-home-card:nth-child(2) .proceso-home-icono i {
    color: #1757c8 !important;
}


/* 03 - INSTALACIÓN */

.proceso-home-card:nth-child(3) .proceso-home-icono {
    background: #fff3e4;
}

.proceso-home-card:nth-child(3) .proceso-home-icono i {
    color: #dd7a16 !important;
}


/* 04 - SOPORTE */

.proceso-home-card:nth-child(4) .proceso-home-icono {
    background: #e9f6ff;
}

.proceso-home-card:nth-child(4) .proceso-home-icono i {
    color: #1676b8 !important;
}


/* ASEGURAMOS FONT AWESOME */

.proceso-home-icono i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}


/* =========================================================
   TÍTULOS DE TARJETAS
========================================================= */

.proceso-home-card h3 {
    width: 100%;

    margin: 0 0 15px;

    color: #17263a;

    font-size: 19px;
    font-weight: 800;

    line-height: 1.3;
}


/* =========================================================
   TEXTO DE TARJETAS
========================================================= */

.proceso-home-card p {
    width: 100%;

    margin: 0;

    color: #4f6075;

    font-size: 14.5px;

    line-height: 1.7;
}


/* =========================================================
   LÍNEAS ENTRE TARJETAS
========================================================= */

.proceso-home-card:not(:last-child)::before {
    content: "";

    position: absolute;

    top: 108px;

    right: -43px;

    z-index: 2;

    width: 43px;
    height: 2px;

    background: #1757c8;

    transform: translateY(-50%);
}


/* =========================================================
   FLECHAS ENTRE TARJETAS
========================================================= */

.proceso-home-card:not(:last-child)::after {
    content: "\f061";

    position: absolute;

    top: 108px;

    right: -38px;

    z-index: 5;

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

    width: 32px;
    height: 32px;

    background: #1757c8;

    border: 4px solid #f5f9ff;

    border-radius: 50%;

    color: #ffffff !important;

    font-family: "Font Awesome 6 Free" !important;
    font-size: 11px;
    font-weight: 900;

    line-height: 1;

    transform: translateY(-50%);

    box-shadow:
        0 3px 9px rgba(23, 87, 200, 0.20);
}


/* =========================================================
   BOTÓN INFERIOR
========================================================= */

.proceso-home-accion {
    display: flex;
    flex-direction: column;

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

    width: 100%;

    margin: 48px auto 0;

    text-align: center;
}


.proceso-home-accion .btn-principal {
    display: inline-flex !important;

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

    gap: 10px;

    width: auto;
    min-width: 300px;

    margin: 0 auto;

    padding: 16px 30px;

    background: #1757c8 !important;

    border: 1px solid #1757c8 !important;

    border-radius: 8px;

    color: #ffffff !important;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(23, 87, 200, 0.20);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* TEXTO DEL BOTÓN BLANCO */

.proceso-home-accion .btn-principal,
.proceso-home-accion .btn-principal:visited,
.proceso-home-accion .btn-principal:active {
    color: #ffffff !important;
}


/* ICONO DEL BOTÓN BLANCO */

.proceso-home-accion .btn-principal i,
.proceso-home-accion .btn-principal i::before {
    color: #ffffff !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}


.proceso-home-accion .btn-principal:hover {
    background: #104bad !important;

    border-color: #104bad !important;

    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        0 11px 24px rgba(23, 87, 200, 0.27);
}


/* =========================================================
   TEXTO DEBAJO DEL BOTÓN
========================================================= */

.proceso-home-nota {
    display: flex;

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

    gap: 8px;

    width: 100%;

    margin: 17px auto 0;

    color: #4d6077;

    font-size: 14px;
    font-weight: 500;

    text-align: center;
}


.proceso-home-nota i {
    color: #1757c8 !important;

    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .proceso-home {
        padding: 75px 0 70px;
    }


    .proceso-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 58px 30px;

        max-width: 760px;
    }


    .proceso-home-card {
        min-height: 360px;
    }


    /* En tablet quitamos conectores para que no se crucen */

    .proceso-home-card:not(:last-child)::before,
    .proceso-home-card:not(:last-child)::after {
        display: none;
    }


    .proceso-home-encabezado h2::before,
    .proceso-home-encabezado h2::after {
        display: none;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .proceso-home {
        padding: 62px 0 58px;
    }


    .proceso-home-encabezado {
        margin-bottom: 55px;

        padding: 0 10px;
    }


    .proceso-home-encabezado .subtitulo {
        font-size: 12px;

        letter-spacing: 1.5px;
    }


    .proceso-home-encabezado h2 {
        font-size: 31px;

        line-height: 1.18;
    }


    .proceso-home-encabezado p {
        margin-top: 15px;

        font-size: 15px;

        line-height: 1.65;
    }


    .proceso-home-grid {
        grid-template-columns: 1fr;

        gap: 50px;

        max-width: 390px;
    }


    .proceso-home-card {
        min-height: auto;

        padding: 52px 25px 31px;
    }


    .proceso-home-icono {
        width: 86px;
        height: 86px;

        margin-bottom: 21px;

        font-size: 33px;
    }


    .proceso-home-card h3 {
        font-size: 18px;
    }


    .proceso-home-card p {
        font-size: 14px;
    }


    .proceso-home-accion {
        margin-top: 40px;

        padding: 0 15px;
    }


    .proceso-home-accion .btn-principal {
        width: 100%;

        min-width: 0;

        max-width: 360px;
    }


    .proceso-home-nota {
        font-size: 13px;
    }

}
/* =========================================================
   INICIO - FRANJA DE CONFIANZA
   COLORES NATURALES DE LOS ICONOS
========================================================= */

/* 01 - SOPORTE 24/7 */
.franja-confianza .confianza-item:nth-child(1) > i {
    color: #1677ff !important;
}

/* 02 - TECNOLOGÍA MODERNA */
.franja-confianza .confianza-item:nth-child(2) > i {
    color: #f97316 !important;
}

/* 03 - PERSONAL ESPECIALIZADO */
.franja-confianza .confianza-item:nth-child(3) > i {
    color: #16a06a !important;
}

/* 04 - HOGAR Y EMPRESA */
.franja-confianza .confianza-item:nth-child(4) > i {
    color: #d99a12 !important;
}


/* Tamaño y transición uniforme */
.franja-confianza .confianza-item > i {
    font-size: 26px;
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


/* Efecto muy suave */
.franja-confianza .confianza-item:hover > i {
    transform: translateY(-2px);
    filter: brightness(1.05);
}
/* =========================================================
   SERVICIOS - RECOMENDADOR POR RUBROS
   ESTILO PROFESIONAL / COLORES NATURALES
========================================================= */


/* =========================================================
   SELECTOR GENERAL
========================================================= */

.recomendador-rubros-selector {
    overflow: hidden;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(206, 215, 227, 0.9);

    border-radius: 14px 14px 0 0;
}


/* =========================================================
   CADA RUBRO
========================================================= */

.recomendador-rubros-selector .rubro-selector {
    position: relative;

    background: rgba(255, 255, 255, 0.78) !important;

    border: 0 !important;
    border-right: 1px solid #e1e6ed !important;

    color: #1b2a3d !important;

    cursor: pointer;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* ÚLTIMO SIN BORDE DERECHO */

.recomendador-rubros-selector .rubro-selector:last-child {
    border-right: 0 !important;
}


/* =========================================================
   HOVER
========================================================= */

.recomendador-rubros-selector .rubro-selector:hover {
    background: rgba(248, 250, 253, 0.96) !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 -3px 0 rgba(28, 82, 166, 0.10);
}


/* =========================================================
   RUBRO SELECCIONADO
   QUITAMOS EL AZUL OSCURO
========================================================= */

.recomendador-rubros-selector .rubro-selector.activo,
.recomendador-rubros-selector .rubro-selector[aria-selected="true"] {

    background: rgba(255, 255, 255, 0.88) !important;

    color: #17263a !important;

    box-shadow:
        inset 0 -3px 0 rgba(31, 72, 130, 0.24),
        0 5px 18px rgba(26, 46, 75, 0.07) !important;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


/* TEXTO DEL ACTIVO OSCURO */

.recomendador-rubros-selector .rubro-selector.activo span,
.recomendador-rubros-selector .rubro-selector[aria-selected="true"] span {

    color: #17263a !important;
}


/* =========================================================
   ICONOS GENERALES
========================================================= */

.recomendador-rubros-selector .rubro-selector i {

    font-size: 25px;

    margin-bottom: 8px;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


.recomendador-rubros-selector .rubro-selector:hover i {

    transform: translateY(-2px);

    filter: brightness(1.05);
}


/* =========================================================
   COLORES DE CADA RUBRO
========================================================= */


/* EDIFICIOS Y CONDOMINIOS */

.rubro-selector[data-rubro="edificios-condominios"] i {
    color: #88642d !important;
}


/* CASAS */

.rubro-selector[data-rubro="casas"] i {
    color: #32835b !important;
}


/* TIENDAS Y LOCALES */

.rubro-selector[data-rubro="tiendas-locales"] i {
    color: #d36d18 !important;
}


/* UNIVERSIDADES */

.rubro-selector[data-rubro="universidades"] i {
    color: #7357aa !important;
}


/* GRIFOS */

.rubro-selector[data-rubro="grifos-rubros"] i {
    color: #dd7600 !important;
}


/* =========================================================
   IMPORTANTE:
   MANTENER COLOR DEL ICONO CUANDO ESTÁ SELECCIONADO
========================================================= */

.rubro-selector[data-rubro="edificios-condominios"].activo i,
.rubro-selector[data-rubro="edificios-condominios"][aria-selected="true"] i {
    color: #88642d !important;
}

.rubro-selector[data-rubro="casas"].activo i,
.rubro-selector[data-rubro="casas"][aria-selected="true"] i {
    color: #32835b !important;
}

.rubro-selector[data-rubro="tiendas-locales"].activo i,
.rubro-selector[data-rubro="tiendas-locales"][aria-selected="true"] i {
    color: #d36d18 !important;
}

.rubro-selector[data-rubro="universidades"].activo i,
.rubro-selector[data-rubro="universidades"][aria-selected="true"] i {
    color: #7357aa !important;
}

.rubro-selector[data-rubro="grifos-rubros"].activo i,
.rubro-selector[data-rubro="grifos-rubros"][aria-selected="true"] i {
    color: #dd7600 !important;
}


/* =========================================================
   PEQUEÑA MARCA INFERIOR SEGÚN RUBRO
========================================================= */

.rubro-selector.activo::after,
.rubro-selector[aria-selected="true"]::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 46px;
    height: 3px;

    border-radius: 20px;

    transform: translateX(-50%);
}


/* COLOR DE LÍNEA SEGÚN EL SELECCIONADO */

.rubro-selector[data-rubro="edificios-condominios"].activo::after {
    background: #88642d;
}

.rubro-selector[data-rubro="casas"].activo::after {
    background: #32835b;
}

.rubro-selector[data-rubro="tiendas-locales"].activo::after {
    background: #d36d18;
}

.rubro-selector[data-rubro="universidades"].activo::after {
    background: #7357aa;
}

.rubro-selector[data-rubro="grifos-rubros"].activo::after {
    background: #dd7600;
}


/* =========================================================
   PANEL PRINCIPAL
========================================================= */

.recomendador-rubros-panel {

    background: rgba(255, 255, 255, 0.80) !important;

    border: 1px solid #dce3ec !important;

    border-radius: 15px !important;

    box-shadow:
        0 13px 32px rgba(20, 43, 74, 0.07) !important;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    overflow: hidden;
}


/* =========================================================
   RESULTADO
========================================================= */

.recomendador-rubros-resultado {

    background: rgba(255, 255, 255, 0.78) !important;
}


/* =========================================================
   ICONO DEL RUBRO SELECCIONADO
========================================================= */

.recomendador-rubros-icono {

    display: flex;

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

    width: 70px;
    height: 70px;

    border-radius: 17px;

    background: rgba(246, 244, 239, 0.92) !important;

    box-shadow:
        inset 0 0 0 1px rgba(222, 214, 199, 0.55);
}


/* EDIFICIO */

.recomendador-rubros-icono .fa-building {
    color: #88642d !important;
}


/* CASA */

.recomendador-rubros-icono .fa-house {
    color: #32835b !important;
}


/* TIENDA */

.recomendador-rubros-icono .fa-store {
    color: #d36d18 !important;
}


/* UNIVERSIDAD */

.recomendador-rubros-icono .fa-graduation-cap {
    color: #7357aa !important;
}


/* GRIFO */

.recomendador-rubros-icono .fa-gas-pump {
    color: #dd7600 !important;
}


/* =========================================================
   ETIQUETA RUBRO SELECCIONADO
========================================================= */

.recomendador-rubros-etiqueta {

    color: #64758b !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* =========================================================
   TÍTULO DEL RUBRO
========================================================= */

.recomendador-rubros-resumen h3 {

    color: #18283d !important;

    font-weight: 800;
}


/* =========================================================
   TEXTO
========================================================= */

.recomendador-rubros-resumen p {

    color: #536377 !important;
}


/* =========================================================
   NOTA INFERIOR
========================================================= */

.recomendador-rubros-nota {

    color: #56677c !important;
}


/* ICONO DE INFORMACIÓN */

.recomendador-rubros-nota i {

    color: #b17b32 !important;
}
/* =========================================================
   NOSOTROS - PRESENTACIÓN CORPORATIVA
========================================================= */

.quienes-somos {
    padding: 100px 0 92px !important;
    background: #f5f8fd !important;
}

.quienes-nosotros-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    gap: clamp(52px, 7vw, 94px);
}

.quienes-contenido {
    max-width: 680px;
}

.quienes-contenido h2 {
    max-width: 640px;
    margin: 12px 0 0;
    color: #203553;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.6px;
}

.quienes-contenido h2 span {
    color: #1d4ed8;
}

.quienes-contenido > p {
    max-width: 650px;
    margin-top: 18px;
    color: #38516f;
    font-size: 16px;
    line-height: 1.75;
}

.quienes-beneficios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
    margin-top: 32px;
}

.quienes-beneficio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.quienes-beneficio-icono {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 16px;
}

.quienes-beneficio-soluciones .quienes-beneficio-icono {
    color: #2056c8;
    background: #e5eeff;
}

.quienes-beneficio-equipos .quienes-beneficio-icono {
    color: #3678d7;
    background: #e8f2ff;
}

.quienes-beneficio-atencion .quienes-beneficio-icono {
    color: #118271;
    background: #e4f6f0;
}

.quienes-beneficio-soporte .quienes-beneficio-icono {
    color: #6453a7;
    background: #edeafb;
}

.quienes-beneficio h3 {
    margin: 1px 0 5px;
    color: #203553;
    font-size: 15px;
    line-height: 1.25;
}

.quienes-beneficio p {
    margin: 0;
    color: #61718a;
    font-size: 13px;
    line-height: 1.5;
}

.quienes-boton,
.quienes-boton:visited,
.quienes-boton:active {
    margin-top: 34px;
    color: #ffffff !important;
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.20);
}

.quienes-boton i,
.quienes-boton i::before {
    color: #ffffff !important;
}

.quienes-boton:hover {
    background: #153fae !important;
    border-color: #153fae !important;
    box-shadow: 0 16px 29px rgba(29, 78, 216, 0.25);
}

.quienes-compromiso {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(103, 159, 255, 0.26);
    border-radius: 22px;
    background: #102d58;
    box-shadow: 0 22px 48px rgba(16, 45, 88, 0.20);
}

.quienes-compromiso::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    height: 3px;
    background: #4f8cff;
}

.quienes-compromiso-cabecera {
    padding-bottom: 24px;
}

.quienes-compromiso-cabecera span {
    display: block;
    color: #8fb8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.quienes-compromiso-cabecera h3 {
    max-width: 360px;
    margin: 8px 0 0;
    color: #ffffff;
    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1.18;
}

.quienes-compromiso-lista {
    display: grid;
    gap: 13px;
}

.compromiso-item {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 96px;
    padding: 17px 18px;
    border: 1px solid rgba(193, 215, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.compromiso-item:hover {
    transform: translateY(-3px);
    border-color: rgba(137, 183, 255, 0.42);
    background: rgba(255, 255, 255, 0.085);
}

.compromiso-icono {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 20px;
}

.compromiso-icono-instalacion {
    color: #77aaff;
    background: rgba(78, 137, 255, 0.16);
}

.compromiso-icono-atencion {
    color: #57d0bf;
    background: rgba(43, 184, 163, 0.14);
}

.compromiso-icono-cercania {
    color: #b7a2ff;
    background: rgba(145, 115, 255, 0.15);
}

.compromiso-item strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.25;
}

.compromiso-item p {
    margin: 6px 0 0;
    color: #b8c9e6;
    font-size: 13px;
    line-height: 1.48;
}
/* =========================================================
   CORRECCIÓN FINAL - SECCIÓN NOSOTROS
========================================================= */

@media (min-width: 1101px) {

    .quienes-nosotros-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(430px, 0.85fr) !important;
        gap: 60px !important;
    }

    .quienes-contenido h2 {
        max-width: 760px !important;
        font-size: clamp(42px, 3.3vw, 50px) !important;
        line-height: 1.12 !important;
        letter-spacing: -1.2px !important;
    }
}


/* CUADRO AZUL MÁS VISIBLE */

.quienes-compromiso {
    background: #174886 !important;
    border-color: #4e82c5 !important;
    box-shadow: 0 20px 45px rgba(18, 58, 112, 0.22) !important;
}

.compromiso-item {
    background: #245693 !important;
    border-color: #5f91d1 !important;
}


/* TODO EL TEXTO DEL CUADRO EN BLANCO */

.quienes-compromiso-cabecera span,
.quienes-compromiso-cabecera h3,
.compromiso-item strong,
.compromiso-item p {
    color: #ffffff !important;
}

.compromiso-item p {
    opacity: 0.88;
}


/* ICONOS DEL CUADRO CON COLOR PROPIO */

.compromiso-icono-instalacion {
    color: #9fc4ff !important;
    background: #2e69b4 !important;
}

.compromiso-icono-atencion {
    color: #8df0dc !important;
    background: #187b7c !important;
}

.compromiso-icono-cercania {
    color: #d0c1ff !important;
    background: #5b4d9d !important;
}


/* RESTAURAR LOS ÍCONOS ORIGINALES DE LOS BENEFICIOS */

.quienes-beneficio-soluciones .quienes-beneficio-icono i {
    color: #1d4ed8 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.quienes-beneficio-soluciones .quienes-beneficio-icono i::before {
    content: "\f3ed" !important;
}

.quienes-beneficio-equipos .quienes-beneficio-icono i {
    color: #2871cf !important;
}

.quienes-beneficio-atencion .quienes-beneficio-icono i {
    color: #118271 !important;
}

.quienes-beneficio-soporte .quienes-beneficio-icono i {
    color: #c47a22 !important;
}


/* BOTÓN CON LETRAS E ÍCONO BLANCOS */

.quienes-somos .quienes-boton,
.quienes-somos .quienes-boton:visited,
.quienes-somos .quienes-boton:active,
.quienes-somos .quienes-boton * {
    color: #ffffff !important;
}

.quienes-somos .quienes-boton {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.quienes-somos .quienes-boton:hover {
    background: #153fae !important;
    border-color: #153fae !important;
}
/* =========================================================
   CORRECCIÓN - TEXTOS E ÍCONOS DEL CUADRO AZUL
========================================================= */

.quienes-somos .quienes-compromiso {
    background: #1c4f8d !important;
    border-color: #6a9ee0 !important;
}

.quienes-somos .quienes-compromiso .compromiso-item {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}


/* TODAS LAS LETRAS DEL CUADRO EN BLANCO */

.quienes-somos .quienes-compromiso .quienes-compromiso-cabecera span,
.quienes-somos .quienes-compromiso .quienes-compromiso-cabecera h3,
.quienes-somos .quienes-compromiso .compromiso-item strong,
.quienes-somos .quienes-compromiso .compromiso-item p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ÍCONOS CON COLOR PROPIO Y VISIBLE */

.quienes-somos .quienes-compromiso .compromiso-icono-instalacion i {
    color: #ffd166 !important;
    -webkit-text-fill-color: #ffd166 !important;
}

.quienes-somos .quienes-compromiso .compromiso-icono-atencion i {
    color: #56e0c5 !important;
    -webkit-text-fill-color: #56e0c5 !important;
}

.quienes-somos .quienes-compromiso .compromiso-icono-cercania i {
    color: #c5b2ff !important;
    -webkit-text-fill-color: #c5b2ff !important;
}

.quienes-somos .quienes-compromiso .compromiso-icono-instalacion {
    background: rgba(255, 209, 102, 0.16) !important;
}

.quienes-somos .quienes-compromiso .compromiso-icono-atencion {
    background: rgba(86, 224, 197, 0.16) !important;
}

.quienes-somos .quienes-compromiso .compromiso-icono-cercania {
    background: rgba(197, 178, 255, 0.16) !important;
}
/* =========================================================
   NOSOTROS - IMÁGENES MISIÓN, VISIÓN Y PROPÓSITO
========================================================= */

.identidad-empresa .identidad-imagen {
    position: relative;
    z-index: 1;
    width: 150px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 17px;
}

.identidad-empresa .identidad-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 10px rgba(20, 50, 91, 0.13));
}

/* Misión */
.identidad-empresa .identidad-card:nth-child(1) .identidad-imagen img {
    width: 118px;
}

/* Visión */
.identidad-empresa .identidad-card:nth-child(2) .identidad-imagen img {
    width: 145px;
}

/* Propósito */
.identidad-empresa .identidad-card:nth-child(3) .identidad-imagen img {
    width: 112px;
}
/* =========================================================
   VALORES - COLORES DE ÍCONOS Y BOTÓN
========================================================= */

/* Compromiso: dorado */
.valores-lista .valor-card:nth-child(1) .valor-icono {
    background: #fff4d8 !important;
}

.valores-lista .valor-card:nth-child(1) .valor-icono i {
    color: #d68a00 !important;
}

/* Confianza: azul */
.valores-lista .valor-card:nth-child(2) .valor-icono {
    background: #e4efff !important;
}

.valores-lista .valor-card:nth-child(2) .valor-icono i {
    color: #1d5fd1 !important;
}

/* Innovación: violeta */
.valores-lista .valor-card:nth-child(3) .valor-icono {
    background: #f0eaff !important;
}

.valores-lista .valor-card:nth-child(3) .valor-icono i {
    color: #7b4fd4 !important;
}

/* Calidad: turquesa */
.valores-lista .valor-card:nth-child(4) .valor-icono {
    background: #e1f8f5 !important;
}

.valores-lista .valor-card:nth-child(4) .valor-icono i {
    color: #119c8e !important;
}


/* BOTÓN CONTÁCTANOS */

.valores-contenido .btn-principal,
.valores-contenido .btn-principal:visited,
.valores-contenido .btn-principal:active,
.valores-contenido .btn-principal *,
.valores-contenido .btn-principal i {
    color: #ffffff !important;
}

.valores-contenido .btn-principal {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.valores-contenido .btn-principal:hover {
    background: #153fae !important;
    border-color: #153fae !important;
}
/* =========================================================
   NUESTRO ENFOQUE - PROCESO TRANSPARENTE
========================================================= */

.diferencia {
    padding: 100px 0 92px !important;
    background: #eef5ff !important;
}

.diferencia .encabezado-seccion {
    max-width: 850px;
    margin: 0 auto 62px !important;
    text-align: center;
}

.diferencia .encabezado-seccion h2 {
    margin-top: 12px;
}

.diferencia-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

.diferencia-card {
    position: relative;
    min-height: 230px;
    padding: 0 15px 18px !important;
    text-align: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transition: transform 0.25s ease !important;
}

.diferencia-card:hover {
    transform: translateY(-5px) !important;
    border: none !important;
    box-shadow: none !important;
}

/* NÚMEROS */

.diferencia-card > span {
    position: absolute !important;
    top: 2px;
    left: calc(50% + 48px);

    color: #203553 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1;
}

/* CAJA DEL ÍCONO */

.diferencia-card > i {
    width: 90px !important;
    height: 90px !important;
    display: grid !important;
    place-items: center !important;

    margin: 0 auto 21px !important;
    border-radius: 24px !important;

    font-size: 34px !important;
    transition: transform 0.25s ease !important;
}

.diferencia-card:hover > i {
    transform: translateY(-4px) scale(1.04) !important;
}

/* LÍNEA CORTA */

.diferencia-card h3::before {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 0 auto 16px;
    border-radius: 20px;
}

.diferencia-card h3 {
    margin: 0 !important;
    color: #203553 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

.diferencia-card p {
    max-width: 245px;
    margin: 13px auto 0 !important;
    color: #38516f !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* PASO 01 - AZUL */

.diferencia-card:nth-child(1) > i {
    color: #2563eb !important;
    background: #e4efff !important;
}

.diferencia-card:nth-child(1) > i::before {
    color: #2563eb !important;
}

.diferencia-card:nth-child(1) h3::before {
    background: #2563eb;
}

/* PASO 02 - VIOLETA */

.diferencia-card:nth-child(2) > i {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
}

.diferencia-card:nth-child(2) > i::before {
    color: #8b5cf6 !important;
}

.diferencia-card:nth-child(2) h3::before {
    background: #8b5cf6;
}

/* PASO 03 - NARANJA */

.diferencia-card:nth-child(3) > i {
    color: #f97316 !important;
    background: #fff0e5 !important;
}

.diferencia-card:nth-child(3) > i::before {
    color: #f97316 !important;
}

.diferencia-card:nth-child(3) h3::before {
    background: #f97316;
}

/* PASO 04 - VERDE */

.diferencia-card:nth-child(4) > i {
    color: #10a77d !important;
    background: #e3f8f0 !important;
}

.diferencia-card:nth-child(4) > i::before {
    color: #10a77d !important;
}

.diferencia-card:nth-child(4) h3::before {
    background: #10a77d;
}
/* =========================================================
   NUESTRO ENFOQUE - PROCESO TRANSPARENTE
========================================================= */

.diferencia {
    padding: 100px 0 92px !important;
    background: #eef5ff !important;
}

.diferencia .encabezado-seccion {
    max-width: 850px;
    margin: 0 auto 62px !important;
    text-align: center;
}

.diferencia .encabezado-seccion h2 {
    margin-top: 12px;
}

.diferencia-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

.diferencia-card {
    position: relative;
    min-height: 230px;
    padding: 0 15px 18px !important;
    text-align: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transition: transform 0.25s ease !important;
}

.diferencia-card:hover {
    transform: translateY(-5px) !important;
    border: none !important;
    box-shadow: none !important;
}

/* NÚMEROS */

.diferencia-card > span {
    position: absolute !important;
    top: 2px;
    left: calc(50% + 48px);

    color: #203553 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1;
}

/* CAJA DEL ÍCONO */

.diferencia-card > i {
    width: 90px !important;
    height: 90px !important;
    display: grid !important;
    place-items: center !important;

    margin: 0 auto 21px !important;
    border-radius: 24px !important;

    font-size: 34px !important;
    transition: transform 0.25s ease !important;
}

.diferencia-card:hover > i {
    transform: translateY(-4px) scale(1.04) !important;
}

/* LÍNEA CORTA */

.diferencia-card h3::before {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 0 auto 16px;
    border-radius: 20px;
}

.diferencia-card h3 {
    margin: 0 !important;
    color: #203553 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

.diferencia-card p {
    max-width: 245px;
    margin: 13px auto 0 !important;
    color: #38516f !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* PASO 01 - AZUL */

.diferencia-card:nth-child(1) > i {
    color: #2563eb !important;
    background: #e4efff !important;
}

.diferencia-card:nth-child(1) > i::before {
    color: #2563eb !important;
}

.diferencia-card:nth-child(1) h3::before {
    background: #2563eb;
}

/* PASO 02 - VIOLETA */

.diferencia-card:nth-child(2) > i {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
}

.diferencia-card:nth-child(2) > i::before {
    color: #8b5cf6 !important;
}

.diferencia-card:nth-child(2) h3::before {
    background: #8b5cf6;
}

/* PASO 03 - NARANJA */

.diferencia-card:nth-child(3) > i {
    color: #f97316 !important;
    background: #fff0e5 !important;
}

.diferencia-card:nth-child(3) > i::before {
    color: #f97316 !important;
}

.diferencia-card:nth-child(3) h3::before {
    background: #f97316;
}

/* PASO 04 - VERDE */

.diferencia-card:nth-child(4) > i {
    color: #10a77d !important;
    background: #e3f8f0 !important;
}

.diferencia-card:nth-child(4) > i::before {
    color: #10a77d !important;
}

.diferencia-card:nth-child(4) h3::before {
    background: #10a77d;
}
/* =========================================================
   CONTACTO / COTIZACIÓN - DISEÑO FINAL SIN IMAGEN DE FONDO
   Pegar al final de estilos.css
========================================================= */

/* ---------------- HERO COMPACTO ---------------- */

html body > section.pagina-hero-contacto,
html body > main > section.pagina-hero-contacto {
    position: relative !important;
    min-height: 0 !important;
    padding: 66px 0 24px !important;
    overflow: hidden !important;
    background: #edf5ff !important;
    background-image: none !important;
}

html body > section.pagina-hero-contacto::before,
html body > main > section.pagina-hero-contacto::before {
    content: "" !important;
    position: absolute !important;
    top: 82px !important;
    left: -8% !important;
    width: 34% !important;
    height: 70px !important;
    border-top: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-right: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-radius: 0 46px 0 0 !important;
    background: transparent !important;
    pointer-events: none !important;
}

html body > section.pagina-hero-contacto::after,
html body > main > section.pagina-hero-contacto::after {
    content: "" !important;
    position: absolute !important;
    top: 115px !important;
    right: -7% !important;
    width: 31% !important;
    height: 64px !important;
    border-top: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-left: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-radius: 46px 0 0 0 !important;
    pointer-events: none !important;
}

html body .pagina-hero-contacto .pagina-hero-overlay {
    display: none !important;
}

html body .pagina-hero-contacto .contacto-hero-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .pagina-hero-contacto .contacto-hero-texto {
    width: 100% !important;
    max-width: 920px !important;
    text-align: center !important;
}

html body .pagina-hero-contacto .breadcrumb,
html body .pagina-hero-contacto .contacto-hero-summary,
html body .pagina-hero-contacto .contacto-hero-card {
    display: none !important;
}

html body .pagina-hero-contacto .etiqueta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto 13px !important;
    padding: 0 !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

html body .pagina-hero-contacto .etiqueta i {
    color: #2563eb !important;
}

html body .pagina-hero-contacto .contacto-hero-texto h1 {
    max-width: 850px !important;
    margin: 0 auto !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.4px !important;
    text-shadow: none !important;
}

html body .pagina-hero-contacto .contacto-hero-texto h1 span {
    display: inline !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
}

html body .pagina-hero-contacto .contacto-hero-texto > p {
    max-width: 710px !important;
    margin: 15px auto 0 !important;
    color: #4c6481 !important;
    -webkit-text-fill-color: #4c6481 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-shadow: none !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 25px !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 190px !important;
    padding: 12px 17px !important;
    color: #263d5c !important;
    -webkit-text-fill-color: #263d5c !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #e1eaf7 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(25, 69, 125, 0.08) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios > div:nth-child(1) i {
    color: #2563eb !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios > div:nth-child(2) i {
    color: #e39a19 !important;
}

html body .pagina-hero-contacto .contacto-hero-beneficios > div:nth-child(3) i {
    color: #f59e0b !important;
}


/* ---------------- FORMULARIO PRINCIPAL ---------------- */

html body .contacto-seccion {
    padding: 12px 0 88px !important;
    background: #edf5ff !important;
}

html body .contacto-seccion > .contenedor > .encabezado-seccion {
    display: none !important;
}

html body .contacto-seccion .contacto-layout {
    display: grid !important;
    grid-template-columns: 285px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 24px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}


/* ---------------- PANEL IZQUIERDO ---------------- */

html body .contacto-seccion .contacto-informacion {
    position: sticky !important;
    top: 105px !important;
    align-self: start !important;
    min-height: 570px !important;
    padding: 29px 25px !important;
    color: #ffffff !important;
    background: linear-gradient(155deg, #123d7d 0%, #0b2859 100%) !important;
    border: 1px solid rgba(95, 150, 235, 0.42) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 38px rgba(17, 56, 110, 0.18) !important;
}

html body .contacto-seccion .contacto-info-etiqueta {
    color: #bcd9ff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
}

html body .contacto-seccion .contacto-info-etiqueta i {
    color: #63b4ff !important;
}

html body .contacto-seccion .contacto-info-principal h3 {
    margin-top: 13px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 25px !important;
    line-height: 1.22 !important;
}

html body .contacto-seccion .contacto-info-principal p {
    margin-top: 13px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

html body .contacto-seccion .contacto-info-item {
    gap: 13px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

html body .contacto-seccion .contacto-info-item:hover {
    transform: translateX(3px) !important;
}

html body .contacto-seccion .contacto-info-icono {
    width: 43px !important;
    height: 43px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .contacto-seccion .contacto-info-icono .fa-phone {
    color: #60a5fa !important;
}

html body .contacto-seccion .contacto-info-icono .fa-whatsapp {
    color: #4ade80 !important;
}

html body .contacto-seccion .contacto-info-icono .fa-envelope {
    color: #fbbf24 !important;
}

html body .contacto-seccion .contacto-info-icono .fa-headset,
html body .contacto-seccion .contacto-info-icono .fa-clock {
    color: #43d6c2 !important;
}

html body .contacto-seccion .contacto-info-item span {
    color: rgba(255, 255, 255, 0.67) !important;
    font-size: 11px !important;
}

html body .contacto-seccion .contacto-info-item strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
}

html body .contacto-seccion .contacto-beneficios {
    gap: 12px !important;
    margin-top: 24px !important;
}

html body .contacto-seccion .contacto-beneficios div {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important;
}

html body .contacto-seccion .contacto-beneficios i {
    color: #4ade80 !important;
}


/* ---------------- CONTENEDOR DEL COTIZADOR ---------------- */

html body .contacto-seccion .cotizador-contenedor {
    overflow: hidden !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 38px rgba(25, 69, 125, 0.10) !important;
}

html body .contacto-seccion .cotizador-cabecera {
    padding: 23px 30px !important;
    border-bottom: 1px solid #e7eef8 !important;
}

html body .contacto-seccion .cotizador-cabecera span {
    color: #1d4ed8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
}

html body .contacto-seccion .cotizador-cabecera h3 {
    margin-top: 4px !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 22px !important;
}

html body .contacto-seccion .cotizador-pasos span {
    width: 31px !important;
    height: 31px !important;
    color: #60738c !important;
    background: #edf3fb !important;
    border: 1px solid #e0e9f4 !important;
}

html body .contacto-seccion .cotizador-pasos span.paso-activo {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 6px 15px rgba(29, 78, 216, 0.24) !important;
}

html body .contacto-seccion .cotizador-pasos div {
    width: 22px !important;
    height: 2px !important;
    background: #d8e3f2 !important;
}

html body .contacto-seccion .cotizador-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.72fr) !important;
}


/* ---------------- CAMPOS ---------------- */

html body .contacto-seccion .form-cotizacion {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 28px 30px !important;
}

html body .contacto-seccion .campo-form {
    gap: 7px !important;
}

html body .contacto-seccion .campo-form label {
    color: #30445f !important;
    -webkit-text-fill-color: #30445f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html body .contacto-seccion .campo-form label i {
    width: 19px !important;
    color: #2563eb !important;
}

html body .contacto-seccion .campo-form label .fa-user {
    color: #2563eb !important;
}

html body .contacto-seccion .campo-form label .fa-building,
html body .contacto-seccion .campo-form label .fa-building-user {
    color: #7c5ce3 !important;
}

html body .contacto-seccion .campo-form label .fa-mobile-screen {
    color: #19a977 !important;
}

html body .contacto-seccion .campo-form label .fa-envelope {
    color: #e7a219 !important;
}

html body .contacto-seccion .campo-form label .fa-shield-halved {
    color: #2563eb !important;
}

html body .contacto-seccion .campo-form label .fa-bullseye {
    color: #ef7b38 !important;
}

html body .contacto-seccion .campo-form label .fa-message {
    color: #4393df !important;
}

html body .contacto-seccion .campo-form input,
html body .contacto-seccion .campo-form select,
html body .contacto-seccion .campo-form textarea {
    padding: 12px 13px !important;
    color: #263b57 !important;
    background: #ffffff !important;
    border: 1px solid #cedae8 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

html body .contacto-seccion .campo-form textarea {
    min-height: 115px !important;
}

html body .contacto-seccion .campo-form input::placeholder,
html body .contacto-seccion .campo-form textarea::placeholder {
    color: #9aaabd !important;
}

html body .contacto-seccion .campo-form input:focus,
html body .contacto-seccion .campo-form select:focus,
html body .contacto-seccion .campo-form textarea:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

html body .contacto-seccion .diagnostico-importado {
    margin-top: 12px !important;
    padding: 11px 12px !important;
    color: #177657 !important;
    background: #eafbf3 !important;
    border: 1px solid #c9f0dd !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

html body .contacto-seccion .diagnostico-importado i {
    color: #20a477 !important;
}

html body .contacto-seccion .campo-check {
    gap: 9px !important;
}

html body .contacto-seccion .campo-check input {
    accent-color: #1d4ed8 !important;
}

html body .contacto-seccion .campo-check label {
    color: #53667d !important;
    -webkit-text-fill-color: #53667d !important;
    font-size: 12px !important;
}

html body .contacto-seccion .btn-enviar-cotizacion {
    min-width: 230px !important;
    padding: 14px 21px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1d4ed8 !important;
    border: 1px solid #1d4ed8 !important;
    border-radius: 10px !important;
    box-shadow: 0 9px 18px rgba(29, 78, 216, 0.22) !important;
}

html body .contacto-seccion .btn-enviar-cotizacion i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .contacto-seccion .btn-enviar-cotizacion:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #153fad !important;
    border-color: #153fad !important;
    transform: translateY(-2px) !important;
}


/* ---------------- RESUMEN LATERAL ---------------- */

html body .contacto-seccion .resumen-cotizacion {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 27px 25px !important;
    color: #203553 !important;
    background: #f5f9ff !important;
    border: 0 !important;
    border-left: 1px solid #e0eaf7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .contacto-seccion .resumen-cabecera {
    padding-bottom: 20px !important;
    border-bottom: 1px solid #dfeaf7 !important;
}

html body .contacto-seccion .resumen-icono {
    width: 43px !important;
    height: 43px !important;
    color: #1d4ed8 !important;
    background: #dfecff !important;
    border-radius: 11px !important;
}

html body .contacto-seccion .resumen-cabecera span {
    color: #5e7390 !important;
    font-size: 9px !important;
}

html body .contacto-seccion .resumen-cabecera strong {
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 15px !important;
}

html body .contacto-seccion .resumen-contenido {
    gap: 18px !important;
    padding: 23px 0 !important;
}

html body .contacto-seccion .resumen-item {
    padding-bottom: 14px !important;
    border-bottom: 1px solid #e3ecf8 !important;
}

html body .contacto-seccion .resumen-item span {
    color: #627893 !important;
    font-size: 10px !important;
}

html body .contacto-seccion .resumen-item strong {
    color: #263b57 !important;
    -webkit-text-fill-color: #263b57 !important;
    font-size: 12px !important;
}

html body .contacto-seccion .recomendacion-box {
    margin-top: 5px !important;
    padding: 16px !important;
    background: #fffaf1 !important;
    border: 1px solid #f2dfb7 !important;
    border-radius: 11px !important;
}

html body .contacto-seccion .recomendacion-titulo {
    color: #8e6213 !important;
    font-size: 11px !important;
}

html body .contacto-seccion .recomendacion-titulo i {
    color: #e4a11d !important;
}

html body .contacto-seccion .recomendacion-box p {
    color: #53667d !important;
    -webkit-text-fill-color: #53667d !important;
    font-size: 12px !important;
}

html body .contacto-seccion .resumen-seguridad {
    margin-top: auto !important;
    padding-top: 19px !important;
    color: #53667d !important;
    -webkit-text-fill-color: #53667d !important;
    border-top: 1px solid #dfeaf7 !important;
    font-size: 10px !important;
}

html body .contacto-seccion .resumen-seguridad i {
    color: #1d4ed8 !important;
}


/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1100px) {

    html body .contacto-seccion .contacto-layout {
        grid-template-columns: 1fr !important;
        max-width: 780px !important;
    }

    html body .contacto-seccion .contacto-informacion {
        position: relative !important;
        top: auto !important;
        min-height: 0 !important;
    }
}

@media (max-width: 820px) {

    html body > section.pagina-hero-contacto,
    html body > main > section.pagina-hero-contacto {
        padding: 55px 0 20px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-texto h1 {
        font-size: 40px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-beneficios > div {
        flex: 1 1 185px !important;
    }

    html body .contacto-seccion .cotizador-grid {
        grid-template-columns: 1fr !important;
    }

    html body .contacto-seccion .resumen-cotizacion {
        border-top: 1px solid #e0eaf7 !important;
        border-left: 0 !important;
    }

    html body .contacto-seccion .resumen-contenido {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 600px) {

    html body > section.pagina-hero-contacto,
    html body > main > section.pagina-hero-contacto {
        padding: 46px 0 14px !important;
    }

    html body > section.pagina-hero-contacto::before,
    html body > main > section.pagina-hero-contacto::before,
    html body > section.pagina-hero-contacto::after,
    html body > main > section.pagina-hero-contacto::after {
        display: none !important;
    }

    html body .pagina-hero-contacto .etiqueta {
        font-size: 10px !important;
        letter-spacing: 1.4px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-texto h1 {
        font-size: 34px !important;
        letter-spacing: -0.8px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-texto > p {
        font-size: 15px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-beneficios {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .pagina-hero-contacto .contacto-hero-beneficios > div {
        width: 100% !important;
    }

    html body .contacto-seccion {
        padding-bottom: 58px !important;
    }

    html body .contacto-seccion .contacto-layout {
        gap: 18px !important;
    }

    html body .contacto-seccion .contacto-informacion {
        padding: 25px 20px !important;
        border-radius: 14px !important;
    }

    html body .contacto-seccion .cotizador-cabecera {
        align-items: flex-start !important;
        padding: 20px !important;
    }

    html body .contacto-seccion .cotizador-cabecera h3 {
        font-size: 19px !important;
    }

    html body .contacto-seccion .cotizador-pasos div {
        width: 10px !important;
    }

    html body .contacto-seccion .form-cotizacion {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 22px 20px !important;
    }

    html body .contacto-seccion .campo-form input,
    html body .contacto-seccion .campo-form select,
    html body .contacto-seccion .campo-form textarea {
        font-size: 16px !important;
    }

    html body .contacto-seccion .btn-enviar-cotizacion {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    html body .contacto-seccion .resumen-cotizacion {
        padding: 22px 20px !important;
    }

    html body .contacto-seccion .resumen-contenido {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   CONTACTO - PROCESO DE ATENCIÓN TRANSPARENTE
========================================================= */

html body .contacto-proceso {
    padding: 96px 0 88px !important;
    background: #edf5ff !important;
}

html body .contacto-proceso .encabezado-seccion {
    max-width: 900px !important;
    margin: 0 auto 64px !important;
    text-align: center !important;
}

html body .contacto-proceso .encabezado-seccion .subtitulo {
    color: #203553 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

html body .contacto-proceso .encabezado-seccion h2 {
    max-width: 860px !important;
    margin: 13px auto 0 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.3px !important;
}

html body .contacto-proceso .encabezado-seccion h2 span {
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
}


/* CUATRO PASOS */

html body .contacto-proceso .contacto-proceso-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 34px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

html body .contacto-proceso .contacto-proceso-card {
    position: relative !important;
    min-height: 245px !important;
    padding: 0 15px 16px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: transform 0.25s ease !important;
}

html body .contacto-proceso .contacto-proceso-card:hover {
    transform: translateY(-5px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* NÚMEROS */

html body .contacto-proceso .contacto-proceso-card > span {
    position: absolute !important;
    top: 4px !important;
    left: calc(50% + 46px) !important;
    z-index: 2 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* ICONOS */

html body .contacto-proceso .contacto-proceso-card > div {
    width: 96px !important;
    height: 96px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 22px !important;
    border-radius: 24px !important;
    transition: transform 0.25s ease !important;
}

html body .contacto-proceso .contacto-proceso-card:hover > div {
    transform: translateY(-4px) scale(1.04) !important;
}

html body .contacto-proceso .contacto-proceso-card > div i {
    font-size: 35px !important;
}


/* COLORES ORIGINALES DE CADA PASO */

html body .contacto-proceso .contacto-proceso-card:nth-child(1) > div {
    background: #e6efff !important;
    border: 1px solid #d1e1ff !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(1) > div i {
    color: #2563eb !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(2) > div {
    background: #f0e8ff !important;
    border: 1px solid #e1d0ff !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(2) > div i {
    color: #8758e8 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(3) > div {
    background: #fff0df !important;
    border: 1px solid #ffd8b0 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(3) > div i {
    color: #f97316 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(4) > div {
    background: #e2f8ee !important;
    border: 1px solid #c4efd9 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(4) > div i {
    color: #0ca77a !important;
}


/* LÍNEA CORTA DEBAJO DEL ÍCONO */

html body .contacto-proceso .contacto-proceso-card h3::before {
    content: "" !important;
    display: block !important;
    width: 58px !important;
    height: 2px !important;
    margin: 0 auto 24px !important;
    border-radius: 50px !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(1) h3::before {
    background: #2563eb !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(2) h3::before {
    background: #8758e8 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(3) h3::before {
    background: #f97316 !important;
}

html body .contacto-proceso .contacto-proceso-card:nth-child(4) h3::before {
    background: #0ca77a !important;
}


/* TEXTOS */

html body .contacto-proceso .contacto-proceso-card h3 {
    margin: 0 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

html body .contacto-proceso .contacto-proceso-card p {
    max-width: 260px !important;
    margin: 14px auto 0 !important;
    color: #405a78 !important;
    -webkit-text-fill-color: #405a78 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    html body .contacto-proceso {
        padding: 78px 0 70px !important;
    }

    html body .contacto-proceso .contacto-proceso-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 46px 26px !important;
        max-width: 720px !important;
    }
}

@media (max-width: 600px) {

    html body .contacto-proceso {
        padding: 65px 0 55px !important;
    }

    html body .contacto-proceso .encabezado-seccion {
        margin-bottom: 48px !important;
    }

    html body .contacto-proceso .encabezado-seccion h2 {
        font-size: 34px !important;
        letter-spacing: -0.7px !important;
    }

    html body .contacto-proceso .contacto-proceso-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
        max-width: 360px !important;
    }

    html body .contacto-proceso .contacto-proceso-card {
        min-height: auto !important;
    }

    html body .contacto-proceso .contacto-proceso-card > div {
        width: 86px !important;
        height: 86px !important;
    }

    html body .contacto-proceso .contacto-proceso-card > div i {
        font-size: 31px !important;
    }

    html body .contacto-proceso .contacto-proceso-card > span {
        left: calc(50% + 41px) !important;
        font-size: 31px !important;
    }
}
/* OCULTAR NÚMEROS DEL PROCESO */

html body .contacto-proceso .contacto-proceso-card > span {
    display: none !important;
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS
   EVALUACIÓN INICIAL + RECOMENDACIÓN
========================================================= */

html body .diagnostico-edificios {
    padding: 88px 0 !important;
    background: #edf5ff !important;
}

html body .diagnostico-edificios .diagnostico-institucion-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.16fr) minmax(380px, 0.94fr) !important;
    align-items: stretch !important;
    gap: 36px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}


/* =========================================================
   PANEL IZQUIERDO: FORMULARIO
========================================================= */

html body .diagnostico-edificios .diagnostico-institucion-form {
    padding: 42px 46px !important;
    background: #ffffff !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(24, 63, 118, 0.09) !important;
}

html body .diagnostico-edificios .diagnostico-institucion-form .etiqueta-seccion {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
}

html body .diagnostico-edificios .diagnostico-institucion-form .etiqueta-seccion i {
    color: #1d4ed8 !important;
}

html body .diagnostico-edificios .diagnostico-institucion-form h2 {
    max-width: 570px !important;
    margin: 0 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: clamp(34px, 3.1vw, 47px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
}

html body .diagnostico-edificios .diagnostico-institucion-form > p {
    max-width: 640px !important;
    margin: 16px 0 30px !important;
    color: #48617e !important;
    -webkit-text-fill-color: #48617e !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* PREGUNTAS */

html body .diagnostico-edificios .institucion-preguntas {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 20px !important;
}

html body .diagnostico-edificios .institucion-campo {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html body .diagnostico-edificios .institucion-campo label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-height: 42px !important;
    color: #253c59 !important;
    -webkit-text-fill-color: #253c59 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

html body .diagnostico-edificios .institucion-campo label > span {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;
    display: grid !important;
    place-items: center !important;
    margin-top: -2px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1d4ed8 !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body .diagnostico-edificios .institucion-campo select {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    color: #30445f !important;
    background: #ffffff !important;
    border: 1px solid #cad8e7 !important;
    border-radius: 9px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .diagnostico-edificios .institucion-campo select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}


/* =========================================================
   PANEL DERECHO: RECOMENDACIÓN
========================================================= */

html body .diagnostico-edificios .resultado-institucion {
    position: relative !important;
    min-height: 100% !important;
    padding: 42px 40px 34px !important;
    overflow: hidden !important;
    color: #203553 !important;
    background: #ffffff !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(24, 63, 118, 0.09) !important;
}

html body .diagnostico-edificios .resultado-institucion::before {
    content: "" !important;
    position: absolute !important;
    top: -88px !important;
    right: -72px !important;
    width: 198px !important;
    height: 198px !important;
    background: #e7f0ff !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera span {
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera h3 {
    margin: 11px 0 0 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera > i {
    width: 62px !important;
    height: 62px !important;
    display: grid !important;
    place-items: center !important;
    color: transparent !important;
    background: #dce9ff !important;
    border-radius: 17px !important;
    font-size: 0 !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera > i::before {
    content: "IP" !important;
    color: #1d4ed8 !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 800 !important;
}


/* ESTADO */

html body .diagnostico-edificios .resultado-institucion-estado {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 26px 0 28px !important;
}

html body .diagnostico-edificios .institucion-resultado-punto {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    background: #f6b928 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 5px #fff6df !important;
}

html body .diagnostico-edificios .resultado-institucion-estado p {
    margin: 0 !important;
    color: #485e79 !important;
    -webkit-text-fill-color: #485e79 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* SERVICIOS RECOMENDADOS */

html body .diagnostico-edificios .resultado-institucion-servicios {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

html body .diagnostico-edificios .resultado-institucion-servicio {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    opacity: 1 !important;
}

html body .diagnostico-edificios .resultado-institucion-servicio > i {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 19px !important;
}

html body .diagnostico-edificios .resultado-institucion-servicio strong {
    display: block !important;
    color: #2b405d !important;
    -webkit-text-fill-color: #2b405d !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

html body .diagnostico-edificios .resultado-institucion-servicio span {
    display: block !important;
    margin-top: 4px !important;
    color: #6b7f97 !important;
    -webkit-text-fill-color: #6b7f97 !important;
    font-size: 12px !important;
}


/* COLORES ORIGINALES */

html body .diagnostico-edificios #edificioRecomendarCCTV > i {
    color: #2563eb !important;
    background: #e8f0ff !important;
}

html body .diagnostico-edificios #edificioRecomendarAcceso > i {
    color: #8858e8 !important;
    background: #f0e9ff !important;
}

html body .diagnostico-edificios #edificioRecomendarAlarma > i {
    color: #f59e0b !important;
    background: #fff3df !important;
}

html body .diagnostico-edificios #edificioRecomendarMonitoreo > i {
    color: #0ba98a !important;
    background: #e2f8f2 !important;
}


/* MENSAJE Y BOTÓN */

html body .diagnostico-edificios .resultado-institucion-mensaje {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin-top: 28px !important;
    padding: 15px 16px !important;
    background: #f0f8ff !important;
    border: 1px solid #cde7ff !important;
    border-radius: 10px !important;
}

html body .diagnostico-edificios .resultado-institucion-mensaje i {
    color: #2698e8 !important;
    margin-top: 2px !important;
}

html body .diagnostico-edificios .resultado-institucion-mensaje p {
    margin: 0 !important;
    color: #48617e !important;
    -webkit-text-fill-color: #48617e !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body .diagnostico-edificios .btn-institucion-cotizar {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 25px !important;
    padding: 17px 20px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #1d4ed8 !important;
    border: 1px solid #1d4ed8 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.20) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

html body .diagnostico-edificios .btn-institucion-cotizar i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .diagnostico-edificios .btn-institucion-cotizar:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #153fad !important;
    border-color: #153fad !important;
    transform: translateY(-2px) !important;
}

html body .diagnostico-edificios .resultado-institucion small {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin-top: 15px !important;
    color: #71849a !important;
    -webkit-text-fill-color: #71849a !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
}


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

@media (max-width: 1050px) {

    html body .diagnostico-edificios {
        padding: 72px 0 !important;
    }

    html body .diagnostico-edificios .diagnostico-institucion-grid {
        grid-template-columns: 1fr !important;
        max-width: 780px !important;
    }
}

@media (max-width: 650px) {

    html body .diagnostico-edificios {
        padding: 58px 0 !important;
    }

    html body .diagnostico-edificios .diagnostico-institucion-form,
    html body .diagnostico-edificios .resultado-institucion {
        padding: 28px 20px !important;
        border-radius: 14px !important;
    }

    html body .diagnostico-edificios .diagnostico-institucion-form h2 {
        font-size: 33px !important;
    }

    html body .diagnostico-edificios .institucion-preguntas {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    html body .diagnostico-edificios .institucion-campo label {
        min-height: auto !important;
    }

    html body .diagnostico-edificios .resultado-institucion-cabecera h3 {
        font-size: 24px !important;
    }

    html body .diagnostico-edificios .resultado-institucion-cabecera > i {
        width: 52px !important;
        height: 52px !important;
    }

    html body .diagnostico-edificios .btn-institucion-cotizar {
        font-size: 14px !important;
    }
}
/* CORRECCIÓN: ALINEAR EL PANEL DE RECOMENDACIÓN */

html body .diagnostico-edificios .diagnostico-institucion-grid {
    align-items: start !important;
}

html body .diagnostico-edificios .resultado-institucion {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: start !important;
    margin-top: 0 !important;
    transform: none !important;
}
/* DEJAR UN SOLO IP EN EL PANEL DE RECOMENDACIÓN */

html body .diagnostico-edificios .resultado-institucion-cabecera > i {
    font-size: 0 !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera > i::before {
    content: none !important;
    display: none !important;
}

html body .diagnostico-edificios .resultado-institucion-cabecera > i::after {
    content: "IP" !important;
    display: grid !important;
    place-items: center !important;
    color: #1d4ed8 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS
   INTRODUCCIÓN: PROTECCIÓN ADAPTADA AL ENTORNO
========================================================= */

html body .rubro-hero-edificios ~ .rubro-introduccion {
    padding: 82px 0 88px !important;
    background: #edf5ff !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-introduccion-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1fr) !important;
    align-items: center !important;
    gap: 76px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}


/* TEXTO IZQUIERDO */

html body .rubro-hero-edificios ~ .rubro-introduccion .etiqueta-seccion {
    display: inline-block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion h2 {
    max-width: 620px !important;
    margin: 0 !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: clamp(38px, 3.8vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -1.3px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion p {
    max-width: 620px !important;
    margin: 22px 0 0 !important;
    color: #405a78 !important;
    -webkit-text-fill-color: #405a78 !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion p + p {
    margin-top: 18px !important;
}


/* TARJETAS DERECHAS */

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-datos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato {
    min-height: 136px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 22px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 24px rgba(25, 69, 125, 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 28px rgba(25, 69, 125, 0.11) !important;
}


/* ICONOS */

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato > i {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    font-size: 22px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato:nth-child(1) > i {
    color: #2563eb !important;
    background: #e7f0ff !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato:nth-child(2) > i {
    color: #7b5ce1 !important;
    background: #f0eaff !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato:nth-child(3) > i {
    color: #f07721 !important;
    background: #fff0e2 !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato:nth-child(4) > i {
    color: #0ba77f !important;
    background: #e1f8ef !important;
}


/* TEXTOS DE LAS TARJETAS */

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato strong {
    display: block !important;
    color: #203553 !important;
    -webkit-text-fill-color: #203553 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato span {
    display: block !important;
    margin-top: 6px !important;
    color: #5a718d !important;
    -webkit-text-fill-color: #5a718d !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    html body .rubro-hero-edificios ~ .rubro-introduccion {
        padding: 72px 0 !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-introduccion-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
        max-width: 760px !important;
    }
}

@media (max-width: 600px) {

    html body .rubro-hero-edificios ~ .rubro-introduccion {
        padding: 58px 0 !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion h2 {
        font-size: 35px !important;
        letter-spacing: -0.7px !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion p {
        font-size: 15px !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-datos {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato {
        min-height: 112px !important;
        padding: 20px !important;
    }
}
/* =========================================================
   EDIFICIOS - AJUSTE MÁS NATURAL DE LA INTRODUCCIÓN
========================================================= */

html body .rubro-hero-edificios ~ .rubro-introduccion {
    padding: 70px 0 76px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-introduccion-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1fr) !important;
    align-items: start !important;
    gap: 58px !important;
}


/* TÍTULO: MENOS NEGRO Y MENOS GRANDE */

html body .rubro-hero-edificios ~ .rubro-introduccion h2 {
    max-width: 545px !important;
    color: #3d5875 !important;
    -webkit-text-fill-color: #3d5875 !important;
    font-size: clamp(34px, 2.7vw, 45px) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.8px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .etiqueta-seccion {
    margin-bottom: 13px !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    font-size: 12px !important;
    letter-spacing: 1.6px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion p {
    max-width: 560px !important;
    margin-top: 18px !important;
    color: #526b87 !important;
    -webkit-text-fill-color: #526b87 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* TARJETAS MÁS LIGERAS */

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-datos {
    margin-top: 74px !important;
    gap: 14px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato {
    min-height: 118px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(207, 221, 239, 0.9) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 20px rgba(25, 69, 125, 0.05) !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato > i {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    border-radius: 13px !important;
    font-size: 20px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato strong {
    font-size: 16px !important;
}

html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-dato span {
    margin-top: 4px !important;
    color: #637b96 !important;
    -webkit-text-fill-color: #637b96 !important;
    font-size: 12px !important;
}


/* CELULAR */

@media (max-width: 1050px) {

    html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-introduccion-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    html body .rubro-hero-edificios ~ .rubro-introduccion .rubro-datos {
        margin-top: 0 !important;
    }
}

@media (max-width: 600px) {

    html body .rubro-hero-edificios ~ .rubro-introduccion h2 {
        font-size: 34px !important;
    }
}
/* EDIFICIOS: OCULTAR NÚMEROS DE SOLUCIONES */

html body .soluciones-rubro .solucion-numero {
    display: none !important;
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS — ZONAS ESTRATÉGICAS
========================================================= */

html body .zonas-edificio {
    padding: 74px 0 86px;
    background: #eaf3ff;
}

html body .zonas-edificio .encabezado-seccion h2 {
    max-width: 650px;
    margin-inline: auto;
    color: #3d5875 !important;
    font-size: clamp(34px, 2.7vw, 45px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.8px;
}

html body .zonas-edificio .encabezado-seccion p {
    color: #58718f;
    font-size: 16px;
}

/* Elimina los números grandes: 01, 02, 03... */
html body .zonas-edificio .zona-edificio-card > span {
    display: none !important;
}

html body .zonas-edificio-grid {
    gap: 20px;
    margin-top: 42px;
}

html body .zonas-edificio .zona-edificio-card {
    min-height: 205px;
    padding: 30px;
    border: 1px solid rgba(151, 177, 211, 0.42);
    border-top: 3px solid #c8d9ef !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(47, 83, 126, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

html body .zonas-edificio .zona-edificio-card:hover {
    transform: translateY(-5px);
    border-color: #9fc2ea !important;
    box-shadow: 0 19px 34px rgba(47, 83, 126, 0.13);
}

html body .zonas-edificio .zona-edificio-card > i {
    width: 54px;
    height: 54px;
    margin-bottom: 19px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 21px;
}

/* Colores propios de cada zona */
html body .zonas-edificio .zona-edificio-card:nth-child(1) > i {
    color: #2563eb !important;
    background: #e8f0ff !important;
    border-color: #d6e4ff;
}

html body .zonas-edificio .zona-edificio-card:nth-child(2) > i {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
    border-color: #e2d5ff;
}

html body .zonas-edificio .zona-edificio-card:nth-child(3) > i {
    color: #f97316 !important;
    background: #fff0e3 !important;
    border-color: #ffe0c5;
}

html body .zonas-edificio .zona-edificio-card:nth-child(4) > i {
    color: #d94672 !important;
    background: #ffeaf0 !important;
    border-color: #ffd6e2;
}

html body .zonas-edificio .zona-edificio-card:nth-child(5) > i {
    color: #0f9b86 !important;
    background: #e2f8f2 !important;
    border-color: #c8efe6;
}

html body .zonas-edificio .zona-edificio-card:nth-child(6) > i {
    color: #0f766e !important;
    background: #ddf7f2 !important;
    border-color: #c4ede6;
}

html body .zonas-edificio .zona-edificio-card h3 {
    color: #38516e !important;
    font-size: 18px;
    font-weight: 700;
}

html body .zonas-edificio .zona-edificio-card p {
    color: #5d7592 !important;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    html body .zonas-edificio {
        padding: 58px 0 65px;
    }

    html body .zonas-edificio-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    html body .zonas-edificio .zona-edificio-card {
        min-height: auto;
        padding: 25px;
    }
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS — PROBLEMAS FRECUENTES
========================================================= */

html body .rubro-hero-edificios ~ .problemas-rubro {
    padding: 76px 0 82px !important;
    background: #eaf3ff !important;
    border: 0 !important;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problemas-rubro-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(520px, 1.18fr);
    align-items: center;
    gap: clamp(42px, 6vw, 88px);
}

/* Texto izquierdo */
html body .rubro-hero-edificios ~ .problemas-rubro .etiqueta-seccion {
    color: #1d4ed8 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problemas-rubro-contenido h2 {
    max-width: 490px;
    margin: 14px 0 20px !important;
    color: #3d5875 !important;
    font-size: clamp(34px, 2.7vw, 45px) !important;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.8px;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problemas-rubro-contenido > p {
    max-width: 505px;
    margin-bottom: 25px !important;
    color: #58718f !important;
    font-size: 15px;
    line-height: 1.7;
}

/* Botón */
html body .rubro-hero-edificios ~ .problemas-rubro .btn-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 25px;
    color: #ffffff !important;
    background: #2454d6 !important;
    border: 1px solid #2454d6 !important;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(36, 84, 214, 0.18);
}

html body .rubro-hero-edificios ~ .problemas-rubro .btn-primario,
html body .rubro-hero-edificios ~ .problemas-rubro .btn-primario i {
    color: #ffffff !important;
}

html body .rubro-hero-edificios ~ .problemas-rubro .btn-primario:hover {
    transform: translateY(-3px);
    background: #1d46b8 !important;
    box-shadow: 0 15px 27px rgba(36, 84, 214, 0.25);
}

/* Tarjetas de riesgos */
html body .rubro-hero-edificios ~ .problemas-rubro .problemas-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item {
    display: flex;
    align-items: flex-start;
    min-height: 150px;
    padding: 25px 23px;
    gap: 16px;
    border: 1px solid rgba(160, 183, 211, 0.42);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93) !important;
    box-shadow: 0 10px 23px rgba(49, 84, 127, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item:hover {
    transform: translateY(-4px);
    border-color: #b7ceed !important;
    background: #ffffff !important;
    box-shadow: 0 18px 30px rgba(49, 84, 127, 0.12);
}

/* Fondo y tamaño de todos los iconos */
html body .rubro-hero-edificios ~ .problemas-rubro .problema-item > div {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 13px;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item > div i {
    font-size: 19px;
}

/* Color original de cada tipo de riesgo */
html body .rubro-hero-edificios ~ .problemas-rubro .problema-item:nth-child(1) > div {
    color: #e05252 !important;
    background: #ffebeb !important;
    border-color: #ffd8d8;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item:nth-child(2) > div {
    color: #8357dc !important;
    background: #f0eaff !important;
    border-color: #e4d8ff;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item:nth-child(3) > div {
    color: #e99916 !important;
    background: #fff3dc !important;
    border-color: #ffe5b6;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item:nth-child(4) > div {
    color: #0a9d84 !important;
    background: #e0f8f1 !important;
    border-color: #c4eee4;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item h3 {
    margin: 1px 0 7px;
    color: #3d5875 !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

html body .rubro-hero-edificios ~ .problemas-rubro .problema-item p {
    margin: 0;
    color: #5b7490 !important;
    font-size: 13px;
    line-height: 1.55;
}

/* Celular */
@media (max-width: 850px) {
    html body .rubro-hero-edificios ~ .problemas-rubro {
        padding: 60px 0 66px !important;
    }

    html body .rubro-hero-edificios ~ .problemas-rubro .problemas-rubro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 560px) {
    html body .rubro-hero-edificios ~ .problemas-rubro .problemas-lista {
        grid-template-columns: 1fr;
    }

    html body .rubro-hero-edificios ~ .problemas-rubro .problema-item {
        min-height: auto;
        padding: 22px 20px;
    }
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS — PROCESO DE SOLUCIÓN
========================================================= */

html body .rubro-hero-edificios ~ .proceso-rubro {
    padding: 76px 0 84px !important;
    background: #eaf3ff !important;
    border: 0 !important;
}

html body .rubro-hero-edificios ~ .proceso-rubro .encabezado-seccion {
    max-width: 760px;
    margin-inline: auto;
}

html body .rubro-hero-edificios ~ .proceso-rubro .etiqueta-seccion {
    color: #1d4ed8 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

html body .rubro-hero-edificios ~ .proceso-rubro .encabezado-seccion h2 {
    margin: 13px auto 18px !important;
    color: #3d5875 !important;
    font-size: clamp(34px, 2.7vw, 45px) !important;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.8px;
}

html body .rubro-hero-edificios ~ .proceso-rubro .encabezado-seccion p {
    max-width: 690px;
    margin-inline: auto;
    color: #58718f !important;
    font-size: 16px;
    line-height: 1.65;
}

/* Distribución de los cuatro pasos */
html body .rubro-hero-edificios ~ .proceso-rubro .proceso-rubro-grid {
    display: grid;
    grid-template-columns: 1fr 46px 1fr 46px 1fr 46px 1fr;
    align-items: start;
    margin-top: 46px;
}

/* Quita 01, 02, 03 y 04 */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro-numero {
    display: none !important;
}

/* Pasos transparentes */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro {
    min-height: 0 !important;
    padding: 17px 15px 20px !important;
    border: 0 !important;
    border-top-color: transparent !important;
    border-radius: 18px;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    transition: transform 0.25s ease, background 0.25s ease;
}

html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
}

/* Línea discreta entre los pasos */
html body .rubro-hero-edificios ~ .proceso-rubro .proceso-rubro-linea {
    width: 30px;
    height: 1px;
    margin: 48px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        #9fc1e8,
        transparent
    ) !important;
}

/* Iconos */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro > i {
    display: grid;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 28px;
}

/* Analizamos */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro:nth-child(1) > i {
    color: #2563eb !important;
    background: #e8f0ff !important;
    border-color: #d4e3ff;
}

/* Diseñamos */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro:nth-child(3) > i {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
    border-color: #e2d5ff;
}

/* Implementamos */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro:nth-child(5) > i {
    color: #f97316 !important;
    background: #fff0e3 !important;
    border-color: #ffdfc4;
}

/* Acompañamos */
html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro:nth-child(7) > i {
    color: #0ba98a !important;
    background: #dff8f1 !important;
    border-color: #c3eee3;
}

html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro h3 {
    color: #3d5875 !important;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro p {
    max-width: 230px;
    margin: 9px auto 0 !important;
    color: #58718f !important;
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    html body .rubro-hero-edificios ~ .proceso-rubro .proceso-rubro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
    }

    html body .rubro-hero-edificios ~ .proceso-rubro .proceso-rubro-linea {
        display: none;
    }
}

@media (max-width: 560px) {
    html body .rubro-hero-edificios ~ .proceso-rubro {
        padding: 58px 0 64px !important;
    }

    html body .rubro-hero-edificios ~ .proceso-rubro .proceso-rubro-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    html body .rubro-hero-edificios ~ .proceso-rubro .paso-rubro {
        padding: 20px !important;
    }
}
/* =========================================================
   CASAS — PUNTOS A PROTEGER
========================================================= */

html body .casa-puntos {
    padding: 76px 0 84px !important;
    background: #eaf3ff !important;
    border: 0 !important;
}

html body .casa-puntos .encabezado-seccion {
    max-width: 760px;
    margin-inline: auto;
}

html body .casa-puntos .encabezado-seccion .subtitulo {
    color: #1d4ed8 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

html body .casa-puntos .encabezado-seccion h2 {
    max-width: 650px;
    margin: 13px auto 18px !important;
    color: #3d5875 !important;
    font-size: clamp(34px, 2.7vw, 45px) !important;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.8px;
}

html body .casa-puntos .encabezado-seccion h2 span {
    color: #1d4ed8 !important;
}

html body .casa-puntos .encabezado-seccion p {
    max-width: 660px;
    margin-inline: auto;
    color: #58718f !important;
    font-size: 16px;
    line-height: 1.65;
}

/* Tarjetas */
html body .casa-puntos-grid {
    gap: 20px;
    margin-top: 42px;
}

html body .casa-punto-card {
    min-height: 220px !important;
    padding: 29px 27px !important;
    border: 1px solid rgba(160, 183, 211, 0.42);
    border-top: 3px solid #c9d9ed !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93) !important;
    box-shadow: 0 11px 25px rgba(49, 84, 127, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

html body .casa-punto-card:hover {
    transform: translateY(-5px);
    border-color: #a9c6e7 !important;
    background: #ffffff !important;
    box-shadow: 0 18px 32px rgba(49, 84, 127, 0.13);
}

/* Oculta 01, 02, 03 y 04 */
html body .casa-punto-card > span {
    display: none !important;
}

/* Iconos */
html body .casa-punto-icono {
    width: 58px;
    height: 58px;
    margin-bottom: 19px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 22px;
    transition: transform 0.25s ease;
}

html body .casa-punto-card:hover .casa-punto-icono {
    transform: translateY(-3px);
}

/* Entrada principal */
html body .casa-punto-card:nth-child(1) .casa-punto-icono {
    color: #2563eb !important;
    background: #e8f0ff !important;
    border-color: #d4e3ff;
}

/* Exterior */
html body .casa-punto-card:nth-child(2) .casa-punto-icono {
    color: #0ba98a !important;
    background: #dff8f1 !important;
    border-color: #c3eee3;
}

/* Cochera */
html body .casa-punto-card:nth-child(3) .casa-punto-icono {
    color: #f97316 !important;
    background: #fff0e3 !important;
    border-color: #ffdfc4;
}

/* Áreas interiores */
html body .casa-punto-card:nth-child(4) .casa-punto-icono {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
    border-color: #e2d5ff;
}

html body .casa-punto-card h3 {
    color: #3d5875 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

html body .casa-punto-card p {
    margin-top: 9px;
    color: #58718f !important;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 900px) {
    html body .casa-puntos {
        padding: 60px 0 66px !important;
    }

    html body .casa-puntos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 560px) {
    html body .casa-puntos-grid {
        grid-template-columns: 1fr;
    }

    html body .casa-punto-card {
        min-height: auto !important;
        padding: 25px !important;
    }
}
/* =========================================================
   CASAS — ASESOR INICIAL Y RECOMENDACIÓN
========================================================= */

html body .asesor-casa {
    padding: 76px 0 84px !important;
    background: #eaf3ff !important;
    border: 0 !important;
}

html body .asesor-casa .asesor-casa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.86fr);
    align-items: start;
    gap: clamp(30px, 4vw, 48px);
}

/* Tarjeta de preguntas */
html body .asesor-casa .asesor-casa-formulario {
    padding: 38px 40px !important;
    border: 1px solid rgba(160, 183, 211, 0.42);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 30px rgba(49, 84, 127, 0.07);
}

/* Quita el icono de varita: parece IA */
html body .asesor-casa .asesor-casa-formulario .etiqueta-seccion > i {
    display: none !important;
}

html body .asesor-casa .asesor-casa-formulario .etiqueta-seccion {
    color: #1d4ed8 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

html body .asesor-casa .asesor-casa-formulario h2 {
    margin: 13px 0 12px !important;
    color: #3d5875 !important;
    font-size: clamp(33px, 2.8vw, 43px) !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.7px;
}

html body .asesor-casa .asesor-casa-formulario > p {
    color: #58718f !important;
    font-size: 15px;
    line-height: 1.65;
}

/* Preguntas */
html body .asesor-casa .asesor-preguntas {
    gap: 20px 18px;
    margin-top: 30px;
}

html body .asesor-casa .asesor-campo {
    gap: 10px;
}

html body .asesor-casa .asesor-campo label {
    color: #3d5875 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

html body .asesor-casa .asesor-campo label span {
    width: 30px;
    height: 30px;
    color: #2563eb !important;
    background: #e8f0ff !important;
    border: 1px solid #d6e4ff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

html body .asesor-casa .asesor-campo select {
    min-height: 54px;
    color: #3d5875 !important;
    border: 1px solid #cbd9e8 !important;
    border-radius: 10px;
    background: #ffffff !important;
    font-size: 14px;
}

html body .asesor-casa .asesor-campo select:hover,
html body .asesor-casa .asesor-campo select:focus {
    border-color: #4b7ff0 !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

/* Tarjeta derecha */
html body .asesor-casa .resultado-casa {
    position: relative !important;
    top: 0 !important;
    padding: 35px !important;
    overflow: hidden;
    border: 1px solid rgba(160, 183, 211, 0.42) !important;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 30px rgba(49, 84, 127, 0.07) !important;
}

/* Quita el fondo redondo y el escudo/IP decorativo */
html body .asesor-casa .resultado-casa::before,
html body .asesor-casa .resultado-casa-cabecera > i {
    display: none !important;
}

html body .asesor-casa .resultado-casa-cabecera span {
    color: #1d4ed8 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

html body .asesor-casa .resultado-casa-cabecera h3 {
    margin-top: 7px;
    color: #3d5875 !important;
    font-size: 26px;
    font-weight: 700;
}

html body .asesor-casa .resultado-casa-estado p {
    color: #58718f !important;
    font-size: 13px;
    line-height: 1.55;
}

html body .asesor-casa .resultado-punto {
    background: #f5b942 !important;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.14);
}

/* Servicios recomendados */
html body .asesor-casa .resultado-casa-servicios {
    gap: 12px;
    margin-top: 22px;
}

html body .asesor-casa .resultado-servicio {
    padding: 14px;
    border: 1px solid #e1eaf3 !important;
    border-radius: 12px;
    background: #fbfdff !important;
    opacity: 1 !important;
}

html body .asesor-casa .resultado-servicio:hover {
    transform: translateX(4px);
    border-color: #b9d0ed !important;
    background: #ffffff !important;
}

html body .asesor-casa .resultado-servicio strong {
    color: #3d5875 !important;
    font-size: 14px;
}

html body .asesor-casa .resultado-servicio span {
    color: #6b829c !important;
    font-size: 11px;
}

/* Cámara: azul */
html body .asesor-casa .resultado-servicio:nth-child(1) > i {
    color: #2563eb !important;
    background: #e8f0ff !important;
    border: 1px solid #d4e3ff;
}

/* Alarma: naranja */
html body .asesor-casa .resultado-servicio:nth-child(2) > i {
    color: #f59e0b !important;
    background: #fff3dc !important;
    border: 1px solid #ffe4b5;
}

/* Acceso: morado */
html body .asesor-casa .resultado-servicio:nth-child(3) > i {
    color: #8b5cf6 !important;
    background: #f0eaff !important;
    border: 1px solid #e2d5ff;
}

/* Sugerencia */
html body .asesor-casa .resultado-casa-mensaje {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #f5e2b8 !important;
    border-radius: 11px;
    background: #fffaf1 !important;
}

html body .asesor-casa .resultado-casa-mensaje i {
    color: #f59e0b !important;
}

html body .asesor-casa .resultado-casa-mensaje p,
html body .asesor-casa .resultado-casa > small {
    color: #6b829c !important;
}

/* Botón */
html body .asesor-casa .btn-casa-cotizar {
    min-height: 54px;
    margin-top: 22px;
    color: #ffffff !important;
    background: #2454d6 !important;
    border: 1px solid #2454d6 !important;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(36, 84, 214, 0.18);
}

html body .asesor-casa .btn-casa-cotizar,
html body .asesor-casa .btn-casa-cotizar i {
    color: #ffffff !important;
}

html body .asesor-casa .btn-casa-cotizar:hover {
    background: #1d46b8 !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 28px rgba(36, 84, 214, 0.25);
}

@media (max-width: 900px) {
    html body .asesor-casa {
        padding: 60px 0 66px !important;
    }

    html body .asesor-casa .asesor-casa-grid {
        grid-template-columns: 1fr;
    }

    html body .asesor-casa .resultado-casa {
        width: 100%;
    }
}

@media (max-width: 560px) {
    html body .asesor-casa .asesor-casa-formulario,
    html body .asesor-casa .resultado-casa {
        padding: 26px 22px !important;
    }

    html body .asesor-casa .asesor-preguntas {
        grid-template-columns: 1fr;
    }
}
.password-validacion{display:grid;gap:6px;margin-top:10px;color:#7b8492;font-size:12px}.password-validacion span{transition:color .2s}.password-validacion span.cumple{color:#15803d}.password-validacion i{font-size:7px;vertical-align:middle}.cotizador-bloqueado{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid #e3e7ed;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(16,27,45,.08)}.cotizador-bloqueado>i{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:#fff1f2;color:#b71920}.cotizador-bloqueado>div{display:flex;flex:1;flex-direction:column;gap:4px}.cotizador-bloqueado>div span{color:#667085;font-size:14px}.cotizador-bloqueado .btn-principal{white-space:nowrap}@media(max-width:760px){.cotizador-bloqueado{align-items:stretch;flex-direction:column}.cotizador-bloqueado .btn-principal{text-align:center}}
/* ==========================================================
   SECTORES > CASAS
   SITUACIONES COMUNES — TARJETAS CON IMÁGENES

   IMPORTANTE:
   PEGAR ESTE BLOQUE AL FINAL DE assets/css/estilos.css

   Solo modifica:
   - Diferentes hogares, diferentes necesidades
   - Las 3 tarjetas de escenarios
   - El fondo transparente de esta sección
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .casa-escenarios.casa-escenarios-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 82px 0 92px !important;

    background:
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #eaf3ff 52%,
            #edf6ff 100%
        ) !important;

    border: 0 !important;
}


/* ==========================================================
   2. FONDO DECORATIVO TRANSPARENTE
========================================================== */

html body .casa-escenarios-premium .casa-escenarios-fondo {
    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    pointer-events: none;

    z-index: 0;
}


html body .casa-escenarios-premium .casa-escenarios-fondo img {
    position: absolute;

    width: min(1250px, 92vw);
    height: auto;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    object-fit: contain;

    opacity: 0.14;

    filter:
        saturate(0.8)
        contrast(0.92);

    user-select: none;
}


/* Pequeña claridad para que el fondo nunca moleste al texto */

html body .casa-escenarios-premium::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 255, 255, 0.35),
            transparent 43%
        );
}


/* ==========================================================
   3. CONTENIDO POR ENCIMA DEL FONDO
========================================================== */

html body .casa-escenarios-premium .casa-escenarios-contenido {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   4. ENCABEZADO
========================================================== */

html body .casa-escenarios-premium .encabezado-seccion {
    max-width: 780px;

    margin: 0 auto 48px !important;

    text-align: center;
}


html body
.casa-escenarios-premium
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #1d4ed8 !important;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.8px;
    text-transform: uppercase;
}


html body
.casa-escenarios-premium
.encabezado-seccion
h2 {
    max-width: 720px;

    margin: 0 auto !important;

    color: #3d5875 !important;

    font-size: clamp(36px, 3.2vw, 48px) !important;

    font-weight: 750;

    line-height: 1.13;

    letter-spacing: -1px;
}


html body
.casa-escenarios-premium
.encabezado-seccion
h2 span {
    color: #3d5875 !important;
}


html body
.casa-escenarios-premium
.encabezado-seccion
p {
    max-width: 660px;

    margin: 18px auto 0 !important;

    color: #58718f !important;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   5. GRID DE LAS 3 TARJETAS
========================================================== */

html body
.casa-escenarios-premium
.casa-escenarios-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 0 !important;

    align-items: stretch;
}


/* ==========================================================
   6. TARJETA PRINCIPAL
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card {
    position: relative;

    display: flex !important;

    min-height: 455px !important;

    padding: 10px 10px 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(137, 166, 202, 0.38) !important;

    border-top:
        1px solid
        rgba(137, 166, 202, 0.38) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 14px 34px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}


/* Hover profesional y suave */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:hover {
    transform: translateY(-6px) !important;

    border-color:
        rgba(64, 116, 190, 0.47) !important;

    border-top-color:
        rgba(64, 116, 190, 0.47) !important;

    background: #ffffff !important;

    box-shadow:
        0 22px 45px
        rgba(49, 84, 127, 0.15) !important;
}


/* ==========================================================
   7. IMAGEN SUPERIOR

   Esta parte también neutraliza el antiguo:
   .casa-escenario > div
   que tenías en tu CSS.
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
> .casa-escenario-imagen {
    position: relative;

    display: block !important;

    width: 100% !important;
    height: 205px !important;

    flex: 0 0 205px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    border-radius: 13px !important;

    background: #dfeaf6 !important;

    color: inherit !important;

    font-size: inherit !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen
img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.45s ease,
        filter 0.35s ease;
}


/* Zoom casi imperceptible */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:hover
.casa-escenario-imagen
img {
    transform: scale(1.035);

    filter: contrast(1.02);
}


/* Oscurecido muy suave abajo de la foto */

html body
.casa-escenarios-premium
.casa-escenario-imagen::after {
    content: "";

    position: absolute;

    inset: auto 0 0 0;

    height: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(15, 39, 70, 0.08)
        );
}


/* ==========================================================
   8. CUERPO DE LA TARJETA

   También anulamos el antiguo:
   .casa-escenario > div
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
> .casa-escenario-cuerpo {
    display: flex !important;

    width: auto !important;
    height: auto !important;

    flex: 1;

    margin: 0 !important;

    padding: 22px 17px 26px !important;

    flex-direction: column;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    overflow: visible;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: inherit !important;

    font-size: inherit !important;
}


/* ==========================================================
   9. ETIQUETA ESCENARIO
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-etiqueta {
    display: inline-flex !important;

    width: auto;

    margin: 0 0 13px !important;

    padding: 6px 11px;

    align-items: center;

    border:
        1px solid
        #dbe8ff;

    border-radius: 999px;

    color: #2454d6 !important;

    background:
        #eef4ff !important;

    font-size: 10px !important;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==========================================================
   10. TÍTULO
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 750;

    line-height: 1.3;
}


/* ==========================================================
   11. LÍNEA AZUL PEQUEÑA
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-linea {
    display: block !important;

    width: 42px;
    height: 3px;

    margin: 12px 0 14px !important;

    border-radius: 20px;

    background:
        #2454d6 !important;

    opacity: 0.92;
}


/* ==========================================================
   12. DESCRIPCIÓN
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
p {
    margin: 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.7;
}


/* ==========================================================
   13. DETALLE DIFERENTE MUY SUAVE EN CADA TARJETA

   No usamos colores chillones.
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(1)
.casa-escenario-etiqueta {
    color: #2454d6 !important;
    background: #eef4ff !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(2)
.casa-escenario-etiqueta {
    color: #1768a8 !important;
    background: #edf7ff !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(3)
.casa-escenario-etiqueta {
    color: #28735e !important;
    background: #edf8f4 !important;
}


/* ==========================================================
   14. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .casa-escenarios.casa-escenarios-premium {
        padding:
            68px 0 74px !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card:last-child {
        grid-column: 1 / -1;

        width: min(100%, 520px);

        justify-self: center;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-fondo
    img {
        width: 1200px;

        opacity: 0.11;
    }
}


/* ==========================================================
   15. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .casa-escenarios.casa-escenarios-premium {
        padding:
            58px 0 64px !important;
    }


    html body
    .casa-escenarios-premium
    .encabezado-seccion {
        margin-bottom:
            34px !important;
    }


    html body
    .casa-escenarios-premium
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .casa-escenarios-premium
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card,
    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card:last-child {
        grid-column: auto;

        width: 100%;

        min-height: auto !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    > .casa-escenario-imagen {
        height: 190px !important;

        flex-basis: 190px;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    > .casa-escenario-cuerpo {
        padding:
            21px 16px 24px !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-fondo
    img {
        width: 850px;

        opacity: 0.08;
    }
}


/* ==========================================================
   16. CELULARES MUY PEQUEÑOS
========================================================== */

@media (max-width: 390px) {

    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    > .casa-escenario-imagen {
        height: 170px !important;

        flex-basis: 170px;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    h3 {
        font-size: 18px !important;
    }
}
/* ==========================================================
   SECTORES > CASAS
   SITUACIONES COMUNES

   DISEÑO DEFINITIVO
   - 3 imágenes reales
   - fondo decorativo transparente
   - responsive
   - sin iconos
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .casa-escenarios.casa-escenarios-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 82px 0 92px !important;

    background: #eaf3ff !important;

    border: 0 !important;
}


/* ==========================================================
   2. FONDO TRANSPARENTE
========================================================== */

html body .casa-escenarios.casa-escenarios-premium::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        url("/seguridad_web/assets/img/sectores/casas/fondo-casa-seguridad.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: min(1250px, 92vw) auto;

    opacity: 0.10;

    pointer-events: none;
}


/* Capa para mantener buena lectura */

html body .casa-escenarios.casa-escenarios-premium::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, 0.25),
            rgba(234, 243, 255, 0.20)
        );

    pointer-events: none;
}


/* El fondo <img> que estaba en casas.php ya no lo necesitamos */

html body
.casa-escenarios-premium
.casa-escenarios-fondo {
    display: none !important;
}


/* Contenido por encima */

html body
.casa-escenarios-premium
.casa-escenarios-contenido {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   3. TÍTULO
========================================================== */

html body
.casa-escenarios-premium
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto 48px !important;

    text-align: center;
}


html body
.casa-escenarios-premium
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


html body
.casa-escenarios-premium
.encabezado-seccion
h2 {
    max-width: 720px;

    margin: 0 auto !important;

    color: #3d5875 !important;

    font-size: clamp(36px, 3.2vw, 48px) !important;

    font-weight: 700;

    line-height: 1.13;

    letter-spacing: -1px;
}


html body
.casa-escenarios-premium
.encabezado-seccion
h2 span {
    color: #3d5875 !important;
}


html body
.casa-escenarios-premium
.encabezado-seccion
p {
    max-width: 670px;

    margin: 18px auto 0 !important;

    color: #58718f !important;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   4. GRID
========================================================== */

html body
.casa-escenarios-premium
.casa-escenarios-grid {
    display: grid !important;

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

    gap: 22px !important;

    align-items: stretch;

    margin-top: 0 !important;
}


/* ==========================================================
   5. TARJETAS
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card {
    position: relative;

    display: flex !important;

    min-height: 455px !important;

    padding: 10px 10px 0 !important;

    flex-direction: column !important;

    overflow: hidden;

    border: 1px solid rgba(137, 166, 202, 0.40) !important;

    border-top: 1px solid rgba(137, 166, 202, 0.40) !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 14px 34px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen-card:hover {
    transform: translateY(-6px) !important;

    border-color: #a9c6e7 !important;

    background: #ffffff !important;

    box-shadow:
        0 22px 45px
        rgba(49, 84, 127, 0.15) !important;
}


/* ==========================================================
   6. ZONA DE LA FOTOGRAFÍA
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
> .casa-escenario-imagen {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 205px !important;

    min-height: 205px !important;

    flex: 0 0 205px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 13px !important;

    background-color: #dce9f7 !important;

    background-repeat: no-repeat !important;

    background-position: center center !important;

    background-size: cover !important;

    color: transparent !important;
}


/* Oculta los IMG del PHP.
   Las imágenes se cargarán desde CSS. */

html body
.casa-escenarios-premium
.casa-escenario-imagen
img {
    display: none !important;
}


/* ==========================================================
   7. IMAGEN 1
   CASA CON VARIOS ACCESOS
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(1)
> .casa-escenario-imagen {
    background-image:
        url("/assets/img/casas/varios-accesos.png") !important;
}


/* ==========================================================
   8. IMAGEN 2
   VIVIENDA CON COCHERA
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(2)
> .casa-escenario-imagen {
    background-image:
        url("/assets/img/casas/vivienda-cochera.png") !important;
}


/* ==========================================================
   9. IMAGEN 3
   CASA CON EXTERIORES
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(3)
> .casa-escenario-imagen {
    background-image:
        url("/assets/img/casas/casa-exteriores.png") !important;
}


/* Sombra suave sobre la parte inferior */

html body
.casa-escenarios-premium
.casa-escenario-imagen::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(25, 57, 91, 0.10)
        );

    pointer-events: none;
}


/* ==========================================================
   10. CUERPO DE TARJETA
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
> .casa-escenario-cuerpo {
    display: flex !important;

    width: auto !important;

    height: auto !important;

    min-height: 0 !important;

    flex: 1 !important;

    margin: 0 !important;

    padding: 22px 17px 26px !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;
}


/* ==========================================================
   11. ETIQUETAS
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-etiqueta {
    display: inline-flex !important;

    width: auto !important;

    margin: 0 0 13px !important;

    padding: 6px 11px !important;

    border: 1px solid #dbe8ff !important;

    border-radius: 999px !important;

    color: #2454d6 !important;

    background: #eef4ff !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: 1px !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(2)
.casa-escenario-etiqueta {
    color: #1768a8 !important;

    background: #edf7ff !important;
}


html body
.casa-escenarios-premium
.casa-escenario-imagen-card:nth-child(3)
.casa-escenario-etiqueta {
    color: #28735e !important;

    background: #edf8f4 !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/* ==========================================================
   13. RAYA AZUL
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-linea {
    display: block !important;

    width: 42px !important;

    height: 3px !important;

    margin: 12px 0 14px !important;

    border: 0 !important;

    border-radius: 20px !important;

    background: #2454d6 !important;
}


/* ==========================================================
   14. DESCRIPCIÓN
========================================================== */

html body
.casa-escenarios-premium
.casa-escenario-imagen-card
p {
    margin: 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.7 !important;
}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .casa-escenarios.casa-escenarios-premium {
        padding: 68px 0 74px !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card:last-child {
        grid-column: 1 / -1;

        width: min(100%, 520px);

        justify-self: center;
    }
}


/* ==========================================================
   16. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .casa-escenarios.casa-escenarios-premium {
        padding: 58px 0 64px !important;
    }


    html body
    .casa-escenarios-premium
    .encabezado-seccion {
        margin-bottom: 34px !important;
    }


    html body
    .casa-escenarios-premium
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenarios-grid {
        grid-template-columns: 1fr !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card,
    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card:last-child {
        grid-column: auto;

        width: 100%;

        min-height: auto !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    > .casa-escenario-imagen {
        height: 190px !important;

        min-height: 190px !important;

        flex-basis: 190px !important;
    }


    html body
    .casa-escenarios-premium
    .casa-escenario-imagen-card
    > .casa-escenario-cuerpo {
        padding: 21px 17px 24px !important;
    }
}
/* ==========================================================
   FONDO DE SITUACIONES COMUNES
   SIN IMAGEN EXTERNA
========================================================== */

html body .casa-escenarios.casa-escenarios-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 82px 0 92px !important;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(37, 99, 235, 0.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(59, 130, 246, 0.06),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #eaf3ff 55%,
            #edf5ff 100%
        ) !important;

    border: 0 !important;
}


/* Decoración suave sin ninguna imagen */

html body .casa-escenarios.casa-escenarios-premium::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -220px;
    top: 40px;

    border-radius: 50%;

    border: 1px solid rgba(37, 99, 235, 0.08);

    pointer-events: none;

    z-index: 0;
}


html body .casa-escenarios.casa-escenarios-premium::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -180px;
    bottom: -150px;

    border-radius: 50%;

    border: 1px solid rgba(37, 99, 235, 0.08);

    pointer-events: none;

    z-index: 0;
}


/* Si en casas.php existe este div, lo ocultamos */

html body
.casa-escenarios-premium
.casa-escenarios-fondo {
    display: none !important;
}
/* ==========================================================
   SECTORES > CASAS
   NUESTRO PROCESO

   Una solución adaptada a tu hogar
   - Sin números
   - Sin cajas grandes
   - Iconos con colores individuales
   - Línea de conexión suave
   - Diseño limpio y profesional
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body
.casa-escenarios + .proceso-rubro {
    padding: 78px 0 88px !important;

    background: #eaf3ff !important;

    border: 0 !important;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.encabezado-seccion {
    max-width: 760px;

    margin: 0 auto !important;

    text-align: center;
}


/* NUESTRO PROCESO */

html body
.casa-escenarios + .proceso-rubro
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* Título */

html body
.casa-escenarios + .proceso-rubro
.encabezado-seccion
h2 {
    max-width: 680px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size: clamp(34px, 3vw, 45px) !important;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.8px;
}


/* Descripción */

html body
.casa-escenarios + .proceso-rubro
.encabezado-seccion
p {
    max-width: 670px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. CONTENEDOR DE LOS 4 PASOS
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.proceso-rubro-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        48px
        minmax(0, 1fr)
        48px
        minmax(0, 1fr)
        48px
        minmax(0, 1fr) !important;

    align-items: start;

    gap: 0 !important;

    margin-top: 48px !important;
}


/* ==========================================================
   4. ELIMINAR 01 / 02 / 03 / 04
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro-numero {
    display: none !important;
}


/* ==========================================================
   5. QUITAR LAS CAJAS BLANCAS
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 23px !important;

    border: 0 !important;

    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    text-align: center;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


/* Hover muy suave */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:hover {
    transform: translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. LÍNEAS ENTRE LOS PASOS
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.proceso-rubro-linea {
    width: 30px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #9fc1e8 25%,
            #7da9dd 50%,
            #9fc1e8 75%,
            transparent 100%
        ) !important;

    border: 0 !important;

    opacity: 0.85;
}


/* ==========================================================
   7. TODOS LOS ICONOS
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro > i {
    display: grid !important;

    width: 66px !important;
    height: 66px !important;

    margin: 0 auto 19px !important;

    place-items: center;

    border: 1px solid transparent;

    border-radius: 19px;

    font-size: 27px !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Pequeño movimiento */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:hover > i {
    transform: translateY(-3px);
}


/* ==========================================================
   8. EVALUAMOS
   LUPA — AZUL
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:nth-child(1) > i {
    color: #2563eb !important;

    background: #e8f0ff !important;

    border-color: #d4e3ff !important;
}


/* ==========================================================
   9. DISEÑAMOS
   REGLA / DISEÑO — MORADO
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:nth-child(3) > i {
    color: #8b5cf6 !important;

    background: #f0eaff !important;

    border-color: #e2d5ff !important;
}


/* ==========================================================
   10. INSTALAMOS
   HERRAMIENTAS — NARANJA
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:nth-child(5) > i {
    color: #f97316 !important;

    background: #fff0e3 !important;

    border-color: #ffdfc4 !important;
}


/* ==========================================================
   11. ACOMPAÑAMOS
   SOPORTE — VERDE / TURQUESA
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro:nth-child(7) > i {
    color: #0a9d84 !important;

    background: #dff8f1 !important;

    border-color: #c3eee3 !important;
}


/* ==========================================================
   12. TÍTULOS DE CADA PASO
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   13. DESCRIPCIONES
========================================================== */

html body
.casa-escenarios + .proceso-rubro
.paso-rubro
p {
    max-width: 225px;

    margin: 9px auto 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.6;
}


/* ==========================================================
   14. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .casa-escenarios + .proceso-rubro {
        padding: 64px 0 72px !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 24px 18px !important;

        margin-top: 38px !important;
    }


    /* En tablet las líneas ya no hacen falta */

    html body
    .casa-escenarios + .proceso-rubro
    .proceso-rubro-linea {
        display: none !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .paso-rubro {
        padding: 22px 18px !important;
    }
}


/* ==========================================================
   15. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .casa-escenarios + .proceso-rubro {
        padding: 58px 0 64px !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns: 1fr !important;

        gap: 13px !important;

        margin-top: 30px !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .paso-rubro {
        padding: 21px 20px !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .paso-rubro > i {
        width: 62px !important;

        height: 62px !important;

        font-size: 25px !important;
    }


    html body
    .casa-escenarios + .proceso-rubro
    .paso-rubro
    p {
        max-width: 300px;
    }
}
/* ==========================================================
   TIENDAS Y LOCALES
   PUNTOS A CONSIDERAR
   DISEÑO DEFINITIVO CON RUTAS DE IMÁGENES

   Imágenes:
   /seguridad_web/assets/img/tiendas/caja.jpg
   /seguridad_web/assets/img/tiendas/entradas-salidas.jpg
   /seguridad_web/assets/img/tiendas/almacen.jpg
   /seguridad_web/assets/img/tiendas/zona-atencion.jpg
   /seguridad_web/assets/img/tiendas/horario-cierre.jpg
   /seguridad_web/assets/img/tiendas/perimetro.jpg
========================================================== */


/* ==========================================================
   1. SECCIÓN
========================================================== */

html body .comercio-puntos {
    position: relative;
    overflow: hidden;

    padding: 78px 0 86px !important;

    background: #eaf3ff !important;

    border: 0 !important;
}


/* Decoraciones suaves */

html body .comercio-puntos::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    left: -240px;
    top: -100px;

    border: 1px solid rgba(37, 99, 235, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


html body .comercio-puntos::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -220px;
    bottom: -170px;

    border: 1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .comercio-puntos .contenedor {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.comercio-puntos
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto 48px !important;

    text-align: center;
}


html body
.comercio-puntos
.encabezado-seccion
.subtitulo {
    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


html body
.comercio-puntos
.encabezado-seccion
h2 {
    max-width: 700px;

    margin: 13px auto 18px !important;

    color: #3d5875 !important;

    font-size: clamp(34px, 2.8vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.8px;
}


html body
.comercio-puntos
.encabezado-seccion
h2 span {
    color: #1d4ed8 !important;
}


html body
.comercio-puntos
.encabezado-seccion
p {
    max-width: 670px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.68;
}


/* ==========================================================
   3. GRID
========================================================== */

html body .comercio-puntos-grid {
    display: grid !important;

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

    gap: 22px !important;

    margin-top: 0 !important;
}


/* ==========================================================
   4. TARJETAS
========================================================== */

html body .comercio-punto-card {
    position: relative;

    display: flex !important;

    min-height: 355px !important;

    padding: 10px 10px 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(160, 183, 211, 0.38) !important;

    border-top:
        1px solid
        rgba(160, 183, 211, 0.38) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 12px 28px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}


html body .comercio-punto-card:hover {
    transform: translateY(-5px) !important;

    border-color: #a9c6e7 !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 38px
        rgba(49, 84, 127, 0.14) !important;
}


/* Quita los números 01 - 06 */

html body
.comercio-punto-card
> span {
    display: none !important;
}


/* ==========================================================
   5. ZONA DE LA IMAGEN
========================================================== */

html body
.comercio-punto-card
> .comercio-punto-imagen {
    position: relative;

    display: block !important;

    width: 100% !important;

    height: 170px !important;

    min-height: 170px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    border-radius: 13px !important;

    background-color: #dfeaf6 !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    transition: transform 0.4s ease;
}


/* Como ahora cargamos las fotos desde CSS,
   ocultamos los <img> del PHP */

html body
.comercio-punto-imagen
img {
    display: none !important;
}


/* ==========================================================
   6. IMAGEN 1 — CAJA
========================================================== */

html body
.comercio-punto-card:nth-child(1)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/caja.png") !important;
}


/* ==========================================================
   7. IMAGEN 2 — ENTRADAS Y SALIDAS
========================================================== */

html body
.comercio-punto-card:nth-child(2)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/entradas-salidas.png") !important;
}


/* ==========================================================
   8. IMAGEN 3 — ALMACÉN
========================================================== */

html body
.comercio-punto-card:nth-child(3)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/almacen.png") !important;
}


/* ==========================================================
   9. IMAGEN 4 — ZONA DE ATENCIÓN
========================================================== */

html body
.comercio-punto-card:nth-child(4)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/zona-atencion.png") !important;
}


/* ==========================================================
   10. IMAGEN 5 — HORARIO DE CIERRE
========================================================== */

html body
.comercio-punto-card:nth-child(5)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/horario-cierre.png") !important;
}


/* ==========================================================
   11. IMAGEN 6 — PERÍMETRO
========================================================== */

html body
.comercio-punto-card:nth-child(6)
> .comercio-punto-imagen {
    background-image:
        url("/assets/img/tiendas/perimetro.png") !important;
}


/* Zoom suave */

html body
.comercio-punto-card:hover
.comercio-punto-imagen {
    transform: scale(1.015);
}


/* ==========================================================
   12. CUERPO DE TARJETA
========================================================== */

html body
.comercio-punto-card
> .comercio-punto-cuerpo {
    display: grid !important;

    grid-template-columns: 58px 1fr;

    column-gap: 15px;

    align-items: center;

    flex: 1;

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding: 19px 13px 23px !important;

    border: 0 !important;

    background: transparent !important;
}


/* ==========================================================
   13. ICONOS
========================================================== */

html body .comercio-punto-icono {
    display: grid !important;

    grid-row: 1 / 3;

    width: 58px !important;

    height: 58px !important;

    margin: 0 !important;

    place-items: center;

    border: 1px solid transparent;

    border-radius: 17px !important;

    font-size: 22px !important;

    transition: transform 0.25s ease;
}


html body
.comercio-punto-card:hover
.comercio-punto-icono {
    transform: translateY(-3px);
}


/* Caja — azul */

html body
.comercio-punto-card:nth-child(1)
.comercio-punto-icono {
    color: #2563eb !important;

    background: #e8f0ff !important;

    border-color: #d4e3ff !important;
}


/* Entrada — verde */

html body
.comercio-punto-card:nth-child(2)
.comercio-punto-icono {
    color: #2f9e44 !important;

    background: #e9f8ed !important;

    border-color: #d2f0d9 !important;
}


/* Almacén — naranja */

html body
.comercio-punto-card:nth-child(3)
.comercio-punto-icono {
    color: #f08a24 !important;

    background: #fff2e5 !important;

    border-color: #ffdcbf !important;
}


/* Atención — morado */

html body
.comercio-punto-card:nth-child(4)
.comercio-punto-icono {
    color: #7c3aed !important;

    background: #f1eaff !important;

    border-color: #e2d5ff !important;
}


/* Cierre — azul oscuro */

html body
.comercio-punto-card:nth-child(5)
.comercio-punto-icono {
    color: #1d4ed8 !important;

    background: #e7efff !important;

    border-color: #d6e2ff !important;
}


/* Perímetro — turquesa */

html body
.comercio-punto-card:nth-child(6)
.comercio-punto-icono {
    color: #0e9dac !important;

    background: #e3f8fa !important;

    border-color: #c6edf1 !important;
}


/* ==========================================================
   14. TÍTULOS
========================================================== */

html body
.comercio-punto-card
h3 {
    grid-column: 2;

    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   15. DESCRIPCIÓN
========================================================== */

html body
.comercio-punto-card
p {
    grid-column: 2;

    margin: 5px 0 0 !important;

    color: #58718f !important;

    font-size: 13px !important;

    line-height: 1.55;
}


/* ==========================================================
   16. TABLET
========================================================== */

@media (max-width: 950px) {

    html body .comercio-puntos {
        padding: 64px 0 70px !important;
    }

    html body .comercio-puntos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }
}


/* ==========================================================
   17. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body .comercio-puntos {
        padding: 58px 0 64px !important;
    }

    html body .comercio-puntos-grid {
        grid-template-columns: 1fr !important;

        gap: 17px !important;
    }

    html body
    .comercio-punto-card
    > .comercio-punto-imagen {
        height: 185px !important;

        min-height: 185px !important;
    }

    html body
    .comercio-punto-card
    > .comercio-punto-cuerpo {
        padding: 18px 12px 22px !important;
    }

    html body
    .comercio-puntos
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }

    html body
    .comercio-puntos
    .encabezado-seccion
    p {
        font-size: 14px;
    }
}
/* ==========================================================
   TIENDAS Y LOCALES
   DIAGNÓSTICO COMERCIAL + PROTECCIÓN SUGERIDA
   DISEÑO PROFESIONAL AZUL REY

   PEGAR AL FINAL DE assets/css/estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .diagnostico-comercio {
    position: relative;
    overflow: hidden;

    padding: 78px 0 86px !important;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(37, 84, 214, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #eaf3ff 100%
        ) !important;

    border: 0 !important;
}


/* ==========================================================
   2. DISTRIBUCIÓN GENERAL
========================================================== */

html body
.diagnostico-comercio
.diagnostico-comercio-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(390px, 0.95fr) !important;

    align-items: stretch !important;

    gap: 30px !important;
}


/* ==========================================================
   3. PANEL IZQUIERDO
========================================================== */

html body
.diagnostico-comercio
.diagnostico-comercio-form {
    padding: 38px 40px !important;

    border:
        1px solid
        rgba(153, 179, 210, 0.42) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ==========================================================
   4. QUITA EL ASPECTO "IA" DEL ICONO SUPERIOR
========================================================== */

html body
.diagnostico-comercio
.diagnostico-comercio-form
.etiqueta-seccion {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.3px;

    background: transparent !important;

    border: 0 !important;
}


html body
.diagnostico-comercio
.diagnostico-comercio-form
.etiqueta-seccion i {
    color: #2563eb !important;

    font-size: 14px;
}


/* ==========================================================
   5. TÍTULO IZQUIERDO
========================================================== */

html body
.diagnostico-comercio
.diagnostico-comercio-form
h2 {
    max-width: 610px;

    margin: 14px 0 13px !important;

    color: #3d5875 !important;

    font-size:
        clamp(34px, 3vw, 44px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.8px;
}


html body
.diagnostico-comercio
.diagnostico-comercio-form
> p {
    max-width: 610px;

    color: #58718f !important;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   6. PREGUNTAS
========================================================== */

html body
.diagnostico-comercio
.diagnostico-preguntas {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 21px 18px !important;

    margin-top: 31px !important;
}


html body
.diagnostico-comercio
.diagnostico-campo {
    gap: 10px !important;
}


/* Label */

html body
.diagnostico-comercio
.diagnostico-campo
label {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #3d5875 !important;

    font-size: 13px !important;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================================
   7. NÚMEROS 01 - 04
   Ya no beige
========================================================== */

html body
.diagnostico-comercio
.diagnostico-campo
label span {
    display: grid !important;

    width: 29px !important;

    height: 29px !important;

    flex: 0 0 29px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid
        #d7e4ff !important;

    border-radius: 8px !important;

    font-size: 10px !important;

    font-weight: 800;
}


/* ==========================================================
   8. SELECT
========================================================== */

html body
.diagnostico-comercio
.diagnostico-campo
select {
    width: 100%;

    min-height: 54px !important;

    padding:
        0 42px 0 15px !important;

    color: #425c78 !important;

    background: #ffffff !important;

    border:
        1px solid
        #cbd9e8 !important;

    border-radius: 11px !important;

    outline: none;

    font-family: inherit;

    font-size: 13px !important;

    cursor: pointer;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}


html body
.diagnostico-comercio
.diagnostico-campo
select:hover {
    border-color:
        #9bb9dc !important;
}


html body
.diagnostico-comercio
.diagnostico-campo
select:focus {
    border-color:
        #2454d6 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px
        rgba(36, 84, 214, 0.10) !important;
}


/* ==========================================================
   9. PANEL DERECHO
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio {
    position: relative !important;

    top: 0 !important;

    display: flex;

    min-height: 100%;

    padding: 35px !important;

    flex-direction: column;

    overflow: hidden;

    color: #3d5875 !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    border:
        1px solid
        rgba(153, 179, 210, 0.42) !important;

    border-top:
        3px solid
        #2454d6 !important;

    border-radius: 18px !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ELIMINA EL CÍRCULO BEIGE */

html body
.diagnostico-comercio
.resultado-comercio::before {
    display: none !important;
}


/* ==========================================================
   10. CABECERA DEL RESULTADO
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-cabecera {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


html body
.diagnostico-comercio
.resultado-comercio-cabecera
span {
    display: block;

    margin-bottom: 5px;

    color: #1d4ed8 !important;

    font-size: 10px !important;

    font-weight: 800;

    letter-spacing: 1.4px;
}


html body
.diagnostico-comercio
.resultado-comercio-cabecera
h3 {
    margin: 0;

    color: #3d5875 !important;

    font-size: 25px !important;

    font-weight: 700;
}


/* Icono de tienda superior */

html body
.diagnostico-comercio
.resultado-comercio-cabecera
> i {
    display: grid;

    width: 54px !important;

    height: 54px !important;

    flex: 0 0 54px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid
        #d8e4fb !important;

    border-radius: 15px !important;

    font-size: 20px !important;
}


/* ==========================================================
   11. ESTADO
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-estado {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 23px !important;

    padding: 14px 16px !important;

    border:
        1px solid
        #dce7f3 !important;

    border-radius: 11px !important;

    background:
        #f8fbff !important;
}


html body
.diagnostico-comercio
.resultado-comercio-estado
p {
    margin: 0;

    color: #58718f !important;

    font-size: 12px !important;

    line-height: 1.55;
}


/* Punto en espera */

html body
.diagnostico-comercio
.comercio-resultado-punto {
    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #f59e0b !important;

    box-shadow:
        0 0 0 5px
        rgba(245, 158, 11, 0.12) !important;
}


/* Punto cuando ya hay resultado */

html body
.diagnostico-comercio
.comercio-resultado-punto.resultado-listo {
    background:
        #16a34a !important;

    box-shadow:
        0 0 0 5px
        rgba(22, 163, 74, 0.11) !important;
}


/* ==========================================================
   12. SERVICIOS RECOMENDADOS
   2 X 2 PARA QUE NO SE VEA TAN VACÍO
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-servicios {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-top: 20px !important;
}


/* Mini tarjetas */

html body
.diagnostico-comercio
.resultado-comercio-servicio {
    display: flex !important;

    min-height: 82px;

    padding: 13px !important;

    align-items: center;

    gap: 11px;

    border:
        1px solid
        #e0e9f3 !important;

    border-radius: 12px !important;

    background:
        #fbfdff !important;

    opacity: 1 !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}


html body
.diagnostico-comercio
.resultado-comercio-servicio:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        #b9cee8 !important;

    box-shadow:
        0 9px 20px
        rgba(49, 84, 127, 0.08);
}


/* Activo */

html body
.diagnostico-comercio
.resultado-comercio-servicio.activo {
    opacity: 1 !important;

    border-color:
        #91b4e6 !important;

    background:
        #f4f8ff !important;

    box-shadow:
        0 0 0 2px
        rgba(36, 84, 214, 0.055);
}


/* ==========================================================
   13. BASE DE LOS ICONOS
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-servicio
> i {
    display: grid !important;

    width: 42px !important;

    height: 42px !important;

    flex: 0 0 42px;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius:
        12px !important;

    font-size:
        17px !important;
}


/* CCTV — AZUL */

html body
.diagnostico-comercio
.resultado-comercio-servicio:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ALARMA — NARANJA */

html body
.diagnostico-comercio
.resultado-comercio-servicio:nth-child(2)
> i {
    color: #f59e0b !important;

    background:
        #fff3dc !important;

    border-color:
        #ffe4b5 !important;
}


/* CONTROL DE ACCESO — VERDE */

html body
.diagnostico-comercio
.resultado-comercio-servicio:nth-child(3)
> i {
    color: #0a9d84 !important;

    background:
        #dff8f1 !important;

    border-color:
        #c3eee3 !important;
}


/* MONITOREO — MORADO */

html body
.diagnostico-comercio
.resultado-comercio-servicio:nth-child(4)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   14. TEXTO DE LAS MINI TARJETAS
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-servicio
strong {
    display: block;

    color: #3d5875 !important;

    font-size: 12px !important;

    font-weight: 700;
}


html body
.diagnostico-comercio
.resultado-comercio-servicio
span {
    display: block;

    margin-top: 3px;

    color: #71859b !important;

    font-size: 10px !important;

    line-height: 1.4;
}


/* ==========================================================
   15. MENSAJE / OBSERVACIÓN
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio-mensaje {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 11px;

    margin-top: 18px !important;

    padding: 15px 16px !important;

    border:
        1px solid
        #cfe2f7 !important;

    border-radius:
        11px !important;

    background:
        #f2f8ff !important;
}


html body
.diagnostico-comercio
.resultado-comercio-mensaje
i {
    margin-top: 2px;

    color: #2491e8 !important;

    font-size: 16px;
}


html body
.diagnostico-comercio
.resultado-comercio-mensaje
p {
    margin: 0;

    color: #58718f !important;

    font-size: 11px !important;

    line-height: 1.55;
}


/* ==========================================================
   16. BOTÓN PRINCIPAL
========================================================== */

html body
.diagnostico-comercio
.btn-comercio-cotizar {
    position: relative;

    z-index: 2;

    display: inline-flex;

    width: 100%;

    min-height: 54px;

    margin-top: 19px !important;

    padding:
        13px 20px !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #ffffff !important;

    background:
        #2454d6 !important;

    border:
        1px solid
        #2454d6 !important;

    border-radius:
        11px !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    box-shadow:
        0 10px 22px
        rgba(36, 84, 214, 0.20) !important;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* FUERZA TEXTO Y FLECHA BLANCOS */

html body
.diagnostico-comercio
.btn-comercio-cotizar,
html body
.diagnostico-comercio
.btn-comercio-cotizar i {
    color: #ffffff !important;
}


html body
.diagnostico-comercio
.btn-comercio-cotizar:hover {
    transform:
        translateY(-3px);

    background:
        #1d46b8 !important;

    border-color:
        #1d46b8 !important;

    box-shadow:
        0 15px 28px
        rgba(36, 84, 214, 0.27) !important;
}


html body
.diagnostico-comercio
.btn-comercio-cotizar:hover
i {
    transform:
        translateX(4px);
}


/* ==========================================================
   17. TEXTO INFERIOR
========================================================== */

html body
.diagnostico-comercio
.resultado-comercio
> small {
    position: relative;

    z-index: 2;

    display: block;

    margin-top:
        13px !important;

    color:
        #8192a5 !important;

    text-align: center;

    font-size:
        9px !important;

    line-height: 1.5;
}


/* ==========================================================
   18. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .diagnostico-comercio {
        padding:
            64px 0 70px !important;
    }


    html body
    .diagnostico-comercio
    .diagnostico-comercio-grid {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-comercio
    .resultado-comercio {
        width: 100%;
    }
}


/* ==========================================================
   19. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .diagnostico-comercio {
        padding:
            58px 0 64px !important;
    }


    html body
    .diagnostico-comercio
    .diagnostico-comercio-form,
    html body
    .diagnostico-comercio
    .resultado-comercio {
        padding:
            26px 21px !important;
    }


    html body
    .diagnostico-comercio
    .diagnostico-preguntas {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-comercio
    .resultado-comercio-servicios {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-comercio
    .diagnostico-comercio-form
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }
}
/* ==========================================================
   TIENDAS Y LOCALES
   SEGURIDAD DURANTE TODO EL DÍA
   "Diferentes momentos, diferentes riesgos"

   PEGAR AL FINAL DE assets/css/estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN
========================================================== */

html body .comercio-momentos {
    position: relative;
    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(37, 99, 235, 0.045),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(14, 165, 183, 0.035),
            transparent 28%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración muy suave */

html body .comercio-momentos::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -180px;

    border: 1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .comercio-momentos::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -180px;

    border: 1px solid rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body .comercio-momentos .contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.comercio-momentos
.encabezado-seccion {
    max-width: 760px;

    margin: 0 auto !important;

    text-align: center;
}


html body
.comercio-momentos
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


html body
.comercio-momentos
.encabezado-seccion
h2 {
    max-width: 690px;

    margin: 0 auto !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* ==========================================================
   3. GRID
========================================================== */

html body
.comercio-momentos
.comercio-momentos-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;

    margin-top: 46px !important;

    align-items: stretch;
}


/* ==========================================================
   4. TARJETAS
========================================================== */

html body
.comercio-momentos
.comercio-momento {
    position: relative;

    min-height: 225px !important;

    padding: 27px 25px 26px !important;

    overflow: hidden;

    border:
        1px solid
        rgba(150, 177, 208, 0.40) !important;

    border-radius: 16px !important;

    background:
        rgba(255, 255, 255, 0.94) !important;

    box-shadow:
        0 10px 25px
        rgba(49, 84, 127, 0.055) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}


/* Línea de color superior */

html body
.comercio-momentos
.comercio-momento::before {
    content: "";

    position: absolute;

    left: 25px;
    right: 25px;
    top: 0;

    height: 3px;

    border-radius: 0 0 20px 20px;
}


html body
.comercio-momentos
.comercio-momento:hover {
    transform: translateY(-5px) !important;

    background: #ffffff !important;

    border-color:
        #aac4e2 !important;

    box-shadow:
        0 18px 34px
        rgba(49, 84, 127, 0.12) !important;
}


/* ==========================================================
   5. ELIMINA 01 02 03 04
========================================================== */

html body
.comercio-momentos
.comercio-momento
> span {
    display: none !important;
}


/* ==========================================================
   6. ICONOS
========================================================== */

html body
.comercio-momentos
.comercio-momento
> div {
    display: grid !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 0 20px !important;

    place-items: center;

    border: 1px solid transparent !important;

    border-radius: 16px !important;

    font-size: 22px !important;

    transition:
        transform 0.25s ease !important;
}


html body
.comercio-momentos
.comercio-momento:hover
> div {
    transform: translateY(-3px);
}


/* ==========================================================
   7. APERTURA — AZUL
========================================================== */

html body
.comercio-momentos
.comercio-momento:nth-child(1)::before {
    background: #2563eb;
}

html body
.comercio-momentos
.comercio-momento:nth-child(1)
> div {
    color: #2563eb !important;

    background: #e8f0ff !important;

    border-color: #d4e3ff !important;
}


/* ==========================================================
   8. ATENCIÓN — MORADO
========================================================== */

html body
.comercio-momentos
.comercio-momento:nth-child(2)::before {
    background: #7c3aed;
}

html body
.comercio-momentos
.comercio-momento:nth-child(2)
> div {
    color: #7c3aed !important;

    background: #f0eaff !important;

    border-color: #e2d5ff !important;
}


/* ==========================================================
   9. ABASTECIMIENTO — NARANJA
========================================================== */

html body
.comercio-momentos
.comercio-momento:nth-child(3)::before {
    background: #f97316;
}

html body
.comercio-momentos
.comercio-momento:nth-child(3)
> div {
    color: #f97316 !important;

    background: #fff0e3 !important;

    border-color: #ffdfc4 !important;
}


/* ==========================================================
   10. CIERRE — AZUL OSCURO
========================================================== */

html body
.comercio-momentos
.comercio-momento:nth-child(4)::before {
    background: #2454d6;
}

html body
.comercio-momentos
.comercio-momento:nth-child(4)
> div {
    color: #2454d6 !important;

    background: #e9efff !important;

    border-color: #d4e0ff !important;
}


/* ==========================================================
   11. TÍTULOS
========================================================== */

html body
.comercio-momentos
.comercio-momento
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   12. TEXTO
========================================================== */

html body
.comercio-momentos
.comercio-momento
p {
    margin: 10px 0 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.65;
}


/* ==========================================================
   13. PEQUEÑO DETALLE INFERIOR
========================================================== */

html body
.comercio-momentos
.comercio-momento::after {
    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    opacity: 0.05;

    pointer-events: none;
}


html body
.comercio-momentos
.comercio-momento:nth-child(1)::after {
    background: #2563eb;
}

html body
.comercio-momentos
.comercio-momento:nth-child(2)::after {
    background: #7c3aed;
}

html body
.comercio-momentos
.comercio-momento:nth-child(3)::after {
    background: #f97316;
}

html body
.comercio-momentos
.comercio-momento:nth-child(4)::after {
    background: #2454d6;
}


/* ==========================================================
   14. TABLET
========================================================== */

@media (max-width: 950px) {

    html body .comercio-momentos {
        padding: 64px 0 72px !important;
    }

    html body
    .comercio-momentos
    .comercio-momentos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }
}


/* ==========================================================
   15. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body .comercio-momentos {
        padding: 58px 0 64px !important;
    }

    html body
    .comercio-momentos
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }

    html body
    .comercio-momentos
    .comercio-momentos-grid {
        grid-template-columns:
            1fr !important;

        gap: 16px !important;

        margin-top: 32px !important;
    }

    html body
    .comercio-momentos
    .comercio-momento {
        min-height: auto !important;

        padding: 25px 23px !important;
    }
}
/* ==========================================================
   TIENDAS Y LOCALES
   NUESTRO PROCESO
   Seguridad adaptada a la operación del negocio

   - Sin números
   - Sin tarjetas blancas grandes
   - Iconos con colores propios
   - Línea entre etapas
   - Hover suave
========================================================== */


/* ==========================================================
   1. SECCIÓN
========================================================== */

html body
.comercio-momentos + .proceso-rubro {
    position: relative;
    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(37, 99, 235, 0.045),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(14, 165, 183, 0.035),
            transparent 28%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.encabezado-seccion {
    max-width: 760px;

    margin: 0 auto !important;

    text-align: center;
}


/* NUESTRO PROCESO */

html body
.comercio-momentos + .proceso-rubro
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TÍTULO */

html body
.comercio-momentos + .proceso-rubro
.encabezado-seccion
h2 {
    max-width: 720px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* DESCRIPCIÓN */

html body
.comercio-momentos + .proceso-rubro
.encabezado-seccion
p {
    max-width: 650px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. GRID DEL PROCESO
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.proceso-rubro-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        48px
        minmax(0, 1fr)
        48px
        minmax(0, 1fr)
        48px
        minmax(0, 1fr) !important;

    align-items: start;

    gap: 0 !important;

    margin-top: 48px !important;
}


/* ==========================================================
   4. ELIMINAR 01 / 02 / 03 / 04
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro-numero {
    display: none !important;
}


/* ==========================================================
   5. QUITAR LAS CAJAS BLANCAS
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 22px !important;

    border: 0 !important;

    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    text-align: center;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


/* HOVER */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro:hover {
    transform: translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. LÍNEA ENTRE LOS PASOS
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.proceso-rubro-linea {
    width: 32px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a5c5e8 20%,
            #78a8dd 50%,
            #a5c5e8 80%,
            transparent 100%
        ) !important;

    opacity: 0.9;
}


/* ==========================================================
   7. ICONOS
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro > i {
    display: grid !important;

    width: 66px !important;
    height: 66px !important;

    margin: 0 auto 19px !important;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius: 19px !important;

    font-size: 27px !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


html body
.comercio-momentos + .proceso-rubro
.paso-rubro:hover > i {
    transform: translateY(-4px);
}


/* ==========================================================
   8. EVALUAMOS — AZUL
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro:nth-child(1) > i {
    color: #2563eb !important;

    background: #e8f0ff !important;

    border-color: #d4e3ff !important;
}


/* ==========================================================
   9. DISEÑAMOS — MORADO
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro:nth-child(3) > i {
    color: #7c3aed !important;

    background: #f0eaff !important;

    border-color: #e2d5ff !important;
}


/* ==========================================================
   10. IMPLEMENTAMOS — NARANJA
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro:nth-child(5) > i {
    color: #f97316 !important;

    background: #fff0e3 !important;

    border-color: #ffdfc4 !important;
}


/* ==========================================================
   11. ACOMPAÑAMOS — VERDE / TURQUESA
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro:nth-child(7) > i {
    color: #0a9d84 !important;

    background: #dff8f1 !important;

    border-color: #c3eee3 !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   13. DESCRIPCIÓN
========================================================== */

html body
.comercio-momentos + .proceso-rubro
.paso-rubro
p {
    max-width: 230px;

    margin: 9px auto 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.6;
}


/* ==========================================================
   14. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .comercio-momentos + .proceso-rubro {
        padding:
            64px 0 72px !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            22px 18px !important;

        margin-top:
            38px !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .proceso-rubro-linea {
        display: none !important;
    }
}


/* ==========================================================
   15. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .comercio-momentos + .proceso-rubro {
        padding:
            58px 0 64px !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;

        margin-top:
            30px !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .paso-rubro {
        padding:
            21px 20px !important;
    }


    html body
    .comercio-momentos + .proceso-rubro
    .paso-rubro > i {
        width: 62px !important;

        height: 62px !important;

        font-size: 25px !important;
    }
}
/* ==========================================================
   UNIVERSIDADES / INSTITUCIONES
   ÁREAS A CONSIDERAR

   DISEÑO DEFINITIVO
   IMÁGENES CARGADAS DESDE CSS EN FORMATO PNG

   CARPETA:
   /seguridad_web/assets/img/universidades/
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .institucion-areas {
    position: relative;

    overflow: hidden;

    padding: 80px 0 90px !important;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(37, 99, 235, 0.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 74%,
            rgba(14, 165, 183, 0.035),
            transparent 26%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoraciones suaves */

html body .institucion-areas::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -170px;

    border: 1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .institucion-areas::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -180px;
    bottom: -170px;

    border: 1px solid rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body .institucion-areas .contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.institucion-areas
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto 48px !important;

    text-align: center;
}


html body
.institucion-areas
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


html body
.institucion-areas
.encabezado-seccion
h2 {
    max-width: 760px;

    margin: 0 auto 18px !important;

    color: #3d5875 !important;

    font-size:
        clamp(36px, 3vw, 48px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


html body
.institucion-areas
.encabezado-seccion
h2 span {
    color: #1d4ed8 !important;
}


html body
.institucion-areas
.encabezado-seccion
p {
    max-width: 700px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.68;
}


/* ==========================================================
   3. GRID 3 X 2
========================================================== */

html body
.institucion-areas-grid {
    display: grid !important;

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

    gap: 22px !important;

    margin-top: 0 !important;

    align-items: stretch;
}


/* ==========================================================
   4. TARJETAS
========================================================== */

html body
.institucion-area-card {
    position: relative;

    display: flex !important;

    min-height: 350px;

    padding: 10px 10px 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(155, 180, 209, 0.38) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 12px 28px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}


html body
.institucion-area-card:hover {
    transform: translateY(-5px) !important;

    border-color:
        #aac7e7 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 20px 38px
        rgba(49, 84, 127, 0.14) !important;
}


/* Quitar números antiguos 01 - 06 */

html body
.institucion-area-card
> span {
    display: none !important;
}


/* ==========================================================
   5. ZONA DE LA IMAGEN
========================================================== */

html body
.institucion-area-card
> .institucion-area-imagen {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 170px !important;

    min-height: 170px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    border-radius: 13px !important;

    background-color:
        #dfeaf6 !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;

    transition:
        transform 0.40s ease;
}


/* ==========================================================
   6. OCULTAMOS LOS IMG DEL PHP

   Ahora las fotografías vienen directamente desde CSS.
========================================================== */

html body
.institucion-area-imagen
img {
    display: none !important;
}


/* ==========================================================
   7. IMAGEN 1
   INGRESOS PRINCIPALES
========================================================== */

html body
.institucion-area-card:nth-child(1)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/ingresos-principales.png") !important;

    background-position:
        center 52% !important;
}


/* ==========================================================
   8. IMAGEN 2
   AULAS Y PABELLONES
========================================================== */

html body
.institucion-area-card:nth-child(2)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/aulas-pabellones.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   9. IMAGEN 3
   PATIOS Y ÁREAS COMUNES
========================================================== */

html body
.institucion-area-card:nth-child(3)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/patios-areas-comunes.png") !important;

    background-position:
        center 55% !important;
}


/* ==========================================================
   10. IMAGEN 4
   ESTACIONAMIENTOS
========================================================== */

html body
.institucion-area-card:nth-child(4)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/estacionamientos.png") !important;

    background-position:
        center 58% !important;
}


/* ==========================================================
   11. IMAGEN 5
   ÁREAS RESTRINGIDAS
========================================================== */

html body
.institucion-area-card:nth-child(5)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/areas-restringidas.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   12. IMAGEN 6
   ADMINISTRACIÓN
========================================================== */

html body
.institucion-area-card:nth-child(6)
> .institucion-area-imagen {
    background-image:
        url("/seguridad_web/assets/img/universidades/administracion.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   13. HOVER DE LAS IMÁGENES
========================================================== */

html body
.institucion-area-card:hover
.institucion-area-imagen {
    transform: scale(1.015);
}


/* Degradado mínimo debajo de la foto */

html body
.institucion-area-imagen::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(24, 55, 88, 0.08)
        );

    pointer-events: none;
}


/* ==========================================================
   14. CUERPO
========================================================== */

html body
.institucion-area-card
> .institucion-area-cuerpo {
    position: relative;

    display: block !important;

    flex: 1;

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding:
        20px 18px 25px !important;

    border: 0 !important;

    background:
        transparent !important;
}


/* ==========================================================
   15. ICONOS
========================================================== */

html body
.institucion-area-icono {
    position: relative;

    z-index: 2;

    display: grid !important;

    width: 56px !important;

    height: 56px !important;

    margin:
        -47px 0 17px !important;

    place-items: center;

    border:
        3px solid #ffffff !important;

    border-radius:
        50% !important;

    font-size:
        21px !important;

    box-shadow:
        0 7px 17px
        rgba(49, 84, 127, 0.13) !important;

    transition:
        transform 0.25s ease;
}


html body
.institucion-area-card:hover
.institucion-area-icono {
    transform:
        translateY(-3px);
}


/* ==========================================================
   16. COLOR ICONO 1
   INGRESOS
========================================================== */

html body
.institucion-area-card:nth-child(1)
.institucion-area-icono {
    color:
        #2563eb !important;

    background:
        #e8f0ff !important;
}


/* ==========================================================
   17. COLOR ICONO 2
   AULAS
========================================================== */

html body
.institucion-area-card:nth-child(2)
.institucion-area-icono {
    color:
        #f59e0b !important;

    background:
        #fff1dc !important;
}


/* ==========================================================
   18. COLOR ICONO 3
   PATIOS
========================================================== */

html body
.institucion-area-card:nth-child(3)
.institucion-area-icono {
    color:
        #2f9e44 !important;

    background:
        #e9f8ed !important;
}


/* ==========================================================
   19. COLOR ICONO 4
   ESTACIONAMIENTO
========================================================== */

html body
.institucion-area-card:nth-child(4)
.institucion-area-icono {
    color:
        #7c3aed !important;

    background:
        #f1eaff !important;
}


/* ==========================================================
   20. COLOR ICONO 5
   RESTRINGIDAS
========================================================== */

html body
.institucion-area-card:nth-child(5)
.institucion-area-icono {
    color:
        #dc2626 !important;

    background:
        #fdeaea !important;
}


/* ==========================================================
   21. COLOR ICONO 6
   ADMINISTRACIÓN
========================================================== */

html body
.institucion-area-card:nth-child(6)
.institucion-area-icono {
    color:
        #0891b2 !important;

    background:
        #e6f8fc !important;
}


/* ==========================================================
   22. TÍTULOS
========================================================== */

html body
.institucion-area-card
h3 {
    margin:
        0 0 9px !important;

    color:
        #3d5875 !important;

    font-size:
        19px !important;

    font-weight:
        700;

    line-height:
        1.3;
}


/* ==========================================================
   23. TEXTO
========================================================== */

html body
.institucion-area-card
p {
    margin: 0 !important;

    color:
        #58718f !important;

    font-size:
        14px !important;

    line-height:
        1.65;
}


/* ==========================================================
   24. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .institucion-areas {
        padding:
            66px 0 74px !important;
    }


    html body
    .institucion-areas-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            18px !important;
    }
}


/* ==========================================================
   25. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .institucion-areas {
        padding:
            58px 0 64px !important;
    }


    html body
    .institucion-areas
    .encabezado-seccion {
        margin-bottom:
            34px !important;
    }


    html body
    .institucion-areas
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .institucion-areas
    .encabezado-seccion
    p {
        font-size:
            14px;
    }


    html body
    .institucion-areas-grid {
        grid-template-columns:
            1fr !important;

        gap:
            17px !important;
    }


    html body
    .institucion-area-card
    > .institucion-area-imagen {
        height:
            190px !important;

        min-height:
            190px !important;
    }


    html body
    .institucion-area-card
    > .institucion-area-cuerpo {
        padding:
            19px 17px 23px !important;
    }


    html body
    .institucion-area-card
    h3 {
        font-size:
            18px !important;
    }
}
/* ==========================================================
   UNIVERSIDADES / INSTITUCIONES
   DIAGNÓSTICO INSTITUCIONAL

   Diseño profesional:
   - Azul rey institucional
   - Sin morado genérico
   - Servicios en formato 2 x 2
   - Iconos con colores diferenciados
   - Botón con texto blanco
   - Responsive

   PEGAR AL FINAL DE assets/css/estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .diagnostico-institucion {
    position: relative;
    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(37, 84, 214, 0.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 78%,
            rgba(8, 145, 178, 0.035),
            transparent 26%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración de fondo muy suave */

html body .diagnostico-institucion::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -270px;
    top: -180px;

    border:
        1px solid
        rgba(37, 84, 214, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   2. GRID PRINCIPAL
========================================================== */

html body
.diagnostico-institucion
.diagnostico-institucion-grid {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, 0.92fr) !important;

    gap: 30px !important;

    align-items: stretch !important;
}


/* ==========================================================
   3. PANEL IZQUIERDO
========================================================== */

html body
.diagnostico-institucion
.diagnostico-institucion-form {
    padding: 38px 40px !important;

    border:
        1px solid
        rgba(154, 180, 210, 0.42) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ==========================================================
   4. DIAGNÓSTICO INICIAL
========================================================== */

html body
.diagnostico-institucion
.diagnostico-institucion-form
.etiqueta-seccion {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #1d4ed8 !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.25px;
}


html body
.diagnostico-institucion
.diagnostico-institucion-form
.etiqueta-seccion i {
    color: #2454d6 !important;

    font-size: 15px;
}


/* ==========================================================
   5. TÍTULO
========================================================== */

html body
.diagnostico-institucion
.diagnostico-institucion-form
h2 {
    max-width: 590px;

    margin: 14px 0 13px !important;

    color: #3d5875 !important;

    font-size:
        clamp(34px, 3vw, 44px) !important;

    font-weight: 700;

    line-height: 1.13;

    letter-spacing: -0.8px;
}


/* Descripción */

html body
.diagnostico-institucion
.diagnostico-institucion-form
> p {
    max-width: 620px;

    margin: 0 !important;

    color: #58718f !important;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   6. GRID DE LAS 6 PREGUNTAS
========================================================== */

html body
.diagnostico-institucion
.institucion-preguntas {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 21px 18px !important;

    margin-top: 31px !important;
}


/* ==========================================================
   7. CAMPOS
========================================================== */

html body
.diagnostico-institucion
.institucion-campo {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* Label */

html body
.diagnostico-institucion
.institucion-campo
label {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #3d5875 !important;

    font-size: 13px !important;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================================
   8. 01 - 06
========================================================== */

html body
.diagnostico-institucion
.institucion-campo
label span {
    display: grid !important;

    width: 29px !important;
    height: 29px !important;

    flex: 0 0 29px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid
        #d7e4ff !important;

    border-radius: 8px !important;

    font-size: 10px !important;

    font-weight: 800;
}


/* ==========================================================
   9. SELECT
========================================================== */

html body
.diagnostico-institucion
.institucion-campo
select {
    width: 100%;

    min-height: 54px !important;

    padding:
        0 42px 0 15px !important;

    outline: none;

    color: #425c78 !important;

    background: #ffffff !important;

    border:
        1px solid
        #cbd9e8 !important;

    border-radius: 11px !important;

    font-family: inherit;

    font-size: 13px !important;

    cursor: pointer;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


html body
.diagnostico-institucion
.institucion-campo
select:hover {
    border-color:
        #9eb9da !important;
}


html body
.diagnostico-institucion
.institucion-campo
select:focus {
    border-color:
        #2454d6 !important;

    box-shadow:
        0 0 0 4px
        rgba(36, 84, 214, 0.10) !important;
}


/* ==========================================================
   10. PANEL DERECHO
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion {
    position: relative !important;

    top: 0 !important;

    display: flex;

    min-height: 100%;

    padding: 35px !important;

    flex-direction: column;

    overflow: hidden;

    color: #3d5875 !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    border:
        1px solid
        rgba(154, 180, 210, 0.42) !important;

    border-top:
        3px solid
        #2454d6 !important;

    border-radius: 18px !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ELIMINAMOS EL CÍRCULO MORADO */

html body
.diagnostico-institucion
.resultado-institucion::before {
    display: none !important;
}


/* ==========================================================
   11. CABECERA
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-cabecera {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


html body
.diagnostico-institucion
.resultado-institucion-cabecera
span {
    display: block;

    margin-bottom: 5px;

    color: #1d4ed8 !important;

    font-size: 10px !important;

    font-weight: 800;

    letter-spacing: 1.4px;
}


html body
.diagnostico-institucion
.resultado-institucion-cabecera
h3 {
    margin: 0;

    color: #3d5875 !important;

    font-size: 25px !important;

    font-weight: 700;
}


/* Edificio superior */

html body
.diagnostico-institucion
.resultado-institucion-cabecera
> i {
    display: grid !important;

    width: 54px !important;
    height: 54px !important;

    flex: 0 0 54px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid
        #d8e4fb !important;

    border-radius: 15px !important;

    font-size: 21px !important;
}


/* ==========================================================
   12. ESTADO
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-estado {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 23px !important;

    padding: 14px 16px !important;

    border:
        1px solid
        #dce7f3 !important;

    border-radius: 11px !important;

    background:
        #f8fbff !important;
}


html body
.diagnostico-institucion
.resultado-institucion-estado
p {
    margin: 0;

    color: #58718f !important;

    font-size: 12px !important;

    line-height: 1.55;
}


/* Punto pendiente */

html body
.diagnostico-institucion
.institucion-resultado-punto {
    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #f59e0b !important;

    box-shadow:
        0 0 0 5px
        rgba(245, 158, 11, 0.12) !important;
}


/* Resultado listo */

html body
.diagnostico-institucion
.institucion-resultado-punto.resultado-listo {
    background: #16a34a !important;

    box-shadow:
        0 0 0 5px
        rgba(22, 163, 74, 0.11) !important;
}


/* ==========================================================
   13. SERVICIOS SUGERIDOS — 2 X 2
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicios {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-top: 20px !important;
}


/* ==========================================================
   14. MINI TARJETAS
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio {
    display: flex !important;

    min-height: 86px;

    padding: 13px !important;

    align-items: center;

    gap: 11px;

    border:
        1px solid
        #e0e9f3 !important;

    border-radius: 12px !important;

    background:
        #fbfdff !important;

    opacity: 1 !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}


html body
.diagnostico-institucion
.resultado-institucion-servicio:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        #b8cde7 !important;

    box-shadow:
        0 9px 20px
        rgba(49, 84, 127, 0.08);
}


/* Servicio recomendado por JS */

html body
.diagnostico-institucion
.resultado-institucion-servicio.activo {
    opacity: 1 !important;

    border-color:
        #91b4e6 !important;

    background:
        #f4f8ff !important;

    box-shadow:
        0 0 0 2px
        rgba(36, 84, 214, 0.05);
}


/* ==========================================================
   15. ICONOS BASE
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio
> i {
    display: grid !important;

    width: 43px !important;
    height: 43px !important;

    flex: 0 0 43px;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius:
        12px !important;

    font-size:
        17px !important;
}


/* ==========================================================
   16. CCTV — AZUL
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   17. CONTROL DE ACCESO — VERDE / TURQUESA
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio:nth-child(2)
> i {
    color: #0a9d84 !important;

    background:
        #dff8f1 !important;

    border-color:
        #c3eee3 !important;
}


/* ==========================================================
   18. MONITOREO — MORADO
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio:nth-child(3)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   19. ALARMAS — NARANJA
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio:nth-child(4)
> i {
    color: #f97316 !important;

    background:
        #fff0e3 !important;

    border-color:
        #ffdfc4 !important;
}


/* ==========================================================
   20. TEXTOS DE SERVICIOS
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-servicio
strong {
    display: block;

    color: #3d5875 !important;

    font-size: 12px !important;

    font-weight: 700;
}


html body
.diagnostico-institucion
.resultado-institucion-servicio
span {
    display: block;

    margin-top: 3px;

    color: #71859b !important;

    font-size: 10px !important;

    line-height: 1.4;
}


/* ==========================================================
   21. MENSAJE INFERIOR
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion-mensaje {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 11px;

    margin-top: 18px !important;

    padding: 15px 16px !important;

    border:
        1px solid
        #cfe2f7 !important;

    border-radius:
        11px !important;

    background:
        #f2f8ff !important;
}


html body
.diagnostico-institucion
.resultado-institucion-mensaje
i {
    flex-shrink: 0;

    margin-top: 2px;

    color: #2491e8 !important;

    font-size: 16px;
}


html body
.diagnostico-institucion
.resultado-institucion-mensaje
p {
    margin: 0;

    color: #58718f !important;

    font-size: 11px !important;

    line-height: 1.55;
}


/* ==========================================================
   22. BOTÓN
========================================================== */

html body
.diagnostico-institucion
.btn-institucion-cotizar {
    position: relative;

    z-index: 2;

    display: inline-flex !important;

    width: 100%;

    min-height: 54px;

    margin-top: 19px !important;

    padding:
        13px 20px !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border:
        1px solid
        #2454d6 !important;

    border-radius:
        11px !important;

    color: #ffffff !important;

    background:
        #2454d6 !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    box-shadow:
        0 10px 22px
        rgba(36, 84, 214, 0.20) !important;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* FORZAR TEXTO Y FLECHA BLANCA */

html body
.diagnostico-institucion
.btn-institucion-cotizar,
html body
.diagnostico-institucion
.btn-institucion-cotizar i {
    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


html body
.diagnostico-institucion
.btn-institucion-cotizar:hover {
    transform:
        translateY(-3px);

    background:
        #1d46b8 !important;

    border-color:
        #1d46b8 !important;

    box-shadow:
        0 15px 28px
        rgba(36, 84, 214, 0.27) !important;
}


html body
.diagnostico-institucion
.btn-institucion-cotizar
i {
    transition:
        transform 0.22s ease;
}


html body
.diagnostico-institucion
.btn-institucion-cotizar:hover
i {
    transform:
        translateX(4px);
}


/* ==========================================================
   23. TEXTO PEQUEÑO INFERIOR
========================================================== */

html body
.diagnostico-institucion
.resultado-institucion
> small {
    position: relative;

    z-index: 2;

    display: block;

    margin-top:
        13px !important;

    color:
        #8192a5 !important;

    text-align: center;

    font-size:
        9px !important;

    line-height: 1.5;
}


/* ==========================================================
   24. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .diagnostico-institucion {
        padding:
            64px 0 72px !important;
    }


    html body
    .diagnostico-institucion
    .diagnostico-institucion-grid {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-institucion
    .resultado-institucion {
        width: 100%;
    }
}


/* ==========================================================
   25. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .diagnostico-institucion {
        padding:
            58px 0 64px !important;
    }


    html body
    .diagnostico-institucion
    .diagnostico-institucion-form,
    html body
    .diagnostico-institucion
    .resultado-institucion {
        padding:
            26px 21px !important;
    }


    html body
    .diagnostico-institucion
    .institucion-preguntas {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-institucion
    .resultado-institucion-servicios {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-institucion
    .diagnostico-institucion-form
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }
}
/* ==========================================================
   UNIVERSIDADES / INSTITUCIONES
   FLUJO DE SEGURIDAD

   Desde el ingreso hasta las áreas restringidas

   - Sin números 01 - 04
   - Sin tarjetas blancas grandes
   - Iconos con colores diferentes
   - Líneas limpias entre pasos
   - Hover suave
   - Responsive

   PEGAR AL FINAL DE estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .institucion-flujo {
    position: relative;

    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 14% 25%,
            rgba(37, 99, 235, 0.045),
            transparent 29%
        ),
        radial-gradient(
            circle at 86% 75%,
            rgba(8, 145, 178, 0.035),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración muy suave */

html body .institucion-flujo::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -190px;

    border:
        1px solid
        rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .institucion-flujo::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -190px;
    bottom: -180px;

    border:
        1px solid
        rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.institucion-flujo
.contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.institucion-flujo
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto !important;

    text-align: center;
}


/* FLUJO DE SEGURIDAD */

html body
.institucion-flujo
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TÍTULO */

html body
.institucion-flujo
.encabezado-seccion
h2 {
    max-width: 780px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* DESCRIPCIÓN */

html body
.institucion-flujo
.encabezado-seccion
p {
    max-width: 670px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. GRID DEL FLUJO

   CARD - LÍNEA - CARD - LÍNEA...
========================================================== */

html body
.institucion-flujo
.institucion-flujo-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 0 !important;

    margin-top: 50px !important;
}


/* ==========================================================
   4. ELIMINAR 01 - 02 - 03 - 04
========================================================== */

html body
.institucion-flujo
.institucion-flujo-numero {
    display: none !important;
}


/* ==========================================================
   5. QUITAR LAS CAJAS GRANDES
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 24px !important;

    text-align: center;

    border: 0 !important;

    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


/* HOVER */

html body
.institucion-flujo
.institucion-flujo-card:hover {
    transform:
        translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. LÍNEAS ENTRE LOS PASOS
========================================================== */

html body
.institucion-flujo
.institucion-flujo-linea {
    position: relative;

    width: 34px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a4c5e9 18%,
            #729fd5 50%,
            #a4c5e9 82%,
            transparent 100%
        ) !important;

    opacity: 0.95;
}


/* Flecha pequeña */

html body
.institucion-flujo
.institucion-flujo-linea::after {
    content: "";

    position: absolute;

    right: 1px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1px solid #729fd5;

    border-right:
        1px solid #729fd5;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================
   7. ICONOS BASE
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card
> i {
    display: grid !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 auto 20px !important;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius:
        20px !important;

    font-size:
        27px !important;

    box-shadow:
        0 8px 18px
        rgba(49, 84, 127, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


html body
.institucion-flujo
.institucion-flujo-card:hover
> i {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 24px
        rgba(49, 84, 127, 0.10) !important;
}


/* ==========================================================
   8. INGRESO — AZUL
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card:nth-child(1)
> i {
    color:
        #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   9. CIRCULACIÓN — VERDE
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card:nth-child(3)
> i {
    color:
        #2f9e44 !important;

    background:
        #e9f8ed !important;

    border-color:
        #d2f0d9 !important;
}


/* ==========================================================
   10. ADMINISTRACIÓN — MORADO
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card:nth-child(5)
> i {
    color:
        #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   11. ZONA RESTRINGIDA — ROJO
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card:nth-child(7)
> i {
    color:
        #dc2626 !important;

    background:
        #fdeaea !important;

    border-color:
        #f9d1d1 !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card
h3 {
    margin: 0 !important;

    color:
        #3d5875 !important;

    font-size:
        19px !important;

    font-weight:
        700;

    line-height:
        1.3;
}


/* ==========================================================
   13. DESCRIPCIONES
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card
p {
    max-width: 230px;

    margin:
        9px auto 0 !important;

    color:
        #58718f !important;

    font-size:
        14px !important;

    line-height:
        1.62;
}


/* ==========================================================
   14. PEQUEÑO INDICADOR DE CADA ETAPA
========================================================== */

html body
.institucion-flujo
.institucion-flujo-card::after {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin:
        17px auto 0;

    border-radius:
        20px;

    opacity:
        0.8;
}


html body
.institucion-flujo
.institucion-flujo-card:nth-child(1)::after {
    background: #2563eb;
}


html body
.institucion-flujo
.institucion-flujo-card:nth-child(3)::after {
    background: #2f9e44;
}


html body
.institucion-flujo
.institucion-flujo-card:nth-child(5)::after {
    background: #7c3aed;
}


html body
.institucion-flujo
.institucion-flujo-card:nth-child(7)::after {
    background: #dc2626;
}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .institucion-flujo {
        padding:
            64px 0 72px !important;
    }


    html body
    .institucion-flujo
    .institucion-flujo-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            22px 18px !important;

        margin-top:
            38px !important;
    }


    /* Quitamos conectores en tablet */

    html body
    .institucion-flujo
    .institucion-flujo-linea {
        display:
            none !important;
    }


    html body
    .institucion-flujo
    .institucion-flujo-card {
        padding:
            22px 18px !important;
    }
}


/* ==========================================================
   16. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .institucion-flujo {
        padding:
            58px 0 64px !important;
    }


    html body
    .institucion-flujo
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .institucion-flujo
    .encabezado-seccion
    p {
        font-size:
            14px;
    }


    html body
    .institucion-flujo
    .institucion-flujo-grid {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

        margin-top:
            30px !important;
    }


    html body
    .institucion-flujo
    .institucion-flujo-card {
        padding:
            22px 20px !important;
    }


    html body
    .institucion-flujo
    .institucion-flujo-card
    > i {
        width:
            62px !important;

        height:
            62px !important;

        font-size:
            25px !important;
    }


    html body
    .institucion-flujo
    .institucion-flujo-card
    p {
        max-width:
            310px;
    }
}
/* ==========================================================
   UNIVERSIDADES / INSTITUCIONES
   NUESTRO PROCESO

   Diseñamos la seguridad según la institución

   - Sin números 01 - 04
   - Sin tarjetas blancas grandes
   - Iconos con colores propios
   - Líneas suaves entre etapas
   - Hover profesional
   - Responsive

   PEGAR AL FINAL DE estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body
.institucion-flujo + .proceso-rubro {
    position: relative;

    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(37, 99, 235, 0.045),
            transparent 29%
        ),
        radial-gradient(
            circle at 86% 75%,
            rgba(8, 145, 178, 0.035),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración suave izquierda */

html body
.institucion-flujo + .proceso-rubro::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -190px;

    border:
        1px solid
        rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* Decoración suave derecha */

html body
.institucion-flujo + .proceso-rubro::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -180px;

    border:
        1px solid
        rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.institucion-flujo + .proceso-rubro
.contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto !important;

    text-align: center;
}


/* NUESTRO PROCESO */

html body
.institucion-flujo + .proceso-rubro
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TÍTULO */

html body
.institucion-flujo + .proceso-rubro
.encabezado-seccion
h2 {
    max-width: 780px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* DESCRIPCIÓN */

html body
.institucion-flujo + .proceso-rubro
.encabezado-seccion
p {
    max-width: 670px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. GRID
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.proceso-rubro-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 0 !important;

    margin-top: 50px !important;
}


/* ==========================================================
   4. ELIMINAR 01 - 04
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro-numero {
    display: none !important;
}


/* ==========================================================
   5. QUITAR LAS CAJAS BLANCAS
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 24px !important;

    text-align: center;

    border: 0 !important;

    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


/* Hover suave */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:hover {
    transform:
        translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. LÍNEAS ENTRE LOS PASOS
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.proceso-rubro-linea {
    position: relative;

    width: 34px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a4c5e9 18%,
            #729fd5 50%,
            #a4c5e9 82%,
            transparent 100%
        ) !important;

    opacity: 0.95;
}


/* Flechita final */

html body
.institucion-flujo + .proceso-rubro
.proceso-rubro-linea::after {
    content: "";

    position: absolute;

    right: 1px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1px solid #729fd5;

    border-right:
        1px solid #729fd5;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================
   7. ICONOS BASE
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro
> i {
    display: grid !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 auto 20px !important;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius: 20px !important;

    font-size: 27px !important;

    box-shadow:
        0 8px 18px
        rgba(49, 84, 127, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


html body
.institucion-flujo + .proceso-rubro
.paso-rubro:hover
> i {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 24px
        rgba(49, 84, 127, 0.10) !important;
}


/* ==========================================================
   8. ANALIZAMOS — AZUL
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   9. DISEÑAMOS — MORADO
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(3)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   10. IMPLEMENTAMOS — NARANJA
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(5)
> i {
    color: #f97316 !important;

    background:
        #fff0e3 !important;

    border-color:
        #ffdfc4 !important;
}


/* ==========================================================
   11. ACOMPAÑAMOS — VERDE / TURQUESA
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(7)
> i {
    color: #0a9d84 !important;

    background:
        #dff8f1 !important;

    border-color:
        #c3eee3 !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   13. DESCRIPCIÓN
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro
p {
    max-width: 230px;

    margin:
        9px auto 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.62;
}


/* ==========================================================
   14. PEQUEÑA LÍNEA DE COLOR DEBAJO
========================================================== */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro::after {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin:
        17px auto 0;

    border-radius: 20px;

    opacity: 0.82;
}


/* Analizamos */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(1)::after {
    background: #2563eb;
}


/* Diseñamos */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(3)::after {
    background: #7c3aed;
}


/* Implementamos */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(5)::after {
    background: #f97316;
}


/* Acompañamos */

html body
.institucion-flujo + .proceso-rubro
.paso-rubro:nth-child(7)::after {
    background: #0a9d84;
}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .institucion-flujo + .proceso-rubro {
        padding:
            64px 0 72px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            22px 18px !important;

        margin-top:
            38px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .proceso-rubro-linea {
        display: none !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .paso-rubro {
        padding:
            22px 18px !important;
    }
}


/* ==========================================================
   16. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .institucion-flujo + .proceso-rubro {
        padding:
            58px 0 64px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;

        margin-top:
            30px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .paso-rubro {
        padding:
            22px 20px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .paso-rubro
    > i {
        width: 62px !important;

        height: 62px !important;

        font-size:
            25px !important;
    }


    html body
    .institucion-flujo + .proceso-rubro
    .paso-rubro
    p {
        max-width:
            310px;
    }
}
/* ==========================================================
   GRIFOS Y OTROS RUBROS
   NUESTRO PROCESO

   Una solución basada en la operación real

   - Sin números 01 - 04
   - Sin cajas blancas grandes
   - Iconos con colores propios
   - Conectores suaves
   - Hover ligero
   - Responsive

   PEGAR AL FINAL DE estilos.css
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body
.grifos-operacion + .proceso-rubro {
    position: relative;
    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 14% 25%,
            rgba(37, 99, 235, 0.045),
            transparent 29%
        ),
        radial-gradient(
            circle at 86% 74%,
            rgba(8, 145, 178, 0.035),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración izquierda */

html body
.grifos-operacion + .proceso-rubro::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -190px;

    border:
        1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* Decoración derecha */

html body
.grifos-operacion + .proceso-rubro::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -180px;

    border:
        1px solid rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.grifos-operacion + .proceso-rubro
.contenedor {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto !important;

    text-align: center;
}


/* NUESTRO PROCESO */

html body
.grifos-operacion + .proceso-rubro
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TÍTULO */

html body
.grifos-operacion + .proceso-rubro
.encabezado-seccion
h2 {
    max-width: 760px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* DESCRIPCIÓN */

html body
.grifos-operacion + .proceso-rubro
.encabezado-seccion
p {
    max-width: 680px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. GRID
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.proceso-rubro-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 0 !important;

    margin-top: 50px !important;
}


/* ==========================================================
   4. ELIMINAR 01 / 02 / 03 / 04
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro-numero {
    display: none !important;
}


/* ==========================================================
   5. PASOS
   QUITAMOS LAS CAJAS BLANCAS
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 24px !important;

    text-align: center;

    border: 0 !important;
    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


/* Hover muy suave */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:hover {
    transform:
        translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. CONECTORES
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.proceso-rubro-linea {
    position: relative;

    width: 34px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a4c5e9 18%,
            #729fd5 50%,
            #a4c5e9 82%,
            transparent 100%
        ) !important;

    opacity: 0.95;
}


/* Flecha pequeña */

html body
.grifos-operacion + .proceso-rubro
.proceso-rubro-linea::after {
    content: "";

    position: absolute;

    right: 1px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1px solid #729fd5;

    border-right:
        1px solid #729fd5;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================
   7. ICONOS GENERALES
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro
> i {
    display: grid !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 auto 20px !important;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius: 20px !important;

    font-size: 27px !important;

    box-shadow:
        0 8px 18px
        rgba(49, 84, 127, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Movimiento mínimo */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:hover
> i {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 24px
        rgba(49, 84, 127, 0.10) !important;
}


/* ==========================================================
   8. ANALIZAMOS
   LUPA — AZUL
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   9. DISEÑAMOS
   DISEÑO — MORADO
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(3)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   10. IMPLEMENTAMOS
   HERRAMIENTAS — NARANJA
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(5)
> i {
    color: #f97316 !important;

    background:
        #fff0e3 !important;

    border-color:
        #ffdfc4 !important;
}


/* ==========================================================
   11. ACOMPAÑAMOS
   SOPORTE — VERDE / TURQUESA
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(7)
> i {
    color: #0a9d84 !important;

    background:
        #dff8f1 !important;

    border-color:
        #c3eee3 !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro
h3 {
    margin: 0 !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   13. DESCRIPCIÓN
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro
p {
    max-width: 230px;

    margin:
        9px auto 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.62;
}


/* ==========================================================
   14. PEQUEÑA LÍNEA INFERIOR
========================================================== */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro::after {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin:
        17px auto 0;

    border-radius: 20px;

    opacity: 0.82;
}


/* Analizamos */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(1)::after {
    background: #2563eb;
}


/* Diseñamos */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(3)::after {
    background: #7c3aed;
}


/* Implementamos */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(5)::after {
    background: #f97316;
}


/* Acompañamos */

html body
.grifos-operacion + .proceso-rubro
.paso-rubro:nth-child(7)::after {
    background: #0a9d84;
}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .grifos-operacion + .proceso-rubro {
        padding:
            64px 0 72px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            22px 18px !important;

        margin-top:
            38px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .proceso-rubro-linea {
        display: none !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .paso-rubro {
        padding:
            22px 18px !important;
    }
}


/* ==========================================================
   16. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .grifos-operacion + .proceso-rubro {
        padding:
            58px 0 64px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .proceso-rubro-grid {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

        margin-top:
            30px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .paso-rubro {
        padding:
            22px 20px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .paso-rubro
    > i {
        width: 62px !important;
        height: 62px !important;

        font-size:
            25px !important;
    }


    html body
    .grifos-operacion + .proceso-rubro
    .paso-rubro
    p {
        max-width: 310px;
    }
}
/* ==========================================================
   GRIFOS Y OTROS RUBROS
   OPERACIÓN Y SEGURIDAD

   Protección durante todo el ciclo de atención

   - Sin números 01 - 04
   - Sin cajas grandes
   - Iconos con colores propios
   - Flechas limpias
   - Hover suave
   - Responsive
========================================================== */


/* ==========================================================
   1. SECCIÓN
========================================================== */

html body .grifos-operacion {
    position: relative;
    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 14% 24%,
            rgba(37, 99, 235, 0.045),
            transparent 29%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(8, 145, 178, 0.035),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración suave */

html body .grifos-operacion::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -190px;

    border:
        1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .grifos-operacion::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -180px;

    border:
        1px solid rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.grifos-operacion
.contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   2. ENCABEZADO
========================================================== */

html body
.grifos-operacion
.encabezado-seccion {
    max-width: 780px;

    margin: 0 auto !important;

    text-align: center;
}


html body
.grifos-operacion
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 13px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


html body
.grifos-operacion
.encabezado-seccion
h2 {
    max-width: 760px;

    margin: 0 auto 17px !important;

    color: #3d5875 !important;

    font-size:
        clamp(35px, 3vw, 46px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


html body
.grifos-operacion
.encabezado-seccion
p {
    max-width: 680px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   3. GRID
========================================================== */

html body
.grifos-operacion
.grifos-operacion-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr)
        52px
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 0 !important;

    margin-top: 50px !important;
}


/* ==========================================================
   4. ELIMINAR NÚMEROS
========================================================== */

html body
.grifos-operacion
.grifo-operacion-numero {
    display: none !important;
}


/* ==========================================================
   5. TARJETAS
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card {
    position: relative;

    min-height: 0 !important;

    padding: 18px 15px 24px !important;

    text-align: center;

    border: 0 !important;
    border-top: 0 !important;

    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease !important;
}


html body
.grifos-operacion
.grifo-operacion-card:hover {
    transform:
        translateY(-5px) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. CONECTORES
========================================================== */

html body
.grifos-operacion
.grifo-operacion-linea {
    position: relative;

    width: 34px !important;

    height: 1px !important;

    margin: 50px auto 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a4c5e9 18%,
            #729fd5 50%,
            #a4c5e9 82%,
            transparent 100%
        ) !important;

    opacity: 0.95;
}


/* Flecha */

html body
.grifos-operacion
.grifo-operacion-linea::after {
    content: "";

    position: absolute;

    right: 1px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1px solid #729fd5;

    border-right:
        1px solid #729fd5;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================
   7. ICONOS BASE
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card
> i {
    display: grid !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 auto 20px !important;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius:
        20px !important;

    font-size:
        27px !important;

    box-shadow:
        0 8px 18px
        rgba(49, 84, 127, 0.07) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


html body
.grifos-operacion
.grifo-operacion-card:hover
> i {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 24px
        rgba(49, 84, 127, 0.10) !important;
}


/* ==========================================================
   8. INGRESO — AZUL
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   9. ATENCIÓN — NARANJA
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(3)
> i {
    color: #f97316 !important;

    background:
        #fff0e3 !important;

    border-color:
        #ffdfc4 !important;
}


/* ==========================================================
   10. PAGO — VERDE
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(5)
> i {
    color: #16a34a !important;

    background:
        #e8f7ec !important;

    border-color:
        #d2efd9 !important;
}


/* ==========================================================
   11. SUPERVISIÓN — MORADO
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(7)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   12. TÍTULOS
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card
h3 {
    margin: 0 !important;

    color:
        #3d5875 !important;

    font-size:
        19px !important;

    font-weight:
        700;

    line-height:
        1.3;
}


/* ==========================================================
   13. TEXTO
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card
p {
    max-width: 230px;

    margin:
        9px auto 0 !important;

    color:
        #58718f !important;

    font-size:
        14px !important;

    line-height:
        1.62;
}


/* ==========================================================
   14. PEQUEÑA LÍNEA INFERIOR
========================================================== */

html body
.grifos-operacion
.grifo-operacion-card::after {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin:
        17px auto 0;

    border-radius:
        20px;

    opacity: 0.82;
}


/* Ingreso */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(1)::after {
    background: #2563eb;
}


/* Atención */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(3)::after {
    background: #f97316;
}


/* Pago */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(5)::after {
    background: #16a34a;
}


/* Supervisión */

html body
.grifos-operacion
.grifo-operacion-card:nth-child(7)::after {
    background: #7c3aed;
}


/* ==========================================================
   15. TABLET
========================================================== */

@media (max-width: 900px) {

    html body
    .grifos-operacion {
        padding:
            64px 0 72px !important;
    }


    html body
    .grifos-operacion
    .grifos-operacion-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            22px 18px !important;

        margin-top:
            38px !important;
    }


    html body
    .grifos-operacion
    .grifo-operacion-linea {
        display:
            none !important;
    }


    html body
    .grifos-operacion
    .grifo-operacion-card {
        padding:
            22px 18px !important;
    }
}


/* ==========================================================
   16. CELULAR
========================================================== */

@media (max-width: 560px) {

    html body
    .grifos-operacion {
        padding:
            58px 0 64px !important;
    }


    html body
    .grifos-operacion
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .grifos-operacion
    .encabezado-seccion
    p {
        font-size:
            14px;
    }


    html body
    .grifos-operacion
    .grifos-operacion-grid {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

        margin-top:
            30px !important;
    }


    html body
    .grifos-operacion
    .grifo-operacion-card {
        padding:
            22px 20px !important;
    }


    html body
    .grifos-operacion
    .grifo-operacion-card
    > i {
        width:
            62px !important;

        height:
            62px !important;

        font-size:
            25px !important;
    }


    html body
    .grifos-operacion
    .grifo-operacion-card
    p {
        max-width:
            310px;
    }
}
/* ==========================================================
   GRIFOS Y OTROS RUBROS
   DIAGNÓSTICO OPERATIVO

   - Diseño empresarial limpio
   - Sin círculo rosado
   - Sin apariencia de plantilla IA
   - Iconos con colores diferenciados
   - Servicios organizados en 2 columnas
   - Quinto servicio ocupa toda la fila
   - Botón con texto blanco
   - Responsive
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .diagnostico-grifos {
    position: relative;

    overflow: hidden;

    padding: 78px 0 88px !important;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(37, 84, 214, 0.05),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(8, 145, 178, 0.03),
            transparent 26%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* Decoración mínima */

html body .diagnostico-grifos::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -270px;
    top: -190px;

    border:
        1px solid rgba(37, 84, 214, 0.065);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   2. GRID PRINCIPAL
========================================================== */

html body
.diagnostico-grifos
.diagnostico-grifos-grid {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(410px, 0.94fr) !important;

    gap: 30px !important;

    align-items: stretch !important;
}


/* ==========================================================
   3. PANEL IZQUIERDO
========================================================== */

html body
.diagnostico-grifos
.diagnostico-grifos-form {
    padding: 38px 40px !important;

    border:
        1px solid
        rgba(154, 180, 210, 0.42) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ==========================================================
   4. DIAGNÓSTICO OPERATIVO
========================================================== */

html body
.diagnostico-grifos
.diagnostico-grifos-form
.etiqueta-seccion {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #1d4ed8 !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


html body
.diagnostico-grifos
.diagnostico-grifos-form
.etiqueta-seccion i {
    color: #2454d6 !important;

    font-size: 15px;
}


/* ==========================================================
   5. TÍTULO
========================================================== */

html body
.diagnostico-grifos
.diagnostico-grifos-form
h2 {
    max-width: 610px;

    margin: 14px 0 13px !important;

    color: #3d5875 !important;

    font-size:
        clamp(34px, 3vw, 44px) !important;

    font-weight: 700;

    line-height: 1.13;

    letter-spacing: -0.8px;
}


html body
.diagnostico-grifos
.diagnostico-grifos-form
> p {
    max-width: 620px;

    margin: 0 !important;

    color: #58718f !important;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   6. PREGUNTAS
========================================================== */

html body
.diagnostico-grifos
.grifos-preguntas {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 21px 18px !important;

    margin-top: 31px !important;
}


html body
.diagnostico-grifos
.grifo-campo {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* ==========================================================
   7. LABELS
========================================================== */

html body
.diagnostico-grifos
.grifo-campo
label {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #3d5875 !important;

    font-size: 13px !important;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================================
   8. NÚMEROS 01 - 06
========================================================== */

html body
.diagnostico-grifos
.grifo-campo
label span {
    display: grid !important;

    width: 29px !important;
    height: 29px !important;

    flex: 0 0 29px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid #d7e4ff !important;

    border-radius: 8px !important;

    font-size: 10px !important;

    font-weight: 800;
}


/* ==========================================================
   9. SELECTS
========================================================== */

html body
.diagnostico-grifos
.grifo-campo
select {
    width: 100%;

    min-height: 54px !important;

    padding:
        0 42px 0 15px !important;

    outline: none;

    color: #425c78 !important;

    background: #ffffff !important;

    border:
        1px solid #cbd9e8 !important;

    border-radius: 11px !important;

    font-family: inherit;

    font-size: 13px !important;

    cursor: pointer;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}


html body
.diagnostico-grifos
.grifo-campo
select:hover {
    border-color:
        #9eb9da !important;
}


html body
.diagnostico-grifos
.grifo-campo
select:focus {
    border-color:
        #2454d6 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px
        rgba(36, 84, 214, 0.10) !important;
}


/* ==========================================================
   10. PANEL DERECHO
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos {
    position: relative !important;

    top: 0 !important;

    display: flex;

    min-height: 100%;

    padding: 35px !important;

    flex-direction: column;

    overflow: hidden;

    color: #3d5875 !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    border:
        1px solid
        rgba(154, 180, 210, 0.42) !important;

    border-top:
        3px solid #2454d6 !important;

    border-radius: 18px !important;

    box-shadow:
        0 14px 32px
        rgba(49, 84, 127, 0.07) !important;
}


/* ==========================================================
   11. ELIMINA CÍRCULO ROSADO / NARANJA
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos::before {
    display: none !important;
}


/* ==========================================================
   12. CABECERA
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos-cabecera {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


html body
.diagnostico-grifos
.resultado-grifos-cabecera
span {
    display: block;

    margin-bottom: 5px;

    color: #1d4ed8 !important;

    font-size: 10px !important;

    font-weight: 800;

    letter-spacing: 1.4px;
}


html body
.diagnostico-grifos
.resultado-grifos-cabecera
h3 {
    margin: 0;

    color: #3d5875 !important;

    font-size: 25px !important;

    font-weight: 700;
}


/* Icono del grifo */

html body
.diagnostico-grifos
.resultado-grifos-cabecera
> i {
    display: grid !important;

    width: 54px !important;
    height: 54px !important;

    flex: 0 0 54px;

    place-items: center;

    color: #2454d6 !important;

    background: #edf3ff !important;

    border:
        1px solid #d8e4fb !important;

    border-radius: 15px !important;

    font-size: 21px !important;
}


/* ==========================================================
   13. ESTADO
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos-estado {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 23px !important;

    padding: 14px 16px !important;

    border:
        1px solid #dce7f3 !important;

    border-radius: 11px !important;

    background:
        #f8fbff !important;
}


html body
.diagnostico-grifos
.resultado-grifos-estado
p {
    margin: 0;

    color: #58718f !important;

    font-size: 12px !important;

    line-height: 1.55;
}


/* Punto pendiente */

html body
.diagnostico-grifos
.grifo-resultado-punto {
    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    margin-top: 5px;

    border-radius: 50%;

    background:
        #f59e0b !important;

    box-shadow:
        0 0 0 5px
        rgba(245, 158, 11, 0.12) !important;
}


/* Punto listo */

html body
.diagnostico-grifos
.grifo-resultado-punto.resultado-listo {
    background:
        #16a34a !important;

    box-shadow:
        0 0 0 5px
        rgba(22, 163, 74, 0.11) !important;
}


/* ==========================================================
   14. SERVICIOS SUGERIDOS
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos-servicios {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-top: 20px !important;
}


/* ==========================================================
   15. TARJETAS PEQUEÑAS
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio {
    display: flex !important;

    min-height: 85px;

    padding: 13px !important;

    align-items: center;

    gap: 11px;

    border:
        1px solid #e0e9f3 !important;

    border-radius: 12px !important;

    background:
        #fbfdff !important;

    opacity: 1 !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}


html body
.diagnostico-grifos
.resultado-grifo-servicio:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        #b8cde7 !important;

    box-shadow:
        0 9px 20px
        rgba(49, 84, 127, 0.08);
}


/* Cuando JS marque el recomendado */

html body
.diagnostico-grifos
.resultado-grifo-servicio.activo {
    opacity: 1 !important;

    border-color:
        #91b4e6 !important;

    background:
        #f4f8ff !important;

    box-shadow:
        0 0 0 2px
        rgba(36, 84, 214, 0.05);
}


/* ==========================================================
   16. QUINTO ELEMENTO
   PROTECCIÓN PERIMETRAL

   Ocupa toda la fila para evitar un hueco raro
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(5) {
    grid-column:
        1 / -1;

    min-height: 74px;
}


/* ==========================================================
   17. ICONOS BASE
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio
> i {
    display: grid !important;

    width: 43px !important;
    height: 43px !important;

    flex: 0 0 43px;

    place-items: center;

    border:
        1px solid transparent !important;

    border-radius: 12px !important;

    font-size: 17px !important;
}


/* ==========================================================
   18. CCTV — AZUL
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(1)
> i {
    color: #2563eb !important;

    background:
        #e8f0ff !important;

    border-color:
        #d4e3ff !important;
}


/* ==========================================================
   19. ALARMAS — NARANJA / ROJO
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(2)
> i {
    color: #ea580c !important;

    background:
        #fff0e5 !important;

    border-color:
        #ffdbc3 !important;
}


/* ==========================================================
   20. CONTROL DE ACCESO — TURQUESA
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(3)
> i {
    color: #0a9d84 !important;

    background:
        #dff8f1 !important;

    border-color:
        #c3eee3 !important;
}


/* ==========================================================
   21. MONITOREO — MORADO
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(4)
> i {
    color: #7c3aed !important;

    background:
        #f0eaff !important;

    border-color:
        #e2d5ff !important;
}


/* ==========================================================
   22. PROTECCIÓN PERIMETRAL — VERDE
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio:nth-child(5)
> i {
    color: #16824b !important;

    background:
        #e7f7ed !important;

    border-color:
        #ccebd8 !important;
}


/* ==========================================================
   23. TEXTO DE SERVICIOS
========================================================== */

html body
.diagnostico-grifos
.resultado-grifo-servicio
strong {
    display: block;

    color: #3d5875 !important;

    font-size: 12px !important;

    font-weight: 700;
}


html body
.diagnostico-grifos
.resultado-grifo-servicio
span {
    display: block;

    margin-top: 3px;

    color: #71859b !important;

    font-size: 10px !important;

    line-height: 1.4;
}


/* ==========================================================
   24. MENSAJE INFERIOR
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos-mensaje {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 11px;

    margin-top: 18px !important;

    padding: 15px 16px !important;

    border:
        1px solid #cfe2f7 !important;

    border-radius: 11px !important;

    background:
        #f2f8ff !important;
}


html body
.diagnostico-grifos
.resultado-grifos-mensaje
i {
    flex-shrink: 0;

    margin-top: 2px;

    color: #2491e8 !important;

    font-size: 16px;
}


html body
.diagnostico-grifos
.resultado-grifos-mensaje
p {
    margin: 0;

    color: #58718f !important;

    font-size: 11px !important;

    line-height: 1.55;
}


/* ==========================================================
   25. BOTÓN
========================================================== */

html body
.diagnostico-grifos
.btn-grifo-cotizar {
    position: relative;

    z-index: 2;

    display: inline-flex !important;

    width: 100%;

    min-height: 54px;

    margin-top: 19px !important;

    padding:
        13px 20px !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border:
        1px solid #2454d6 !important;

    border-radius: 11px !important;

    color: #ffffff !important;

    background:
        #2454d6 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    box-shadow:
        0 10px 22px
        rgba(36, 84, 214, 0.20) !important;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* FUERZA TEXTO BLANCO */

html body
.diagnostico-grifos
.btn-grifo-cotizar,
html body
.diagnostico-grifos
.btn-grifo-cotizar i {
    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


html body
.diagnostico-grifos
.btn-grifo-cotizar:hover {
    transform:
        translateY(-3px);

    background:
        #1d46b8 !important;

    border-color:
        #1d46b8 !important;

    box-shadow:
        0 15px 28px
        rgba(36, 84, 214, 0.27) !important;
}


html body
.diagnostico-grifos
.btn-grifo-cotizar
i {
    transition:
        transform 0.22s ease;
}


html body
.diagnostico-grifos
.btn-grifo-cotizar:hover
i {
    transform:
        translateX(4px);
}


/* ==========================================================
   26. TEXTO INFERIOR
========================================================== */

html body
.diagnostico-grifos
.resultado-grifos
> small {
    position: relative;

    z-index: 2;

    display: block;

    margin-top:
        13px !important;

    color:
        #8192a5 !important;

    text-align: center;

    font-size:
        9px !important;

    line-height: 1.5;
}


/* ==========================================================
   27. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .diagnostico-grifos {
        padding:
            64px 0 72px !important;
    }


    html body
    .diagnostico-grifos
    .diagnostico-grifos-grid {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-grifos
    .resultado-grifos {
        width: 100%;
    }
}


/* ==========================================================
   28. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .diagnostico-grifos {
        padding:
            58px 0 64px !important;
    }


    html body
    .diagnostico-grifos
    .diagnostico-grifos-form,
    html body
    .diagnostico-grifos
    .resultado-grifos {
        padding:
            26px 21px !important;
    }


    html body
    .diagnostico-grifos
    .grifos-preguntas {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-grifos
    .resultado-grifos-servicios {
        grid-template-columns:
            1fr !important;
    }


    html body
    .diagnostico-grifos
    .resultado-grifo-servicio:nth-child(5) {
        grid-column:
            auto !important;
    }


    html body
    .diagnostico-grifos
    .diagnostico-grifos-form
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }
}
/* ==========================================================
   GRIFOS Y OTROS RUBROS
   ZONAS A CONSIDERAR

   DISEÑO DEFINITIVO
   IMÁGENES PNG CARGADAS DESDE CSS

   RUTA:
   /seguridad_web/assets/img/grifos/
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .grifos-zonas {
    position: relative;
    overflow: hidden;

    padding: 80px 0 90px !important;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(37, 99, 235, 0.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(14, 165, 183, 0.03),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* ==========================================================
   2. DECORACIONES DE FONDO
========================================================== */

html body .grifos-zonas::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -180px;

    border:
        1px solid
        rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .grifos-zonas::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -170px;

    border:
        1px solid
        rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.grifos-zonas
.contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   3. ENCABEZADO
========================================================== */

html body
.grifos-zonas
.encabezado-seccion {
    max-width: 790px;

    margin:
        0 auto 48px !important;

    text-align: center;
}


/* ZONAS A CONSIDERAR */

html body
.grifos-zonas
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color:
        #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TÍTULO */

html body
.grifos-zonas
.encabezado-seccion
h2 {
    max-width: 750px;

    margin:
        0 auto 18px !important;

    color:
        #3d5875 !important;

    font-size:
        clamp(36px, 3vw, 48px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


/* Parte azul */

html body
.grifos-zonas
.encabezado-seccion
h2 span {
    color:
        #1d4ed8 !important;
}


/* Descripción */

html body
.grifos-zonas
.encabezado-seccion
p {
    max-width: 690px;

    margin:
        0 auto !important;

    color:
        #58718f !important;

    font-size: 16px;

    line-height: 1.68;
}


/* ==========================================================
   4. GRID 3 X 2
========================================================== */

html body
.grifos-zonas-grid {
    display: grid !important;

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

    gap:
        22px !important;

    margin-top:
        0 !important;

    align-items: stretch;
}


/* ==========================================================
   5. TARJETAS
========================================================== */

html body
.grifo-zona-card {
    position: relative;

    display: flex !important;

    min-height: 350px !important;

    padding:
        10px 10px 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(155, 180, 209, 0.38) !important;

    border-top:
        1px solid
        rgba(155, 180, 209, 0.38) !important;

    border-radius:
        18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 12px 28px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease !important;
}


/* Hover */

html body
.grifo-zona-card:hover {
    transform:
        translateY(-5px) !important;

    border-color:
        #aac7e7 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 20px 38px
        rgba(49, 84, 127, 0.14) !important;
}


/* Quitar 01 - 06 antiguos */

html body
.grifo-zona-card
> span {
    display: none !important;
}


/* ==========================================================
   6. ÁREA DE IMAGEN
========================================================== */

html body
.grifo-zona-card
> .grifo-zona-imagen {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 175px !important;

    min-height: 175px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    border-radius:
        13px !important;

    background-color:
        #dfeaf6 !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    transition:
        transform 0.40s ease;
}


/* ==========================================================
   7. OCULTAMOS LOS IMG DEL PHP

   Como ahora cargaremos las imágenes desde CSS,
   no necesitamos mostrar las etiquetas <img>.
========================================================== */

html body
.grifo-zona-imagen
img {
    display:
        none !important;
}


/* ==========================================================
   8. IMAGEN 1
   ISLAS DE ATENCIÓN
========================================================== */

html body
.grifo-zona-card:nth-child(1)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/islas-atencion.png") !important;

    background-position:
        center 55% !important;
}


/* ==========================================================
   9. IMAGEN 2
   CAJA
========================================================== */

html body
.grifo-zona-card:nth-child(2)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/caja.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   10. IMAGEN 3
   ACCESO VEHICULAR
========================================================== */

html body
.grifo-zona-card:nth-child(3)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/acceso-vehicular.png") !important;

    background-position:
        center 55% !important;
}


/* ==========================================================
   11. IMAGEN 4
   ALMACENES
========================================================== */

html body
.grifo-zona-card:nth-child(4)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/almacenes.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   12. IMAGEN 5
   PERÍMETRO
========================================================== */

html body
.grifo-zona-card:nth-child(5)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/perimetro.png") !important;

    background-position:
        center 55% !important;
}


/* ==========================================================
   13. IMAGEN 6
   OPERACIÓN NOCTURNA
========================================================== */

html body
.grifo-zona-card:nth-child(6)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/operacion-nocturna.png") !important;

    background-position:
        center 52% !important;
}


/* ==========================================================
   14. HOVER FOTO
========================================================== */

html body
.grifo-zona-card:hover
.grifo-zona-imagen {
    transform:
        scale(1.015);
}


/* Oscurecimiento mínimo inferior */

html body
.grifo-zona-imagen::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(22, 49, 80, 0.07)
        );

    pointer-events: none;
}


/* ==========================================================
   15. CUERPO
========================================================== */

html body
.grifo-zona-card
> .grifo-zona-cuerpo {
    position: relative;

    display: block !important;

    flex: 1;

    width: 100% !important;

    margin: 0 !important;

    padding:
        20px 18px 25px !important;

    border: 0 !important;

    background:
        transparent !important;
}


/* ==========================================================
   16. ICONOS BASE
========================================================== */

html body
.grifos-zonas
.grifo-zona-icono {
    position: relative;

    z-index: 2;

    display: grid !important;

    width: 56px !important;
    height: 56px !important;

    margin:
        -47px 0 17px !important;

    place-items: center;

    border:
        3px solid #ffffff !important;

    border-radius:
        50% !important;

    font-size:
        21px !important;

    box-shadow:
        0 7px 17px
        rgba(49, 84, 127, 0.13) !important;

    transition:
        transform 0.25s ease;
}


html body
.grifo-zona-card:hover
.grifo-zona-icono {
    transform:
        translateY(-3px);
}


/* ==========================================================
   17. ISLAS — NARANJA
========================================================== */

html body
.grifo-zona-card:nth-child(1)
.grifo-zona-icono {
    color:
        #f97316 !important;

    background:
        #fff0e3 !important;
}


/* ==========================================================
   18. CAJA — AZUL
========================================================== */

html body
.grifo-zona-card:nth-child(2)
.grifo-zona-icono {
    color:
        #2563eb !important;

    background:
        #e8f0ff !important;
}


/* ==========================================================
   19. ACCESO VEHICULAR — VERDE
========================================================== */

html body
.grifo-zona-card:nth-child(3)
.grifo-zona-icono {
    color:
        #16a34a !important;

    background:
        #e8f7ec !important;
}


/* ==========================================================
   20. ALMACENES — MORADO
========================================================== */

html body
.grifo-zona-card:nth-child(4)
.grifo-zona-icono {
    color:
        #7c3aed !important;

    background:
        #f0eaff !important;
}


/* ==========================================================
   21. PERÍMETRO — TURQUESA
========================================================== */

html body
.grifo-zona-card:nth-child(5)
.grifo-zona-icono {
    color:
        #0891b2 !important;

    background:
        #e6f8fc !important;
}


/* ==========================================================
   22. NOCHE — AZUL OSCURO
========================================================== */

html body
.grifo-zona-card:nth-child(6)
.grifo-zona-icono {
    color:
        #3346a8 !important;

    background:
        #e9edff !important;
}


/* ==========================================================
   23. TÍTULOS
========================================================== */

html body
.grifos-zonas
.grifo-zona-card
h3 {
    margin:
        0 0 9px !important;

    color:
        #3d5875 !important;

    font-size:
        19px !important;

    font-weight:
        700;

    line-height:
        1.3;
}


/* ==========================================================
   24. DESCRIPCIONES
========================================================== */

html body
.grifos-zonas
.grifo-zona-card
p {
    margin:
        0 !important;

    color:
        #58718f !important;

    font-size:
        14px !important;

    line-height:
        1.65;
}


/* ==========================================================
   25. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .grifos-zonas {
        padding:
            66px 0 74px !important;
    }


    html body
    .grifos-zonas-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            18px !important;
    }
}


/* ==========================================================
   26. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .grifos-zonas {
        padding:
            58px 0 64px !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion {
        margin-bottom:
            34px !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion
    p {
        font-size:
            14px;
    }


    html body
    .grifos-zonas-grid {
        grid-template-columns:
            1fr !important;

        gap:
            17px !important;
    }


    html body
    .grifo-zona-card
    > .grifo-zona-imagen {
        height:
            190px !important;

        min-height:
            190px !important;
    }


    html body
    .grifo-zona-card
    > .grifo-zona-cuerpo {
        padding:
            19px 17px 23px !important;
    }


    html body
    .grifos-zonas
    .grifo-zona-card
    h3 {
        font-size:
            18px !important;
    }
}
/* ==========================================================
   GRIFOS Y OTROS RUBROS
   ZONAS A CONSIDERAR

   DISEÑO DEFINITIVO
   6 FOTOGRAFÍAS PNG
   RUTAS CONECTADAS DIRECTAMENTE DESDE CSS

   /seguridad_web/assets/img/grifos/
========================================================== */


/* ==========================================================
   1. SECCIÓN COMPLETA
========================================================== */

html body .grifos-zonas {
    position: relative;
    overflow: hidden;

    padding: 80px 0 90px !important;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(37, 99, 235, 0.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(14, 165, 183, 0.03),
            transparent 27%
        ),
        #eaf3ff !important;

    border: 0 !important;
}


/* ==========================================================
   2. DECORACIÓN DE FONDO
========================================================== */

html body .grifos-zonas::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -250px;
    top: -180px;

    border: 1px solid rgba(37, 99, 235, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


html body .grifos-zonas::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -170px;

    border: 1px solid rgba(37, 99, 235, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


html body
.grifos-zonas
.contenedor {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   3. ENCABEZADO
========================================================== */

html body
.grifos-zonas
.encabezado-seccion {
    max-width: 790px;

    margin: 0 auto 48px !important;

    text-align: center;
}


html body
.grifos-zonas
.encabezado-seccion
.subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #1d4ed8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


html body
.grifos-zonas
.encabezado-seccion
h2 {
    max-width: 760px;

    margin: 0 auto 18px !important;

    color: #3d5875 !important;

    font-size: clamp(36px, 3vw, 48px) !important;

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -0.9px;
}


html body
.grifos-zonas
.encabezado-seccion
h2 span {
    color: #1d4ed8 !important;
}


html body
.grifos-zonas
.encabezado-seccion
p {
    max-width: 690px;

    margin: 0 auto !important;

    color: #58718f !important;

    font-size: 16px;

    line-height: 1.68;
}


/* ==========================================================
   4. GRID 3 X 2
========================================================== */

html body
.grifos-zonas-grid {
    display: grid !important;

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

    gap: 22px !important;

    margin-top: 0 !important;

    align-items: stretch;
}


/* ==========================================================
   5. TARJETAS
========================================================== */

html body
.grifo-zona-card {
    position: relative;

    display: flex !important;

    min-height: 355px !important;

    padding: 10px 10px 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(155, 180, 209, 0.38) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 12px 28px
        rgba(49, 84, 127, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}


html body
.grifo-zona-card:hover {
    transform: translateY(-5px) !important;

    border-color: #aac7e7 !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 38px
        rgba(49, 84, 127, 0.14) !important;
}


/* ==========================================================
   6. QUITAR NÚMEROS 01 - 06
========================================================== */

html body
.grifo-zona-card
> span {
    display: none !important;
}


/* ==========================================================
   7. CONTENEDOR DE LA IMAGEN
========================================================== */

html body
.grifo-zona-card
> .grifo-zona-imagen {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 180px !important;

    min-height: 180px !important;

    flex: 0 0 180px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 13px !important;

    background-color: #dfeaf6 !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    transition:
        transform 0.35s ease;
}


/* ==========================================================
   8. OCULTAR LOS <img> DEL PHP

   Las imágenes ahora se cargan directamente desde CSS.
========================================================== */

html body
.grifo-zona-imagen
img {
    display: none !important;
}


/* ==========================================================
   9. IMAGEN 1
   ISLAS DE ATENCIÓN
========================================================== */

html body
.grifo-zona-card:nth-child(1)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/islas-atencion.png") !important;

    background-position:
        center 52% !important;
}


/* ==========================================================
   10. IMAGEN 2
   CAJA
========================================================== */

html body
.grifo-zona-card:nth-child(2)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/caja.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   11. IMAGEN 3
   ACCESO VEHICULAR
========================================================== */

html body
.grifo-zona-card:nth-child(3)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/acceso-vehicular.png") !important;

    background-position:
        center 55% !important;
}


/* ==========================================================
   12. IMAGEN 4
   ALMACENES
========================================================== */

html body
.grifo-zona-card:nth-child(4)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/almacenes.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   13. IMAGEN 5
   PERÍMETRO
========================================================== */

html body
.grifo-zona-card:nth-child(5)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/perimetro.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   14. IMAGEN 6
   OPERACIÓN NOCTURNA
========================================================== */

html body
.grifo-zona-card:nth-child(6)
> .grifo-zona-imagen {
    background-image:
        url("/seguridad_web/assets/img/grifos/operacion-nocturna.png") !important;

    background-position:
        center center !important;
}


/* ==========================================================
   15. EFECTO DE FOTO
========================================================== */

html body
.grifo-zona-card:hover
.grifo-zona-imagen {
    transform: scale(1.015);
}


/* Sombreado inferior muy suave */

html body
.grifo-zona-imagen::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(25, 54, 86, 0.08)
        );

    pointer-events: none;
}


/* ==========================================================
   16. CUERPO DE LA TARJETA
========================================================== */

html body
.grifo-zona-card
> .grifo-zona-cuerpo {
    position: relative;

    display: block !important;

    flex: 1;

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding:
        20px 18px 25px !important;

    border: 0 !important;

    background:
        transparent !important;
}


/* ==========================================================
   17. ICONO BASE
========================================================== */

html body
.grifos-zonas
.grifo-zona-icono {
    position: relative;

    z-index: 3;

    display: grid !important;

    width: 56px !important;

    height: 56px !important;

    margin:
        -47px 0 17px !important;

    place-items: center;

    border:
        3px solid #ffffff !important;

    border-radius: 50% !important;

    font-size: 21px !important;

    box-shadow:
        0 7px 17px
        rgba(49, 84, 127, 0.13) !important;

    transition:
        transform 0.25s ease;
}


html body
.grifo-zona-card:hover
.grifo-zona-icono {
    transform:
        translateY(-3px);
}


/* ==========================================================
   18. ISLAS DE ATENCIÓN
   NARANJA
========================================================== */

html body
.grifo-zona-card:nth-child(1)
.grifo-zona-icono {
    color: #f97316 !important;

    background: #fff0e3 !important;
}


/* ==========================================================
   19. CAJA
   AZUL
========================================================== */

html body
.grifo-zona-card:nth-child(2)
.grifo-zona-icono {
    color: #2563eb !important;

    background: #e8f0ff !important;
}


/* ==========================================================
   20. ACCESO VEHICULAR
   VERDE
========================================================== */

html body
.grifo-zona-card:nth-child(3)
.grifo-zona-icono {
    color: #16a34a !important;

    background: #e8f7ec !important;
}


/* ==========================================================
   21. ALMACENES
   MORADO
========================================================== */

html body
.grifo-zona-card:nth-child(4)
.grifo-zona-icono {
    color: #7c3aed !important;

    background: #f0eaff !important;
}


/* ==========================================================
   22. PERÍMETRO
   TURQUESA
========================================================== */

html body
.grifo-zona-card:nth-child(5)
.grifo-zona-icono {
    color: #0891b2 !important;

    background: #e6f8fc !important;
}


/* ==========================================================
   23. OPERACIÓN NOCTURNA
   AZUL OSCURO
========================================================== */

html body
.grifo-zona-card:nth-child(6)
.grifo-zona-icono {
    color: #3346a8 !important;

    background: #e9edff !important;
}


/* ==========================================================
   24. TÍTULOS
========================================================== */

html body
.grifos-zonas
.grifo-zona-card
h3 {
    margin:
        0 0 9px !important;

    color: #3d5875 !important;

    font-size: 19px !important;

    font-weight: 700;

    line-height: 1.3;
}


/* ==========================================================
   25. DESCRIPCIÓN
========================================================== */

html body
.grifos-zonas
.grifo-zona-card
p {
    margin: 0 !important;

    color: #58718f !important;

    font-size: 14px !important;

    line-height: 1.65;
}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 950px) {

    html body
    .grifos-zonas {
        padding:
            66px 0 74px !important;
    }


    html body
    .grifos-zonas-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            18px !important;
    }
}


/* ==========================================================
   27. CELULAR
========================================================== */

@media (max-width: 620px) {

    html body
    .grifos-zonas {
        padding:
            58px 0 64px !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion {
        margin-bottom:
            34px !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion
    h2 {
        font-size:
            clamp(30px, 9vw, 38px) !important;
    }


    html body
    .grifos-zonas
    .encabezado-seccion
    p {
        font-size: 14px;
    }


    html body
    .grifos-zonas-grid {
        grid-template-columns:
            1fr !important;

        gap:
            17px !important;
    }


    html body
    .grifo-zona-card {
        min-height:
            auto !important;
    }


    html body
    .grifo-zona-card
    > .grifo-zona-imagen {
        height:
            190px !important;

        min-height:
            190px !important;

        flex-basis:
            190px !important;
    }


    html body
    .grifo-zona-card
    > .grifo-zona-cuerpo {
        padding:
            19px 17px 23px !important;
    }


    html body
    .grifos-zonas
    .grifo-zona-card
    h3 {
        font-size:
            18px !important;
    }
}
/* ==========================================================
   ASISTENTE DIGITAL DE SEGURIDAD
   IP TECNOLOGÍA

   DISEÑO PROFESIONAL + CONVERSACIÓN NATURAL
   - Azul rey
   - Azul oscuro
   - Burbujas suaves
   - Indicador "escribiendo..."
   - Animaciones naturales
   - Responsive
========================================================== */


/* ==========================================================
   1. CONTENEDOR GENERAL
========================================================== */

html body .asistente-seguridad {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    z-index: 9999 !important;

    font-family: inherit !important;
}


/* ==========================================================
   2. BOTÓN FLOTANTE
========================================================== */

html body .asistente-seguridad .asistente-boton {
    position: relative;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-height: 56px;

    padding: 8px 18px 8px 8px !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #153f91 0%,
            #1d4ed8 100%
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    letter-spacing: 0.1px;

    box-shadow:
        0 10px 30px rgba(15, 55, 120, 0.28),
        0 2px 8px rgba(20, 45, 80, 0.16) !important;

    cursor: pointer !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}


html body .asistente-seguridad .asistente-boton:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #163f8b 0%,
            #2456dc 100%
        ) !important;

    box-shadow:
        0 15px 36px rgba(15, 55, 120, 0.34),
        0 3px 10px rgba(20, 45, 80, 0.16) !important;
}


html body .asistente-seguridad .asistente-boton:active {
    transform: translateY(-1px) scale(0.99);
}


/* ==========================================================
   3. ICONO DEL BOTÓN
========================================================== */

html body .asistente-boton-icono {
    display: grid !important;

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px;

    place-items: center;

    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, 0.14) !important;

    color: #ffffff !important;

    font-size: 17px !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.1);

    transition:
        transform 0.25s ease;
}


html body .asistente-boton:hover
.asistente-boton-icono {
    transform: rotate(-4deg) scale(1.05);
}


/* ==========================================================
   4. PUNTO DE DISPONIBILIDAD DEL BOTÓN
========================================================== */

html body .asistente-boton-icono::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    margin:
        -27px 0 0 27px;

    border:
        2px solid #ffffff;

    border-radius: 50%;

    background: #35c979;

    box-shadow:
        0 0 0 2px
        rgba(53, 201, 121, 0.12);
}


/* ==========================================================
   5. PANEL DEL CHAT
========================================================== */

html body .asistente-seguridad .asistente-panel {
    position: absolute !important;

    right: 0 !important;

    bottom: 72px !important;

    width:
        min(
            400px,
            calc(100vw - 30px)
        ) !important;

    height:
        min(
            650px,
            calc(100vh - 115px)
        ) !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(157, 178, 202, 0.42) !important;

    border-radius: 21px !important;

    background: #ffffff !important;

    box-shadow:
        0 24px 70px rgba(21, 47, 82, 0.25),
        0 5px 20px rgba(21, 47, 82, 0.09) !important;

    transform-origin:
        right bottom;

    animation:
        asistenteAbrir 0.28s
        cubic-bezier(.2, .8, .2, 1);
}


html body .asistente-panel[hidden] {
    display: none !important;
}


@keyframes asistenteAbrir {

    from {
        opacity: 0;
        transform:
            translateY(12px)
            scale(0.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   6. CABECERA DEL CHAT
========================================================== */

html body .asistente-seguridad
.asistente-cabecera {
    position: relative;

    display: flex !important;

    min-height: 76px;

    align-items: center !important;

    gap: 12px !important;

    padding:
        14px 16px !important;

    overflow: hidden;

    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            #142f60 0%,
            #173d80 52%,
            #1d4ed8 100%
        ) !important;

    color: #ffffff !important;
}


/* brillo suave */

html body .asistente-cabecera::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -80px;
    top: -110px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    pointer-events: none;
}


/* ==========================================================
   7. AVATAR
========================================================== */

html body .asistente-seguridad
.asistente-avatar {
    position: relative;

    z-index: 2;

    display: grid !important;

    width: 45px !important;
    height: 45px !important;

    flex:
        0 0 45px;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.16) !important;

    border-radius:
        13px !important;

    background:
        rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

    font-size:
        19px !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.05);
}


/* ==========================================================
   8. TEXTO DE CABECERA
========================================================== */

html body .asistente-seguridad
.asistente-cabecera
> div:nth-child(2) {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex: 1;

    flex-direction: column;

    gap: 3px;
}


html body .asistente-seguridad
.asistente-cabecera strong {
    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height: 1.2;
}


html body .asistente-seguridad
.asistente-cabecera span {
    color:
        rgba(255, 255, 255, 0.82) !important;

    -webkit-text-fill-color:
        rgba(255, 255, 255, 0.82) !important;

    font-size:
        11px !important;

    font-weight: 500;
}


/* punto "en línea" */

html body .asistente-seguridad
.asistente-cabecera
span i {
    display:
        inline-block !important;

    width: 7px !important;
    height: 7px !important;

    margin-right: 5px;

    border-radius: 50%;

    background:
        #38d37b !important;

    box-shadow:
        0 0 0 4px
        rgba(56, 211, 123, 0.11);
}


/* ==========================================================
   9. BOTÓN CERRAR
========================================================== */

html body .asistente-seguridad
.asistente-cerrar {
    position: relative;

    z-index: 3;

    display: grid !important;

    width: 35px !important;
    height: 35px !important;

    padding: 0 !important;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.14) !important;

    border-radius:
        10px !important;

    background:
        rgba(255, 255, 255, 0.07) !important;

    color: #ffffff !important;

    font-size:
        17px !important;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


html body .asistente-seguridad
.asistente-cerrar:hover {
    background:
        rgba(255, 255, 255, 0.14) !important;

    transform:
        rotate(4deg);
}


html body .asistente-seguridad
.asistente-cerrar i,
html body .asistente-seguridad
.asistente-cerrar svg {
    color:
        #ffffff !important;

    fill:
        #ffffff !important;

    stroke:
        #ffffff !important;
}


/* ==========================================================
   10. BARRA DE PROGRESO
========================================================== */

html body .asistente-progreso {
    position: relative;

    height: 3px !important;

    overflow: hidden;

    background:
        #e8eef6 !important;
}


html body .asistente-progreso span {
    display: block;

    width: 0;

    height: 100%;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #3b82f6
        ) !important;

    transition:
        width 0.4s ease !important;
}


/* ==========================================================
   11. ÁREA DE CONVERSACIÓN
========================================================== */

html body .asistente-conversacion {
    height:
        calc(100% - 190px) !important;

    min-height:
        260px !important;

    padding:
        19px 17px 15px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    scroll-behavior:
        smooth;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #f4f7fb 100%
        ) !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #cbd8e8
        transparent;
}


html body .asistente-conversacion::-webkit-scrollbar {
    width: 5px;
}


html body .asistente-conversacion::-webkit-scrollbar-track {
    background:
        transparent;
}


html body .asistente-conversacion::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #cbd8e8;
}


/* ==========================================================
   12. BURBUJA DEL ASISTENTE
========================================================== */

html body .asistente-mensaje {
    position: relative;

    width:
        fit-content !important;

    max-width:
        84% !important;

    margin:
        0 0 11px !important;

    padding:
        11px 14px !important;

    border:
        1px solid
        rgba(185, 199, 217, 0.42) !important;

    border-radius:
        5px 16px 16px 16px !important;

    background:
        #ffffff !important;

    color:
        #344b64 !important;

    font-size:
        13.5px !important;

    font-weight:
        400 !important;

    line-height:
        1.55 !important;

    box-shadow:
        0 3px 10px
        rgba(39, 67, 100, 0.06) !important;
}


/* ==========================================================
   13. BURBUJA DEL USUARIO
========================================================== */

html body .asistente-mensaje.usuario {
    margin-left:
        auto !important;

    border:
        0 !important;

    border-radius:
        16px 5px 16px 16px !important;

    background:
        linear-gradient(
            135deg,
            #2456d8,
            #1d4ed8
        ) !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        0 5px 15px
        rgba(29, 78, 216, 0.18) !important;
}


html body .asistente-mensaje.usuario * {
    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


/* ==========================================================
   14. MENSAJE DE ERROR
========================================================== */

html body .asistente-mensaje.error {
    border:
        1px solid
        rgba(220, 38, 38, 0.13) !important;

    background:
        #fff4f4 !important;

    color:
        #b4232d !important;
}


/* ==========================================================
   15. ANIMACIÓN DE ENTRADA DE MENSAJES
========================================================== */

html body
.asistente-mensaje-entrada {
    opacity: 0;

    transform:
        translateY(7px)
        scale(0.985);

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}


html body
.asistente-mensaje-entrada.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   16. INDICADOR "ESCRIBIENDO..."
========================================================== */

html body .asistente-escribiendo {
    display:
        flex !important;

    width:
        fit-content;

    min-width:
        58px;

    min-height:
        37px;

    margin:
        2px 0 12px;

    padding:
        7px 12px;

    align-items:
        center;

    border:
        1px solid
        rgba(185, 199, 217, 0.42);

    border-radius:
        5px 16px 16px 16px;

    background:
        #ffffff;

    box-shadow:
        0 3px 10px
        rgba(39, 67, 100, 0.06);

    animation:
        asistenteEscribiendoEntrada
        0.22s ease;
}


@keyframes asistenteEscribiendoEntrada {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   17. LOS TRES PUNTITOS
========================================================== */

html body
.asistente-escribiendo-puntos {
    display:
        flex;

    height:
        20px;

    align-items:
        center;

    gap:
        5px;
}


html body
.asistente-escribiendo-puntos span {
    display:
        block;

    width:
        7px;

    height:
        7px;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #7189a5;

    color:
        transparent;

    font-size: 0;

    animation:
        asistentePuntoPensando
        1.15s
        infinite ease-in-out;
}


html body
.asistente-escribiendo-puntos
span:nth-child(1) {
    animation-delay:
        0s;
}


html body
.asistente-escribiendo-puntos
span:nth-child(2) {
    animation-delay:
        0.16s;
}


html body
.asistente-escribiendo-puntos
span:nth-child(3) {
    animation-delay:
        0.32s;
}


@keyframes asistentePuntoPensando {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.45;

    }

    30% {

        transform:
            translateY(-5px);

        opacity:
            1;

    }

}


/* ==========================================================
   18. ZONA INFERIOR / ACCIONES
========================================================== */

html body .asistente-acciones {
    position: relative;

    max-height:
        225px !important;

    padding:
        13px 15px 15px !important;

    overflow-y:
        auto !important;

    border-top:
        1px solid
        #e8eef5 !important;

    background:
        rgba(255, 255, 255, 0.98) !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #cbd8e8
        transparent;
}


/* ==========================================================
   19. OPCIONES
========================================================== */

html body .asistente-opciones {
    display:
        grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap:
        8px !important;
}


/* ==========================================================
   20. BOTONES DE OPCIONES
========================================================== */

html body .asistente-opcion {
    display:
        flex !important;

    min-height:
        42px;

    padding:
        9px 11px !important;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #d9e4f0 !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        #405a76 !important;

    -webkit-text-fill-color:
        #405a76 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    font-weight:
        600 !important;

    line-height:
        1.25;

    text-align:
        center;

    cursor:
        pointer !important;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


html body .asistente-opcion:hover {
    transform:
        translateY(-2px);

    border-color:
        #9ebcf1 !important;

    background:
        #f3f7ff !important;

    color:
        #1d4ed8 !important;

    -webkit-text-fill-color:
        #1d4ed8 !important;

    box-shadow:
        0 4px 12px
        rgba(29, 78, 216, 0.08);
}


/* ==========================================================
   21. OPCIÓN PRINCIPAL
========================================================== */

html body
.asistente-opcion.principal {
    border-color:
        #1d4ed8 !important;

    background:
        #1d4ed8 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        0 6px 16px
        rgba(29, 78, 216, 0.18);
}


html body
.asistente-opcion.principal:hover {
    border-color:
        #1845c0 !important;

    background:
        #1845c0 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        0 8px 19px
        rgba(29, 78, 216, 0.23);
}


/* ==========================================================
   22. BOTÓN TIPO TEXTO
========================================================== */

html body
.asistente-opcion.texto {
    border:
        0 !important;

    background:
        transparent !important;

    color:
        #60758e !important;

    -webkit-text-fill-color:
        #60758e !important;

    box-shadow:
        none !important;
}


html body
.asistente-opcion.texto:hover {
    background:
        #f3f7fb !important;

    color:
        #1d4ed8 !important;

    -webkit-text-fill-color:
        #1d4ed8 !important;
}


/* ==========================================================
   23. BOTONES DESHABILITADOS
========================================================== */

html body
.asistente-opcion:disabled {
    opacity:
        0.55 !important;

    cursor:
        default !important;

    transform:
        none !important;
}


/* ==========================================================
   24. MODO FORMULARIO
========================================================== */

html body
.asistente-panel.modo-formulario
.asistente-conversacion {
    height:
        auto !important;

    min-height:
        93px !important;

    max-height:
        110px !important;
}


html body
.asistente-panel.modo-formulario
.asistente-acciones {
    max-height:
        calc(100% - 190px) !important;

    padding:
        15px 17px 18px !important;
}


/* ==========================================================
   25. FORMULARIO DE CONTACTO
========================================================== */

html body .asistente-formulario-datos {
    display:
        block;

    width:
        100%;
}


/* ==========================================================
   26. TÍTULO DEL FORMULARIO
========================================================== */

html body .asistente-form-titulo {
    margin-bottom:
        14px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        #e7edf5;
}


html body
.asistente-form-titulo > span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #1d4ed8 !important;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.3px;
}


html body
.asistente-form-titulo > strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #344e6b !important;

    font-size:
        17px;

    font-weight:
        700;
}


html body
.asistente-form-titulo > p {
    margin:
        0 !important;

    color:
        #6e8197 !important;

    font-size:
        11px;

    line-height:
        1.4;
}


/* ==========================================================
   27. FILAS DEL FORMULARIO
========================================================== */

html body .asistente-form-fila {
    display:
        grid;

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

    gap:
        9px;
}


/* ==========================================================
   28. CAMPOS
========================================================== */

html body .asistente-campo {
    display:
        block;

    margin-bottom:
        10px;
}


html body
.asistente-campo > span {
    display:
        flex;

    margin-bottom:
        5px;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #506a85 !important;

    font-size:
        10.5px;

    font-weight:
        700;
}


html body
.asistente-campo > span em {
    color:
        #8a9bad !important;

    font-size:
        9px;

    font-style:
        normal;

    font-weight:
        500;
}


/* ==========================================================
   29. CAJA DEL INPUT
========================================================== */

html body
.asistente-campo > div {
    display:
        flex !important;

    min-height:
        40px;

    padding:
        0 10px;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        #d9e3ef !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


html body
.asistente-campo > div:focus-within {
    border-color:
        #82a8ef !important;

    box-shadow:
        0 0 0 3px
        rgba(29, 78, 216, 0.08);
}


/* ==========================================================
   30. ICONOS DE INPUT
========================================================== */

html body
.asistente-campo > div > i {
    flex:
        0 0 auto;

    color:
        #6d86a1 !important;

    font-size:
        12px;
}


html body
.asistente-campo > div > b {
    flex:
        0 0 auto;

    color:
        #526d88 !important;

    font-size:
        10px;

    font-weight:
        600;

    white-space:
        nowrap;
}


/* ==========================================================
   31. INPUTS Y SELECT
========================================================== */

html body
.asistente-campo input,
html body
.asistente-campo select {
    width:
        100% !important;

    min-width:
        0;

    height:
        38px !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    color:
        #344e6b !important;

    font-family:
        inherit !important;

    font-size:
        11.5px !important;

    box-shadow:
        none !important;
}


html body
.asistente-campo input::placeholder {
    color:
        #a1afbf !important;
}


/* ==========================================================
   32. ERRORES
========================================================== */

html body
.asistente-campo small {
    display:
        block;

    min-height:
        14px;

    padding-top:
        3px;

    color:
        #c93b45 !important;

    font-size:
        9px;
}


html body
.asistente-campo.tiene-error
> div {
    border-color:
        #e7a3a8 !important;

    background:
        #fffafa !important;

    box-shadow:
        0 0 0 3px
        rgba(220, 38, 38, 0.05);
}


/* ==========================================================
   33. PRIVACIDAD
========================================================== */

html body
.asistente-consentimiento {
    display:
        flex;

    margin:
        2px 0 13px;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        #667b91 !important;

    font-size:
        9.5px;

    line-height:
        1.45;
}


html body
.asistente-consentimiento input {
    width:
        14px;

    height:
        14px;

    margin-top:
        1px;

    accent-color:
        #1d4ed8;
}


/* ==========================================================
   34. BOTÓN CONTINUAR
========================================================== */

html body
.asistente-continuar {
    width:
        100% !important;

    min-height:
        44px !important;

    gap:
        8px;
}


/* ==========================================================
   35. RESUMEN
========================================================== */

html body
.asistente-panel.modo-resumen
.asistente-conversacion {
    height:
        auto !important;

    min-height:
        95px !important;

    max-height:
        115px !important;
}


html body
.asistente-panel.modo-resumen
.asistente-acciones {
    max-height:
        calc(100% - 190px) !important;
}


html body
.asistente-resumen {
    display:
        grid;

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

    gap:
        7px;

    margin-bottom:
        12px;
}


html body
.asistente-resumen p {
    display:
        block;

    margin:
        0 !important;

    padding:
        8px 9px;

    border:
        1px solid
        #e4ebf3;

    border-radius:
        8px;

    background:
        #f8faff;
}


html body
.asistente-resumen p span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #8495a7 !important;

    font-size:
        8.5px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.45px;
}


html body
.asistente-resumen p strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #435d77 !important;

    font-size:
        10.5px;

    font-weight:
        700;

    text-overflow:
        ellipsis;
}


/* ==========================================================
   36. CELULAR
========================================================== */

@media (max-width: 600px) {

    html body
    .asistente-seguridad {
        right:
            12px !important;

        bottom:
            14px !important;
    }


    html body
    .asistente-seguridad
    .asistente-panel {
        position:
            fixed !important;

        right:
            10px !important;

        bottom:
            80px !important;

        width:
            calc(100vw - 20px) !important;

        height:
            min(
                670px,
                calc(100dvh - 100px)
            ) !important;

        border-radius:
            18px !important;
    }


    html body
    .asistente-seguridad
    .asistente-boton {
        min-height:
            53px;

        padding:
            7px 14px 7px 7px !important;

        font-size:
            12px !important;
    }


    html body
    .asistente-boton-icono {
        width:
            38px !important;

        height:
            38px !important;

        flex-basis:
            38px;
    }


    html body
    .asistente-opciones {
        grid-template-columns:
            1fr 1fr !important;
    }


    html body
    .asistente-form-fila {
        grid-template-columns:
            1fr !important;

        gap:
            0;
    }


    html body
    .asistente-resumen {
        grid-template-columns:
            1fr 1fr;
    }

}


/* ==========================================================
   37. CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 390px) {

    html body
    .asistente-opciones {
        grid-template-columns:
            1fr !important;
    }


    html body
    .asistente-resumen {
        grid-template-columns:
            1fr !important;
    }


    html body
    .asistente-seguridad
    .asistente-boton {
        padding-right:
            12px !important;
    }

}


/* ==========================================================
   38. RESPETAR REDUCCIÓN DE MOVIMIENTO
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html body
    .asistente-mensaje-entrada,

    html body
    .asistente-escribiendo,

    html body
    .asistente-escribiendo-puntos span,

    html body
    .asistente-panel {

        animation:
            none !important;

        transition:
            none !important;

    }

}
/* ==========================================================
   ==========================================================
   ASISTENTE DIGITAL DE SEGURIDAD
   IP TECNOLOGÍA

   DISEÑO FINAL
   - Chat natural
   - Azul rey + azul corporativo
   - Mensajes suaves
   - Indicador de escritura ● ● ●
   - Emojis contextuales
   - Formularios profesionales
   - Responsive
   ==========================================================
========================================================== */


/* ==========================================================
   1. CONTENEDOR GENERAL
========================================================== */

html body .asistente-seguridad {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    z-index: 99999 !important;

    font-family: inherit !important;
}


/* ==========================================================
   2. BOTÓN FLOTANTE
========================================================== */

html body
.asistente-seguridad
.asistente-boton {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-height: 56px !important;

    padding: 8px 18px 8px 8px !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 999px !important;

    background: #1d4ed8 !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    letter-spacing: 0.1px;

    box-shadow:
        0 12px 30px rgba(29, 78, 216, 0.24),
        0 3px 9px rgba(20, 46, 80, 0.12) !important;

    cursor: pointer !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}


html body
.asistente-seguridad
.asistente-boton:hover {
    transform: translateY(-3px);

    background: #2458dc !important;

    box-shadow:
        0 17px 34px rgba(29, 78, 216, 0.29),
        0 4px 12px rgba(20, 46, 80, 0.13) !important;
}


html body
.asistente-seguridad
.asistente-boton:active {
    transform: translateY(-1px) scale(0.99);
}


/* ==========================================================
   3. ICONO DEL BOTÓN
========================================================== */

html body
.asistente-boton-icono {
    position: relative;

    display: grid !important;

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    place-items: center;

    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.14) !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 17px !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.08);

    transition:
        transform 0.25s ease;
}


html body
.asistente-boton-icono i {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


html body
.asistente-boton:hover
.asistente-boton-icono {
    transform: scale(1.06);
}


/* ==========================================================
   4. PUNTITO VERDE DEL BOTÓN
========================================================== */

html body
.asistente-boton-icono::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 1px;

    width: 9px;
    height: 9px;

    border: 2px solid #1d4ed8;

    border-radius: 50%;

    background: #34c978;

    box-shadow:
        0 0 0 3px rgba(52, 201, 120, 0.12);
}


/* ==========================================================
   5. PANEL PRINCIPAL
========================================================== */

html body
.asistente-seguridad
.asistente-panel {
    position: absolute !important;

    right: 0 !important;
    bottom: 72px !important;

    display: flex !important;

    width: min(405px, calc(100vw - 30px)) !important;

    height: min(650px, calc(100vh - 115px)) !important;

    flex-direction: column !important;

    overflow: hidden !important;

    border: 1px solid rgba(151, 174, 201, 0.42) !important;

    border-radius: 21px !important;

    background: #ffffff !important;

    box-shadow:
        0 26px 70px rgba(25, 50, 82, 0.23),
        0 7px 22px rgba(25, 50, 82, 0.08) !important;

    transform-origin: right bottom;

    animation:
        asistentePanelEntrada
        0.28s cubic-bezier(.2, .8, .2, 1);
}


html body
.asistente-panel[hidden] {
    display: none !important;
}


@keyframes asistentePanelEntrada {

    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   6. CABECERA
========================================================== */

html body
.asistente-seguridad
.asistente-cabecera {
    position: relative;

    display: flex !important;

    min-height: 74px !important;

    flex: 0 0 auto;

    align-items: center !important;

    gap: 11px !important;

    padding: 14px 16px !important;

    overflow: hidden;

    border: 0 !important;

    background: #12366d !important;

    color: #ffffff !important;
}


/* brillo sutil */

html body
.asistente-seguridad
.asistente-cabecera::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.055);

    pointer-events: none;
}


/* ==========================================================
   7. AVATAR
========================================================== */

html body
.asistente-seguridad
.asistente-avatar {
    position: relative;

    z-index: 2;

    display: grid !important;

    width: 44px !important;
    height: 44px !important;

    flex: 0 0 44px !important;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    border-radius: 13px !important;

    background: rgba(255, 255, 255, 0.11) !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 18px !important;
}


html body
.asistente-avatar i {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================
   8. INFORMACIÓN DEL ASISTENTE
========================================================== */

html body
.asistente-cabecera
> div:nth-child(2) {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex: 1;

    flex-direction: column;

    gap: 3px;
}


html body
.asistente-cabecera
> div:nth-child(2)
> strong {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 14.5px !important;

    font-weight: 700 !important;

    line-height: 1.25;
}


html body
.asistente-cabecera
> div:nth-child(2)
> span {
    color: rgba(255, 255, 255, 0.82) !important;

    -webkit-text-fill-color:
        rgba(255, 255, 255, 0.82) !important;

    font-size: 11px !important;

    font-weight: 500 !important;
}


/* ==========================================================
   9. PUNTO EN LÍNEA
========================================================== */

html body
.asistente-cabecera
> div:nth-child(2)
> span i {
    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    margin-right: 5px !important;

    border-radius: 50% !important;

    background: #38d17b !important;

    color: #38d17b !important;

    box-shadow:
        0 0 0 4px rgba(56, 209, 123, 0.1);
}


/* ==========================================================
   10. BOTÓN CERRAR
========================================================== */

html body
.asistente-seguridad
.asistente-cerrar {
    position: relative;

    z-index: 3;

    display: grid !important;

    width: 35px !important;
    height: 35px !important;

    flex: 0 0 35px !important;

    padding: 0 !important;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;

    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.065) !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 17px !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


html body
.asistente-cerrar:hover {
    background: rgba(255, 255, 255, 0.14) !important;

    transform: rotate(4deg);
}


html body
.asistente-cerrar i {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================
   11. PROGRESO
========================================================== */

html body
.asistente-progreso {
    position: relative;

    height: 3px !important;

    flex: 0 0 3px;

    overflow: hidden;

    background: #e9eef5 !important;
}


html body
.asistente-progreso span {
    display: block;

    width: 0;

    height: 100%;

    background: #1d4ed8 !important;

    transition:
        width 0.38s ease !important;
}


/* ==========================================================
   12. ÁREA DE CONVERSACIÓN
========================================================== */

html body
.asistente-conversacion {
    position: relative;

    flex: 1 1 auto !important;

    min-height: 0 !important;

    height: auto !important;

    padding: 19px 17px 16px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scroll-behavior: smooth;

    background: #f5f8fc !important;

    scrollbar-width: thin;

    scrollbar-color:
        #cbd7e5 transparent;
}


html body
.asistente-conversacion::-webkit-scrollbar {
    width: 5px;
}


html body
.asistente-conversacion::-webkit-scrollbar-track {
    background: transparent;
}


html body
.asistente-conversacion::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #cbd7e5;
}


/* ==========================================================
   13. BURBUJA DEL ASISTENTE
========================================================== */

html body
.asistente-mensaje {
    position: relative;

    width: fit-content !important;

    max-width: 85% !important;

    margin: 0 0 11px !important;

    padding: 11px 14px !important;

    border: 1px solid rgba(181, 197, 215, 0.43) !important;

    border-radius: 5px 16px 16px 16px !important;

    background: #ffffff !important;

    color: #3e5771 !important;

    -webkit-text-fill-color: #3e5771 !important;

    font-size: 13.3px !important;

    font-weight: 400 !important;

    line-height: 1.58 !important;

    letter-spacing: 0;

    box-shadow:
        0 3px 10px rgba(40, 67, 99, 0.055) !important;

    word-break: break-word;
}


/* ==========================================================
   14. MENSAJES CON EMOJIS

   No aumentamos demasiado el tamaño para que
   siga pareciendo una conversación empresarial.
========================================================== */

html body
.asistente-mensaje.bot {
    white-space: normal;
}


/* ==========================================================
   15. BURBUJA DEL USUARIO
========================================================== */

html body
.asistente-mensaje.usuario {
    margin-left: auto !important;

    border: 0 !important;

    border-radius: 16px 5px 16px 16px !important;

    background: #1d4ed8 !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    box-shadow:
        0 6px 15px rgba(29, 78, 216, 0.18) !important;
}


html body
.asistente-mensaje.usuario * {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================
   16. MENSAJE DE ERROR
========================================================== */

html body
.asistente-mensaje.error {
    border: 1px solid rgba(210, 50, 60, 0.15) !important;

    background: #fff4f5 !important;

    color: #b32835 !important;

    -webkit-text-fill-color: #b32835 !important;
}


/* ==========================================================
   17. ANIMACIÓN DE MENSAJES
========================================================== */

html body
.asistente-mensaje-entrada {
    opacity: 0;

    transform:
        translateY(7px)
        scale(0.985);

    transition:
        opacity 0.27s ease,
        transform 0.27s ease;
}


html body
.asistente-mensaje-entrada.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   18. INDICADOR "ESCRIBIENDO..."
========================================================== */

html body
.asistente-escribiendo {
    display: flex !important;

    width: fit-content !important;

    min-width: 57px !important;

    height: 38px !important;

    margin: 1px 0 11px !important;

    padding: 0 12px !important;

    align-items: center;

    border: 1px solid rgba(181, 197, 215, 0.43) !important;

    border-radius: 5px 16px 16px 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 3px 10px rgba(40, 67, 99, 0.055);

    animation:
        indicadorEntrada
        0.2s ease;
}


@keyframes indicadorEntrada {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   19. TRES PUNTITOS
========================================================== */

html body
.asistente-escribiendo-puntos {
    display: flex !important;

    align-items: center !important;

    gap: 5px !important;
}


html body
.asistente-escribiendo-puntos span {
    display: block !important;

    width: 7px !important;
    height: 7px !important;

    overflow: hidden;

    border-radius: 50% !important;

    background: #71879e !important;

    color: transparent !important;

    -webkit-text-fill-color: transparent !important;

    font-size: 0 !important;

    animation:
        puntoPensando
        1.05s infinite ease-in-out;
}


html body
.asistente-escribiendo-puntos
span:nth-child(1) {
    animation-delay: 0s;
}


html body
.asistente-escribiendo-puntos
span:nth-child(2) {
    animation-delay: 0.14s;
}


html body
.asistente-escribiendo-puntos
span:nth-child(3) {
    animation-delay: 0.28s;
}


@keyframes puntoPensando {

    0%,
    60%,
    100% {
        transform: translateY(0);

        opacity: 0.42;
    }

    30% {
        transform: translateY(-5px);

        opacity: 1;
    }

}


/* ==========================================================
   20. ZONA DE RESPUESTAS
========================================================== */

html body
.asistente-acciones {
    position: relative;

    flex: 0 0 auto;

    max-height: 245px !important;

    padding: 13px 15px 15px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border-top: 1px solid #e6edf5 !important;

    background: #ffffff !important;

    scrollbar-width: thin;

    scrollbar-color:
        #cbd7e5 transparent;
}


/* ==========================================================
   21. GRID DE OPCIONES
========================================================== */

html body
.asistente-opciones {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
}


/* ==========================================================
   22. BOTONES DE OPCIÓN
========================================================== */

html body
.asistente-opcion {
    display: flex !important;

    min-height: 42px !important;

    padding: 9px 11px !important;

    align-items: center !important;

    justify-content: center !important;

    border: 1px solid #d9e3ee !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #435f7b !important;

    -webkit-text-fill-color: #435f7b !important;

    font-family: inherit !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.25 !important;

    text-align: center !important;

    cursor: pointer !important;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease !important;
}


html body
.asistente-opcion:hover {
    transform: translateY(-2px);

    border-color: #98b7eb !important;

    background: #f4f7ff !important;

    color: #1d4ed8 !important;

    -webkit-text-fill-color: #1d4ed8 !important;

    box-shadow:
        0 4px 11px rgba(29, 78, 216, 0.075);
}


/* ==========================================================
   23. BOTÓN PRINCIPAL
========================================================== */

html body
.asistente-opcion.principal {
    border-color: #1d4ed8 !important;

    background: #1d4ed8 !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    box-shadow:
        0 6px 15px rgba(29, 78, 216, 0.16);
}


html body
.asistente-opcion.principal * {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


html body
.asistente-opcion.principal:hover {
    border-color: #1846c1 !important;

    background: #1846c1 !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    box-shadow:
        0 8px 18px rgba(29, 78, 216, 0.21);
}


/* ==========================================================
   24. BOTÓN TEXTO
========================================================== */

html body
.asistente-opcion.texto {
    border-color: transparent !important;

    background: transparent !important;

    color: #667c94 !important;

    -webkit-text-fill-color: #667c94 !important;

    box-shadow: none !important;
}


html body
.asistente-opcion.texto:hover {
    background: #f5f7fa !important;

    color: #1d4ed8 !important;

    -webkit-text-fill-color: #1d4ed8 !important;
}


/* ==========================================================
   25. BOTONES BLOQUEADOS
========================================================== */

html body
.asistente-opcion:disabled {
    opacity: 0.52 !important;

    cursor: default !important;

    transform: none !important;

    box-shadow: none !important;
}


/* ==========================================================
   26. MODO FORMULARIO
========================================================== */

html body
.asistente-panel.modo-formulario
.asistente-conversacion {
    flex: 0 0 auto !important;

    height: auto !important;

    min-height: 100px !important;

    max-height: 155px !important;
}


html body
.asistente-panel.modo-formulario
.asistente-acciones {
    flex: 1 1 auto !important;

    max-height: none !important;

    padding: 15px 17px 18px !important;
}


/* ==========================================================
   27. FORMULARIO
========================================================== */

html body
.asistente-formulario-datos {
    display: block !important;

    width: 100% !important;
}


/* ==========================================================
   28. TÍTULO DEL FORMULARIO
========================================================== */

html body
.asistente-form-titulo {
    margin-bottom: 14px !important;

    padding-bottom: 12px !important;

    border-bottom: 1px solid #e6edf5 !important;
}


html body
.asistente-form-titulo > span {
    display: block !important;

    margin-bottom: 4px !important;

    color: #1d4ed8 !important;

    -webkit-text-fill-color: #1d4ed8 !important;

    font-size: 9.5px !important;

    font-weight: 800 !important;

    letter-spacing: 1.3px !important;
}


html body
.asistente-form-titulo > strong {
    display: block !important;

    margin-bottom: 4px !important;

    color: #3b5772 !important;

    -webkit-text-fill-color: #3b5772 !important;

    font-size: 17px !important;

    font-weight: 700 !important;
}


html body
.asistente-form-titulo > p {
    margin: 0 !important;

    color: #73879c !important;

    -webkit-text-fill-color: #73879c !important;

    font-size: 10.5px !important;

    line-height: 1.45 !important;
}


/* ==========================================================
   29. FILAS
========================================================== */

html body
.asistente-form-fila {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
}


/* ==========================================================
   30. CAMPOS
========================================================== */

html body
.asistente-campo {
    display: block !important;

    margin-bottom: 9px !important;
}


html body
.asistente-campo > span {
    display: flex !important;

    margin-bottom: 5px !important;

    align-items: center !important;

    justify-content: space-between !important;

    color: #536d87 !important;

    -webkit-text-fill-color: #536d87 !important;

    font-size: 10px !important;

    font-weight: 700 !important;
}


html body
.asistente-campo > span em {
    color: #8a9bad !important;

    -webkit-text-fill-color: #8a9bad !important;

    font-size: 8.5px !important;

    font-style: normal !important;

    font-weight: 500 !important;
}


/* ==========================================================
   31. CONTENEDOR DEL INPUT
========================================================== */

html body
.asistente-campo > div {
    display: flex !important;

    min-height: 40px !important;

    padding: 0 10px !important;

    align-items: center !important;

    gap: 7px !important;

    border: 1px solid #d9e3ee !important;

    border-radius: 9px !important;

    background: #ffffff !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


html body
.asistente-campo > div:focus-within {
    border-color: #84a8eb !important;

    box-shadow:
        0 0 0 3px rgba(29, 78, 216, 0.07) !important;
}


/* ==========================================================
   32. ICONOS DEL FORMULARIO
========================================================== */

html body
.asistente-campo
> div
> i {
    flex: 0 0 auto;

    color: #66829e !important;

    -webkit-text-fill-color: #66829e !important;

    font-size: 11px !important;
}


html body
.asistente-campo
> div
> b {
    flex: 0 0 auto;

    color: #526d88 !important;

    -webkit-text-fill-color: #526d88 !important;

    font-size: 9.5px !important;

    font-weight: 600 !important;

    white-space: nowrap;
}


/* ==========================================================
   33. INPUT / SELECT
========================================================== */

html body
.asistente-campo input,
html body
.asistente-campo select {
    width: 100% !important;

    min-width: 0 !important;

    height: 38px !important;

    padding: 0 !important;

    border: 0 !important;

    outline: none !important;

    background: transparent !important;

    color: #38536d !important;

    -webkit-text-fill-color: #38536d !important;

    font-family: inherit !important;

    font-size: 11px !important;

    box-shadow: none !important;
}


html body
.asistente-campo input::placeholder {
    color: #9cabb9 !important;

    -webkit-text-fill-color: #9cabb9 !important;
}


/* ==========================================================
   34. ERROR
========================================================== */

html body
.asistente-campo small {
    display: block !important;

    min-height: 13px !important;

    padding-top: 3px !important;

    color: #c23b46 !important;

    -webkit-text-fill-color: #c23b46 !important;

    font-size: 8.5px !important;
}


html body
.asistente-campo.tiene-error
> div {
    border-color: #e2a0a7 !important;

    background: #fffafa !important;

    box-shadow:
        0 0 0 3px rgba(200, 50, 60, 0.05) !important;
}


/* ==========================================================
   35. CONSENTIMIENTO
========================================================== */

html body
.asistente-consentimiento {
    display: flex !important;

    margin: 2px 0 13px !important;

    align-items: flex-start !important;

    gap: 8px !important;

    color: #687e94 !important;

    -webkit-text-fill-color: #687e94 !important;

    font-size: 9px !important;

    line-height: 1.45 !important;
}


html body
.asistente-consentimiento input {
    width: 14px !important;
    height: 14px !important;

    margin-top: 1px !important;

    flex: 0 0 14px;

    accent-color: #1d4ed8;
}


/* ==========================================================
   36. BOTÓN CONTINUAR
========================================================== */

html body
.asistente-continuar {
    width: 100% !important;

    min-height: 43px !important;

    gap: 8px !important;
}


/* ==========================================================
   37. MODO RESUMEN
========================================================== */

html body
.asistente-panel.modo-resumen
.asistente-conversacion {
    flex: 0 0 auto !important;

    height: auto !important;

    min-height: 105px !important;

    max-height: 165px !important;
}


html body
.asistente-panel.modo-resumen
.asistente-acciones {
    flex: 1 1 auto !important;

    max-height: none !important;
}


/* ==========================================================
   38. RESUMEN
========================================================== */

html body
.asistente-resumen {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;

    margin-bottom: 12px !important;
}


html body
.asistente-resumen p {
    display: block !important;

    margin: 0 !important;

    padding: 8px 9px !important;

    overflow: hidden;

    border: 1px solid #e1e9f2 !important;

    border-radius: 8px !important;

    background: #f7f9fc !important;
}


html body
.asistente-resumen p span {
    display: block !important;

    margin-bottom: 3px !important;

    color: #8797a8 !important;

    -webkit-text-fill-color: #8797a8 !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


html body
.asistente-resumen p strong {
    display: block !important;

    overflow: hidden;

    color: #425e78 !important;

    -webkit-text-fill-color: #425e78 !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   39. EFECTO LEVE CUANDO EL CHAT ESTÁ ABIERTO
========================================================== */

html body
.asistente-seguridad.abierto
.asistente-boton {
    box-shadow:
        0 7px 20px rgba(29, 78, 216, 0.17) !important;
}


/* ==========================================================
   40. TABLET Y CELULAR
========================================================== */

@media (max-width: 650px) {

    html body
    .asistente-seguridad {
        right: 12px !important;

        bottom: 14px !important;
    }


    html body
    .asistente-seguridad
    .asistente-panel {
        position: fixed !important;

        right: 10px !important;
        bottom: 78px !important;

        width: calc(100vw - 20px) !important;

        height:
            min(
                660px,
                calc(100dvh - 96px)
            ) !important;

        border-radius: 18px !important;
    }


    html body
    .asistente-seguridad
    .asistente-boton {
        min-height: 52px !important;

        padding:
            7px 14px 7px 7px !important;

        font-size: 12px !important;
    }


    html body
    .asistente-boton-icono {
        width: 38px !important;
        height: 38px !important;

        flex-basis: 38px !important;
    }


    html body
    .asistente-conversacion {
        padding:
            16px 14px 14px !important;
    }


    html body
    .asistente-acciones {
        padding:
            11px 13px 13px !important;
    }


    html body
    .asistente-mensaje {
        max-width: 88% !important;

        font-size: 12.8px !important;
    }


    html body
    .asistente-form-fila {
        grid-template-columns: 1fr !important;

        gap: 0 !important;
    }

}


/* ==========================================================
   41. CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 410px) {

    html body
    .asistente-opciones {
        grid-template-columns: 1fr !important;
    }


    html body
    .asistente-resumen {
        grid-template-columns: 1fr !important;
    }


    html body
    .asistente-seguridad
    .asistente-boton {
        padding-right: 12px !important;
    }


    html body
    .asistente-cabecera {
        min-height: 68px !important;

        padding: 12px 13px !important;
    }


    html body
    .asistente-avatar {
        width: 40px !important;
        height: 40px !important;

        flex-basis: 40px !important;
    }

}


/* ==========================================================
   42. REDUCIR MOVIMIENTO SI EL DISPOSITIVO LO SOLICITA
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html body
    .asistente-panel,

    html body
    .asistente-mensaje-entrada,

    html body
    .asistente-escribiendo,

    html body
    .asistente-escribiendo-puntos span {

        animation: none !important;

        transition: none !important;
    }

}
/* ==========================================================
   MENSAJES DEL USUARIO
   DISEÑO MÁS NATURAL
========================================================== */

html body
.asistente-mensaje.usuario {

    position: relative !important;

    width: fit-content !important;

    max-width: 80% !important;

    margin:
        23px 7px 15px auto !important;

    padding:
        11px 15px 12px !important;

    border:
        1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius:
        17px 17px 5px 17px !important;

    background:
        #1d4ed8 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.45 !important;

    letter-spacing:
        0.05px;

    box-shadow:
        0 7px 17px
        rgba(29, 78, 216, 0.18) !important;
}


/* ==========================================================
   ETIQUETA "TÚ"
========================================================== */

html body
.asistente-mensaje.usuario::before {

    content:
        "Tú";

    position:
        absolute;

    right:
        4px;

    top:
        -19px;

    color:
        #72869d !important;

    -webkit-text-fill-color:
        #72869d !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.4px;

    text-transform:
        uppercase;
}


/* ==========================================================
   COLITA DE LA BURBUJA
========================================================== */

html body
.asistente-mensaje.usuario::after {

    content:
        "";

    position:
        absolute;

    right:
        -5px;

    bottom:
        1px;

    width:
        12px;

    height:
        12px;

    background:
        #1d4ed8;

    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 70%
        );
}


/* ==========================================================
   TEXTO INTERNO
========================================================== */

html body
.asistente-mensaje.usuario,
html body
.asistente-mensaje.usuario * {

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


/* ==========================================================
   PEQUEÑA ANIMACIÓN CUANDO APARECE
========================================================== */

html body
.asistente-mensaje.usuario.asistente-mensaje-entrada {

    opacity:
        0;

    transform:
        translateX(8px)
        translateY(5px)
        scale(0.98);

}


html body
.asistente-mensaje.usuario.asistente-mensaje-entrada.visible {

    opacity:
        1;

    transform:
        translateX(0)
        translateY(0)
        scale(1);

}
/* =========================================================
   CORRECCIÓN FINAL - CTA MAR 3D
   Evita que estilos antiguos coloquen fondo blanco
========================================================= */

.cta.cta-global.cta-mar-seguridad {
    position: relative !important;

    background: #03080e !important;
    background-color: #03080e !important;

    overflow: hidden !important;

    border: 1px solid rgba(0, 200, 230, 0.30) !important;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.18) !important;
}


/* =========================================================
   ELIMINAR FONDO BLANCO ANTIGUO
========================================================= */

.cta.cta-global.cta-mar-seguridad
.cta-contenido.cta-mar-contenido {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   CANVAS 3D
========================================================= */

.cta.cta-global.cta-mar-seguridad
#canvas-container {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0 !important;

    background: #03080e !important;

    pointer-events: none !important;
}


.cta.cta-global.cta-mar-seguridad
#canvas-container canvas {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
}


/* =========================================================
   CAPA OSCURA MUY SUAVE
   Ya no tapa el cyan del mar
========================================================= */

.cta.cta-global.cta-mar-seguridad::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    display: block !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 14, 0.58) 0%,
            rgba(3, 8, 14, 0.34) 40%,
            rgba(3, 8, 14, 0.08) 72%,
            rgba(3, 8, 14, 0.22) 100%
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   CONTENIDO SOBRE EL MAR
========================================================= */

.cta.cta-global.cta-mar-seguridad
> .contenedor {
    position: relative !important;

    z-index: 2 !important;
}


.cta.cta-global.cta-mar-seguridad
.cta-mar-contenido {
    position: relative !important;

    z-index: 3 !important;
}


/* =========================================================
   TÍTULO BLANCO
========================================================= */

.cta.cta-global.cta-mar-seguridad
.cta-mar-texto h2 {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.34) !important;
}


/* =========================================================
   ETIQUETA CYAN
========================================================= */

.cta.cta-global.cta-mar-seguridad
.cta-mar-etiqueta {
    color: #00c8e6 !important;

    -webkit-text-fill-color: #00c8e6 !important;
}


/* =========================================================
   BOTÓN
========================================================= */

.cta.cta-global.cta-mar-seguridad
.btn-cta-mar {
    background:
        rgba(0, 125, 150, 0.90) !important;

    border:
        1px solid rgba(0, 200, 230, 0.70) !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


.cta.cta-global.cta-mar-seguridad
.btn-cta-mar i {
    color: #ffffff !important;
}


.cta.cta-global.cta-mar-seguridad
.btn-cta-mar:hover {
    background:
        rgba(0, 154, 184, 0.96) !important;

    border-color:
        #00c8e6 !important;
}
/* =========================================================
   PROYECTOS REALIZADOS - INICIO
========================================================= */

.proyectos-inicio {
    position: relative;
    overflow: hidden;

    padding-top: 95px;
    padding-bottom: 95px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(23, 92, 255, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(52, 152, 255, 0.07),
            transparent 28%
        ),
        #f7f9fc;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.proyectos-inicio-encabezado {
    width: 100%;
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}


.proyectos-inicio-encabezado .subtitulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    color: #175cff;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.proyectos-inicio-encabezado h2 {
    margin: 0;

    color: #0c1830;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 800;
}


.proyectos-inicio-encabezado h2 span {
    display: block;

    color: #175cff;
}


.proyectos-inicio-encabezado p {
    max-width: 660px;

    margin: 20px auto 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   GRID PRINCIPAL
========================================================= */

.proyectos-inicio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


/* =========================================================
   TARJETA
========================================================= */

.proyecto-inicio-card {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(15, 35, 70, 0.08);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 12px 35px rgba(15, 35, 70, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.proyecto-inicio-card:hover {
    transform: translateY(-6px);

    border-color: rgba(23, 92, 255, 0.18);

    box-shadow:
        0 20px 46px rgba(15, 35, 70, 0.13);
}


/* =========================================================
   IMAGEN
========================================================= */

.proyecto-inicio-imagen {
    position: relative;

    width: 100%;
    height: 285px;

    overflow: hidden;

    background: #e9eef6;
}


.proyecto-inicio-imagen::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 16, 38, 0.54),
            rgba(4, 16, 38, 0.02) 58%
        );

    pointer-events: none;
}


.proyecto-inicio-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.45s ease;
}


.proyecto-inicio-card:hover
.proyecto-inicio-imagen img {
    transform: scale(1.035);
}


/* =========================================================
   ETIQUETA SOBRE LA IMAGEN
========================================================= */

.proyecto-inicio-categoria {
    position: absolute;
    z-index: 2;

    left: 20px;
    bottom: 18px;

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

    max-width: calc(100% - 40px);

    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    background: rgba(6, 22, 50, 0.72);

    color: #ffffff;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: 0.7px;
}


/* =========================================================
   CONTENIDO DE LA TARJETA
========================================================= */

.proyecto-inicio-contenido {
    padding: 26px 26px 28px;
}


.proyecto-inicio-titulo {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 15px;
}


.proyecto-inicio-icono {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(23, 92, 255, 0.12);
    border-radius: 13px;

    background: rgba(23, 92, 255, 0.07);

    color: #175cff;

    font-size: 18px;
}


.proyecto-inicio-titulo h3 {
    margin: 0;

    color: #111d36;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;
}


.proyecto-inicio-contenido > p {
    margin: 0;

    color: #667085;

    font-size: 14.5px;
    line-height: 1.7;
}


/* =========================================================
   TECNOLOGÍAS
========================================================= */

.proyecto-inicio-tecnologias {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}


.proyecto-inicio-tecnologias span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border: 1px solid #e1e7f0;
    border-radius: 9px;

    background: #f8fafc;

    color: #344054;

    font-size: 12.5px;
    font-weight: 700;
}


.proyecto-inicio-tecnologias span i {
    color: #175cff;

    font-size: 12px;
}


/* =========================================================
   CTA DEL PORTAFOLIO
========================================================= */

.proyectos-inicio-cta {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 20px;

    margin-top: 38px;
    padding: 25px 28px;

    overflow: hidden;

    border: 1px solid rgba(23, 92, 255, 0.1);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(239, 245, 255, 0.96)
        );

    box-shadow:
        0 10px 30px rgba(15, 35, 70, 0.07);
}


.proyectos-inicio-cta-icono {
    width: 52px;
    height: 52px;

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

    border-radius: 15px;

    background: #175cff;

    color: #ffffff;

    font-size: 21px;

    box-shadow:
        0 8px 20px rgba(23, 92, 255, 0.22);
}


.proyectos-inicio-cta-texto {
    min-width: 0;
}


.proyectos-inicio-cta-texto strong {
    display: block;

    margin-bottom: 5px;

    color: #101d36;

    font-size: 18px;
    font-weight: 800;
}


.proyectos-inicio-cta-texto span {
    display: block;

    color: #667085;

    font-size: 14px;
    line-height: 1.55;
}


.proyectos-inicio-cta-boton {
    flex-shrink: 0;

    white-space: nowrap;
}
/* =========================================================
   IP TECNOLOGÍA
   MEGA MENÚ "SOLUCIONES" - ESCRITORIO
   ---------------------------------------------------------
   Compatible con el header actual.
   No modifica tablet ni celular.
========================================================= */

@media (min-width: 1101px) {

    /* =====================================================
       1. CONTENEDOR SOLUCIONES
    ===================================================== */

    .header .menu-soluciones,
    #header .menu-soluciones {
        position: relative !important;

        width: auto !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       2. BOTÓN "SOLUCIONES"
    ===================================================== */

    .header .menu-soluciones > summary,
    #header .menu-soluciones > summary {
        position: relative !important;

        min-height: 44px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        margin: 0 !important;
        padding: 0 2px !important;

        color: rgba(255, 255, 255, 0.88) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;

        background: transparent !important;

        border: 0 !important;
        outline: 0 !important;

        font-size: inherit !important;
        font-weight: 700 !important;

        list-style: none !important;

        cursor: pointer !important;

        transition:
            color 0.22s ease,
            opacity 0.22s ease !important;
    }


    .header .menu-soluciones > summary::-webkit-details-marker,
    #header .menu-soluciones > summary::-webkit-details-marker {
        display: none !important;
    }


    .header .menu-soluciones > summary::marker,
    #header .menu-soluciones > summary::marker {
        display: none !important;
        content: "" !important;
    }


    /* Flecha */

    .header .menu-soluciones > summary > i,
    #header .menu-soluciones > summary > i {
        margin: 0 !important;

        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;

        font-size: 10px !important;

        transition:
            transform 0.25s ease !important;
    }


    .header .menu-soluciones[open] > summary > i,
    .header .menu-soluciones:hover > summary > i,
    #header .menu-soluciones[open] > summary > i,
    #header .menu-soluciones:hover > summary > i {
        transform: rotate(180deg) !important;
    }


    /* Hover / activo */

    .header .menu-soluciones:hover > summary,
    .header .menu-soluciones[open] > summary,
    .header .menu-soluciones.activo > summary,
    #header .menu-soluciones:hover > summary,
    #header .menu-soluciones[open] > summary,
    #header .menu-soluciones.activo > summary {
        color: #6fa3ff !important;
        -webkit-text-fill-color: #6fa3ff !important;
    }


    /* Línea inferior azul */

    .header .menu-soluciones > summary::after,
    #header .menu-soluciones > summary::after {
        content: "" !important;

        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 2px !important;

        display: block !important;

        background: #6fa3ff !important;

        border-radius: 20px !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;

        transition:
            transform 0.23s ease !important;
    }


    .header .menu-soluciones:hover > summary::after,
    .header .menu-soluciones[open] > summary::after,
    .header .menu-soluciones.activo > summary::after,
    #header .menu-soluciones:hover > summary::after,
    #header .menu-soluciones[open] > summary::after,
    #header .menu-soluciones.activo > summary::after {
        transform: scaleX(1) !important;
    }



    /* =====================================================
       3. MEGA MENÚ PRINCIPAL
    ===================================================== */

    .header .menu-soluciones > .mega-soluciones,
    #header .menu-soluciones > .mega-soluciones {
        position: absolute !important;

        top: calc(100% + 10px) !important;

        /*
           Se desplaza ligeramente hacia la derecha para que
           el panel grande no salga de la pantalla.
        */
        left: 50% !important;

        width: min(820px, calc(100vw - 36px)) !important;
        min-width: 760px !important;

        display: block !important;

        margin: 0 !important;
        padding: 20px !important;

        background: rgba(255, 255, 255, 0.985) !important;
        background-image: none !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 18px !important;

        box-shadow:
            0 28px 70px rgba(15, 23, 42, 0.18),
            0 8px 24px rgba(15, 23, 42, 0.08) !important;

        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;

        overflow: hidden !important;

        z-index: 999999 !important;


        /* Oculto inicialmente */

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translateX(-42%)
            translateY(8px) !important;

        transition:
            opacity 0.20s ease,
            visibility 0.20s ease,
            transform 0.20s ease !important;
    }


    /* Mostrar al pasar mouse o abrir */

    .header .menu-soluciones:hover > .mega-soluciones,
    .header .menu-soluciones[open] > .mega-soluciones,
    .header .menu-soluciones:focus-within > .mega-soluciones,
    #header .menu-soluciones:hover > .mega-soluciones,
    #header .menu-soluciones[open] > .mega-soluciones,
    #header .menu-soluciones:focus-within > .mega-soluciones {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translateX(-42%)
            translateY(0) !important;
    }



    /* =====================================================
       4. ELIMINAR TRIÁNGULO DEL MENÚ ANTIGUO
    ===================================================== */

    .header .menu-soluciones > .mega-soluciones::before,
    .header .menu-soluciones > .mega-soluciones::after,
    #header .menu-soluciones > .mega-soluciones::before,
    #header .menu-soluciones > .mega-soluciones::after {
        display: none !important;
        content: none !important;
    }



    /* =====================================================
       5. GRID PRINCIPAL - 2 COLUMNAS
    ===================================================== */

    .mega-soluciones-grid {
        width: 100% !important;

        display: grid !important;

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

        align-items: start !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }



    /* =====================================================
       6. COLUMNAS
    ===================================================== */

    .mega-soluciones-columna {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 4px !important;

        margin: 0 !important;

        padding:
            4px
            22px
            10px
            4px !important;
    }


    .mega-soluciones-columna-sectores {
        padding:
            4px
            4px
            10px
            22px !important;

        border-left:
            1px solid #e5eaf1 !important;
    }



    /* =====================================================
       7. CABECERAS
    ===================================================== */

    .mega-soluciones-cabecera {
        width: 100% !important;

        display: block !important;

        margin: 0 0 10px !important;
        padding: 4px 8px 11px !important;

        border-bottom:
            1px solid #edf0f5 !important;
    }


    .mega-soluciones-cabecera > span {
        display: block !important;

        margin: 0 0 3px !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        font-size: 10px !important;
        font-weight: 900 !important;

        line-height: 1.3 !important;

        letter-spacing: 1.25px !important;

        text-transform: uppercase !important;
    }


    .mega-soluciones-cabecera > strong {
        display: block !important;

        margin: 0 !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        font-size: 15px !important;
        font-weight: 800 !important;

        line-height: 1.35 !important;
    }



    /* =====================================================
       8. ITEMS DEL MEGA MENÚ
    ===================================================== */

    .header .mega-solucion-item,
    #header .mega-solucion-item {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 57px !important;

        display: grid !important;

        grid-template-columns:
            40px
            minmax(0, 1fr)
            18px !important;

        align-items: center !important;

        column-gap: 11px !important;

        margin: 0 !important;
        padding: 8px 9px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;

        border: 1px solid transparent !important;
        border-radius: 11px !important;

        text-decoration: none !important;

        transform: none !important;

        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease !important;
    }


    .header .mega-solucion-item::before,
    .header .mega-solucion-item::after,
    #header .mega-solucion-item::before,
    #header .mega-solucion-item::after {
        display: none !important;
        content: none !important;
    }



    /* Hover */

    .header .mega-solucion-item:hover,
    .header .mega-solucion-item.submenu-activo,
    #header .mega-solucion-item:hover,
    #header .mega-solucion-item.submenu-activo {
        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: #f5f8ff !important;

        border-color: #dce6fb !important;

        box-shadow:
            0 7px 18px rgba(21, 63, 175, 0.055) !important;

        transform: translateX(2px) !important;
    }



    /* =====================================================
       9. ICONOS
    ===================================================== */

    .mega-solucion-icono {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;

        color: #1d5bd7 !important;
        -webkit-text-fill-color: #1d5bd7 !important;

        background: #eef4ff !important;

        border: 1px solid #dce7ff !important;
        border-radius: 10px !important;

        transition:
            transform 0.18s ease,
            background 0.18s ease !important;
    }


    .mega-solucion-icono i {
        margin: 0 !important;

        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;

        font-size: 17px !important;
        line-height: 1 !important;
    }


    .mega-solucion-item:hover .mega-solucion-icono {
        background: #e4edff !important;

        transform:
            translateY(-1px)
            scale(1.03) !important;
    }



    /* =====================================================
       10. COLORES NATURALES DE LOS SERVICIOS
    ===================================================== */

    /* CCTV */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(1)
    .mega-solucion-icono {
        color: #1976d2 !important;
        -webkit-text-fill-color: #1976d2 !important;

        background: #eaf3ff !important;
    }


    /* Alarmas */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(2)
    .mega-solucion-icono {
        color: #dc4c5a !important;
        -webkit-text-fill-color: #dc4c5a !important;

        background: #fff0f1 !important;
    }


    /* Control de acceso */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(3)
    .mega-solucion-icono {
        color: #7357d8 !important;
        -webkit-text-fill-color: #7357d8 !important;

        background: #f1edff !important;
    }


    /* Monitoreo */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(4)
    .mega-solucion-icono {
        color: #118c84 !important;
        -webkit-text-fill-color: #118c84 !important;

        background: #e8f8f5 !important;
    }


    /* Cercos */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(5)
    .mega-solucion-icono {
        color: #d99c00 !important;
        -webkit-text-fill-color: #d99c00 !important;

        background: #fff7d9 !important;
    }


    /* Soporte */

    .mega-soluciones-columna
    .mega-solucion-item:nth-of-type(6)
    .mega-solucion-icono {
        color: #e46f27 !important;
        -webkit-text-fill-color: #e46f27 !important;

        background: #fff0e7 !important;
    }



    /* =====================================================
       11. TEXTO DE CADA ITEM
    ===================================================== */

    .mega-solucion-texto {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 2px !important;

        margin: 0 !important;
    }


    .mega-solucion-texto strong {
        display: block !important;

        margin: 0 !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        font-size: 13px !important;
        font-weight: 800 !important;

        line-height: 1.25 !important;

        white-space: normal !important;
    }


    .mega-solucion-texto small {
        display: block !important;

        margin: 0 !important;

        color: #718096 !important;
        -webkit-text-fill-color: #718096 !important;

        font-size: 10.5px !important;
        font-weight: 500 !important;

        line-height: 1.35 !important;

        white-space: normal !important;
    }



    /* =====================================================
       12. FLECHA DERECHA
    ===================================================== */

    .mega-solucion-flecha {
        justify-self: end !important;

        margin: 0 !important;

        color: #8a97a8 !important;
        -webkit-text-fill-color: #8a97a8 !important;

        font-size: 10px !important;

        transition:
            transform 0.18s ease,
            color 0.18s ease !important;
    }


    .mega-solucion-item:hover .mega-solucion-flecha {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        transform: translateX(2px) !important;
    }



    /* =====================================================
       13. VER TODOS LOS SERVICIOS
    ===================================================== */

    .header .mega-soluciones-ver-todos,
    #header .mega-soluciones-ver-todos {
        width: fit-content !important;

        display: inline-flex !important;
        align-items: center !important;

        gap: 7px !important;

        margin: 8px 8px 0 !important;
        padding: 7px 2px !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 11.5px !important;
        font-weight: 800 !important;

        text-decoration: none !important;

        transition:
            gap 0.18s ease,
            color 0.18s ease !important;
    }


    .header .mega-soluciones-ver-todos::before,
    .header .mega-soluciones-ver-todos::after,
    #header .mega-soluciones-ver-todos::before,
    #header .mega-soluciones-ver-todos::after {
        display: none !important;
        content: none !important;
    }


    .header .mega-soluciones-ver-todos:hover,
    #header .mega-soluciones-ver-todos:hover {
        gap: 10px !important;

        color: #0d318d !important;
        -webkit-text-fill-color: #0d318d !important;

        background: transparent !important;

        transform: none !important;
    }



    /* =====================================================
       14. CTA INFERIOR
       "¿No sabes qué solución necesitas?"
    ===================================================== */

    .header .mega-soluciones-ayuda,
    #header .mega-soluciones-ayuda {
        position: relative !important;

        width: 100% !important;
        min-height: 68px !important;

        display: grid !important;

        grid-template-columns:
            48px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 13px !important;

        margin: 14px 0 0 !important;
        padding: 10px 16px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background:
            linear-gradient(
                100deg,
                #f2f6ff 0%,
                #edf4ff 50%,
                #f7f9ff 100%
            ) !important;

        border: 1px solid #dfe8fb !important;
        border-radius: 13px !important;

        text-decoration: none !important;

        box-shadow: none !important;

        transform: none !important;

        transition:
            background 0.20s ease,
            border-color 0.20s ease,
            box-shadow 0.20s ease,
            transform 0.20s ease !important;
    }


    .header .mega-soluciones-ayuda::before,
    .header .mega-soluciones-ayuda::after,
    #header .mega-soluciones-ayuda::before,
    #header .mega-soluciones-ayuda::after {
        display: none !important;
        content: none !important;
    }


    .header .mega-soluciones-ayuda:hover,
    #header .mega-soluciones-ayuda:hover {
        background:
            linear-gradient(
                100deg,
                #edf3ff 0%,
                #e8f0ff 55%,
                #f2f6ff 100%
            ) !important;

        border-color: #cad9fa !important;

        box-shadow:
            0 10px 24px rgba(21, 63, 175, 0.09) !important;

        transform: translateY(-2px) !important;
    }



    /* Icono CTA */

    .mega-soluciones-ayuda-icono {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: grid !important;
        place-items: center !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background:
            linear-gradient(
                145deg,
                #1e5de0,
                #0d318d
            ) !important;

        border-radius: 11px !important;

        box-shadow:
            0 8px 18px rgba(21, 63, 175, 0.20) !important;
    }


    .mega-soluciones-ayuda-icono i {
        margin: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 18px !important;
    }



    /* Texto CTA */

    .mega-soluciones-ayuda-texto {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;
    }


    .mega-soluciones-ayuda-texto small {
        display: block !important;

        margin: 0 !important;

        color: #4a5568 !important;
        -webkit-text-fill-color: #4a5568 !important;

        font-size: 11px !important;
        font-weight: 650 !important;

        line-height: 1.3 !important;
    }


    .mega-soluciones-ayuda-texto strong {
        display: inline-flex !important;
        align-items: center !important;

        gap: 7px !important;

        margin: 0 !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        font-size: 14px !important;
        font-weight: 850 !important;

        line-height: 1.3 !important;
    }


    .mega-soluciones-ayuda-texto strong i {
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;

        font-size: 11px !important;

        transition:
            transform 0.18s ease !important;
    }


    .mega-soluciones-ayuda:hover
    .mega-soluciones-ayuda-texto strong i {
        transform: translateX(3px) !important;
    }



    /* =====================================================
       15. EVITAR QUE REGLAS ANTIGUAS DEL SUBMENÚ
       CAMBIEN EL NUEVO DISEÑO
    ===================================================== */

    .header .menu-soluciones .mega-soluciones a,
    #header .menu-soluciones .mega-soluciones a {
        white-space: normal !important;
    }


    .header .menu-soluciones .mega-soluciones a::before,
    .header .menu-soluciones .mega-soluciones a::after,
    #header .menu-soluciones .mega-soluciones a::before,
    #header .menu-soluciones .mega-soluciones a::after {
        content: none !important;
    }


    /* =====================================================
       16. PEQUEÑO PUENTE INVISIBLE
       Evita que se cierre al mover mouse hacia el panel.
    ===================================================== */

    .header .menu-soluciones::after,
    #header .menu-soluciones::after {
        content: "" !important;

        position: absolute !important;

        top: 100% !important;
        left: -20px !important;

        width: calc(100% + 40px) !important;
        height: 16px !important;

        display: block !important;

        background: transparent !important;

        pointer-events: auto !important;
    }

}



/* =========================================================
   LAPTOPS / ESCRITORIO MEDIANO
   Evita que el mega menú choque con los extremos.
========================================================= */

@media (min-width: 1101px) and (max-width: 1250px) {

    .header .menu-soluciones > .mega-soluciones,
    #header .menu-soluciones > .mega-soluciones {
        width: min(760px, calc(100vw - 28px)) !important;
        min-width: 720px !important;

        padding: 17px !important;

        transform:
            translateX(-39%)
            translateY(8px) !important;
    }


    .header .menu-soluciones:hover > .mega-soluciones,
    .header .menu-soluciones[open] > .mega-soluciones,
    .header .menu-soluciones:focus-within > .mega-soluciones,
    #header .menu-soluciones:hover > .mega-soluciones,
    #header .menu-soluciones[open] > .mega-soluciones,
    #header .menu-soluciones:focus-within > .mega-soluciones {
        transform:
            translateX(-39%)
            translateY(0) !important;
    }


    .mega-soluciones-columna {
        padding-right: 16px !important;
    }


    .mega-soluciones-columna-sectores {
        padding-left: 16px !important;
    }


    .header .mega-solucion-item,
    #header .mega-solucion-item {
        min-height: 54px !important;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            16px !important;

        padding: 7px 8px !important;
    }


    .mega-solucion-icono {
        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
    }


    .mega-solucion-texto strong {
        font-size: 12.5px !important;
    }


    .mega-solucion-texto small {
        font-size: 10px !important;
    }

}
/* =========================================================
   IP TECNOLOGÍA
   CASAS - HOGAR INTERACTIVO
   Imagen + puntos + + modal centrado
========================================================= */


/* =========================================================
   1. SECCIÓN GENERAL
========================================================= */

.hogar-interactivo {
    position: relative;
    z-index: 1;

    padding: 90px 0 100px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(44, 105, 230, 0.08),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );

    overflow: visible;
}


.hogar-interactivo .contenedor {
    position: relative;
    z-index: 2;
}


/* =========================================================
   2. ENCABEZADO
========================================================= */

.hogar-interactivo-encabezado {
    max-width: 780px;
    margin: 0 auto 42px;

    text-align: center;
}


.hogar-interactivo-encabezado .subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #153faf;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.hogar-interactivo-encabezado h2 {
    margin: 0;

    color: #172033;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;

    line-height: 1.08;
}


.hogar-interactivo-encabezado h2 span {
    color: #1748c7;
}


.hogar-interactivo-encabezado p {
    max-width: 680px;

    margin: 18px auto 0;

    color: #5f6b7b;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   3. ESCENARIO PRINCIPAL
========================================================= */

.hogar-interactivo-stage {
    position: relative;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 30px 30px 20px;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #e4eaf3;
    border-radius: 28px;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.08);

    overflow: visible;
}


/* =========================================================
   4. CONTENEDOR DE LA IMAGEN
========================================================= */

.hogar-interactivo-imagen-wrap {
    position: relative;

    width: 100%;

    min-height: 520px;

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

    overflow: visible;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at center,
            rgba(222, 233, 250, 0.85),
            rgba(255, 255, 255, 0) 65%
        );
}


.croquis-selector-sector {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 22px;
    padding: 0 8px;
}

.btn-croquis-sector {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 20px;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-croquis-sector:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
    background: #e2e8f0;
}

.btn-croquis-sector.activo {
    border-color: #1f5eff;
    color: #ffffff;
    background: #1f5eff;
    box-shadow: 0 4px 14px rgba(31, 94, 255, 0.35);
}

.btn-croquis-sector:focus-visible {
    outline: 3px solid rgba(31, 94, 255, 0.35);
    outline-offset: 3px;
}

.croquis-cambio {
    animation: croquis-aparece 0.4s ease both;
}

@keyframes croquis-aparece {
    from {
        opacity: 0.45;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.seccion-grifo-interactivo .croquis-selector-sector + .grifo-croquis-wrap {
    margin-top: 0;
}

@media (max-width: 600px) {
    .croquis-selector-sector {
        gap: 8px;
        margin-bottom: 16px;
    }

    .btn-croquis-sector {
        min-height: 42px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-croquis-sector {
        transition: none;
    }

    .croquis-cambio {
        animation: none;
    }
}

.hogar-interactivo-imagen {
    width: 100%;
    max-width: 1050px;

    height: auto;
    max-height: 620px;

    display: block;

    margin: 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 35px
            rgba(15, 23, 42, 0.10)
        );
}


/* =========================================================
   5. PUNTOS +
========================================================= */

.hotspot-hogar {
    position: absolute;

    left: var(--hotspot-x);
    top: var(--hotspot-y);

    z-index: 20;

    width: 48px;
    height: 48px;

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

    margin: 0;
    padding: 0;

    transform: translate(-50%, -50%);

    color: #ffffff;

    background: transparent;

    border: 0;

    cursor: pointer;

    outline: none;
}


/* círculo exterior */

.hotspot-hogar::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    background: rgba(21, 63, 175, 0.16);

    animation:
        hotspot-pulso 2.1s ease-out infinite;

    pointer-events: none;
}


/* círculo del + */

.hotspot-hogar-plus {
    position: relative;
    z-index: 2;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #2366ec,
            #123fae
        );

    border: 4px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 8px 22px rgba(21, 63, 175, 0.30);

    font-size: 25px;
    font-weight: 700;

    line-height: 1;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease,
        background 0.20s ease;
}


.hotspot-hogar:hover .hotspot-hogar-plus,
.hotspot-hogar:focus-visible .hotspot-hogar-plus {
    transform:
        translateY(-2px)
        scale(1.10);

    background:
        linear-gradient(
            145deg,
            #3274ff,
            #123fae
        );

    box-shadow:
        0 12px 28px rgba(21, 63, 175, 0.40);
}


@keyframes hotspot-pulso {

    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.40);
        opacity: 0;
    }

    100% {
        transform: scale(1.40);
        opacity: 0;
    }

}


/* =========================================================
   6. TOOLTIP AL PASAR EL MOUSE
========================================================= */

.hotspot-hogar-tooltip {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 14px);

    z-index: 40;

    width: max-content;
    min-width: 190px;
    max-width: 240px;

    display: block;

    padding: 11px 14px;

    color: #172033;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid #dfe6f1;
    border-radius: 12px;

    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.16);

    text-align: left;

    transform:
        translateX(-50%)
        translateY(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}


.hotspot-hogar-tooltip::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -6px;

    width: 12px;
    height: 12px;

    background: #ffffff;

    border-right: 1px solid #dfe6f1;
    border-bottom: 1px solid #dfe6f1;

    transform:
        translateX(-50%)
        rotate(45deg);
}


.hotspot-hogar-tooltip strong {
    display: block;

    margin: 0 0 3px;

    color: #153faf;

    font-size: 13px;
    font-weight: 850;
}


.hotspot-hogar-tooltip small {
    display: block;

    color: #647084;

    font-size: 10.5px;
    line-height: 1.4;
}


.hotspot-hogar:hover .hotspot-hogar-tooltip,
.hotspot-hogar:focus-visible .hotspot-hogar-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   7. LEYENDA INFERIOR
========================================================= */

.hogar-interactivo-leyenda {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 22px auto 0;
}


.hogar-interactivo-leyenda span {
    min-width: 125px;

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

    gap: 8px;

    padding: 11px 14px;

    color: #263248;

    background: #ffffff;

    border: 1px solid #e1e7f0;
    border-radius: 12px;

    box-shadow:
        0 7px 18px rgba(15, 23, 42, 0.04);

    font-size: 12px;
    font-weight: 750;
}


.hogar-interactivo-leyenda i {
    color: #1748c7;

    font-size: 14px;
}


/* =========================================================
   8. MODAL
========================================================= */

.modal-hogar[hidden] {
    display: none !important;
}


.modal-hogar {
    position: fixed;

    inset: 0;

    z-index: 999999;

    width: 100%;
    height: 100%;

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

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.20s ease,
        visibility 0.20s ease;
}


.modal-hogar.abierto {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   9. FONDO OSCURECIDO
========================================================= */

.modal-hogar-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 17, 36, 0.68);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    cursor: pointer;
}


/* bloquea scroll */

body.modal-hogar-abierto {
    overflow: hidden !important;
}


/* =========================================================
   10. CUADRO CENTRAL
========================================================= */

.modal-hogar-dialog {
    position: relative;
    z-index: 2;

    width: min(900px, 94vw);
    max-height: min(650px, 88vh);

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;

    border:
        2px solid
        rgba(23, 72, 199, 0.85);

    border-radius: 24px;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.30);

    transform:
        translateY(18px)
        scale(0.96);

    transition:
        transform 0.22s ease;

    outline: none;
}


.modal-hogar.abierto .modal-hogar-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* línea azul superior */

.modal-hogar-dialog::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 6px;

    background:
        linear-gradient(
            90deg,
            #123fae,
            #2c72ff
        );
}


/* =========================================================
   11. BOTÓN CERRAR
========================================================= */

.modal-hogar-cerrar {
    position: absolute;

    top: 17px;
    right: 18px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    color: #182133;

    background: #f3f6fa;

    border: 1px solid #e0e6ee;
    border-radius: 50%;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}


.modal-hogar-cerrar:hover {
    color: #ffffff;

    background: #153faf;

    border-color: #153faf;

    transform: rotate(90deg);
}


.modal-hogar-cerrar i {
    font-size: 17px;
}


/* =========================================================
   12. CONTENIDO
========================================================= */

.modal-hogar-contenido {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(280px, 0.82fr);

    align-items: stretch;

    min-height: 430px;
}


/* =========================================================
   13. TEXTO
========================================================= */

.modal-hogar-texto {
    display: flex;
    flex-direction: column;

    padding:
        58px
        38px
        38px;
}


.modal-hogar-etiqueta {
    width: fit-content;

    display: inline-flex;

    margin-bottom: 11px;

    padding: 6px 10px;

    color: #153faf;

    background: #eef4ff;

    border: 1px solid #d9e5ff;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.modal-hogar-texto h3 {
    margin: 0;

    color: #152238;

    font-size: clamp(28px, 3vw, 38px);
    font-weight: 850;

    line-height: 1.1;
}


.modal-hogar-texto > p {
    margin: 18px 0 22px;

    color: #556174;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   14. FUNCIONES
========================================================= */

.modal-hogar-funciones {
    display: grid;

    gap: 11px;

    margin: 0 0 28px;
    padding: 0;

    list-style: none;
}


.modal-hogar-funciones li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #263248;

    font-size: 13px;
    font-weight: 650;
}


.modal-hogar-funciones li i {
    color: #1748c7;

    font-size: 14px;
}


/* =========================================================
   15. CTA
========================================================= */

.modal-hogar-cta {
    width: fit-content;

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

    gap: 9px;

    margin-top: auto;

    padding: 13px 20px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1748c7,
            #0e3499
        );

    border-radius: 11px;

    box-shadow:
        0 12px 24px rgba(21, 63, 175, 0.22);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.modal-hogar-cta:hover {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 16px 30px rgba(21, 63, 175, 0.30);
}


/* =========================================================
   16. IMAGEN DEL DISPOSITIVO
========================================================= */

.modal-hogar-media {
    min-height: 430px;

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

    padding: 55px 35px 35px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #edf3fc 72%,
            #e7eef9 100%
        );

    border-left: 1px solid #e1e7f0;
}


.modal-hogar-imagen {
    width: 100%;
    max-width: 290px;

    max-height: 330px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 24px
            rgba(15, 23, 42, 0.17)
        );
}


/* fallback mientras todavía no tenemos foto */

.modal-hogar-imagen-fallback {
    width: 210px;
    height: 210px;

    display: grid;
    place-items: center;

    color: #1748c7;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf1fc
        );

    border: 1px solid #dce5f3;
    border-radius: 28px;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.10);
}


.modal-hogar-imagen-fallback i {
    font-size: 70px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hogar-interactivo {
        padding: 75px 0 82px;
    }


    .hogar-interactivo-stage {
        padding: 22px 20px 18px;
    }


    .hogar-interactivo-imagen-wrap {
        min-height: 440px;
    }


    .modal-hogar-dialog {
        width: min(780px, 94vw);
    }


    .modal-hogar-contenido {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 0.72fr);
    }


    .modal-hogar-texto {
        padding:
            54px
            28px
            30px;
    }


    .modal-hogar-media {
        min-height: 400px;

        padding:
            55px
            24px
            28px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .hogar-interactivo {
        padding: 62px 0 68px;
    }


    .hogar-interactivo-encabezado {
        margin-bottom: 28px;

        padding-inline: 5px;
    }


    .hogar-interactivo-encabezado h2 {
        font-size: 34px;
    }


    .hogar-interactivo-encabezado p {
        font-size: 14px;
    }


    .hogar-interactivo-stage {
        padding: 14px 10px 15px;

        border-radius: 18px;
    }


    .hogar-interactivo-imagen-wrap {
        min-height: 320px;

        border-radius: 14px;
    }


    .hogar-interactivo-imagen {
        width: 108%;
        max-width: none;
    }


    /* puntos un poco más pequeños */

    .hotspot-hogar {
        width: 40px;
        height: 40px;
    }


    .hotspot-hogar-plus {
        width: 38px;
        height: 38px;

        border-width: 3px;

        font-size: 21px;
    }


    /* En móvil no usamos hover */

    .hotspot-hogar-tooltip {
        display: none !important;
    }


    /* leyenda */

    .hogar-interactivo-leyenda {
        gap: 7px;

        margin-top: 16px;
    }


    .hogar-interactivo-leyenda span {
        min-width: auto;

        flex: 1 1 calc(33.333% - 7px);

        padding: 9px 7px;

        font-size: 10px;
    }


    /* =========================================
       MODAL CELULAR
    ========================================= */

    .modal-hogar {
        align-items: center;

        padding: 14px;
    }


    .modal-hogar-dialog {
        width: 100%;
        max-height: 90dvh;

        border-width: 1px;
        border-radius: 18px;
    }


    .modal-hogar-contenido {
        display: flex;
        flex-direction: column;
    }


    /* Imagen arriba */

    .modal-hogar-media {
        order: 1;

        width: 100%;
        min-height: 230px;

        padding:
            48px
            24px
            20px;

        border-left: 0;
        border-bottom: 1px solid #e1e7f0;
    }


    .modal-hogar-imagen {
        max-width: 190px;
        max-height: 190px;
    }


    .modal-hogar-imagen-fallback {
        width: 150px;
        height: 150px;

        border-radius: 22px;
    }


    .modal-hogar-imagen-fallback i {
        font-size: 52px;
    }


    /* Información debajo */

    .modal-hogar-texto {
        order: 2;

        padding:
            25px
            20px
            22px;
    }


    .modal-hogar-etiqueta {
        margin-bottom: 9px;
    }


    .modal-hogar-texto h3 {
        padding-right: 5px;

        font-size: 27px;
    }


    .modal-hogar-texto > p {
        margin:
            13px 0
            18px;

        font-size: 13.5px;
    }


    .modal-hogar-funciones {
        gap: 9px;

        margin-bottom: 20px;
    }


    .modal-hogar-funciones li {
        font-size: 12px;
    }


    .modal-hogar-cta {
        width: 100%;

        margin-top: 0;

        padding: 13px 16px;
    }


    .modal-hogar-cerrar {
        top: 12px;
        right: 12px;

        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    .hogar-interactivo-stage {
        padding:
            10px
            7px
            13px;
    }


    .hogar-interactivo-imagen-wrap {
        min-height: 280px;
    }


    .hotspot-hogar {
        width: 36px;
        height: 36px;
    }


    .hotspot-hogar-plus {
        width: 35px;
        height: 35px;

        font-size: 19px;
    }


    .hogar-interactivo-leyenda span {
        flex:
            1 1
            calc(50% - 7px);
    }


    .modal-hogar {
        padding: 9px;
    }


    .modal-hogar-media {
        min-height: 210px;

        padding:
            45px
            18px
            15px;
    }


    .modal-hogar-texto {
        padding:
            21px
            17px
            18px;
    }


    .modal-hogar-texto h3 {
        font-size: 25px;
    }

}
/* =========================================================
   HOGAR INTERACTIVO
   MODAL MÁS COMPACTO Y PROFESIONAL
========================================================= */

@media (min-width: 651px) {

    .modal-hogar-dialog {
        width: min(760px, 88vw) !important;

        max-height: 78vh !important;

        border-radius: 20px !important;

        border-width: 2px !important;

        box-shadow:
            0 28px 75px rgba(0, 0, 0, 0.28) !important;
    }


    /* Dos columnas más compactas */

    .modal-hogar-contenido {
        min-height: 360px !important;

        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(240px, 0.88fr) !important;
    }


    /* =========================================
       LADO DE TEXTO
    ========================================= */

    .modal-hogar-texto {
        padding:
            44px
            30px
            30px !important;
    }


    .modal-hogar-etiqueta {
        margin-bottom: 10px !important;

        padding: 5px 9px !important;

        font-size: 9px !important;
    }


    .modal-hogar-texto h3 {
        font-size: 30px !important;

        line-height: 1.12 !important;
    }


    .modal-hogar-texto > p {
        margin: 14px 0 18px !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    /* Funciones */

    .modal-hogar-funciones {
        gap: 8px !important;

        margin-bottom: 21px !important;
    }


    .modal-hogar-funciones li {
        font-size: 12.5px !important;
    }


    /* =========================================
       BOTÓN
    ========================================= */

    .modal-hogar-cta {
        padding: 11px 17px !important;

        font-size: 12.5px !important;

        border-radius: 9px !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }


    .modal-hogar-cta span,
    .modal-hogar-cta i {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }


    /* =========================================
       LADO DE IMAGEN
    ========================================= */

    .modal-hogar-media {
        min-height: 360px !important;

        padding:
            48px
            25px
            26px !important;
    }


    .modal-hogar-imagen {
        max-width: 220px !important;
        max-height: 245px !important;
    }


    .modal-hogar-imagen-fallback {
        width: 165px !important;
        height: 165px !important;

        border-radius: 23px !important;
    }


    .modal-hogar-imagen-fallback i {
        font-size: 55px !important;
    }


    /* =========================================
       X
    ========================================= */

    .modal-hogar-cerrar {
        top: 14px !important;
        right: 14px !important;

        width: 36px !important;
        height: 36px !important;
    }

}
/* =========================================================
   CASAS - IMAGEN INTERACTIVA MÁS GRANDE
========================================================= */

@media (min-width: 901px) {

    .hogar-interactivo-stage {
        max-width: 1380px !important;

        padding:
            18px
            18px
            20px !important;

        border-radius: 26px !important;
    }


    .hogar-interactivo-imagen-wrap {
        min-height: 650px !important;

        padding: 0 !important;
    }


    .hogar-interactivo-imagen {
        width: 118% !important;
        max-width: 1280px !important;

        max-height: 720px !important;

        object-fit: contain !important;

        transform: scale(1.04) !important;

        transform-origin: center !important;
    }

}
/* =========================================================
   HOGAR INTERACTIVO
   PUNTOS + MÁS SUAVES + PARPADEO CADA CIERTOS SEGUNDOS
========================================================= */


/* CÍRCULO PRINCIPAL */
.hotspot-hogar-plus {
    background: linear-gradient(
        145deg,
        #5b8def,
        #3f73d8
    ) !important;

    border: 4px solid rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 7px 20px rgba(63, 115, 216, 0.28) !important;

    color: #ffffff !important;

    animation:
        hotspot-parpadeo-suave 4.8s ease-in-out infinite !important;
}


/* ARO EXTERIOR */
.hotspot-hogar::before {
    inset: -8px !important;

    background: rgba(91, 141, 239, 0.18) !important;

    border: 2px solid rgba(91, 141, 239, 0.22) !important;

    animation:
        hotspot-onda-suave 4.8s ease-out infinite !important;
}


/* =========================================================
   PARPADEO DEL BOTÓN
   La mayor parte del tiempo permanece quieto.
========================================================= */

@keyframes hotspot-parpadeo-suave {

    /* QUIETO */
    0%,
    58% {
        transform: scale(1);
        box-shadow:
            0 7px 20px rgba(63, 115, 216, 0.28);
    }

    /* PRIMER PULSO */
    64% {
        transform: scale(1.12);
        box-shadow:
            0 0 0 7px rgba(91, 141, 239, 0.10),
            0 10px 26px rgba(63, 115, 216, 0.34);
    }

    /* REGRESA */
    70% {
        transform: scale(1);
        box-shadow:
            0 7px 20px rgba(63, 115, 216, 0.28);
    }

    /* SEGUNDO PULSO PEQUEÑO */
    76% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 5px rgba(91, 141, 239, 0.08),
            0 9px 24px rgba(63, 115, 216, 0.32);
    }

    /* QUIETO OTRA VEZ */
    82%,
    100% {
        transform: scale(1);
        box-shadow:
            0 7px 20px rgba(63, 115, 216, 0.28);
    }
}


/* =========================================================
   ONDA ALREDEDOR DEL +
========================================================= */

@keyframes hotspot-onda-suave {

    0%,
    58% {
        transform: scale(0.90);
        opacity: 0;
    }

    63% {
        transform: scale(0.95);
        opacity: 0.55;
    }

    73% {
        transform: scale(1.48);
        opacity: 0;
    }

    100% {
        transform: scale(1.48);
        opacity: 0;
    }
}


/* =========================================================
   HOVER
   Cuando el usuario acerca el mouse responde al instante.
========================================================= */

.hotspot-hogar:hover .hotspot-hogar-plus,
.hotspot-hogar:focus-visible .hotspot-hogar-plus {
    background: linear-gradient(
        145deg,
        #6e9cf4,
        #477bdc
    ) !important;

    animation-play-state: paused !important;

    transform: scale(1.12) !important;

    box-shadow:
        0 11px 28px rgba(63, 115, 216, 0.38) !important;
}
/* =========================================================
   HOGAR INTERACTIVO
   PARPADEO CADA 2 SEGUNDOS + ONDAS
   CÍRCULOS MÁS REDONDOS Y ONDAS MÁS VISIBLES
========================================================= */

.hotspot-hogar {
    position: absolute;
    left: var(--hotspot-x);
    top: var(--hotspot-y);
    transform: translate(-50%, -50%);
    z-index: 5;

    width: 58px;
    height: 58px;

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

    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}


/* BOTÓN + */
.hotspot-hogar-plus {
    position: relative;
    z-index: 2;

    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;

    display: grid;
    place-items: center;

    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;

    background: linear-gradient(145deg, #5f8ff2, #3f73d8);
    border: 4px solid #ffffff;

    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 8px 22px rgba(46, 99, 219, 0.30);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: visible;

    animation: pulso-hotspot 2s ease-in-out infinite;
}


/* ONDAS */
.hotspot-hogar::before,
.hotspot-hogar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;

    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}


/* ONDA 1 */
.hotspot-hogar::before {
    border: 3px solid rgba(95, 143, 242, 0.55);
    animation: onda-hotspot-1 2s ease-out infinite;
}


/* ONDA 2 */
.hotspot-hogar::after {
    border: 3px solid rgba(95, 143, 242, 0.34);
    animation: onda-hotspot-2 2s ease-out infinite;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes pulso-hotspot {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 22px rgba(46, 99, 219, 0.30);
    }

    8% {
        transform: scale(1.14);
        box-shadow: 0 12px 28px rgba(46, 99, 219, 0.42);
    }

    16% {
        transform: scale(1);
        box-shadow: 0 8px 22px rgba(46, 99, 219, 0.30);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 8px 22px rgba(46, 99, 219, 0.30);
    }
}


/* ONDA PRINCIPAL */
@keyframes onda-hotspot-1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    8% {
        opacity: 0.70;
        transform: translate(-50%, -50%) scale(1.18);
    }

    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.15);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.15);
    }
}


/* SEGUNDA ONDA */
@keyframes onda-hotspot-2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    14% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(1.12);
    }

    42% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.45);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.45);
    }
}


/* =========================================================
   HOVER
========================================================= */

.hotspot-hogar:hover .hotspot-hogar-plus,
.hotspot-hogar:focus-visible .hotspot-hogar-plus {
    background: linear-gradient(145deg, #76a1f7, #4d7fe0);
    transform: scale(1.12);
    box-shadow: 0 12px 28px rgba(46, 99, 219, 0.42);
}
/* =========================================================
   MODAL HOGAR INTERACTIVO - DISEÑO PROFESIONAL FINAL
   Texto limpio + imagen PNG transparente
========================================================= */


/* =========================================================
   CONTENEDOR DEL MODAL
========================================================= */

.modal-hogar-dialog {
    width: min(780px, 90vw) !important;
    max-height: 82vh !important;

    background: #ffffff !important;

    border-radius: 22px !important;
    border: 2px solid rgba(39, 94, 210, 0.14) !important;

    overflow: hidden !important;

    box-shadow:
        0 30px 80px rgba(10, 29, 65, 0.30) !important;
}


/* =========================================================
   DISTRIBUCIÓN INTERIOR
========================================================= */

.modal-hogar-contenido {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(230px, 0.75fr) !important;

    min-height: 370px !important;

    background: #ffffff !important;
}


/* =========================================================
   ZONA DE TEXTO
========================================================= */

.modal-hogar-texto {
    padding: 45px 25px 35px 42px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: #ffffff !important;
}


/* ETIQUETA SUPERIOR */
.modal-hogar-etiqueta {
    display: inline-flex !important;

    width: fit-content !important;

    margin: 0 0 10px !important;

    padding: 5px 10px !important;

    border-radius: 20px !important;

    background: rgba(46, 99, 219, 0.08) !important;

    color: #2e63db !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}


/* =========================================================
   TÍTULO
========================================================= */

.modal-hogar-texto h3 {
    margin: 0 !important;

    color: #111827 !important;

    font-size: clamp(27px, 2.2vw, 33px) !important;

    font-weight: 800 !important;

    line-height: 1.13 !important;

    letter-spacing: -0.7px !important;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.modal-hogar-texto > p {
    margin: 16px 0 20px !important;

    max-width: 470px !important;

    color: #374151 !important;

    font-size: 15px !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;
}


/* =========================================================
   LISTA DE FUNCIONES
========================================================= */

.modal-hogar-funciones {
    display: flex !important;
    flex-direction: column !important;

    gap: 9px !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    list-style: none !important;
}


.modal-hogar-funciones li {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    color: #283548 !important;

    font-size: 13px !important;

    line-height: 1.45 !important;
}


.modal-hogar-funciones li i {
    color: #2e63db !important;

    font-size: 14px !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   BOTÓN
========================================================= */

.modal-hogar-cta {
    display: inline-flex !important;

    width: fit-content !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 12px 19px !important;

    border-radius: 10px !important;

    background: #2058d4 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    box-shadow:
        0 7px 18px rgba(32, 88, 212, 0.22) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}


.modal-hogar-cta span,
.modal-hogar-cta i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


.modal-hogar-cta:hover {
    background: #174aba !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 11px 24px rgba(32, 88, 212, 0.30) !important;
}


/* =========================================================
   ZONA DE LA IMAGEN
   IMPORTANTE: SIN CUADRO DETRÁS
========================================================= */

.modal-hogar-media {
    position: relative !important;

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

    min-height: 370px !important;

    padding: 45px 30px 35px 5px !important;

    background: #ffffff !important;
}


/* IMAGEN PNG TRANSPARENTE */
.modal-hogar-imagen {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 240px !important;
    max-height: 270px !important;

    object-fit: contain !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    filter:
        drop-shadow(
            0 15px 18px
            rgba(22, 37, 65, 0.14)
        ) !important;
}


/* =========================================================
   ICONO PROVISIONAL
   Solo aparecerá mientras falte la imagen PNG
========================================================= */

.modal-hogar-imagen-fallback {
    width: 160px !important;
    height: 160px !important;

    display: grid;
    place-items: center;

    border-radius: 50% !important;

    background:
        rgba(46, 99, 219, 0.06) !important;

    border:
        1px solid rgba(46, 99, 219, 0.10) !important;
}


.modal-hogar-imagen-fallback i {
    color: #4f7fe5 !important;

    font-size: 55px !important;
}


/* =========================================================
   BOTÓN X
========================================================= */

.modal-hogar-cerrar {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: 38px !important;
    height: 38px !important;

    display: grid !important;
    place-items: center !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: rgba(15, 23, 42, 0.05) !important;

    color: #111827 !important;

    font-size: 18px !important;

    cursor: pointer !important;

    z-index: 20 !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease !important;
}


.modal-hogar-cerrar:hover {
    background: rgba(15, 23, 42, 0.10) !important;

    transform: rotate(5deg) scale(1.05) !important;
}


/* =========================================================
   FONDO OSCURO / DESENFOQUE
========================================================= */

.modal-hogar-backdrop {
    background: rgba(7, 18, 39, 0.64) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}


/* =========================================================
   TABLET Y CELULAR
========================================================= */

@media (max-width: 650px) {

    .modal-hogar-dialog {
        width: min(92vw, 470px) !important;

        max-height: 88vh !important;

        overflow-y: auto !important;

        border-radius: 19px !important;
    }


    .modal-hogar-contenido {
        grid-template-columns: 1fr !important;

        min-height: auto !important;
    }


    /* IMAGEN ARRIBA EN CELULAR */
    .modal-hogar-media {
        order: 1 !important;

        min-height: 210px !important;

        padding:
            42px
            25px
            5px !important;
    }


    .modal-hogar-imagen {
        max-width: 190px !important;
        max-height: 190px !important;
    }


    /* TEXTO ABAJO */
    .modal-hogar-texto {
        order: 2 !important;

        padding:
            18px
            25px
            30px !important;
    }


    .modal-hogar-texto h3 {
        font-size: 26px !important;
    }


    .modal-hogar-texto > p {
        margin-top: 12px !important;

        font-size: 14px !important;

        line-height: 1.6 !important;
    }


    .modal-hogar-funciones {
        margin-bottom: 21px !important;
    }


    .modal-hogar-cta {
        width: 100% !important;
    }
}
/* =========================================================
   CASAS - HERO MITAD TEXTO / MITAD IMAGEN
   FOTO DERECHA + DEGRADADO DE UNIÓN
   PEGAR AL FINAL DE assets/css/estilos.css
========================================================= */

html body .casa-hero.casa-hero-split {
    position: relative !important;
    min-height: 650px !important;
    overflow: hidden !important;

    /* Anulamos el fondo antiguo que ocupaba todo el hero */
    background: #081831 !important;
    background-image: none !important;
    isolation: isolate !important;
}


/* =========================================================
   FOTO - MITAD DERECHA
========================================================= */

html body .casa-hero.casa-hero-split::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 43% !important;

    background-image: url("../img/banner-casas.png") !important;
    background-size: cover !important;
    background-position: 61% center !important;
    background-repeat: no-repeat !important;

    opacity: 1 !important;
    pointer-events: none !important;
}


/* =========================================================
   DEGRADADO QUE UNE TEXTO + FOTO
========================================================= */

html body .casa-hero.casa-hero-split::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            #081831 0%,
            #081831 31%,
            rgba(8, 24, 49, 0.99) 37%,
            rgba(8, 24, 49, 0.94) 43%,
            rgba(8, 24, 49, 0.78) 49%,
            rgba(8, 24, 49, 0.48) 56%,
            rgba(8, 24, 49, 0.18) 64%,
            rgba(8, 24, 49, 0.04) 73%,
            rgba(8, 24, 49, 0) 82%
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   CONTENEDOR
========================================================= */

html body .casa-hero.casa-hero-split .casa-hero-grid {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 650px) 1fr !important;
    align-items: center !important;

    min-height: 650px !important;

    padding-top: 76px !important;
    padding-bottom: 64px !important;
}


html body .casa-hero.casa-hero-split .casa-hero-contenido {
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;
    max-width: 625px !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   BREADCRUMB
========================================================= */

html body .casa-hero.casa-hero-split .breadcrumb {
    margin-bottom: 24px !important;
}

html body .casa-hero.casa-hero-split .breadcrumb,
html body .casa-hero.casa-hero-split .breadcrumb a,
html body .casa-hero.casa-hero-split .breadcrumb span,
html body .casa-hero.casa-hero-split .breadcrumb i {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}


/* =========================================================
   ETIQUETA
========================================================= */

html body .casa-hero.casa-hero-split .etiqueta-seccion {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    width: fit-content !important;

    padding: 9px 16px !important;
    margin: 0 0 22px !important;

    border: 1px solid rgba(125, 169, 255, 0.42) !important;
    border-radius: 999px !important;

    background: rgba(70, 111, 190, 0.24) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.45px !important;
}

html body .casa-hero.casa-hero-split .etiqueta-seccion i {
    color: #8eb5ff !important;
    -webkit-text-fill-color: #8eb5ff !important;
}


/* =========================================================
   TÍTULO
========================================================= */

html body .casa-hero.casa-hero-split h1 {
    max-width: 620px !important;

    margin: 0 0 20px !important;

    font-size: clamp(45px, 4vw, 61px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.7px !important;
    font-weight: 800 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}

html body .casa-hero.casa-hero-split h1 span {
    display: block !important;

    margin-top: 5px !important;

    color: #7faaff !important;
    -webkit-text-fill-color: #7faaff !important;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

html body .casa-hero.casa-hero-split .casa-hero-contenido > p {
    max-width: 590px !important;

    margin: 0 0 28px !important;

    color: rgba(255, 255, 255, 0.90) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;

    font-size: 16px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;

    text-shadow: none !important;
}


/* =========================================================
   BOTONES
========================================================= */

html body .casa-hero.casa-hero-split .casa-hero-botones {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;

    margin: 0 0 27px !important;
}

html body .casa-hero.casa-hero-split .casa-hero-botones .btn {
    min-height: 52px !important;
    padding: 0 21px !important;
    border-radius: 11px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    font-size: 14px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
}

html body .casa-hero.casa-hero-split .btn-primario {
    background: #1d57d5 !important;
    border: 1px solid #1d57d5 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    box-shadow: 0 10px 25px rgba(20, 77, 202, 0.24) !important;
}

html body .casa-hero.casa-hero-split .btn-primario:hover {
    background: #174abd !important;
    border-color: #174abd !important;
    transform: translateY(-2px) !important;
}

html body .casa-hero.casa-hero-split .btn-secundario {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;

    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

html body .casa-hero.casa-hero-split .btn-secundario:hover {
    background: #ffffff !important;
    transform: translateY(-2px) !important;
}


/* =========================================================
   CONFIANZA
========================================================= */

html body .casa-hero.casa-hero-split .casa-hero-confianza {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 22px !important;

    margin: 0 !important;
}

html body .casa-hero.casa-hero-split .casa-hero-confianza div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;

    font-size: 12px !important;
    font-weight: 650 !important;
}

html body .casa-hero.casa-hero-split .casa-hero-confianza i {
    color: #79a8ff !important;
    -webkit-text-fill-color: #79a8ff !important;
    font-size: 12px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    html body .casa-hero.casa-hero-split::before {
        left: 38% !important;
        background-position: 59% center !important;
    }

    html body .casa-hero.casa-hero-split::after {
        background:
            linear-gradient(
                90deg,
                #081831 0%,
                #081831 28%,
                rgba(8, 24, 49, 0.98) 38%,
                rgba(8, 24, 49, 0.84) 48%,
                rgba(8, 24, 49, 0.52) 59%,
                rgba(8, 24, 49, 0.14) 73%,
                rgba(8, 24, 49, 0) 88%
            ) !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-grid {
        grid-template-columns: minmax(0, 560px) 1fr !important;
        min-height: 620px !important;
    }

    html body .casa-hero.casa-hero-split h1 {
        font-size: clamp(42px, 5vw, 55px) !important;
    }
}


/* =========================================================
   CELULAR / TABLET VERTICAL
========================================================= */

@media (max-width: 760px) {

    html body .casa-hero.casa-hero-split {
        min-height: 650px !important;
    }

    html body .casa-hero.casa-hero-split::before {
        inset: 0 !important;

        background-size: cover !important;
        background-position: 67% center !important;
    }

    html body .casa-hero.casa-hero-split::after {
        background:
            linear-gradient(
                90deg,
                rgba(6, 20, 43, 0.96) 0%,
                rgba(6, 20, 43, 0.91) 42%,
                rgba(6, 20, 43, 0.70) 72%,
                rgba(6, 20, 43, 0.48) 100%
            ),
            linear-gradient(
                180deg,
                rgba(6, 20, 43, 0.18) 0%,
                rgba(6, 20, 43, 0.12) 55%,
                rgba(6, 20, 43, 0.60) 100%
            ) !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-grid {
        display: block !important;
        min-height: 650px !important;

        padding-top: 66px !important;
        padding-bottom: 52px !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-contenido {
        max-width: 560px !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    html body .casa-hero.casa-hero-split h1 {
        max-width: 540px !important;
        font-size: clamp(38px, 10.6vw, 50px) !important;
        letter-spacing: -1.2px !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-contenido > p {
        max-width: 520px !important;
        font-size: 15px !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-botones {
        align-items: stretch !important;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 520px) {

    html body .casa-hero.casa-hero-split {
        min-height: 690px !important;
    }

    html body .casa-hero.casa-hero-split::before {
        background-position: 70% center !important;
    }

    html body .casa-hero.casa-hero-split::after {
        background: rgba(6, 20, 43, 0.80) !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-grid {
        min-height: 690px !important;
        padding-top: 54px !important;
        padding-bottom: 44px !important;
    }

    html body .casa-hero.casa-hero-split .breadcrumb {
        margin-bottom: 18px !important;
    }

    html body .casa-hero.casa-hero-split .etiqueta-seccion {
        margin-bottom: 18px !important;
        padding: 8px 13px !important;
        font-size: 11px !important;
    }

    html body .casa-hero.casa-hero-split h1 {
        font-size: clamp(35px, 11vw, 44px) !important;
        line-height: 1.06 !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-botones {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-botones .btn {
        width: 100% !important;
    }

    html body .casa-hero.casa-hero-split .casa-hero-confianza {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }
}
/* =========================================================
   CASAS - HERO 50/50 CORRECCIÓN FINAL
   TEXTO IZQUIERDA + FOTO DERECHA + DEGRADADO
========================================================= */

html body .casa-hero.casa-hero-split {
    position: relative !important;
    min-height: 650px !important;
    overflow: hidden !important;

    /*
       1er fondo = degradado de unión
       2do fondo = fotografía de la casa
    */
    background-image:
        linear-gradient(
            90deg,
            #081831 0%,
            #081831 30%,
            rgba(8, 24, 49, 0.99) 37%,
            rgba(8, 24, 49, 0.94) 43%,
            rgba(8, 24, 49, 0.78) 49%,
            rgba(8, 24, 49, 0.52) 55%,
            rgba(8, 24, 49, 0.24) 61%,
            rgba(8, 24, 49, 0.07) 68%,
            rgba(8, 24, 49, 0) 76%
        ),
        url("../img/banner-casas.png") !important;

    /*
       El degradado ocupa todo.
       La fotografía ocupa aproximadamente la mitad derecha.
    */
    background-size:
        100% 100%,
        58% 100% !important;

    background-position:
        center,
        right center !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-color: #081831 !important;
}


/* QUITAMOS LOS PSEUDO-ELEMENTOS ANTERIORES
   PARA QUE NO TAPEN LA FOTO */
html body .casa-hero.casa-hero-split::before,
html body .casa-hero.casa-hero-split::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   CONTENIDO
========================================================= */

html body .casa-hero.casa-hero-split .casa-hero-grid {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 680px) 1fr !important;

    align-items: center !important;

    min-height: 650px !important;

    padding-top: 76px !important;
    padding-bottom: 64px !important;
}


/* TEXTO */
html body .casa-hero.casa-hero-split .casa-hero-contenido {
    width: 100% !important;
    max-width: 680px !important;
}


/* TÍTULO - EVITA QUE SE CORTE DEMASIADO */
html body .casa-hero.casa-hero-split h1 {
    max-width: 680px !important;

    font-size: clamp(44px, 3.7vw, 60px) !important;
    line-height: 1.05 !important;
}


/* DESCRIPCIÓN */
html body .casa-hero.casa-hero-split .casa-hero-contenido > p {
    max-width: 630px !important;
}
/* =========================================================
   CASAS - HERO PULIDO FINAL
   Título más equilibrado + degradado más suave
========================================================= */

@media (min-width: 901px) {

    /* =====================================================
       CONTENIDO UN POCO MÁS ARRIBA
    ===================================================== */

    html body .casa-hero.casa-hero-split .casa-hero-grid {
        transform: translateY(-12px) !important;
    }


    /* =====================================================
       TÍTULO MÁS ELEGANTE
    ===================================================== */

    html body .casa-hero.casa-hero-split h1 {
        max-width: 720px !important;

        font-size: clamp(42px, 3.35vw, 55px) !important;

        line-height: 1.06 !important;

        letter-spacing: -1.2px !important;

        margin-top: 22px !important;
        margin-bottom: 20px !important;
    }


    /* PARTE AZUL */
    html body .casa-hero.casa-hero-split h1 span {
        font-size: 0.98em !important;
        line-height: 1.08 !important;
    }


    /* =====================================================
       DESCRIPCIÓN
    ===================================================== */

    html body .casa-hero.casa-hero-split
    .casa-hero-contenido > p {

        max-width: 620px !important;

        font-size: 16px !important;

        line-height: 1.65 !important;
    }


    /* =====================================================
       DEGRADADO MÁS LARGO Y NATURAL
    ===================================================== */

    html body .casa-hero.casa-hero-split {

        background-image:

            linear-gradient(
                90deg,

                #081831 0%,
                #081831 28%,

                rgba(8, 24, 49, 1) 34%,
                rgba(8, 24, 49, 0.98) 39%,
                rgba(8, 24, 49, 0.93) 44%,
                rgba(8, 24, 49, 0.82) 49%,
                rgba(8, 24, 49, 0.67) 54%,
                rgba(8, 24, 49, 0.49) 59%,
                rgba(8, 24, 49, 0.32) 64%,
                rgba(8, 24, 49, 0.17) 69%,
                rgba(8, 24, 49, 0.07) 74%,
                rgba(8, 24, 49, 0) 81%
            ),

            url("../img/banner-casas.png")

        !important;


        background-size:
            100% 100%,
            60% 100% !important;


        background-position:
            center,
            right center !important;


        background-repeat:
            no-repeat,
            no-repeat !important;
    }
}
/* =========================================================
   CASAS - PROTECCIÓN RESIDENCIAL
   SECCIÓN DE BENEFICIOS - VERSIÓN FINAL
========================================================= */

.casa-beneficios-pro {
    position: relative;
    padding: 82px 0 78px;
    background: linear-gradient(
        180deg,
        #eef5ff 0%,
        #f7faff 55%,
        #ffffff 100%
    );
    overflow: hidden;
}


/* DECORACIÓN SUAVE DE FONDO */
.casa-beneficios-pro::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: 70px;

    border-radius: 50%;

    background: rgba(45, 102, 220, 0.05);

    pointer-events: none;
}


.casa-beneficios-pro .contenedor {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.casa-beneficios-pro-encabezado {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center;
}


.casa-beneficios-pro-encabezado .subtitulo {
    display: inline-block;

    margin-bottom: 12px;

    color: #173f9f;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.casa-beneficios-pro-encabezado h2 {
    margin: 0 0 15px;

    color: #17324f;

    font-size: clamp(34px, 3.1vw, 50px);
    line-height: 1.08;

    font-weight: 800;
    letter-spacing: -1.2px;
}


.casa-beneficios-pro-encabezado h2 span {
    color: #2058d4;
}


.casa-beneficios-pro-encabezado p {
    max-width: 690px;

    margin: 0 auto;

    color: #61738a;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   GRID DE TARJETAS
========================================================= */

.casa-beneficios-pro-grid {
    display: grid;

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

    gap: 24px;
}


/* =========================================================
   TARJETA
========================================================= */

.casa-beneficio-pro {
    position: relative;

    background: #ffffff;

    border:
        1px solid rgba(25, 69, 140, 0.09);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(17, 44, 82, 0.08);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


.casa-beneficio-pro:hover {
    transform: translateY(-5px);

    border-color:
        rgba(32, 88, 212, 0.16);

    box-shadow:
        0 23px 52px rgba(17, 44, 82, 0.12);
}


/* =========================================================
   IMÁGENES
========================================================= */

.casa-beneficio-pro-media {
    position: relative;

    height: 220px;
    min-height: 220px;

    background-color: #dce4ef;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}


/* SOMBRA SUAVE SOBRE LA FOTO */
.casa-beneficio-pro-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(7, 24, 54, 0) 38%,
        rgba(7, 24, 54, 0.08) 67%,
        rgba(7, 24, 54, 0.25) 100%
    );

    pointer-events: none;
}


/* =========================================================
   FOTO 1 - ACCESOS Y EXTERIORES
========================================================= */

.casa-beneficio-pro-media-accesos {
    background-image:
        linear-gradient(
            135deg,
            rgba(20, 45, 80, 0.03),
            rgba(20, 45, 80, 0.07)
        ),
        url("../img/casas/beneficios/accesos-exteriores.png");
}


/* =========================================================
   FOTO 2 - SUPERVISIÓN
========================================================= */

.casa-beneficio-pro-media-supervision {
    background-image:
        linear-gradient(
            135deg,
            rgba(20, 45, 80, 0.03),
            rgba(20, 45, 80, 0.07)
        ),
        url("../img/casas/beneficios/supervision-hogar.png");
}


/* =========================================================
   FOTO 3 - INSTALACIÓN Y SOPORTE
========================================================= */

.casa-beneficio-pro-media-soporte {
    background-image:
        linear-gradient(
            135deg,
            rgba(20, 45, 80, 0.03),
            rgba(20, 45, 80, 0.07)
        ),
        url("../img/casas/beneficios/instalacion-soporte.png");
}


/* =========================================================
   ELIMINAMOS COMPLETAMENTE LOS NÚMEROS 01 / 02 / 03
========================================================= */

.casa-beneficio-pro-numero {
    display: none !important;
}


/* =========================================================
   CUERPO DE LA TARJETA
========================================================= */

.casa-beneficio-pro-cuerpo {
    padding: 25px 25px 27px;
}


/* ETIQUETA */
.casa-beneficio-pro-etiqueta {
    display: block;

    margin-bottom: 10px;

    color: #173f9f;

    font-size: 10.5px;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


/* TÍTULO */
.casa-beneficio-pro h3 {
    margin: 0 0 12px;

    color: #172b44;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 750;

    letter-spacing: -0.35px;
}


/* DESCRIPCIÓN */
.casa-beneficio-pro p {
    margin: 0;

    color: #5f6f83;

    font-size: 13.5px;

    line-height: 1.68;
}


/* =========================================================
   DETALLE INFERIOR
========================================================= */

.casa-beneficio-pro-detalle {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid #e9eef5;

    color: #2f455f;

    font-size: 12.5px;

    font-weight: 650;

    line-height: 1.45;
}


.casa-beneficio-pro-detalle i {
    margin-top: 2px;

    color: #3c77e8;

    font-size: 13px;

    flex-shrink: 0;
}


/* =========================================================
   CTA INFERIOR
========================================================= */

.casa-beneficios-pro-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 28px;

    padding: 22px 25px;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid rgba(32, 88, 212, 0.10);

    border-radius: 16px;

    box-shadow:
        0 12px 30px rgba(17, 44, 82, 0.06);
}


.casa-beneficios-pro-cta > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.casa-beneficios-pro-cta strong {
    color: #172b44;

    font-size: 15px;

    font-weight: 750;
}


.casa-beneficios-pro-cta span {
    color: #718096;

    font-size: 12.5px;
}


/* =========================================================
   BOTÓN CTA
========================================================= */

.btn-casa-beneficios-pro {
    display: inline-flex;

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

    gap: 9px;

    flex-shrink: 0;

    min-height: 45px;

    padding: 0 19px;

    border-radius: 9px;

    background: #2058d4;

    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-decoration: none;

    font-size: 12.5px;

    font-weight: 750;

    box-shadow:
        0 8px 20px rgba(32, 88, 212, 0.20);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}


.btn-casa-beneficios-pro span,
.btn-casa-beneficios-pro i {
    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


.btn-casa-beneficios-pro:hover {
    background: #1749b8;

    transform: translateY(-2px);

    box-shadow:
        0 11px 25px rgba(32, 88, 212, 0.27);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .casa-beneficios-pro {
        padding: 70px 0 68px;
    }


    .casa-beneficios-pro-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .casa-beneficio-pro:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);

        justify-self: center;
    }


    .casa-beneficio-pro-media {
        height: 210px;
        min-height: 210px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .casa-beneficios-pro {
        padding: 58px 0 56px;
    }


    .casa-beneficios-pro-encabezado {
        margin-bottom: 28px;
    }


    .casa-beneficios-pro-encabezado h2 {
        font-size: 31px;

        letter-spacing: -0.7px;
    }


    .casa-beneficios-pro-encabezado p {
        font-size: 14px;
    }


    .casa-beneficios-pro-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .casa-beneficio-pro:last-child {
        grid-column: auto;

        width: 100%;
    }


    .casa-beneficio-pro-media {
        height: 190px;
        min-height: 190px;
    }


    .casa-beneficio-pro-cuerpo {
        padding: 22px 21px 24px;
    }


    .casa-beneficio-pro h3 {
        font-size: 20px;
    }


    .casa-beneficio-pro p {
        font-size: 13.5px;
    }


    .casa-beneficios-pro-cta {
        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        padding: 21px;
    }


    .btn-casa-beneficios-pro {
        width: 100%;
    }
}
/* ============================================================
   ============================================================
   TIENDAS Y LOCALES
   DISEÑO PROFESIONAL + LOCAL INTERACTIVO
   ============================================================
   ============================================================ */


/* ============================================================
   VARIABLES DE LA PÁGINA
============================================================ */

.comercio-hero,
.comercio-interactivo,
.comercio-soluciones,
.comercio-puntos,
.comercio-momentos,
.comercio-cta {

    --comercio-azul: #2459b8;
    --comercio-azul-medio: #3d6fc8;
    --comercio-azul-suave: #eaf1fc;

    --comercio-celeste: #edf5ff;

    --comercio-oscuro: #14213d;
    --comercio-texto: #44516a;
    --comercio-texto-suave: #6c778d;

    --comercio-borde: #dce5f0;

    --comercio-fondo: #f7f9fc;
    --comercio-blanco: #ffffff;

}


/* ============================================================
   HERO
============================================================ */

.comercio-hero {

    position: relative;

    overflow: hidden;

    padding:

        clamp(80px, 8vw, 125px)

        0

        clamp(70px, 8vw, 110px);

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(64, 113, 198, 0.11),
            transparent 31%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fc 52%,
            #edf3fb 100%
        );

}


/* DECORACIÓN SUAVE */

.comercio-hero::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    right: -190px;
    top: -160px;

    border: 1px solid rgba(36, 89, 184, 0.09);

}


.comercio-hero::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    left: -130px;
    bottom: -100px;

    background: rgba(36, 89, 184, 0.035);

}


/* ============================================================
   GRID HERO
============================================================ */

.comercio-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

        minmax(0, 1.05fr)

        minmax(390px, 0.95fr);

    align-items: center;

    gap: clamp(45px, 6vw, 85px);

}


/* ============================================================
   CONTENIDO HERO
============================================================ */

.comercio-hero-contenido {

    max-width: 680px;

}


.comercio-hero-contenido .breadcrumb {

    margin-bottom: 24px;

}


.comercio-hero-contenido .etiqueta-seccion {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(36, 89, 184, 0.08);

    border: 1px solid rgba(36, 89, 184, 0.13);

    color: var(--comercio-azul);

    font-size: 12px;

    line-height: 1;

    font-weight: 750;

    letter-spacing: 0.075em;

}


.comercio-hero-contenido .etiqueta-seccion i {

    font-size: 13px;

}


.comercio-hero-contenido h1 {

    margin: 0 0 23px;

    max-width: 700px;

    color: var(--comercio-oscuro);

    font-size: clamp(40px, 5vw, 66px);

    line-height: 1.04;

    letter-spacing: -0.045em;

    font-weight: 760;

}


.comercio-hero-contenido h1 span {

    display: block;

    margin-top: 7px;

    color: var(--comercio-azul);

}


.comercio-hero-contenido > p {

    max-width: 620px;

    margin: 0;

    color: var(--comercio-texto);

    font-size: 17px;

    line-height: 1.75;

}


/* ============================================================
   BOTONES HERO
============================================================ */

.comercio-hero-botones {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 13px;

    margin-top: 31px;

}


.comercio-hero-botones .btn {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 21px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease,

        background 0.25s ease,

        border-color 0.25s ease;

}


.comercio-hero-botones .btn-primario {

    color: #ffffff;

    background: var(--comercio-azul);

    border: 1px solid var(--comercio-azul);

    box-shadow: 0 10px 24px rgba(36, 89, 184, 0.18);

}


.comercio-hero-botones .btn-primario:hover {

    transform: translateY(-2px);

    background: #1f50a8;

    box-shadow: 0 14px 30px rgba(36, 89, 184, 0.24);

}


.comercio-hero-botones .btn-secundario {

    color: var(--comercio-oscuro);

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid #d6e0ec;

}


.comercio-hero-botones .btn-secundario:hover {

    transform: translateY(-2px);

    color: var(--comercio-azul);

    border-color: rgba(36, 89, 184, 0.32);

    background: #ffffff;

}


/* ============================================================
   PUNTOS DE CONFIANZA HERO
============================================================ */

.comercio-confianza {

    display: flex;

    flex-wrap: wrap;

    gap: 19px;

    margin-top: 31px;

    padding-top: 24px;

    border-top: 1px solid rgba(20, 33, 61, 0.08);

}


.comercio-confianza > div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #566177;

    font-size: 13px;

    font-weight: 600;

}


.comercio-confianza i {

    color: #269b69;

    font-size: 15px;

}


/* ============================================================
   PANEL VISUAL DEL HERO
============================================================ */

.comercio-hero-visual {

    width: 100%;

}


.comercio-panel {

    position: relative;

    width: min(100%, 530px);

    margin-left: auto;

    padding: 24px;

    overflow: hidden;

    border-radius: 24px;

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(244, 248, 253, 0.97)
        );

    border: 1px solid rgba(202, 215, 230, 0.95);

    box-shadow:

        0 28px 65px rgba(30, 52, 87, 0.13),

        0 2px 7px rgba(30, 52, 87, 0.05);

}


.comercio-panel::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -110px;
    top: -120px;

    border-radius: 50%;

    background: rgba(36, 89, 184, 0.055);

}


/* ============================================================
   CABECERA PANEL
============================================================ */

.comercio-panel-superior {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 22px;

}


.comercio-panel-superior > div:first-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.comercio-panel-superior span {

    color: #778297;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.comercio-panel-superior strong {

    color: var(--comercio-oscuro);

    font-size: 19px;

    font-weight: 730;

}


.comercio-estado {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    color: #31765a;

    background: #edf8f3;

    border: 1px solid #d5eee2;

    font-size: 11px;

    font-weight: 700;

}


.comercio-estado span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35a876;

    box-shadow: 0 0 0 4px rgba(53, 168, 118, 0.11);

}


/* ============================================================
   MAPA DEL LOCAL HERO
============================================================ */

.local-mapa {

    position: relative;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    padding: 14px;

    min-height: 280px;

    border-radius: 18px;

    background:

        linear-gradient(
            rgba(36, 89, 184, 0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(36, 89, 184, 0.018) 1px,
            transparent 1px
        ),

        #f6f9fd;

    background-size: 28px 28px;

    border: 1px solid #e1e9f3;

}


.local-zona {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    gap: 7px;

    padding: 18px 12px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #e2e9f2;

    box-shadow: 0 5px 15px rgba(35, 57, 91, 0.04);

    transition:

        transform 0.25s ease,

        border-color 0.25s ease,

        box-shadow 0.25s ease;

}


.local-zona:hover {

    transform: translateY(-3px);

    border-color: rgba(36, 89, 184, 0.2);

    box-shadow: 0 9px 23px rgba(35, 57, 91, 0.08);

}


.local-zona i {

    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    color: var(--comercio-azul);

    background: var(--comercio-azul-suave);

    font-size: 16px;

}


.local-zona span {

    color: #25324a;

    font-size: 13px;

    font-weight: 720;

}


.local-zona small {

    color: #7b8596;

    font-size: 10px;

}


/* ============================================================
   ESTADOS DEL PANEL
============================================================ */

.comercio-panel-items {

    display: grid;

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

    gap: 9px;

    margin-top: 12px;

}


.comercio-panel-items > div {

    min-width: 0;

    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-areas:

        "icon label"

        "icon state";

    align-items: center;

    column-gap: 9px;

    padding: 11px;

    border-radius: 12px;

    background: #ffffff;

    border: 1px solid #e3eaf2;

}


.comercio-panel-items i {

    grid-area: icon;

    display: grid;

    place-items: center;

    width: 31px;
    height: 31px;

    border-radius: 8px;

    color: var(--comercio-azul);

    background: #edf3fc;

    font-size: 12px;

}


.comercio-panel-items span {

    grid-area: label;

    color: #838c9b;

    font-size: 9px;

}


.comercio-panel-items strong {

    grid-area: state;

    color: #344158;

    font-size: 10px;

    font-weight: 700;

}


/* ============================================================
   ============================================================
   LOCAL INTERACTIVO
   ============================================================
============================================================ */

.comercio-interactivo {

    position: relative;

    padding-top: clamp(80px, 8vw, 115px);

    padding-bottom: clamp(80px, 8vw, 115px);

    overflow: hidden;

    background: #ffffff;

}


/* ============================================================
   ENCABEZADO INTERACTIVO
============================================================ */

.comercio-interactivo .encabezado-seccion {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 45px;

}


.comercio-interactivo .encabezado-seccion .subtitulo {

    color: var(--comercio-azul);

}


.comercio-interactivo .encabezado-seccion h2 {

    color: var(--comercio-oscuro);

}


.comercio-interactivo .encabezado-seccion h2 span {

    color: var(--comercio-azul);

}


.comercio-interactivo .encabezado-seccion p {

    max-width: 660px;

    margin-left: auto;

    margin-right: auto;

    color: var(--comercio-texto);

}


/* ============================================================
   MARCO PRINCIPAL
============================================================ */

.comercio-interactivo-marco {

    max-width: 1180px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 25px;

    border: 1px solid #dbe4ef;

    background: #f2f5f8;

    box-shadow: 0 26px 65px rgba(26, 44, 73, 0.12);

}


/* ============================================================
   ESCENA
============================================================ */

.comercio-escena {

    position: relative;

    width: 100%;

    min-height: 610px;

    overflow: hidden;

    isolation: isolate;

    background:

        linear-gradient(
            135deg,
            #e9eef3,
            #dbe3eb
        );

}


.comercio-escena-imagen {

    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

}


/* DEGRADADO MUY SUAVE */

.comercio-escena::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(11, 22, 43, 0.04),
            rgba(11, 22, 43, 0.09)
        );

}


/* ============================================================
   HOTSPOTS
============================================================ */

.hotspot-comercio {

    position: absolute;

    z-index: 10;

    left: var(--hotspot-x);
    top: var(--hotspot-y);

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    border: 0;

    padding: 0;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

}


/* ============================================================
   CÍRCULO +
============================================================ */

.hotspot-comercio-plus {

    position: relative;

    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    border: 4px solid rgba(255, 255, 255, 0.96);

    color: #ffffff;

    background:

        linear-gradient(
            145deg,
            #5e8ad7,
            #3f6fc3
        );

    box-shadow:

        0 8px 20px rgba(13, 38, 78, 0.27),

        inset 0 1px 2px rgba(255, 255, 255, 0.25);

    font-size: 29px;

    font-weight: 300;

    line-height: 1;

    transition:

        transform 0.25s ease,

        background 0.25s ease,

        box-shadow 0.25s ease;

    animation:

        comercio-hotspot-movimiento 2s ease-in-out infinite;

}


/* ONDA EXTERIOR */

.hotspot-comercio-plus::before,
.hotspot-comercio-plus::after {

    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.65);

    opacity: 0;

    animation:

        comercio-hotspot-onda 2s ease-out infinite;

}


.hotspot-comercio-plus::after {

    animation-delay: 0.6s;

}


/* ============================================================
   MOVIMIENTO CONSTANTE
============================================================ */

@keyframes comercio-hotspot-movimiento {

    0%,
    100% {

        transform:

            translate3d(0, 0, 0)

            scale(1);

    }


    20% {

        transform:

            translate3d(-1px, 0, 0)

            scale(1.025);

    }


    40% {

        transform:

            translate3d(1px, -1px, 0)

            scale(1.035);

    }


    60% {

        transform:

            translate3d(-1px, 1px, 0)

            scale(1.025);

    }


    80% {

        transform:

            translate3d(1px, 0, 0)

            scale(1.015);

    }

}


/* ============================================================
   ONDAS
============================================================ */

@keyframes comercio-hotspot-onda {

    0% {

        opacity: 0.62;

        transform: scale(0.88);

    }


    75% {

        opacity: 0;

        transform: scale(1.55);

    }


    100% {

        opacity: 0;

        transform: scale(1.55);

    }

}


/* ============================================================
   NOMBRE DEBAJO DEL PUNTO
============================================================ */

.hotspot-comercio small {

    max-width: 105px;

    padding: 6px 10px;

    border-radius: 7px;

    color: #17253d;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.8);

    box-shadow: 0 5px 15px rgba(15, 30, 55, 0.15);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 720;

    white-space: nowrap;

    backdrop-filter: blur(6px);

}


/* ============================================================
   HOVER
============================================================ */

.hotspot-comercio:hover .hotspot-comercio-plus {

    transform: scale(1.09);

    background:

        linear-gradient(
            145deg,
            #4f7fd2,
            #3265ba
        );

    box-shadow:

        0 10px 27px rgba(16, 49, 101, 0.32),

        inset 0 1px 2px rgba(255, 255, 255, 0.25);

}


/* ============================================================
   PUNTO ACTIVO
============================================================ */

.hotspot-comercio.activo {

    z-index: 13;

}


.hotspot-comercio.activo .hotspot-comercio-plus {

    background:

        linear-gradient(
            145deg,
            #3265ba,
            #234f9f
        );

    box-shadow:

        0 0 0 7px rgba(255, 255, 255, 0.18),

        0 10px 29px rgba(13, 38, 78, 0.34);

}


/* ============================================================
   OSCURECIMIENTO AL ABRIR
============================================================ */

.comercio-interactivo-sombra {

    position: absolute;

    inset: 0;

    z-index: 20;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:

        rgba(9, 18, 34, 0.66);

    backdrop-filter: blur(2px);

    transition:

        opacity 0.3s ease,

        visibility 0.3s ease;

}


.comercio-interactivo-sombra.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* ============================================================
   FICHA EMERGENTE
============================================================ */

.comercio-ficha {

    position: absolute;

    z-index: 30;

    left: 50%;
    top: 50%;

    width: min(780px, calc(100% - 50px));

    max-height: calc(100% - 50px);

    overflow-y: auto;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.985);

    border: 1px solid rgba(255, 255, 255, 0.8);

    box-shadow:

        0 32px 85px rgba(0, 0, 0, 0.32);

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform:

        translate(-50%, -46%)

        scale(0.96);

    transition:

        opacity 0.28s ease,

        visibility 0.28s ease,

        transform 0.28s ease;

}


.comercio-ficha.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:

        translate(-50%, -50%)

        scale(1);

}


/* ============================================================
   BOTÓN CERRAR
============================================================ */

.comercio-ficha-cerrar {

    position: absolute;

    z-index: 5;

    right: 17px;
    top: 17px;

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border: 1px solid #e0e6ee;

    border-radius: 50%;

    color: #526078;

    background: rgba(255, 255, 255, 0.95);

    cursor: pointer;

    font-size: 16px;

    transition:

        color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}


.comercio-ficha-cerrar:hover {

    color: #173968;

    background: #eef3fa;

    transform: rotate(5deg);

}


/* ============================================================
   GRID FICHA
============================================================ */

.comercio-ficha-grid {

    display: grid;

    grid-template-columns: 0.88fr 1.12fr;

    min-height: 410px;

}


/* ============================================================
   IMAGEN PRODUCTO
============================================================ */

.comercio-ficha-imagen {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 45px 32px;

    overflow: hidden;

    border-radius: 21px 0 0 21px;

    background:

        radial-gradient(
            circle at center,
            #ffffff 0%,
            #edf3fa 62%,
            #e5edf6 100%
        );

}


.comercio-ficha-imagen img {

    width: 100%;

    max-width: 290px;

    max-height: 290px;

    object-fit: contain;

    filter: drop-shadow(
        0 18px 20px rgba(24, 42, 72, 0.15)
    );

}


/* ============================================================
   INFORMACIÓN FICHA
============================================================ */

.comercio-ficha-contenido {

    padding:

        50px

        46px

        42px

        39px;

}


.comercio-ficha-etiqueta {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--comercio-azul);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.1em;

}


.comercio-ficha-contenido h3 {

    margin: 0 0 24px;

    color: var(--comercio-oscuro);

    font-size: clamp(25px, 3vw, 32px);

    line-height: 1.15;

    letter-spacing: -0.025em;

}


.comercio-ficha-bloque {

    margin-bottom: 19px;

}


.comercio-ficha-bloque > strong {

    display: block;

    margin-bottom: 7px;

    color: #25324a;

    font-size: 13px;

}


.comercio-ficha-bloque p {

    margin: 0;

    color: #616c7f;

    font-size: 13px;

    line-height: 1.65;

}


.comercio-ficha-bloque ul {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.comercio-ficha-bloque li {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color: #566177;

    font-size: 12px;

    line-height: 1.45;

}


.comercio-ficha-bloque li i {

    margin-top: 2px;

    color: #2f9b6d;

    font-size: 11px;

}


/* ============================================================
   BOTÓN FICHA
============================================================ */

.comercio-ficha-boton {

    width: fit-content;

    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 5px;

    padding: 11px 17px;

    border-radius: 9px;

    color: #ffffff;

    background: var(--comercio-azul);

    border: 1px solid var(--comercio-azul);

    font-size: 12px;

    font-weight: 700;

    box-shadow: 0 9px 20px rgba(36, 89, 184, 0.17);

}


.comercio-ficha-boton:hover {

    color: #ffffff;

    background: #1f50a8;

}


/* ============================================================
   INDICACIÓN INFERIOR
============================================================ */

.comercio-interactivo-ayuda {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 55px;

    padding: 12px 20px;

    color: #677287;

    background: #ffffff;

    border-top: 1px solid #e0e7ef;

    font-size: 12px;

}


.comercio-interactivo-ayuda i {

    color: var(--comercio-azul);

}


.comercio-interactivo-ayuda strong {

    color: var(--comercio-azul);

}


/* ============================================================
   ============================================================
   SEGURIDAD PENSADA PARA TU NEGOCIO
   ============================================================
============================================================ */

.comercio-soluciones {

    position: relative;

    overflow: hidden;

    padding:

        clamp(80px, 8vw, 115px)

        0;

    background:

        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 100%
        );

}


.comercio-soluciones .encabezado-seccion {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 44px;

}


.comercio-soluciones-grid {

    display: grid;

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

    gap: 24px;

}


/* ============================================================
   TARJETA SOLUCIÓN
============================================================ */

.comercio-solucion-card {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #dee6ef;

    box-shadow: 0 15px 37px rgba(30, 50, 82, 0.075);

    transition:

        transform 0.28s ease,

        box-shadow 0.28s ease,

        border-color 0.28s ease;

}


.comercio-solucion-card:hover {

    transform: translateY(-5px);

    border-color: rgba(36, 89, 184, 0.2);

    box-shadow: 0 21px 45px rgba(30, 50, 82, 0.12);

}


/* ============================================================
   IMAGEN
============================================================ */

.comercio-solucion-imagen {

    position: relative;

    height: 225px;

    overflow: hidden;

    background: #edf1f5;

}


.comercio-solucion-imagen::after {

    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 45%;

    background:

        linear-gradient(
            transparent,
            rgba(16, 29, 51, 0.18)
        );

    pointer-events: none;

}


.comercio-solucion-imagen img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.55s ease;

}


.comercio-solucion-card:hover .comercio-solucion-imagen img {

    transform: scale(1.035);

}


/* ============================================================
   CONTENIDO
============================================================ */

.comercio-solucion-contenido {

    position: relative;

    padding: 27px 25px 29px;

}


.comercio-solucion-numero {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    padding: 5px 9px;

    border-radius: 6px;

    color: var(--comercio-azul);

    background: var(--comercio-azul-suave);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.07em;

}


.comercio-solucion-contenido h3 {

    margin: 0 0 12px;

    color: var(--comercio-oscuro);

    font-size: 20px;

    line-height: 1.28;

    font-weight: 730;

}


.comercio-solucion-contenido > p {

    margin: 0 0 20px;

    color: var(--comercio-texto);

    font-size: 13px;

    line-height: 1.68;

}


.comercio-solucion-contenido ul {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 0;

    padding: 18px 0 0;

    border-top: 1px solid #edf0f4;

    list-style: none;

}


.comercio-solucion-contenido li {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #5c687b;

    font-size: 12px;

}


.comercio-solucion-contenido li i {

    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #25865d;

    background: #eaf7f1;

    font-size: 9px;

}


/* ============================================================
   ============================================================
   PUNTOS CRÍTICOS
   ============================================================
============================================================ */

.comercio-puntos {

    padding:

        clamp(80px, 8vw, 115px)

        0;

    background: #ffffff;

}


.comercio-puntos .encabezado-seccion {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 45px;

}


.comercio-puntos-grid {

    display: grid;

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

    gap: 23px;

}


/* ============================================================
   TARJETA PUNTOS
============================================================ */

.comercio-punto-card {

    overflow: hidden;

    border-radius: 19px;

    background: #ffffff;

    border: 1px solid #dfe6ef;

    box-shadow: 0 12px 32px rgba(29, 48, 80, 0.07);

    transition:

        transform 0.28s ease,

        box-shadow 0.28s ease,

        border-color 0.28s ease;

}


.comercio-punto-card:hover {

    transform: translateY(-5px);

    border-color: rgba(36, 89, 184, 0.2);

    box-shadow: 0 20px 40px rgba(29, 48, 80, 0.115);

}


/* ============================================================
   FOTO
============================================================ */

.comercio-punto-imagen {

    position: relative;

    height: 205px;

    overflow: hidden;

    background: #eef2f6;

}


.comercio-punto-imagen img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;

}


.comercio-punto-card:hover .comercio-punto-imagen img {

    transform: scale(1.035);

}


/* ============================================================
   CUERPO
============================================================ */

.comercio-punto-cuerpo {

    position: relative;

    padding: 26px 24px 28px;

}


.comercio-punto-icono {

    position: absolute;

    right: 21px;
    top: -21px;

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: var(--comercio-azul);

    background: #ffffff;

    border: 1px solid #e0e7ef;

    box-shadow: 0 8px 20px rgba(31, 49, 78, 0.12);

    font-size: 16px;

}


.comercio-punto-cuerpo h3 {

    margin: 0 0 10px;

    padding-right: 35px;

    color: var(--comercio-oscuro);

    font-size: 19px;

    font-weight: 730;

}


.comercio-punto-cuerpo p {

    margin: 0;

    color: var(--comercio-texto);

    font-size: 13px;

    line-height: 1.65;

}


/* ============================================================
   COLORES NATURALES DE LOS ICONOS
============================================================ */

.comercio-punto-card:nth-child(1)
.comercio-punto-icono {

    color: #2768ba;

}


.comercio-punto-card:nth-child(2)
.comercio-punto-icono {

    color: #2a7a65;

}


.comercio-punto-card:nth-child(3)
.comercio-punto-icono {

    color: #9a6c32;

}


.comercio-punto-card:nth-child(4)
.comercio-punto-icono {

    color: #5868ad;

}


.comercio-punto-card:nth-child(5)
.comercio-punto-icono {

    color: #65728b;

}


.comercio-punto-card:nth-child(6)
.comercio-punto-icono {

    color: #315f9d;

}


/* ============================================================
   ============================================================
   MOMENTOS DEL NEGOCIO
   ============================================================
============================================================ */

.comercio-momentos {

    padding:

        clamp(80px, 8vw, 110px)

        0;

    background:

        linear-gradient(
            180deg,
            #f6f8fb 0%,
            #edf2f8 100%
        );

}


.comercio-momentos .encabezado-seccion {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 43px;

}


.comercio-momentos-grid {

    max-width: 1050px;

    margin: 0 auto;

    display: grid;

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

    gap: 20px;

}


/* ============================================================
   TARJETA MOMENTO
============================================================ */

.comercio-momento {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-height: 290px;

    padding: 30px 27px;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid #dce5ef;

    box-shadow: 0 11px 30px rgba(34, 52, 82, 0.065);

    transition:

        transform 0.28s ease,

        box-shadow 0.28s ease,

        border-color 0.28s ease;

}


.comercio-momento:hover {

    transform: translateY(-4px);

    border-color: rgba(36, 89, 184, 0.19);

    box-shadow: 0 17px 35px rgba(34, 52, 82, 0.105);

}


/* ============================================================
   ICONO MOMENTO
============================================================ */

.comercio-momento-icono {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 24px;

    border-radius: 13px;

    color: var(--comercio-azul);

    background: #edf3fc;

    border: 1px solid #dae5f3;

    font-size: 18px;

}


.comercio-momento-contenido span {

    display: block;

    margin-bottom: 7px;

    color: var(--comercio-azul);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.1em;

}


.comercio-momento-contenido h3 {

    margin: 0 0 12px;

    color: var(--comercio-oscuro);

    font-size: 19px;

    line-height: 1.3;

}


.comercio-momento-contenido p {

    margin: 0;

    color: var(--comercio-texto);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   ============================================================
   CTA FINAL
   ============================================================
============================================================ */

.comercio-cta {

    position: relative;

    overflow: hidden;

    padding:

        clamp(70px, 7vw, 100px)

        0;

    background:

        linear-gradient(
            125deg,
            #173768 0%,
            #204d91 55%,
            #2c5ca8 100%
        );

}


.comercio-cta::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -160px;
    top: -210px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.09);

}


.comercio-cta::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -100px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.035);

}


.comercio-cta .contenedor {

    position: relative;

    z-index: 2;

}


.comercio-cta .cta-rubro-contenido {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 45px;

}


.comercio-cta .etiqueta-clara {

    display: inline-block;

    margin-bottom: 10px;

    color: #d7e6ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.11em;

}


.comercio-cta h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(29px, 4vw, 42px);

    line-height: 1.15;

}


.comercio-cta p {

    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.79);

    font-size: 14px;

    line-height: 1.7;

}


.comercio-cta .cta-rubro-botones {

    flex-shrink: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

}


/* ============================================================
   BOTÓN PRINCIPAL CTA
============================================================ */

.comercio-cta .btn-cta-rubro {

    min-height: 47px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 12px 19px;

    border-radius: 9px;

    color: #173768;

    background: #ffffff;

    border: 1px solid #ffffff;

    font-size: 13px;

    font-weight: 750;

    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.12);

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}


.comercio-cta .btn-cta-rubro:hover {

    color: #173768;

    transform: translateY(-2px);

    box-shadow: 0 14px 31px rgba(0, 0, 0, 0.17);

}


/* ============================================================
   BOTÓN SECUNDARIO CTA
============================================================ */

.comercio-cta .btn-cta-rubro-secundario {

    min-height: 47px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 19px;

    border-radius: 9px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.38);

    font-size: 13px;

    font-weight: 700;

    transition:

        background 0.25s ease,

        transform 0.25s ease,

        border-color 0.25s ease;

}


.comercio-cta .btn-cta-rubro-secundario:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.13);

    border-color: rgba(255, 255, 255, 0.65);

    transform: translateY(-2px);

}


/* ============================================================
   ============================================================
   RESPONSIVE - TABLET
   ============================================================
============================================================ */

@media (max-width: 1050px) {


    /* HERO */

    .comercio-hero-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .comercio-hero-contenido {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;

    }


    .comercio-hero-contenido > p {

        margin-left: auto;
        margin-right: auto;

    }


    .comercio-hero-botones,
    .comercio-confianza {

        justify-content: center;

    }


    .comercio-panel {

        margin: 0 auto;

    }


    /* INTERACTIVO */

    .comercio-escena {

        min-height: 560px;

    }


    /* SOLUCIONES */

    .comercio-soluciones-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .comercio-solucion-card:last-child {

        grid-column: 1 / -1;

        width: min(520px, 100%);

        margin: 0 auto;

    }


    /* PUNTOS */

    .comercio-puntos-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    /* MOMENTOS */

    .comercio-momentos-grid {

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

    }


    /* CTA */

    .comercio-cta .cta-rubro-contenido {

        flex-direction: column;

        text-align: center;

    }


    .comercio-cta p {

        margin-left: auto;
        margin-right: auto;

    }


    .comercio-cta .cta-rubro-botones {

        justify-content: center;

    }

}


/* ============================================================
   RESPONSIVE - TABLET PEQUEÑA
============================================================ */

@media (max-width: 820px) {


    /* HERO */

    .comercio-hero {

        padding-top: 70px;

    }


    .comercio-hero-contenido h1 {

        font-size: clamp(37px, 8vw, 51px);

    }


    /* INTERACTIVO */

    .comercio-interactivo-marco {

        border-radius: 19px;

    }


    .comercio-escena {

        min-height: 500px;

    }


    .hotspot-comercio-plus {

        width: 50px;
        height: 50px;

        font-size: 25px;

    }


    .hotspot-comercio small {

        font-size: 10px;

    }


    /* FICHA */

    .comercio-ficha {

        width: min(650px, calc(100% - 30px));

        max-height: calc(100% - 30px);

    }


    .comercio-ficha-grid {

        grid-template-columns: 0.85fr 1.15fr;

    }


    .comercio-ficha-imagen {

        padding: 35px 22px;

    }


    .comercio-ficha-contenido {

        padding: 44px 31px 34px;

    }


    /* MOMENTOS */

    .comercio-momentos-grid {

        grid-template-columns: 1fr;

        max-width: 620px;

    }


    .comercio-momento {

        min-height: auto;

        text-align: center;

        align-items: center;

    }

}


/* ============================================================
   ============================================================
   RESPONSIVE - CELULAR
   ============================================================
============================================================ */

@media (max-width: 650px) {


    /* ========================================================
       HERO
    ======================================================== */

    .comercio-hero {

        padding:

            55px

            0

            70px;

    }


    .comercio-hero-grid {

        gap: 36px;

    }


    .comercio-hero-contenido {

        text-align: center;

    }


    .comercio-hero-contenido .breadcrumb {

        justify-content: center;

    }


    .comercio-hero-contenido .etiqueta-seccion {

        margin-left: auto;
        margin-right: auto;

    }


    .comercio-hero-contenido h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

    }


    .comercio-hero-contenido > p {

        font-size: 15px;

        line-height: 1.7;

    }


    .comercio-hero-botones {

        flex-direction: column;

        width: 100%;

    }


    .comercio-hero-botones .btn {

        width: min(100%, 330px);

    }


    .comercio-confianza {

        flex-direction: column;

        align-items: center;

        gap: 11px;

    }


    /* ========================================================
       PANEL HERO
    ======================================================== */

    .comercio-panel {

        padding: 17px;

        border-radius: 18px;

    }


    .comercio-panel-superior {

        align-items: flex-start;

    }


    .comercio-panel-superior strong {

        font-size: 16px;

    }


    .local-mapa {

        min-height: 245px;

        gap: 8px;

        padding: 9px;

    }


    .local-zona {

        padding: 13px 7px;

    }


    .local-zona i {

        width: 34px;
        height: 34px;

    }


    .comercio-panel-items {

        grid-template-columns: 1fr;

    }


    /* ========================================================
       INTERACTIVO
    ======================================================== */

    .comercio-interactivo {

        padding:

            70px

            0;

    }


    .comercio-interactivo .encabezado-seccion {

        margin-bottom: 30px;

    }


    .comercio-interactivo-marco {

        border-radius: 15px;

    }


    .comercio-escena {

        min-height: 470px;

    }


    .comercio-escena-imagen {

        object-position: center;

    }


    /* HOTSPOTS */

    .hotspot-comercio-plus {

        width: 42px;
        height: 42px;

        border-width: 3px;

        font-size: 21px;

    }


    .hotspot-comercio small {

        display: none;

    }


    /* ========================================================
       FICHA EN CELULAR
    ======================================================== */

    .comercio-ficha {

        width: calc(100% - 22px);

        max-height: calc(100% - 22px);

        border-radius: 16px;

    }


    .comercio-ficha-grid {

        display: block;

        min-height: 0;

    }


    .comercio-ficha-imagen {

        height: 195px;

        padding: 25px;

        border-radius: 16px 16px 0 0;

    }


    .comercio-ficha-imagen img {

        max-width: 180px;
        max-height: 160px;

    }


    .comercio-ficha-contenido {

        padding:

            28px

            23px

            27px;

        text-align: center;

    }


    .comercio-ficha-etiqueta {

        margin-bottom: 7px;

    }


    .comercio-ficha-contenido h3 {

        margin-bottom: 18px;

        font-size: 24px;

    }


    .comercio-ficha-bloque {

        text-align: left;

    }


    .comercio-ficha-boton {

        width: 100%;

    }


    .comercio-ficha-cerrar {

        width: 35px;
        height: 35px;

        right: 11px;
        top: 11px;

    }


    .comercio-interactivo-ayuda {

        padding: 13px 15px;

        text-align: center;

        line-height: 1.4;

    }


    /* ========================================================
       SOLUCIONES
    ======================================================== */

    .comercio-soluciones {

        padding:

            70px

            0;

    }


    .comercio-soluciones-grid {

        grid-template-columns: 1fr;

        gap: 19px;

    }


    .comercio-solucion-card:last-child {

        grid-column: auto;

        width: 100%;

    }


    .comercio-solucion-imagen {

        height: 210px;

    }


    .comercio-solucion-contenido {

        padding: 24px 21px 26px;

        text-align: center;

    }


    .comercio-solucion-contenido ul {

        align-items: flex-start;

        text-align: left;

    }


    /* ========================================================
       PUNTOS CRÍTICOS
    ======================================================== */

    .comercio-puntos {

        padding:

            70px

            0;

    }


    .comercio-puntos-grid {

        grid-template-columns: 1fr;

        gap: 19px;

    }


    .comercio-punto-imagen {

        height: 220px;

    }


    .comercio-punto-cuerpo {

        text-align: center;

        padding: 27px 21px;

    }


    .comercio-punto-cuerpo h3 {

        padding-right: 0;

    }


    .comercio-punto-icono {

        left: 50%;
        right: auto;

        transform: translateX(-50%);

    }


    /* ========================================================
       MOMENTOS
    ======================================================== */

    .comercio-momentos {

        padding:

            70px

            0;

    }


    .comercio-momento {

        padding: 27px 22px;

    }


    /* ========================================================
       CTA
    ======================================================== */

    .comercio-cta {

        padding:

            65px

            0;

    }


    .comercio-cta .cta-rubro-contenido {

        gap: 28px;

        text-align: center;

    }


    .comercio-cta h2 {

        font-size: 30px;

    }


    .comercio-cta .cta-rubro-botones {

        width: 100%;

        flex-direction: column;

        align-items: center;

    }


    .comercio-cta .btn-cta-rubro,
    .comercio-cta .btn-cta-rubro-secundario {

        width: min(100%, 320px);

    }

}


/* ============================================================
   CELULARES PEQUEÑOS
============================================================ */

@media (max-width: 430px) {


    .comercio-escena {

        min-height: 420px;

    }


    .hotspot-comercio-plus {

        width: 38px;
        height: 38px;

        font-size: 19px;

    }


    .comercio-ficha-imagen {

        height: 165px;

    }


    .comercio-ficha-imagen img {

        max-height: 135px;

    }


    .comercio-ficha-contenido {

        padding:

            24px

            19px

            23px;

    }


    .comercio-ficha-contenido h3 {

        font-size: 21px;

    }


    .comercio-punto-imagen,
    .comercio-solucion-imagen {

        height: 195px;

    }

}


/* ============================================================
   ACCESIBILIDAD - REDUCIR MOVIMIENTO
============================================================ */

@media (prefers-reduced-motion: reduce) {


    .hotspot-comercio-plus,
    .hotspot-comercio-plus::before,
    .hotspot-comercio-plus::after {

        animation: none;

    }


    .comercio-solucion-card,
    .comercio-punto-card,
    .comercio-momento,
    .local-zona {

        transition: none;

    }

}
/* ============================================================
   ============================================================
   TIENDAS Y LOCALES
   FICHA INTERACTIVA PROFESIONAL
   ESTILO SIMILAR A CASAS
   ============================================================
   ============================================================ */


/* ============================================================
   FICHA PRINCIPAL
============================================================ */

.comercio-ficha {

    position: absolute;

    z-index: 40;

    left: 50%;
    top: 50%;

    width: min(840px, calc(100% - 50px));

    max-height: calc(100% - 45px);

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(220, 228, 238, 0.95);

    box-shadow:
        0 35px 90px rgba(8, 25, 50, 0.30),
        0 8px 28px rgba(8, 25, 50, 0.12);

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -46%)
        scale(0.96);

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease;

}


/* ============================================================
   FICHA ABIERTA
============================================================ */

.comercio-ficha.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);

}


/* ============================================================
   DISTRIBUCIÓN
============================================================ */

.comercio-ficha-grid {

    display: grid;

    grid-template-columns:
        minmax(310px, 0.9fr)
        minmax(0, 1.1fr);

    min-height: 465px;

}


/* ============================================================
   LADO IZQUIERDO - IMAGEN
============================================================ */

.comercio-ficha-imagen {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 465px;

    padding: 45px 35px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            #ffffff 0%,
            #f0f5fb 52%,
            #e7eef7 100%
        );

    border-right: 1px solid #e1e8f1;

}


/* CÍRCULO SUAVE DETRÁS DEL PRODUCTO */

.comercio-ficha-imagen::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(230, 238, 249, 0.55) 70%,
            transparent 71%
        );

}


/* PRODUCTO */

.comercio-ficha-imagen img {

    position: relative;

    z-index: 2;

    display: block;

    width: auto;
    height: auto;

    max-width: 290px;
    max-height: 290px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 23px rgba(20, 42, 76, 0.16)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

}


/* PEQUEÑO EFECTO */

.comercio-ficha:hover
.comercio-ficha-imagen img {

    transform: translateY(-3px);

    filter:
        drop-shadow(
            0 24px 27px rgba(20, 42, 76, 0.19)
        );

}


/* ============================================================
   LADO DERECHO
============================================================ */

.comercio-ficha-contenido {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        50px
        48px
        43px;

    background: #ffffff;

}


/* ============================================================
   ETIQUETA SUPERIOR
============================================================ */

.comercio-ficha-etiqueta {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin: 0 0 10px;

    color: #285aae;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


/* PEQUEÑA LÍNEA */

.comercio-ficha-etiqueta::before {

    content: "";

    width: 21px;
    height: 2px;

    margin-right: 9px;

    border-radius: 20px;

    background: #3f72c9;

}


/* ============================================================
   TÍTULO
============================================================ */

.comercio-ficha-contenido h3 {

    margin: 0 0 26px;

    color: #17243a;

    font-size: clamp(27px, 3vw, 35px);

    line-height: 1.12;

    letter-spacing: -0.035em;

    font-weight: 750;

}


/* ============================================================
   BLOQUES
============================================================ */

.comercio-ficha-bloque {

    margin: 0 0 23px;

}


.comercio-ficha-bloque > strong {

    display: block;

    margin-bottom: 9px;

    color: #253248;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 750;

}


.comercio-ficha-bloque p {

    margin: 0;

    color: #566176;

    font-size: 13.5px;

    line-height: 1.72;

}


/* ============================================================
   LISTA DE FUNCIONES
============================================================ */

.comercio-ficha-bloque ul {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ============================================================
   CADA FUNCIÓN
============================================================ */

.comercio-ficha-bloque li {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #4f5b70;

    font-size: 13px;

    line-height: 1.45;

}


/* ============================================================
   CHECK VERDE TIPO CASAS
============================================================ */

.comercio-ficha-bloque li i {

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    border-radius: 50%;

    color: #ffffff;

    background: #2ea46f;

    box-shadow:
        0 5px 12px rgba(46, 164, 111, 0.18);

    font-size: 9px;

}


/* TEXTO DEL CHECK */

.comercio-ficha-bloque li span {

    display: block;

}


/* ============================================================
   BOTÓN PRINCIPAL
============================================================ */

.comercio-ficha-boton {

    width: fit-content;

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 3px;

    padding: 13px 21px;

    border: 1px solid #275bc2;

    border-radius: 11px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #3269d2 0%,
            #2457bc 100%
        );

    font-size: 13px;

    line-height: 1;

    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 11px 24px rgba(37, 88, 189, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


/* FLECHA */

.comercio-ficha-boton i {

    color: #ffffff !important;

    font-size: 12px;

    transition:
        transform 0.25s ease;

}


/* HOVER BOTÓN */

.comercio-ficha-boton:hover {

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #285fc5 0%,
            #1f4fae 100%
        );

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(37, 88, 189, 0.28);

}


.comercio-ficha-boton:hover i {

    transform: translateX(3px);

}


/* ============================================================
   BOTÓN CERRAR
============================================================ */

.comercio-ficha-cerrar {

    position: absolute;

    z-index: 10;

    right: 17px;
    top: 17px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid #dce4ee;

    border-radius: 50%;

    color: #253248;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 5px 15px rgba(25, 45, 75, 0.07);

    cursor: pointer;

    font-size: 16px;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;

}


.comercio-ficha-cerrar:hover {

    color: #2457bc;

    background: #f2f6fc;

    box-shadow:
        0 7px 18px rgba(25, 45, 75, 0.12);

    transform: rotate(5deg);

}


/* ============================================================
   FONDO OSCURO CUANDO SE ABRE
============================================================ */

.comercio-interactivo-sombra {

    position: absolute;

    inset: 0;

    z-index: 20;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:
        rgba(8, 19, 36, 0.70);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


.comercio-interactivo-sombra.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 850px) {

    .comercio-ficha {

        width: min(720px, calc(100% - 30px));

    }


    .comercio-ficha-grid {

        grid-template-columns:
            minmax(250px, 0.85fr)
            minmax(0, 1.15fr);

    }


    .comercio-ficha-imagen {

        min-height: 430px;

        padding: 35px 25px;

    }


    .comercio-ficha-imagen img {

        max-width: 235px;
        max-height: 250px;

    }


    .comercio-ficha-contenido {

        padding:
            48px
            32px
            34px;

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 650px) {

    .comercio-ficha {

        width: calc(100% - 22px);

        max-height: calc(100% - 22px);

        overflow-y: auto;

        border-radius: 19px;

    }


    .comercio-ficha-grid {

        display: block;

        min-height: 0;

    }


    /* IMAGEN */

    .comercio-ficha-imagen {

        min-height: 215px;

        padding: 26px 25px;

        border-right: 0;

        border-bottom: 1px solid #e1e8f1;

    }


    .comercio-ficha-imagen::before {

        width: 190px;
        height: 190px;

    }


    .comercio-ficha-imagen img {

        max-width: 175px;
        max-height: 170px;

    }


    /* CONTENIDO */

    .comercio-ficha-contenido {

        align-items: center;

        padding:
            29px
            23px
            27px;

        text-align: center;

    }


    .comercio-ficha-etiqueta {

        margin-left: auto;
        margin-right: auto;

    }


    .comercio-ficha-contenido h3 {

        margin-bottom: 22px;

        font-size: 25px;

    }


    /* BLOQUES */

    .comercio-ficha-bloque {

        width: 100%;

        text-align: left;

    }


    .comercio-ficha-bloque > strong {

        text-align: center;

    }


    .comercio-ficha-bloque p {

        text-align: center;

    }


    /* CHECKS */

    .comercio-ficha-bloque ul {

        width: fit-content;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

    }


    /* BOTÓN */

    .comercio-ficha-boton {

        width: min(100%, 310px);

        margin-left: auto;
        margin-right: auto;

    }


    /* CERRAR */

    .comercio-ficha-cerrar {

        width: 37px;
        height: 37px;

        right: 11px;
        top: 11px;

        font-size: 14px;

    }

}


/* ============================================================
   CELULARES PEQUEÑOS
============================================================ */

@media (max-width: 430px) {

    .comercio-ficha-imagen {

        min-height: 180px;

        padding: 22px;

    }


    .comercio-ficha-imagen img {

        max-width: 145px;
        max-height: 145px;

    }


    .comercio-ficha-contenido {

        padding:
            25px
            18px
            22px;

    }


    .comercio-ficha-contenido h3 {

        font-size: 22px;

    }


    .comercio-ficha-bloque p,
    .comercio-ficha-bloque li {

        font-size: 12.5px;

    }

}
/* ============================================================
   CHECKS - AZUL SUAVE COMO EN CASAS
============================================================ */

.comercio-ficha-bloque li i {

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: inline-flex;

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

    margin: 0;

    border-radius: 50%;

    /* FONDO AZUL SUAVE */
    background: #eaf2ff;

    /* CHECK AZUL */
    color: #3269c8;

    border: 1px solid rgba(50, 105, 200, 0.12);

    box-shadow:
        0 4px 10px rgba(50, 105, 200, 0.10);

    font-size: 9px;
    font-weight: 800;

}
/* ============================================================
   TIENDAS Y LOCALES
   TARJETAS DE SOLUCIONES - AJUSTE FINAL
============================================================ */

/* TARJETAS */
.comercio-solucion-card {
    border-radius: 18px;
    overflow: hidden;
}

/* IMAGEN MÁS NORMAL, NO TAN ALTA */
.comercio-solucion-imagen {
    height: 185px; /* antes estaba más alta */
    overflow: hidden;
    background: #eef3f8;
}

.comercio-solucion-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.comercio-solucion-card:hover .comercio-solucion-imagen img {
    transform: scale(1.03);
}

/* CONTENIDO */
.comercio-solucion-contenido {
    padding: 22px 22px 24px;
}

.comercio-solucion-contenido h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.3;
}

.comercio-solucion-contenido > p {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.65;
}

/* CHECKS AZUL SUAVE */
.comercio-solucion-contenido li i {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef5ff;
    color: #326fd1;
    border: 1px solid #d8e6fb;
    box-shadow: 0 3px 8px rgba(50, 111, 209, 0.08);
    font-size: 8px;
    font-weight: 800;
}

/* LISTA */
.comercio-solucion-contenido ul {
    gap: 10px;
    padding-top: 15px;
}

.comercio-solucion-contenido li {
    font-size: 12.5px;
    line-height: 1.45;
}

/* TABLET */
@media (max-width: 900px) {
    .comercio-solucion-imagen {
        height: 170px;
    }
}

/* CELULAR */
@media (max-width: 650px) {
    .comercio-solucion-imagen {
        height: 160px;
    }

    .comercio-solucion-contenido {
        padding: 20px 18px 22px;
    }
}
/* ============================================================
   TIENDAS Y LOCALES - OCULTAR NÚMEROS 01 / 02 / 03
============================================================ */

.comercio-solucion-numero {
    display: none !important;
}

/* AJUSTE DEL TÍTULO DESPUÉS DE QUITAR LOS NÚMEROS */
.comercio-solucion-contenido h3 {
    margin-top: 0;
}
/* ============================================================
   TIENDAS Y LOCALES
   HERO FINAL - MISMO SISTEMA QUE CASAS
============================================================ */


/* ============================================================
   HERO
============================================================ */

html body > section.comercio-hero,
html body > main > section.comercio-hero {

    position: relative !important;

    min-height: 610px !important;

    display: block !important;

    padding: 0 !important;

    background-image:

        /* DEGRADADO OSCURO IZQUIERDA -> FOTO */
        linear-gradient(
            90deg,

            rgba(7, 24, 48, 0.98) 0%,

            rgba(7, 24, 48, 0.96) 28%,

            rgba(7, 24, 48, 0.82) 42%,

            rgba(7, 24, 48, 0.48) 55%,

            rgba(7, 24, 48, 0.16) 70%,

            rgba(7, 24, 48, 0.03) 100%
        ),

        url("/SEGURIDAD_WEB/assets/img/banner-tiendas-locales.png") !important;

    background-size: cover !important;

    background-position: center 50% !important;

    background-repeat: no-repeat !important;

    overflow: hidden !important;
}


/* ============================================================
   IMPORTANTE
   DESACTIVAMOS LOS PSEUDOELEMENTOS QUE TE DI ANTES
============================================================ */

html body .comercio-hero::before,
html body .comercio-hero::after {

    display: none !important;

    content: none !important;
}


/* ============================================================
   CONTENEDOR
============================================================ */

html body .comercio-hero > .contenedor {

    position: relative !important;

    z-index: 2 !important;
}


/* ============================================================
   GRID
   MISMO COMPORTAMIENTO QUE CASAS
============================================================ */

html body .comercio-hero .comercio-hero-grid {

    display: grid !important;

    grid-template-columns: minmax(0, 900px) !important;

    justify-content: start !important;

    align-items: center !important;

    gap: 0 !important;

    padding-top: 70px !important;

    padding-bottom: 65px !important;

    position: relative !important;

    z-index: 2 !important;
}


/* ============================================================
   OCULTAR PANEL ANTIGUO
============================================================ */

html body .comercio-hero .comercio-hero-visual {

    display: none !important;
}


/* ============================================================
   CONTENIDO
============================================================ */

html body .comercio-hero .comercio-hero-contenido {

    width: 100% !important;

    max-width: 900px !important;

    margin: 0 !important;

    text-align: left !important;
}


/* ============================================================
   BREADCRUMB
============================================================ */

html body .comercio-hero .breadcrumb {

    justify-content: flex-start !important;

    margin-bottom: 24px !important;
}


html body .comercio-hero .breadcrumb,
html body .comercio-hero .breadcrumb a,
html body .comercio-hero .breadcrumb span {

    color: rgba(255, 255, 255, 0.86) !important;

    -webkit-text-fill-color:
        rgba(255, 255, 255, 0.86) !important;
}


html body .comercio-hero .breadcrumb i {

    color: rgba(255, 255, 255, 0.52) !important;
}


/* ============================================================
   ETIQUETA
============================================================ */

html body
.comercio-hero
.comercio-hero-contenido
.etiqueta-seccion {

    display: inline-flex !important;

    align-items: center !important;

    gap: 9px !important;

    margin: 0 0 25px !important;

    padding: 9px 16px !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    background:
        rgba(22, 62, 122, 0.40) !important;

    border:
        1px solid
        rgba(125, 169, 255, 0.48) !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    letter-spacing: 0.07em !important;
}


html body
.comercio-hero
.etiqueta-seccion i {

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   TÍTULO
============================================================ */

html body .comercio-hero h1 {

    max-width: 900px !important;

    margin-top: 18px !important;

    margin-bottom: 22px !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size:
        clamp(
            48px,
            4.3vw,
            66px
        ) !important;

    line-height: 1.04 !important;

    letter-spacing: -1.8px !important;

    font-weight: 800 !important;

    text-shadow:
        0 3px 16px
        rgba(0, 0, 0, 0.25) !important;
}


/* PARTE AZUL */

html body .comercio-hero h1 span {

    display: block !important;

    color: #7da9ff !important;

    -webkit-text-fill-color: #7da9ff !important;

    font-weight: 800 !important;
}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

html body
.comercio-hero
.comercio-hero-contenido > p {

    max-width: 720px !important;

    margin: 0 !important;

    color:
        rgba(255, 255, 255, 0.94) !important;

    -webkit-text-fill-color:
        rgba(255, 255, 255, 0.94) !important;

    font-size: 17px !important;

    line-height: 1.7 !important;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.22) !important;
}


/* ============================================================
   BOTONES
============================================================ */

html body
.comercio-hero
.comercio-hero-botones {

    display: flex !important;

    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    gap: 13px !important;

    margin-top: 30px !important;
}


/* PRINCIPAL */

html body
.comercio-hero
.btn-primario {

    background: #153faf !important;

    border-color: #153faf !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


html body
.comercio-hero
.btn-primario:hover {

    background: #0d318d !important;

    border-color: #0d318d !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}


/* SECUNDARIO */

html body
.comercio-hero
.btn-secundario {

    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #172033 !important;

    -webkit-text-fill-color: #172033 !important;
}


/* ============================================================
   BENEFICIOS INFERIORES
============================================================ */

html body
.comercio-hero
.comercio-confianza {

    justify-content: flex-start !important;

    margin-top: 28px !important;

    color: #ffffff !important;
}


html body
.comercio-hero
.comercio-confianza div {

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


html body
.comercio-hero
.comercio-confianza i {

    color: #7da9ff !important;

    -webkit-text-fill-color: #7da9ff !important;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    html body > section.comercio-hero,
    html body > main > section.comercio-hero {

        background-position:
            58% center !important;
    }


    html body
    .comercio-hero
    .comercio-hero-grid {

        grid-template-columns:
            minmax(0, 760px) !important;
    }


    html body
    .comercio-hero h1 {

        font-size:
            clamp(
                42px,
                6vw,
                56px
            ) !important;
    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 650px) {

    html body > section.comercio-hero,
    html body > main > section.comercio-hero {

        min-height: auto !important;

        background-position:
            62% center !important;

        background-image:

            linear-gradient(
                180deg,

                rgba(7, 24, 48, 0.55) 0%,

                rgba(7, 24, 48, 0.78) 42%,

                rgba(7, 24, 48, 0.96) 78%,

                rgba(7, 24, 48, 1) 100%
            ),

            url("/SEGURIDAD_WEB/assets/img/banner-tiendas-locales.png") !important;
    }


    html body
    .comercio-hero
    .comercio-hero-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        padding-top: 70px !important;

        padding-bottom: 60px !important;
    }


    html body
    .comercio-hero
    .comercio-hero-contenido {

        width: 100% !important;

        max-width: 100% !important;

        text-align: center !important;
    }


    html body
    .comercio-hero
    .breadcrumb {

        justify-content: center !important;
    }


    html body
    .comercio-hero
    .etiqueta-seccion {

        margin-left: auto !important;

        margin-right: auto !important;
    }


    html body
    .comercio-hero h1 {

        font-size:
            clamp(
                35px,
                10vw,
                45px
            ) !important;

        text-align: center !important;
    }


    html body
    .comercio-hero
    .comercio-hero-contenido > p {

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;

        font-size: 15px !important;
    }


    html body
    .comercio-hero
    .comercio-hero-botones {

        justify-content: center !important;
    }


    html body
    .comercio-hero
    .comercio-confianza {

        justify-content: center !important;
    }

}
/* ============================================================
   TIENDAS Y LOCALES
   AJUSTE FINAL DE POSICIÓN DEL HERO
============================================================ */

html body .comercio-hero .comercio-hero-grid {
    padding-top: 125px !important;
    padding-bottom: 65px !important;
}

/* BREADCRUMB BIEN SEPARADO DEL HEADER */
html body .comercio-hero .breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
/* ============================================================
   ============================================================
   EDIFICIOS Y CONDOMINIOS
   INTERACTIVO HORIZONTAL - VERSIÓN FINAL
   ============================================================
   ============================================================ */


/* ============================================================
   SECCIÓN COMPLETA
============================================================ */

html body .edificio-interactivo {

    position: relative;

    padding:
        85px
        0
        95px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #edf5ff 0%,
            #f6f9fd 48%,
            #ffffff 100%
        );

}


/* ============================================================
   CORRECCIÓN PARA EL MENÚ FIJO
   CUANDO SE PRESIONA "VER CÓMO PROTEGEMOS..."
============================================================ */

#edificio-interactivo {

    scroll-margin-top: 95px;

}


/* ============================================================
   ENCABEZADO
============================================================ */

html body
.edificio-interactivo
.encabezado-seccion {

    width: min(760px, 100%);

    margin:
        0
        auto
        42px;

    text-align: center;

}


html body
.edificio-interactivo
.encabezado-seccion .subtitulo {

    display: inline-block;

    margin-bottom: 11px;

    color: #2459b8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.14em;

}


html body
.edificio-interactivo
.encabezado-seccion h2 {

    margin:
        0
        0
        15px;

    color: #243247 !important;

    font-size:
        clamp(
            38px,
            4vw,
            53px
        );

    line-height: 1.08;

    letter-spacing: -0.035em;

    font-weight: 760;

}


html body
.edificio-interactivo
.encabezado-seccion h2 span {

    color: #2459b8 !important;

}


html body
.edificio-interactivo
.encabezado-seccion p {

    max-width: 690px;

    margin:
        0
        auto;

    color: #536176;

    font-size: 15px;

    line-height: 1.7;

}


/* ============================================================
   MARCO PRINCIPAL
   AHORA MÁS GRANDE
============================================================ */

html body
.edificio-interactivo-marco {

    position: relative;

    width:
        min(
            100%,
            1240px
        );

    margin:
        0
        auto;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    border:
        1px solid
        rgba(
            190,
            204,
            221,
            0.72
        );

    box-shadow:
        0 25px 65px
        rgba(
            26,
            49,
            82,
            0.11
        );

}


/* ============================================================
   ESCENA
   PROPORCIÓN DE TU IMAGEN HORIZONTAL
============================================================ */

html body
.edificio-escena {

    position: relative;

    width: 100%;

    /* La imagen es aproximadamente 1024 x 534 */
    aspect-ratio: 1024 / 534;

    min-height: 0 !important;

    overflow: hidden;

    isolation: isolate;

    background: #e8f1fb;

}


/* ============================================================
   IMAGEN DEL EDIFICIO
   NO SE RECORTA
============================================================ */

html body
.edificio-escena-imagen {

    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain !important;

    object-position: center !important;

    background: #e8f1fb;

}


/* ============================================================
   SOMBRA MUY SUAVE SOBRE LA IMAGEN
============================================================ */

html body
.edificio-escena::after {

    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(20, 43, 75, 0.00) 0%,
            rgba(20, 43, 75, 0.015) 65%,
            rgba(20, 43, 75, 0.05) 100%
        );

}


/* ============================================================
   ============================================================
   PUNTOS +
   ============================================================
============================================================ */

html body
.hotspot-edificio {

    position: absolute;

    z-index: 10;

    left: var(--hotspot-x);

    top: var(--hotspot-y);

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

}


/* ============================================================
   POSICIONES PARA ESTA IMAGEN HORIZONTAL
============================================================ */

/* ENTRADA */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(1) {

    --hotspot-x: 57% !important;

    --hotspot-y: 77% !important;

}


/* RECEPCIÓN */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(2) {

    --hotspot-x: 62% !important;

    --hotspot-y: 73% !important;

}


/* ESTACIONAMIENTO */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(3) {

    --hotspot-x: 88% !important;

    --hotspot-y: 78% !important;

}


/* ASCENSORES */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(4) {

    --hotspot-x: 54% !important;

    --hotspot-y: 39% !important;

}


/* PASILLOS */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(5) {

    --hotspot-x: 64% !important;

    --hotspot-y: 51% !important;

}


/* ÁREAS COMUNES */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(6) {

    --hotspot-x: 37% !important;

    --hotspot-y: 72% !important;

}


/* ============================================================
   CÍRCULO +
============================================================ */

html body
.hotspot-edificio-plus {

    position: relative;

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #6592e3 0%,
            #4677cc 100%
        );

    box-shadow:
        0 8px 21px
        rgba(
            27,
            66,
            130,
            0.30
        );

    font-size: 27px;

    font-weight: 400;

    line-height: 1;

    animation:
        edificio-punto-vibracion
        2s
        ease-in-out
        infinite;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


/* ============================================================
   ONDAS DE LOS +
============================================================ */

html body
.hotspot-edificio-plus::before,

html body
.hotspot-edificio-plus::after {

    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border:
        2px solid
        rgba(
            102,
            151,
            231,
            0.55
        );

    opacity: 0;

    pointer-events: none;

    animation:
        edificio-punto-onda
        2s
        ease-out
        infinite;

}


html body
.hotspot-edificio-plus::after {

    animation-delay:
        0.65s;

}


/* ============================================================
   MOVIMIENTO SUAVE
============================================================ */

@keyframes edificio-punto-vibracion {

    0%,
    100% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);

    }

    25% {

        transform:
            translate3d(
                -1px,
                0,
                0
            )
            scale(1.025);

    }

    50% {

        transform:
            translate3d(
                1px,
                -1px,
                0
            )
            scale(1.04);

    }

    75% {

        transform:
            translate3d(
                -1px,
                1px,
                0
            )
            scale(1.025);

    }

}


/* ONDA */

@keyframes edificio-punto-onda {

    0% {

        opacity: 0.55;

        transform:
            scale(0.88);

    }

    75% {

        opacity: 0;

        transform:
            scale(1.55);

    }

    100% {

        opacity: 0;

        transform:
            scale(1.55);

    }

}


/* ============================================================
   ETIQUETA DE CADA PUNTO
============================================================ */

html body
.hotspot-edificio small {

    min-width: max-content;

    padding:
        6px
        11px;

    border-radius: 8px;

    color: #243247 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        1px solid
        rgba(
            214,
            223,
            234,
            0.95
        );

    box-shadow:
        0 6px 18px
        rgba(
            27,
            50,
            82,
            0.15
        );

    font-size: 11px;

    line-height: 1;

    font-weight: 750;

    white-space: nowrap;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

}


/* ============================================================
   HOVER
============================================================ */

html body
.hotspot-edificio:hover
.hotspot-edificio-plus {

    background:
        linear-gradient(
            145deg,
            #5686dc,
            #3869c0
        );

    box-shadow:
        0 10px 26px
        rgba(
            27,
            66,
            130,
            0.38
        );

}


/* ============================================================
   PUNTO ACTIVO
============================================================ */

html body
.hotspot-edificio.activo {

    z-index: 25;

}


html body
.hotspot-edificio.activo
.hotspot-edificio-plus {

    background:
        linear-gradient(
            145deg,
            #3e70c8,
            #2859ad
        );

    box-shadow:
        0 0 0 7px
        rgba(
            78,
            126,
            207,
            0.16
        ),

        0 11px 28px
        rgba(
            28,
            66,
            127,
            0.38
        );

}


/* ============================================================
   ============================================================
   FONDO OSCURO CUANDO ABRE UNA SOLUCIÓN
   ============================================================
============================================================ */

html body
.edificio-interactivo-sombra {

    position: absolute;

    z-index: 30;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:
        rgba(
            13,
            28,
            49,
            0.66
        );

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;

}


html body
.edificio-interactivo-sombra.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* ============================================================
   ============================================================
   FICHA / MODAL
   OCULTA HASTA HACER CLICK
   ============================================================
============================================================ */

html body
.edificio-ficha {

    position: absolute;

    z-index: 40;

    left: 50%;

    top: 50%;

    width:
        min(
            830px,
            calc(
                100% - 50px
            )
        );

    max-height:
        calc(
            100% - 40px
        );

    overflow: hidden;

    border-radius: 23px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background: #ffffff;

    border:
        1px solid
        rgba(
            218,
            227,
            237,
            0.98
        );

    box-shadow:
        0 35px 90px
        rgba(
            8,
            24,
            49,
            0.30
        );

    transform:
        translate(
            -50%,
            -46%
        )
        scale(0.965);

    transition:
        opacity 0.27s ease,
        transform 0.27s ease,
        visibility 0.27s ease;

}


/* MODAL ACTIVO */

html body
.edificio-ficha.activo {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1);

}


/* ============================================================
   INTERIOR DEL MODAL
============================================================ */

html body
.edificio-ficha-grid {

    display: grid;

    grid-template-columns:
        minmax(
            300px,
            0.9fr
        )
        minmax(
            0,
            1.1fr
        );

    min-height: 430px;

}


/* ============================================================
   IMAGEN PRODUCTO
============================================================ */

html body
.edificio-ficha-imagen {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        40px
        30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #ffffff 0%,
            #f1f6fc 55%,
            #e8eff8 100%
        );

    border-right:
        1px solid
        #e1e8f0;

}


/* CÍRCULO SUAVE DETRÁS DEL PRODUCTO */

html body
.edificio-ficha-imagen::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

}


/* PRODUCTO */

html body
.edificio-ficha-imagen img {

    position: relative;

    z-index: 2;

    width: auto;

    height: auto;

    max-width: 275px;

    max-height: 270px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 21px
            rgba(
                27,
                49,
                82,
                0.16
            )
        );

}


/* ============================================================
   CONTENIDO DERECHO
============================================================ */

html body
.edificio-ficha-contenido {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        45px
        43px
        39px;

    background: #ffffff;

}


/* ETIQUETA */

html body
.edificio-ficha-etiqueta {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 10px;

    color: #3167bd;

    font-size: 10.5px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


html body
.edificio-ficha-etiqueta::before {

    content: "";

    width: 20px;

    height: 2px;

    margin-right: 8px;

    border-radius: 10px;

    background: #5685d3;

}


/* ============================================================
   TÍTULO MODAL
============================================================ */

html body
.edificio-ficha-contenido h3 {

    margin:
        0
        0
        23px;

    color: #1d2b40;

    font-size:
        clamp(
            27px,
            3vw,
            34px
        );

    line-height: 1.15;

    letter-spacing: -0.03em;

    font-weight: 760;

}


/* ============================================================
   INFORMACIÓN
============================================================ */

html body
.edificio-ficha-bloque {

    margin-bottom: 20px;

}


html body
.edificio-ficha-bloque > strong {

    display: block;

    margin-bottom: 7px;

    color: #28364b;

    font-size: 13px;

    font-weight: 750;

}


html body
.edificio-ficha-bloque p {

    margin: 0;

    color: #58657a;

    font-size: 13px;

    line-height: 1.65;

}


/* ============================================================
   LISTA DE FUNCIONES
============================================================ */

html body
.edificio-ficha-bloque ul {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 0;

    padding: 0;

    list-style: none;

}


html body
.edificio-ficha-bloque li {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #536176;

    font-size: 12.5px;

    line-height: 1.4;

}


/* ============================================================
   CHECK AZUL SUAVE
============================================================ */

html body
.edificio-ficha-bloque li i {

    width: 21px;

    height: 21px;

    flex:
        0
        0
        21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef5ff;

    color: #326fd1;

    border:
        1px solid
        #d8e6fb;

    box-shadow:
        0 3px 8px
        rgba(
            50,
            111,
            209,
            0.08
        );

    font-size: 8px;

}


/* ============================================================
   BOTÓN DEL MODAL
============================================================ */

html body
.edificio-ficha-boton {

    width: fit-content;

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 2px;

    padding:
        12px
        19px;

    border-radius: 9px;

    color: #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #3269d2,
            #2458bd
        ) !important;

    border:
        1px solid
        #275bc2 !important;

    box-shadow:
        0 10px 23px
        rgba(
            37,
            88,
            189,
            0.22
        );

    font-size: 13px;

    font-weight: 750;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


html body
.edificio-ficha-boton:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 29px
        rgba(
            37,
            88,
            189,
            0.28
        );

}


/* ============================================================
   X DEL MODAL
============================================================ */

html body
.edificio-ficha-cerrar {

    position: absolute;

    z-index: 12;

    top: 16px;

    right: 16px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid
        #dbe4ee;

    color: #26354a;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 5px 15px
        rgba(
            25,
            45,
            75,
            0.09
        );

    cursor: pointer;

    font-size: 15px;

}


/* ============================================================
   FRANJA DE AYUDA INFERIOR
============================================================ */

html body
.edificio-interactivo-ayuda {

    min-height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        13px
        20px;

    color: #667387;

    background: #ffffff;

    border-top:
        1px solid
        #e3e9f0;

    font-size: 12px;

}


html body
.edificio-interactivo-ayuda i {

    color: #3970c6;

}


html body
.edificio-interactivo-ayuda strong {

    color: #326fd1;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    html body
    .edificio-interactivo-marco {

        width:
            min(
                100%,
                930px
            );

    }


    html body
    .hotspot-edificio-plus {

        width: 49px;

        height: 49px;

        font-size: 24px;

    }


    html body
    .hotspot-edificio small {

        font-size: 10px;

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 650px) {

    html body
    .edificio-interactivo {

        padding:
            65px
            0
            75px;

    }


    html body
    .edificio-interactivo
    .encabezado-seccion {

        margin-bottom: 30px;

    }


    html body
    .edificio-interactivo
    .encabezado-seccion h2 {

        font-size: 34px;

    }


    html body
    .edificio-interactivo-marco {

        border-radius: 14px;

    }


    /* IMPORTANTE:
       mantenemos la proporción completa de la imagen */

    html body
    .edificio-escena {

        aspect-ratio:
            1024 / 534;

        min-height: 0 !important;

    }


    html body
    .hotspot-edificio-plus {

        width: 35px;

        height: 35px;

        border-width: 2px;

        font-size: 18px;

    }


    /* En celular quitamos los nombres para
       no tapar demasiado la imagen */

    html body
    .hotspot-edificio small {

        display: none;

    }


    html body
    .edificio-interactivo-ayuda {

        min-height: 52px;

        padding:
            12px
            14px;

        text-align: center;

        line-height: 1.4;

    }


    /* ========================================================
       MODAL CELULAR
    ======================================================== */

    html body
    .edificio-ficha {

        width:
            calc(
                100% - 20px
            );

        max-height:
            calc(
                100% - 20px
            );

        overflow-y: auto;

        border-radius: 17px;

    }


    html body
    .edificio-ficha-grid {

        display: block;

        min-height: 0;

    }


    html body
    .edificio-ficha-imagen {

        min-height: 175px;

        height: 175px;

        padding: 22px;

        border-right: 0;

        border-bottom:
            1px solid
            #e1e8f0;

    }


    html body
    .edificio-ficha-imagen::before {

        width: 165px;

        height: 165px;

    }


    html body
    .edificio-ficha-imagen img {

        max-width: 155px;

        max-height: 140px;

    }


    html body
    .edificio-ficha-contenido {

        padding:
            27px
            20px
            24px;

        text-align: center;

    }


    html body
    .edificio-ficha-etiqueta {

        margin-left: auto;

        margin-right: auto;

    }


    html body
    .edificio-ficha-contenido h3 {

        font-size: 24px;

    }


    html body
    .edificio-ficha-bloque {

        width: 100%;

    }


    html body
    .edificio-ficha-bloque ul {

        width: fit-content;

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

        text-align: left;

    }


    html body
    .edificio-ficha-boton {

        width:
            min(
                100%,
                310px
            );

        margin-left: auto;

        margin-right: auto;

    }


    html body
    .edificio-ficha-cerrar {

        width: 36px;

        height: 36px;

        top: 10px;

        right: 10px;

    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html body
    .hotspot-edificio-plus,

    html body
    .hotspot-edificio-plus::before,

    html body
    .hotspot-edificio-plus::after {

        animation: none !important;

    }

}
/* ============================================================
   EDIFICIOS
   DEGRADADO REAL PARA FUSIONAR IMAGEN CON LA PÁGINA
============================================================ */

html body .edificio-interactivo {
    background:
        linear-gradient(
            180deg,
            #eaf3ff 0%,
            #edf5ff 55%,
            #f7faff 100%
        ) !important;
}


/* ESCENA */
html body .edificio-escena {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}


/* IMAGEN */
html body .edificio-escena-imagen {
    z-index: 1 !important;
    background: transparent !important;
}


/* ============================================================
   CAPA DE DEGRADADO SOBRE LOS BORDES
============================================================ */

html body .edificio-escena::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 4 !important;

    pointer-events: none !important;

    background:

        /* IZQUIERDA */
        linear-gradient(
            90deg,
            #edf5ff 0%,
            rgba(237, 245, 255, 0.75) 4%,
            rgba(237, 245, 255, 0.25) 9%,
            transparent 16%
        ),

        /* DERECHA */
        linear-gradient(
            270deg,
            #edf5ff 0%,
            rgba(237, 245, 255, 0.75) 4%,
            rgba(237, 245, 255, 0.25) 9%,
            transparent 16%
        ),

        /* ARRIBA */
        linear-gradient(
            180deg,
            #edf5ff 0%,
            rgba(237, 245, 255, 0.55) 4%,
            transparent 12%
        ),

        /* ABAJO */
        linear-gradient(
            0deg,
            #edf5ff 0%,
            rgba(237, 245, 255, 0.75) 5%,
            rgba(237, 245, 255, 0.25) 10%,
            transparent 17%
        ) !important;
}


/* ============================================================
   QUITAMOS EL EFECTO ANTERIOR QUE PODRÍA INTERFERIR
============================================================ */

html body .edificio-escena::after {
    content: none !important;
    display: none !important;
}


/* ============================================================
   MARCO MÁS INTEGRADO
============================================================ */

html body .edificio-interactivo-marco {
    background: #edf5ff !important;

    border:
        1px solid
        rgba(180, 201, 225, 0.45) !important;

    box-shadow:
        0 22px 55px
        rgba(43, 75, 116, 0.08) !important;
}


/* ============================================================
   FRANJA INFERIOR
============================================================ */

html body .edificio-interactivo-ayuda {
    background:
        rgba(255, 255, 255, 0.90) !important;

    border-top:
        1px solid
        rgba(205, 220, 237, 0.65) !important;
}
/* ============================================================
   EDIFICIOS - POSICIÓN FINAL DE LOS PUNTOS +
============================================================ */


/* 1. ENTRADA */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(1) {
    --hotspot-x: 50% !important;
    --hotspot-y: 78% !important;
}


/* 2. RECEPCIÓN */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(2) {
    --hotspot-x: 61% !important;
    --hotspot-y: 73% !important;
}


/* 3. ESTACIONAMIENTO */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(3) {
    --hotspot-x: 84% !important;
    --hotspot-y: 76% !important;
}


/* 4. ASCENSORES */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(4) {
    --hotspot-x: 54% !important;
    --hotspot-y: 38% !important;
}


/* 5. PASILLOS */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(5) {
    --hotspot-x: 65% !important;
    --hotspot-y: 52% !important;
}


/* 6. ÁREAS COMUNES */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(6) {
    --hotspot-x: 37% !important;
    --hotspot-y: 70% !important;
}
/* ============================================================
   AJUSTE DE ETIQUETAS
============================================================ */

/* Entrada: etiqueta debajo */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(1) small {
    transform: translateY(2px);
}


/* Recepción: etiqueta a la derecha */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(2) small {
    transform: translateX(30px);
}


/* Estacionamiento */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(3) small {
    transform: translateX(-5px);
}


/* Ascensores */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(4) small {
    transform: translateY(2px);
}


/* Pasillos */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(5) small {
    transform: translateX(12px);
}


/* Áreas comunes */
html body
.edificio-escena
.hotspot-edificio:nth-of-type(6) small {
    transform: translateX(-8px);
}
/* ============================================================
   EDIFICIOS - SEPARACIÓN DEL HEADER FIJO
============================================================ */

html body .edificio-interactivo {
    padding-top: 125px !important;
}

#edificio-interactivo {
    scroll-margin-top: 90px;
}
/* ============================================================
   ============================================================
   EDIFICIOS Y CONDOMINIOS
   SEGURIDAD PENSADA PARA LA OPERACIÓN DEL EDIFICIO
   ============================================================
   ============================================================ */


/* ============================================================
   SECCIÓN
============================================================ */

html body .edificio-soluciones {

    position: relative;

    padding:
        95px
        0
        105px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );

}


/* ============================================================
   ENCABEZADO
============================================================ */

html body
.edificio-soluciones
.encabezado-seccion {

    width: min(760px, 100%);

    margin:
        0
        auto
        46px;

    text-align: center;

}


/* SUBTÍTULO */

html body
.edificio-soluciones
.encabezado-seccion
.subtitulo {

    display: inline-block;

    margin-bottom: 12px;

    color: #2459b8 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


/* TÍTULO */

html body
.edificio-soluciones
.encabezado-seccion h2 {

    max-width: 700px;

    margin:
        0
        auto
        17px;

    color: #263549 !important;

    font-size:
        clamp(
            38px,
            4vw,
            52px
        );

    line-height: 1.08;

    letter-spacing: -0.035em;

    font-weight: 760;

}


/* PARTE AZUL */

html body
.edificio-soluciones
.encabezado-seccion h2 span {

    display: block;

    color: #2459b8 !important;

}


/* DESCRIPCIÓN */

html body
.edificio-soluciones
.encabezado-seccion p {

    max-width: 680px;

    margin:
        0
        auto;

    color: #5a6679;

    font-size: 15px;

    line-height: 1.7;

}


/* ============================================================
   GRID DE TARJETAS
============================================================ */

html body
.edificio-soluciones-grid {

    display: grid;

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

    gap: 24px;

    align-items: stretch;

}


/* ============================================================
   TARJETAS
============================================================ */

html body
.edificio-solucion-card {

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    min-width: 0;

    border-radius: 20px;

    background: #ffffff;

    border:
        1px solid
        #dfe6ee;

    box-shadow:
        0 13px 34px
        rgba(
            31,
            52,
            84,
            0.075
        );

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;

}


/* HOVER */

html body
.edificio-solucion-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            49,
            103,
            189,
            0.20
        );

    box-shadow:
        0 20px 43px
        rgba(
            31,
            52,
            84,
            0.115
        );

}


/* ============================================================
   IMÁGENES
   ALTURA NATURAL Y PROFESIONAL
============================================================ */

html body
.edificio-solucion-imagen {

    position: relative;

    width: 100%;

    height: 205px;

    overflow: hidden;

    background: #edf2f7;

}


/* DEGRADADO MUY SUAVE SOBRE LA PARTE INFERIOR */

html body
.edificio-solucion-imagen::after {

    content: "";

    position: absolute;

    inset:
        auto
        0
        0;

    height: 35%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(
                18,
                35,
                59,
                0.11
            )
            100%
        );

}


/* IMAGEN */

html body
.edificio-solucion-imagen img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.42s ease;

}


/* PEQUEÑO ZOOM */

html body
.edificio-solucion-card:hover
.edificio-solucion-imagen img {

    transform:
        scale(1.025);

}


/* ============================================================
   AJUSTE PARTICULAR DE CADA FOTO
============================================================ */

/* ACCESO */
html body
.edificio-solucion-card:nth-child(1)
.edificio-solucion-imagen img {

    object-position:
        center 50%;

}


/* ÁREAS COMUNES */
html body
.edificio-solucion-card:nth-child(2)
.edificio-solucion-imagen img {

    object-position:
        center 48%;

}


/* ESTACIONAMIENTO */
html body
.edificio-solucion-card:nth-child(3)
.edificio-solucion-imagen img {

    object-position:
        center 52%;

}


/* ============================================================
   CONTENIDO DE LA TARJETA
============================================================ */

html body
.edificio-solucion-contenido {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        25px
        24px
        27px;

}


/* ============================================================
   TÍTULOS DE TARJETA
============================================================ */

html body
.edificio-solucion-contenido h3 {

    margin:
        0
        0
        10px;

    color: #1f2d42;

    font-size: 20px;

    line-height: 1.3;

    letter-spacing: -0.018em;

    font-weight: 750;

}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

html body
.edificio-solucion-contenido > p {

    min-height: 64px;

    margin:
        0
        0
        18px;

    color: #596679;

    font-size: 13.5px;

    line-height: 1.65;

}


/* ============================================================
   LISTA
============================================================ */

html body
.edificio-solucion-contenido ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin:
        auto
        0
        0;

    padding:
        17px
        0
        0;

    border-top:
        1px solid
        #edf0f4;

    list-style: none;

}


/* ITEM */

html body
.edificio-solucion-contenido li {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    padding: 0;

    color: #556275;

    font-size: 12.5px;

    line-height: 1.45;

}


/* ============================================================
   CHECKS AZUL SUAVE
============================================================ */

html body
.edificio-solucion-contenido li i {

    width: 21px;

    height: 21px;

    flex:
        0
        0
        21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef5ff !important;

    color: #326fd1 !important;

    border:
        1px solid
        #d8e6fb;

    box-shadow:
        0 3px 8px
        rgba(
            50,
            111,
            209,
            0.08
        );

    font-size: 8px;

    font-weight: 800;

}


/* ============================================================
   PEQUEÑA LÍNEA AZUL DECORATIVA
============================================================ */

html body
.edificio-solucion-contenido h3::after {

    content: "";

    display: block;

    width: 35px;

    height: 2px;

    margin-top: 10px;

    border-radius: 20px;

    background:
        #5684d3;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    html body
    .edificio-soluciones-grid {

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

    }


    html body
    .edificio-solucion-card:last-child {

        grid-column:
            1 / -1;

        width:
            min(
                520px,
                100%
            );

        margin:
            0
            auto;

    }


    html body
    .edificio-solucion-imagen {

        height: 190px;

    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 650px) {

    html body
    .edificio-soluciones {

        padding:
            70px
            0
            80px;

    }


    html body
    .edificio-soluciones
    .encabezado-seccion {

        margin-bottom:
            32px;

    }


    html body
    .edificio-soluciones
    .encabezado-seccion h2 {

        font-size:
            34px;

    }


    html body
    .edificio-soluciones
    .encabezado-seccion p {

        font-size:
            14px;

    }


    html body
    .edificio-soluciones-grid {

        grid-template-columns:
            1fr;

        gap:
            19px;

    }


    html body
    .edificio-solucion-card:last-child {

        grid-column:
            auto;

        width:
            100%;

    }


    html body
    .edificio-solucion-imagen {

        height:
            175px;

    }


    html body
    .edificio-solucion-contenido {

        padding:
            22px
            20px
            24px;

    }


    html body
    .edificio-solucion-contenido h3 {

        font-size:
            19px;

        text-align:
            center;

    }


    html body
    .edificio-solucion-contenido h3::after {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    html body
    .edificio-solucion-contenido > p {

        min-height:
            0;

        text-align:
            center;

    }


    html body
    .edificio-solucion-contenido ul {

        width:
            fit-content;

        max-width:
            100%;

        margin-left:
            auto;

        margin-right:
            auto;

    }

}


/* =============================================================
   ADMIN — DASHBOARD, MODALES, RANKING, SERVICIOS/SECTORES CRUD
   v2.0
============================================================= */

/* ── Dashboard: fila de dos columnas ── */
.admin-dashboard-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .admin-dashboard-fila { grid-template-columns: 1fr; }
}

/* ── Stat cards con variantes de color ── */
.admin-stat-alerta .admin-stat-icon { background: #fef3c7; color: #b45309; }
.admin-stat-exito  .admin-stat-icon { background: #dcfce7; color: #15803d; }

/* ── Cabecera del page-header con acciones ── */
.admin-page-header-acciones {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Ranking (servicios / sectores más solicitados) ── */
.admin-panel-ranking { flex: 1; }

.admin-ranking-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-ranking-pos {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.admin-ranking-item:first-child .admin-ranking-pos {
    background: #fef3c7;
    color: #b45309;
}

.admin-ranking-info {
    flex: 1;
    min-width: 0;
}

.admin-ranking-info strong {
    display: block;
    font-size: .88rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.admin-ranking-barra {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.admin-ranking-barra-fill {
    height: 100%;
    background: #8d6a3d;
    border-radius: 999px;
    transition: width .4s ease;
}

.admin-ranking-barra-sector .admin-ranking-barra-fill {
    background: #3e80cf;
}

.admin-ranking-total {
    font-size: .85rem;
    font-weight: 700;
    color: #475569;
    flex: 0 0 auto;
}

/* ── Estado con clases semánticas ── */
.admin-estado-nueva        { background: #eff6ff; color: #1d4ed8; }
.admin-estado-en-proceso   { background: #fefce8; color: #a16207; }
.admin-estado-contactada   { background: #f0fdf4; color: #15803d; }
.admin-estado-cotizada     { background: #f0fdf4; color: #15803d; }
.admin-estado-cerrada      { background: #f1f5f9; color: #475569; }
.admin-estado-descartada   { background: #fef2f2; color: #b91c1c; }

/* ── Prioridad ── */
.admin-prioridad {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.admin-prioridad-urgente { background: #fef2f2; color: #b91c1c; }
.admin-prioridad-alta    { background: #fef3c7; color: #b45309; }
.admin-prioridad-media   { background: #eff6ff; color: #1d4ed8; }
.admin-prioridad-baja    { background: #f1f5f9; color: #64748b; }

/* ── Texto sin asignar ── */
.admin-sin-asignar { color: #94a3b8; font-style: italic; font-size: .82rem; }

/* ── Servicios / Sectores — acciones en tarjeta ── */
.admin-servicio-acciones-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-servicio-inactivo { opacity: .65; }

.admin-servicio-footer-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-btn-eliminar-servicio,
.admin-btn-eliminar-sector {
    display: grid;
    place-items: center;
    padding: 4px 7px;
    border: none;
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    border-radius: 6px;
    font-size: .9rem;
    transition: background .15s ease;
}
.admin-btn-eliminar-servicio:hover,
.admin-btn-eliminar-sector:hover {
    background: #fef2f2;
}

.admin-btn-toggle-activo {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
}

/* ── Modal ── */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .55);
    padding: 16px;
    backdrop-filter: blur(3px);
}

.admin-modal[hidden] { display: none; }

.admin-modal-caja {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    animation: modalEntrar .18s ease;
}

@keyframes modalEntrar {
    from { opacity: 0; transform: translateY(-16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.admin-modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.admin-modal-cabecera h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-modal-cerrar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    font-size: 1.1rem;
    transition: background .15s ease;
}
.admin-modal-cerrar:hover { background: #f1f5f9; }

.admin-modal-caja .admin-form { padding: 22px 24px 0; }

.admin-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    margin-top: 8px;
}

/* ── Campo requerido marker ── */
.admin-campo-req { color: #ef4444; margin-left: 2px; }




/* Swiper Banners */
.carrusel-banners-marcas {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 30px 0;
}

.carrusel-banners-marcas .banner-cotiza-ahora {
    position: absolute;
    z-index: 5;
    top: 59%;
    left: 64%;
    width: min(34vw, 500px) !important;
    min-height: 104px !important;
    padding: 28px 42px !important;
    border: 3px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
}

.carrusel-banners-marcas .banner-cotiza-ahora i {
    font-size: 1.1em;
}

.carrusel-banners-marcas .banner-cotiza-ahora:hover {
    transform: translate(-50%, calc(-50% - 3px));
}

.banner-marca-item {
    width: 100%;
    aspect-ratio: 2 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #081634;
    overflow: hidden;
}
.banner-marca-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.carrusel-banners-marcas .swiper-button-next,
.carrusel-banners-marcas .swiper-button-prev {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
}
.carrusel-banners-marcas .swiper-button-next::after,
.carrusel-banners-marcas .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}
.carrusel-banners-marcas .swiper-pagination-bullet-active {
    background-color: #0056b3;
}

@media (max-width: 700px) {
    .carrusel-banners-marcas .banner-cotiza-ahora {
        top: 62%;
        left: 62%;
        width: min(58vw, 300px) !important;
        min-height: 58px !important;
        padding: 16px 18px !important;
        border-width: 2px;
        border-radius: 12px;
        font-size: 1rem !important;
        gap: 6px;
    }
}

/* Ticker Infinito de Logos */
.marcas-ticker-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    margin-top: 25px;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marcas-ticker-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content;
    gap: 18px;
    animation: moverMarcas 25s linear infinite;
}
.marcas-ticker-container:hover .marcas-ticker-track {
    animation-play-state: paused;
}
.marca-card-mini {
    flex: 0 0 auto !important;
    width: 140px !important;
    height: 75px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.marca-card-mini img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
@keyframes moverMarcas {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}







/* ==========================================================
   SECTORES DEL INDEX: 6 COLUMNAS Y 3 FILAS
   Ajuste sin borrar el contenido del index
========================================================== */

html body .sectores-grid-compacta.sectores-grid-horizontal {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 35px auto !important;
}

/* La tarjeta debe ser horizontal */
html body a.sector-card-mini-horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Imagen pequeña a la izquierda */
html body .sector-card-mini-horizontal .sector-card-mini-media {
    position: relative !important;
    flex: 0 0 40% !important;
    width: 40% !important;
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* La imagen no debe crecer fuera de la tarjeta */
html body .sector-card-mini-horizontal .sector-card-mini-media img {
    display: block !important;
    width: 100% !important;
    height: 155px !important;
    max-width: 100% !important;
    max-height: 155px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Texto a la derecha */
html body .sector-card-mini-horizontal .sector-card-mini-body {
    display: flex !important;
    flex: 1 1 60% !important;
    flex-direction: column !important;
    width: 60% !important;
    height: 155px !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-body h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-linea {
    width: 28px !important;
    height: 2px !important;
    margin: 6px 0 !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-body p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-link {
    margin-top: auto !important;
    font-size: 10px !important;
    white-space: nowrap !important;
}

/* Ícono reducido */
html body .sector-card-mini-horizontal .sector-card-mini-icono {
    left: 7px !important;
    bottom: 7px !important;
    width: 30px !important;
    height: 30px !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-icono i {
    font-size: 13px !important;
}

/* Tablet */
@media (max-width: 1100px) {
    html body .sectores-grid-compacta.sectores-grid-horizontal {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Celular */
@media (max-width: 700px) {
    html body .sectores-grid-compacta.sectores-grid-horizontal {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}



/* ========================================================
   BOTONES DE ENVÍO Y CONSULTA DE COTIZACIÓN
======================================================== */
.acciones-formulario {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Botón principal: enviar la solicitud (faltaba, por eso se veía sin estilo) */
.btn-submit-cotizacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: #1d4ed8;
    color: #ffffff;
    border: 1px solid #1d4ed8;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(29, 78, 216, 0.22);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-submit-cotizacion i {
    color: #ffffff;
}

.btn-submit-cotizacion:hover {
    background: #153fad;
    border-color: #153fad;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.28);
}

.btn-submit-cotizacion:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* Botón secundario para consultar el estado */
.btn-consultar-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    background: #ffffff;
    color: #1e293b;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-consultar-estado i {
    color: #2563eb;
    font-size: 0.95rem;
}

.btn-consultar-estado:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* En teléfonos móviles se acomodan uno debajo del otro */
@media (max-width: 640px) {
    .acciones-formulario {
        flex-direction: column;
        align-items: stretch;
    }

    .acciones-formulario .btn-submit-cotizacion,
    .acciones-formulario .btn-consultar-estado {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}




/* ==========================================================
   DESVANECIDO DE IMAGEN EN SECTORES
========================================================== */
html body .sector-card-mini-horizontal .sector-card-mini-media {
    position: relative !important;
    overflow: hidden !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-media::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 45% !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

html body .sector-card-mini-horizontal .sector-card-mini-icono {
    position: absolute !important;
    z-index: 3 !important;
}




/* =========================================================
   TIPOGRAFÍA — Manrope (títulos) + Inter (texto)
   Reemplaza "Segoe UI" por una pareja tipográfica más
   distintiva, con jerarquía clara de tamaños.
========================================================= */

/* La fuente Inter/Manrope se carga como <link> en includes/header.php,
   no aquí — un @import a mitad de archivo es inválido y el navegador
   lo ignora en silencio. */

body {
    font-family: 'Inter', "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', "Segoe UI", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ── HERO PRINCIPAL: el elemento más grande de la página ── */
.hero-texto h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.12;
    font-weight: 800;
}

.hero-texto .hero-card-descripcion,
.hero-texto p {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
}

.etiqueta {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── ANTETÍTULOS ("PROYECTOS REALIZADOS", "TRABAJAMOS CON...") ── */
.subtitulo {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── TÍTULOS DE SECCIÓN (h2): grandes, pero un escalón bajo el hero ── */
.sectores-home-intro h2,
.proyectos-inicio-encabezado h2,
.marcas-inicio-encabezado h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
    font-weight: 800;
}

.sectores-home-intro p,
.proyectos-inicio-encabezado p,
.marcas-inicio-encabezado p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #5b6472;
}

/* ── TARJETAS (nombre de sector / proyecto): más chico, con peso medio ── */
.sector-card-mini h3,
.sector-card-foto-contenido h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.sector-card-mini p,
.sector-card-foto-contenido p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #64748b;
}

/* ── FRANJA DE CONFIANZA (íconos + texto corto) ── */
.confianza-item strong {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.confianza-item span {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
}

/* ── ESTADÍSTICAS: los números más grandes de toda la página ── */
.estadistica .contador,
.estadistica strong {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.estadistica p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}