@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fuentes/poppins-300.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fuentes/poppins-700.woff2) format('woff2'); }
/* Rocidop · sitio web. Mismo aspecto que la web anterior (WordPress + Elementor), sin plantillas ni complementos. */
:root {
  --azul: #1C3453;
  --azul-oscuro: #0E1A2B;
  --rojo: #E62D29;
  --rojo-oscuro: #C9221F;
  --amarillo: #FFE600;
  --gris-fondo: #F2F2F2;
  --gris-tarjeta: #F7F7F7;
  --texto: #54595F;
  --texto-oscuro: #2B2F33;
  --borde: #E3E6EA;
  --ancho: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--texto); font: 400 16px/1.6 'Poppins', Arial, sans-serif; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--texto-oscuro); line-height: 1.2; }
p { margin: 0; }
.icono { flex: none; }
.ancho { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.centrado { text-align: center; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--azul); color: #fff; border-radius: 4px; }
.saltar:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

/* ---------------------------------------------------------------- botones */
.botones { display: flex; flex-wrap: wrap; gap: 16px; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; border: 2px solid var(--rojo); border-radius: 6px; background: var(--rojo); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 4px 14px rgba(230, 38, 41, .3); transition: transform .15s, box-shadow .15s, background-color .15s, color .15s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(230, 38, 41, .38); }
.boton--borde { background: transparent; border-color: #fff; box-shadow: none; }
.boton--borde:hover { background: #fff; color: var(--azul); box-shadow: none; }
.boton--amarillo { background: var(--amarillo); border-color: var(--amarillo); color: var(--texto-oscuro); box-shadow: none; }
.boton--amarillo:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }

/* ---------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .2s; }
.cabecera.bajo { box-shadow: 0 2px 14px rgba(14, 26, 43, .1); }
.cabecera__ancho { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; height: 84px; margin: 0 auto; padding: 0 24px; }
.cabecera__logo { display: block; line-height: 0; }
.cabecera__logo img { width: 152px; height: auto; }
.menu > ul { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.menu a, .menu button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 3px; background: none; color: var(--azul); font: 500 13px/1.2 'Poppins', Arial, sans-serif; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.menu a:hover, .menu button:hover { color: var(--rojo); }
.menu [aria-current="page"] { background: var(--azul); color: #fff; }
.menu [aria-current="page"]:hover { color: #fff; }
.menu button .icono { width: 16px; height: 16px; transition: transform .2s; }
.menu__grupo { position: relative; }
.menu__sub { position: absolute; top: 100%; left: 0; min-width: 260px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border-radius: 4px; box-shadow: 0 12px 30px rgba(14, 26, 43, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.menu__sub a { display: block; padding: 10px 18px; text-transform: none; font-size: 14px; font-weight: 400; color: var(--texto-oscuro); }
.menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub, .menu__grupo.abierto .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__grupo.abierto button .icono { transform: rotate(180deg); }
.cabecera__boton { display: none; padding: 8px; border: 0; background: none; color: var(--azul); cursor: pointer; }
.cabecera__boton .icono { width: 28px; height: 28px; }
.cabecera__boton .cerrar, .cabecera__boton[aria-expanded="true"] .abrir { display: none; }
.cabecera__boton[aria-expanded="true"] .cerrar { display: block; }
@media (max-width: 1100px) {
  .cabecera__ancho { height: 72px; }
  .cabecera__logo img { width: 136px; }
  .cabecera__boton { display: block; }
  .menu { position: fixed; inset: 72px 0 0; overflow-y: auto; padding: 16px 24px 40px; background: #fff; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  .menu.abierto { visibility: visible; opacity: 1; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > ul > li { border-bottom: 1px solid var(--borde); }
  .menu a, .menu button { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 15px; }
  .menu [aria-current="page"] { padding-left: 12px; }
  .menu__sub { position: static; display: none; min-width: 0; padding: 0 0 8px 12px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub { display: none; }
  .menu__grupo.abierto .menu__sub { display: block; }
  .menu__sub a { padding: 10px 4px; }
}

/* ---------------------------------------------------------------- portada de cada página */
.fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.heroe { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 560px; padding: 100px 0; color: #fff; background: var(--azul-oscuro); }
.heroe::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 18, 28, .88) 0%, rgba(10, 18, 28, .72) 42%, rgba(18, 37, 61, .35) 75%); }
.heroe .ancho { padding-left: 24px; }
.heroe__etiqueta { margin-bottom: 12px; color: var(--rojo); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.heroe h1 { max-width: 720px; margin-bottom: 20px; color: #fff; font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; }
.heroe__bajada { max-width: 560px; margin-bottom: 34px; color: #E9EDF2; font-size: 19px; }
.heroe--inicio .ancho { max-width: 1000px; }
.heroe--simple { min-height: 480px; background: linear-gradient(120deg, var(--azul-oscuro), var(--azul)); }
@media (max-width: 900px) {
  .heroe { min-height: 0; padding: 70px 0; text-align: center; }
  .heroe h1, .heroe__bajada { margin-left: auto; margin-right: auto; }
  .heroe__bajada { font-size: 17px; }
  .heroe .botones { justify-content: center; }
}

/* ---------------------------------------------------------------- títulos y servicios */
.titulo { margin-bottom: 48px; color: var(--azul); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; text-align: center; }
.titulo--rojo { margin-bottom: 18px; color: var(--rojo); }
.intro { max-width: 780px; margin: 0 auto 56px; font-size: 18px; font-weight: 300; text-align: center; }
.intro strong { font-weight: 700; color: var(--texto); }
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; margin-bottom: 40px; }
.servicio { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; border-radius: 8px; text-align: center; text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s; }
.servicio .icono { width: 54px; height: 54px; margin-bottom: 12px; color: var(--azul); }
.servicio h3 { margin-bottom: 14px; font-size: 18px; font-weight: 400; color: var(--texto-oscuro); }
.servicio p { font-size: 14.5px; font-weight: 300; line-height: 1.7; }
.servicio:hover { background: #fff; box-shadow: 0 14px 34px rgba(14, 26, 43, .08); transform: translateY(-3px); }
.servicio:hover h3 { color: var(--rojo); }
.servicio--rojo .icono { color: var(--rojo); }
.servicio--rojo h3 { text-transform: uppercase; }
.servicio--rojo:hover { background: var(--gris-tarjeta); }
@media (max-width: 900px) { .grilla-3 { grid-template-columns: 1fr 1fr; gap: 24px 16px; } }
@media (max-width: 600px) { .grilla-3 { grid-template-columns: 1fr; gap: 8px; } }

.soluciones { position: relative; padding: 110px 0 150px; background: var(--gris-fondo); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 64% calc(100% - 50px), 34% 100%, 0 calc(100% - 36px)); }
.empresas { padding: 70px 0 110px; }
@media (max-width: 600px) { .soluciones { padding: 70px 0 110px; } .empresas { padding: 40px 0 80px; } }

/* ---------------------------------------------------------------- Supervisa */
.supervisa { overflow: hidden; background: var(--azul); color: #fff; }
.supervisa__grilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.supervisa__marca { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.supervisa__marca span { padding: 4px 10px; border-radius: 4px; background: var(--rojo); letter-spacing: .08em; }
.supervisa h2 { margin-bottom: 16px; color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.18; }
.supervisa__bajada { margin-bottom: 26px; color: #D6DEEA; font-size: 17px; line-height: 1.65; }
.supervisa strong { color: #fff; font-weight: 600; }
.tildes { display: grid; gap: 14px; margin: 0 0 34px; padding: 0; list-style: none; }
.tildes li { position: relative; padding-left: 36px; color: #E8EDF4; font-size: 15.5px; line-height: 1.5; }
.tildes li::before { content: ''; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--rojo); }
.tildes li::after { content: ''; position: absolute; left: 8px; top: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.celulares { position: relative; height: 630px; }
.celular { position: absolute; width: 230px; aspect-ratio: 390 / 844; overflow: hidden; border: 7px solid var(--azul-oscuro); border-radius: 34px; background: var(--azul-oscuro); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.celular img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.celular--1 { left: 0; top: 70px; transform: rotate(-6deg); }
.celular--2 { left: 50%; top: 0; z-index: 2; width: 250px; margin-left: -125px; }
.celular--3 { right: 0; top: 70px; transform: rotate(6deg); }
.celulares__epigrafe { position: absolute; left: 0; right: 0; bottom: 0; color: #A9B8CC; font-size: 13px; text-align: center; }
@media (max-width: 1024px) {
  .supervisa__grilla { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .celulares { width: 100%; max-width: 520px; height: 530px; margin: 0 auto; }
  .celular { width: 180px; border-width: 6px; border-radius: 28px; }
  .celular--2 { width: 200px; margin-left: -100px; }
}
@media (max-width: 520px) {
  .celulares { height: 420px; }
  .celular { top: 50px; width: 140px; border-width: 5px; border-radius: 22px; }
  .celular--2 { top: 0; width: 160px; margin-left: -80px; }
  .supervisa .boton { flex: 1 1 100%; }
}

/* La franja de datos conserva el margen lateral (el padding propio le pisaba el de .wrap) */
.uhf .stats-row { padding-left: 28px; padding-right: 28px; }
@media (max-width: 560px) { .uhf .stats-row { padding-left: 18px; padding-right: 18px; } }

/* ---------------------------------------------------------------- Alarma Comunitaria */
.comunitaria { padding-bottom: 90px; }
.comunitaria__fondo { position: relative; isolation: isolate; padding: 120px 0 150px; text-align: center; }
.comunitaria__fondo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .62); }
.comunitaria .titulo { margin-bottom: 14px; text-transform: uppercase; }
.comunitaria__fondo p { color: var(--texto-oscuro); font-size: 16px; }
.comunitaria__tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 270px)); justify-content: center; gap: 16px; margin: -60px 0 40px; padding: 0; list-style: none; position: relative; }
.comunitaria__tarjetas li { display: flex; flex-direction: column; align-items: center; padding: 18px 12px; border-radius: 6px; background: var(--gris-tarjeta); box-shadow: 0 10px 26px rgba(14, 26, 43, .06); text-align: center; }
.comunitaria__tarjetas .icono { width: 34px; height: 34px; margin-bottom: 4px; color: var(--azul); stroke-width: 2.4; }
.comunitaria__tarjetas strong { color: var(--texto-oscuro); font-size: 19px; font-weight: 600; }
.comunitaria__tarjetas span { font-size: 14px; }
@media (max-width: 700px) {
  .comunitaria__fondo { padding: 80px 0 110px; }
  .comunitaria__tarjetas { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------- X-28 */
.x28 { position: relative; isolation: isolate; padding: 80px 0; overflow: hidden; color: #fff; text-align: center; background: var(--azul-oscuro); }
.x28::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .5); }
.x28__fotos .fondo { opacity: 0; transition: opacity .8s; }
.x28__fotos .fondo.activa { opacity: 1; }
.x28 h2 { margin-bottom: 64px; color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; text-transform: uppercase; }
.x28__bajada { margin-bottom: 14px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; }
.x28__oferta { display: inline-block; margin-bottom: 40px; padding: 6px 14px; background: var(--rojo); font-size: clamp(18px, 2vw, 24px); }
.x28 .boton { display: flex; width: fit-content; margin: 0 auto; }
@media (max-width: 600px) { .x28 { padding: 64px 0; } .x28 h2 { margin-bottom: 32px; } }

/* ---------------------------------------------------------------- reseñas */
.resenas { padding: 64px 0 80px; }
.resenas__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; padding: 0 44px; }
.resenas h2 { font-size: 22px; font-weight: 400; }
.resenas__google { display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font-size: 14px; font-weight: 500; text-decoration: none; }
.resenas__google:hover { color: var(--rojo); }
.resenas__google .icono { width: 18px; height: 18px; }
.resenas__carrusel { position: relative; padding: 0 44px; }
.resenas__lista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: 0; padding: 4px 0 8px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.resenas__lista::-webkit-scrollbar { display: none; }
.resena { scroll-snap-align: start; padding: 20px; border-radius: 8px; background: var(--gris-tarjeta); }
.resena__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.resena__cabeza > div { flex: 1; min-width: 0; }
.resena__cabeza strong { display: block; color: var(--texto-oscuro); font-size: 15px; font-weight: 600; }
.resena__cabeza small { font-size: 12.5px; }
.resena__cabeza .icono { width: 20px; height: 20px; }
.resena__inicial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 600; }
.resena__estrellas { display: block; width: 100px; height: 18px; margin-bottom: 10px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%2026%2024%22%3E%3Cpath fill='%23F6BB06' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") 0 0 / 20px 18px repeat-x; }
.resena p { display: -webkit-box; overflow: hidden; color: var(--texto-oscuro); font-size: 14.5px; line-height: 1.55; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.resenas__flecha { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: #fff; color: var(--texto-oscuro); cursor: pointer; }
.resenas__flecha:hover { color: var(--rojo); }
.resenas__flecha .icono { width: 18px; height: 18px; }
.resenas__flecha--izq { left: 0; }
.resenas__flecha--der { right: 0; }
@media (max-width: 900px) { .resenas__lista { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 600px) {
  .resenas__cabeza, .resenas__carrusel { padding: 0; }
  .resenas__lista { grid-auto-columns: 86%; }
  .resenas__flecha { display: none; }
}

/* ---------------------------------------------------------------- pie */
.pie { padding: 40px 0 56px; background: var(--azul); }
.pie__ancho { display: flex; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pie__redes { display: flex; flex-direction: column; justify-content: center; gap: 22px; align-self: stretch; margin: 40px 0; padding: 0 28px; list-style: none; background: var(--rojo); }
.pie__redes a { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; }
.pie__redes a:hover { opacity: .8; }
.pie__redes .icono { width: 18px; height: 18px; }
.pie__mapa { flex: 1; align-self: stretch; min-height: 300px; margin-left: 24px; overflow: hidden; border-radius: 4px; background: #E5E3DF; }
.pie__mapa iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.pie__tarjeta { flex: 1.4; max-width: 760px; padding: 32px 32px 28px; border-radius: 4px; background: #fff; }
.pie__tarjeta h2 { margin-bottom: 26px; font-size: 20px; font-weight: 400; }
.pie__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; margin: 0 0 32px; padding: 0; list-style: none; }
.pie__datos li { display: flex; align-items: center; gap: 16px; }
.pie__icono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--azul); color: #fff; }
.pie__icono .icono { width: 20px; height: 20px; }
.pie__datos strong { display: block; color: var(--texto-oscuro); font-size: 17px; font-weight: 400; }
.pie__datos a { font-size: 13px; text-decoration: none; }
.pie__datos a:hover { color: var(--rojo); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--borde); font-size: 12.5px; }
.pie__legal a { text-decoration: none; }
.pie__legal a:hover { color: var(--rojo); }
@media (max-width: 700px) {
  .pie { padding: 32px 0 40px; }
  .pie__ancho { flex-direction: column; align-items: stretch; padding: 0 16px; }
  .pie__redes { flex-direction: row; justify-content: center; margin: 0; padding: 12px; border-radius: 4px 4px 0 0; }
  .pie__tarjeta { padding: 28px 20px 22px; border-radius: 0 0 4px 4px; }
  .pie__datos { grid-template-columns: 1fr; gap: 20px; }
  .pie__mapa { min-height: 260px; margin: 16px 0 0; }
  .pie__mapa iframe { min-height: 260px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .pie__ancho { flex-wrap: wrap; }
  .pie__mapa { flex-basis: 100%; margin: 20px 0 0; }
}

/* ---------------------------------------------------------------- bloques de las páginas de producto */
.bloque { padding: 90px 0; }
.bloque--gris { background: var(--gris-fondo); }
.angosto { max-width: 820px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dos-columnas > img { width: 100%; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(14, 26, 43, .35); }
.dos-columnas--invertida > img { order: 2; }
.etiqueta { margin-bottom: 10px; color: var(--rojo); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.subtitulo { margin-bottom: 22px; color: var(--azul); font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; }
.parrafo { margin-bottom: 22px; font-size: 17px; }
.beneficios { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.beneficios li { display: flex; align-items: center; gap: 16px; color: var(--texto-oscuro); font-size: 16.5px; }
.beneficios .icono { width: 30px; height: 30px; color: var(--azul); }
.tildes--claro li { color: var(--texto-oscuro); }
.tildes--claro { margin-bottom: 30px; }
@media (max-width: 900px) {
  .bloque { padding: 60px 0; }
  .dos-columnas { grid-template-columns: 1fr; gap: 32px; }
  .dos-columnas--invertida > img { order: 0; }
}

/* ---------------------------------------------------------------- tarjetas de precio */
.precios { position: relative; isolation: isolate; padding: 70px 0; }
.precios::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 214, 10, .72); mix-blend-mode: multiply; }
.precios .ancho { display: flex; justify-content: center; }
.precios__par { gap: 24px; align-items: flex-start; }
.precio { position: relative; width: 100%; max-width: 380px; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); text-align: center; }
.precio__cinta { position: absolute; top: 18px; left: -38px; width: 150px; padding: 4px 0; background: var(--amarillo); color: var(--texto-oscuro); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-45deg); }
.precio__cabeza { padding: 26px 52px 20px; background: var(--azul); color: #fff; }
.precio--gris .precio__cabeza { background: #4A4F55; }
.precio__cabeza h2 { color: #fff; font-size: 22px; font-weight: 600; }
.precio__cabeza p { margin-top: 4px; font-size: 13.5px; opacity: .85; }
.precio__cuerpo { padding: 24px 26px 28px; }
.precio__rotulo { color: var(--texto); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.precio__valor { color: var(--azul); font-size: 50px; font-weight: 700; line-height: 1.1; }
.precio--gris .precio__valor { color: #4A4F55; }
.precio__valor small { margin-right: 2px; font-size: 22px; vertical-align: super; }
.precio__cuotas { color: var(--rojo); font-size: 17px; font-weight: 700; text-transform: uppercase; }
.precio--gris .precio__cuotas { color: var(--texto); font-size: 14px; font-weight: 500; text-transform: none; }
.precio__contado { margin-top: 6px; font-size: 14.5px; }
.precio__contado strong { color: var(--texto-oscuro); }
.precio__abono { margin: 18px 0 4px; padding: 14px; border-radius: 6px; background: var(--gris-tarjeta); }
.precio__abono p:nth-child(2) { font-size: 15px; }
.precio__abono del { color: #9AA0A6; }
.precio__abono strong { color: var(--azul); font-size: 26px; font-weight: 700; }
.precio__promo { color: var(--rojo); font-size: 13.5px; font-weight: 600; }
.precio__incluye { margin: 18px 0 24px; padding: 0; list-style: none; text-align: left; }
.precio__incluye li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--borde); color: var(--texto-oscuro); font-size: 14px; }
.precio__incluye li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 11px; border: solid var(--rojo); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.precio .boton { width: 100%; }
.boton--gris { background: #4A4F55; border-color: #4A4F55; box-shadow: none; }
@media (max-width: 760px) { .precios__par { flex-direction: column; align-items: center; } }

/* ---------------------------------------------------------------- piezas de Cerco y Hogares */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.soluciones--sin-titulo { padding-top: 80px; }
.titulo--separado { max-width: 900px; margin: 0 auto 48px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; }
.subtitulo--chico { margin: 26px 0 14px; font-size: 18px; color: var(--texto-oscuro); }
.subtitulo--rojo { color: var(--rojo); }
.tildes--separadas { gap: 16px; }
.tildes--separadas strong { color: var(--texto-oscuro); }
.video { overflow: hidden; border-radius: 8px; background: var(--azul-oscuro); box-shadow: 0 18px 40px -18px rgba(14, 26, 43, .4); }
.video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video--vertical { width: 100%; max-width: 420px; aspect-ratio: 9 / 13; justify-self: center; }
.bloque--picos { clip-path: polygon(0 36px, 34% 0, 64% 50px, 100% 36px, 100% calc(100% - 36px), 64% calc(100% - 50px), 34% 100%, 0 calc(100% - 36px)); padding: 130px 0; }
.elegirnos { padding: 90px 0 100px; background: var(--rojo); clip-path: polygon(0 0, 66% 40px, 100% 0, 100% calc(100% - 30px), 34% 100%, 0 calc(100% - 30px)); }
.elegirnos h2 { margin-bottom: 36px; color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 500; text-align: center; }
.elegirnos__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.elegirnos__lista li { padding: 26px 24px; border-radius: 6px; background: var(--gris-tarjeta); text-align: center; }
.elegirnos__lista .icono { width: 38px; height: 38px; color: var(--rojo); }
.elegirnos__lista h3 { margin: 10px 0 10px; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.elegirnos__lista p { font-size: 14.5px; line-height: 1.65; }
@media (max-width: 900px) { .elegirnos__lista { grid-template-columns: 1fr; } .bloque--picos { padding: 100px 0; } }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.encabezado > div { max-width: 720px; }
.encabezado .parrafo { margin-bottom: 0; }
.marca { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--borde); }
.marca__logo { width: 150px; height: auto; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.productos li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 6px; background: var(--gris-tarjeta); color: var(--texto-oscuro); font-size: 13.5px; line-height: 1.35; text-align: center; }
.productos img { width: 100%; height: 130px; object-fit: contain; mix-blend-mode: multiply; }
.botones--centro { justify-content: center; margin-top: 34px; }
.boton--azul { background: var(--azul); border-color: var(--azul); box-shadow: 0 4px 14px rgba(28, 52, 83, .3); }
.boton--borde-azul { background: transparent; border-color: var(--azul); color: var(--azul); box-shadow: none; }
.boton--borde-azul:hover { background: var(--azul); color: #fff; box-shadow: none; }
@media (max-width: 700px) { .marca { grid-template-columns: 1fr; justify-items: center; } .productos { width: 100%; grid-template-columns: 1fr 1fr; } }
.kits { padding: 60px 0; background: var(--azul); color: #D6DEEA; }
.kits__grilla { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 28px; align-items: center; }
.kits h2 { margin-bottom: 12px; color: #fff; font-size: clamp(22px, 2.4vw, 28px); }
.kits p { margin-bottom: 24px; }
.kits img { width: 100%; padding: 12px; border-radius: 8px; background: #fff; }
@media (max-width: 900px) { .kits__grilla { grid-template-columns: 1fr 1fr; } .kits__grilla > div { grid-column: 1 / -1; text-align: center; } }
.alarmas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.alarma { display: flex; flex-direction: column; padding: 28px; border-radius: 8px; background: #fff; text-decoration: none; box-shadow: 0 10px 30px -14px rgba(14, 26, 43, .25); transition: transform .2s, box-shadow .2s; }
.alarma:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(14, 26, 43, .35); }
.alarma__logo { width: auto; height: 46px; margin-bottom: 18px; object-fit: contain; object-position: left; }
.alarma__foto { width: 100%; aspect-ratio: 16 / 8; margin-bottom: 18px; object-fit: contain; }
.alarma h3 { margin-bottom: 6px; color: var(--azul); font-size: 20px; }
.alarma p { margin-bottom: 14px; }
.alarma__mas { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; color: var(--rojo); font-weight: 600; }
.alarma__mas .icono { width: 18px; height: 18px; }
@media (max-width: 760px) { .alarmas { grid-template-columns: 1fr; } }
.motores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.motores li { padding: 20px; border-radius: 8px; background: #fff; text-align: center; }
.motores img { width: 100%; height: 220px; margin-bottom: 14px; object-fit: contain; }
.motores h3 { margin-bottom: 4px; color: var(--azul); font-size: 18px; }
@media (max-width: 760px) { .motores { grid-template-columns: 1fr; } }
.kits__oferta { display: inline-block; margin-bottom: 14px !important; padding: 4px 12px; border-radius: 4px; background: var(--rojo); color: #fff; font-size: 18px; font-weight: 700; }

/* ---------------------------------------------------------------- Control de acceso vehicular UHF (página propia, con su estilo) */.uhf{
    --navy:#1b3452;
    --navy-deep:#0c1c2e;
    --navy-mid:#24466e;
    --red:#e52c29;
    --red-deep:#a91b1d;
    --ink:#3a3a3a;
    --paper:#f5f5f5;
    --surface:#ffffff;
    --steel:#7d838c;
    --steel-soft:#eceef0;
    --line:#e5e5e5;

    --font-display:'Poppins',system-ui,sans-serif;
    --font-body:'Poppins',system-ui,sans-serif;
    --font-mono:'Poppins',system-ui,sans-serif;
  }
.uhf img,.uhf svg{max-width:100%;display:block;}
.uhf .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.uhf a{color:inherit;}
.uhf h1,.uhf h2,.uhf h3{font-family:var(--font-display);font-weight:700;text-wrap:balance;}
.uhf .eyebrow{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
    display:flex;
    align-items:center;
    gap:8px;
  }
.uhf .eyebrow::before{content:'';width:16px;height:1px;background:var(--red);}
.uhf .hero{padding:0;}
.uhf .hero-card{
    display:grid;
    grid-template-columns:.64fr .8fr;
    min-height:480px;
  }
.uhf .hero-panel{
    position:relative;
    background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 100%);
    color:#fff;
    padding:52px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
.uhf .hero-eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.12em;
    color:rgba(255,255,255,.75);
    padding-bottom:10px;
    border-bottom:2px solid var(--red);
    display:inline-block;
    width:fit-content;
  }
.uhf .hero-panel h1{
    font-size:clamp(28px,3.4vw,38px);
    line-height:1.12;
    margin:20px 0 16px;
    color:#fff !important;
  }
.uhf .hero-panel p.lead{
    font-size:15.5px;
    max-width:38ch;
    color:rgba(255,255,255,.72);
  }
.uhf .hero-colors{
    display:flex;align-items:center;gap:12px;
    margin-top:30px;
    font-size:12.5px;
    color:rgba(255,255,255,.65);
  }
.uhf .swatch{
    width:22px;height:22px;
    border-radius:50%;
    background:#ffffff;
    border:2px solid rgba(255,255,255,.55);
  }
.uhf .hero .ctas{
    display:flex;gap:14px;flex-wrap:wrap;
    margin-top:28px;
  }
.uhf .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:14px;
    padding:13px 22px;
    border-radius:8px;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform .15s ease, background .15s ease;
  }
.uhf .btn:hover{transform:translateY(-1px);}
.uhf .btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.uhf .btn-primary{background:var(--red);color:#fff;}
.uhf .btn-primary:hover{background:var(--red-deep);}
.uhf .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
.uhf .btn-ghost:hover{background:rgba(255,255,255,.1);}
.uhf .mfr-badge{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:32px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.55);
  }
.uhf .mfr-badge b{
    color:#fff;
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:.08em;
    font-size:13px;
  }
.uhf .hero-photo{position:relative;}
.uhf .hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:840px){
.uhf .hero-card{grid-template-columns:1fr;min-height:auto;}
.uhf .hero-photo{height:280px;order:-1;}
.uhf .hero-panel{padding:40px 32px;}
  }
@media (max-width:480px){
.uhf .hero-photo{height:220px;}
.uhf .hero-panel{padding:32px 20px;}
.uhf .hero .ctas{flex-direction:column;align-items:stretch;}
  }
.uhf .stats{
    background:var(--navy);
    color:#fff;
  }
.uhf .stats-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:22px 0;
    gap:18px 28px;
  }
.uhf .stat{
    display:flex;flex-direction:column;gap:4px;
  }
.uhf .stat .num{
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:22px;
    font-weight:700;
    color:#fff;
  }
.uhf .stat .lab{
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
  }
.uhf .uhf-sec{padding:76px 0;}
.uhf .section-head{
    max-width:640px;
    margin-bottom:42px;
  }
.uhf .section-head h2{
    font-size:clamp(24px,3vw,32px);
    margin-top:10px;
    color:var(--ink);
  }
.uhf .section-head p{
    margin-top:12px;
    color:var(--steel);
    font-size:15.5px;
    max-width:56ch;
  }
.uhf .feat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
.uhf .feat{
    background:var(--surface);
    padding:28px 26px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
.uhf .feat-photo{padding:0 0 22px;}
.uhf .feat-photo img{
    width:100%;height:148px;
    object-fit:cover;
    margin-bottom:6px;
  }
.uhf .feat-photo h3,.uhf .feat-photo p{padding:0 26px;}
.uhf .feat .ico{
    width:34px;height:34px;
    border-radius:8px;
    background:var(--steel-soft);
    color:var(--navy);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:4px;
  }
.uhf .feat .ico svg{width:18px;height:18px;}
.uhf .feat h3{font-size:15.5px;font-weight:700;}
.uhf .feat p{font-size:13.5px;color:var(--steel);}
.uhf .cases-wrap{
    display:grid;
    grid-template-columns:.85fr 1.3fr;
    gap:20px;
    align-items:stretch;
  }
.uhf .cases-photo{
    border-radius:14px;
    overflow:hidden;
    min-height:280px;
  }
.uhf .cases-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.uhf .cases{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
.uhf .case{
    padding:24px 20px;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--line);
  }
.uhf .case .tag{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--red);
  }
.uhf .case h3{font-size:14.5px;margin-top:8px;font-weight:700;}
.uhf .case p{font-size:12.5px;color:var(--steel);margin-top:6px;}
.uhf .cta-band{
    background:linear-gradient(120deg,var(--red),var(--red-deep));
    color:#fff;
    border-radius:20px;
    padding:46px 44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;
  }
.uhf .cta-band h2{font-size:clamp(21px,2.6vw,28px);max-width:22ch;color:#fff !important;}
.uhf .cta-band .contact{
    display:flex;flex-direction:column;gap:6px;
    font-size:13.5px;
  }
.uhf .cta-band .contact a{text-decoration:none;font-weight:600;}
.uhf .cta-band .contact .lab{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
  }
.uhf .cta-band .btn-primary{background:#fff;color:var(--red-deep);}
.uhf .cta-band .btn-primary:hover{background:#f2f2f2;}
@media (max-width:840px){
.uhf .feat-grid{grid-template-columns:1fr 1fr;}
.uhf .cases-wrap{grid-template-columns:1fr;}
.uhf .cases-photo{min-height:200px;}
  }
@media (max-width:560px){
.uhf .wrap{padding:0 18px;}
.uhf .uhf-sec{padding:48px 0;}
.uhf .section-head{margin-bottom:28px;}
.uhf .feat-grid{grid-template-columns:1fr;}
.uhf .cases{grid-template-columns:1fr;}
.uhf .cta-band{padding:30px 22px;flex-direction:column;align-items:stretch;text-align:left;}
.uhf .cta-band .btn-primary{width:100%;justify-content:center;}
.uhf .stats-row{
      display:grid;grid-template-columns:repeat(2,1fr);
      gap:20px 16px;padding:26px 0;
    }
  }

.uhf{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.55;}
.uhf *{margin:0;padding:0;}
.uhf .hero{padding:0;}

/* ---------------------------------------------------------------- Alarma Comunitaria */
.comunitaria__tarjetas--arriba { margin: -40px auto 0; position: relative; z-index: 2; }
.marco-foto { justify-self: center; padding: 34px; border-radius: 6px; background: url(../img/comunitaria-barrio-360.webp) center / cover; }
.marco-foto img { display: block; width: 260px; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.subtitulo--grande { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--texto-oscuro); }
.subtitulo--grande span { display: block; margin-top: 4px; color: var(--texto); font-size: .55em; font-weight: 400; }
.subtitulo--centro { margin-bottom: 40px; text-align: center; }
.ventajas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.ventajas li { position: relative; padding-left: 30px; font-size: 14.5px; }
.ventajas li::before { content: '+'; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; line-height: 1; }
.ventajas strong { display: block; color: var(--texto-oscuro); font-size: 16px; }
.beneficios--detalle li { align-items: flex-start; font-size: 15px; }
.beneficios--detalle strong { display: block; color: var(--azul); font-size: 16.5px; }
.precios--azul::before { background: linear-gradient(120deg, var(--azul-oscuro), var(--azul)); mix-blend-mode: normal; }
.precio__tachado { color: #9AA0A6; font-size: 20px; text-decoration: line-through; }
.botones--columna { flex-direction: column; gap: 10px; }
@media (max-width: 600px) { .ventajas { grid-template-columns: 1fr; } .marco-foto { padding: 22px; } .marco-foto img { width: 220px; } }

/* ---------------------------------------------------------------- landings de anuncios */
.boton--chico { min-height: 40px; padding: 8px 16px; gap: 8px; font-size: 14px; }
.boton--chico .icono { width: 16px; height: 16px; }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.opcion { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 24px; border-radius: 8px; background: var(--gris-tarjeta); text-align: center; }
.opcion img { width: 100%; height: 170px; margin-bottom: 16px; object-fit: contain; mix-blend-mode: multiply; }
.opcion h3 { margin-bottom: 8px; color: var(--azul); font-size: 20px; }
.opcion p { margin-bottom: 20px; font-size: 14.5px; }
.opcion .boton { margin-top: auto; }
.opcion--oferta { background: #FFF6D6; }
.opcion .kits__oferta { position: absolute; top: 16px; right: 16px; font-size: 15px; }
.nota { margin-top: 28px; font-size: 14.5px; }
.nota a { color: var(--rojo); font-weight: 600; }
.alarma > img { width: 100%; aspect-ratio: 16 / 8; margin-bottom: 18px; border-radius: 6px; object-fit: cover; }
.marcas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.marcas img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 900px) { .opciones { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .marcas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .marcas { grid-template-columns: 1fr 1fr; } .cabecera--landing .boton--chico { padding: 8px 12px; font-size: 13px; } }
.pasos { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { position: relative; padding: 20px 22px 20px 70px; border-radius: 8px; background: var(--gris-tarjeta); counter-increment: paso; font-size: 15.5px; }
.pasos li::before { content: counter(paso); position: absolute; left: 20px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rojo); color: #fff; font-weight: 700; }
.pasos strong { display: block; margin-bottom: 4px; color: var(--azul); font-size: 17px; }
.precio__abono p:nth-child(n+2) { font-size: 14.5px; }
.precio__abono p:nth-child(n+2) strong { font-size: 20px; }
.precio__nota { margin: -8px 0 22px; padding: 12px 14px; border-left: 3px solid var(--rojo); background: var(--gris-tarjeta); font-size: 13.5px; text-align: left; }
.opcion__precio { width: 100%; margin-bottom: 12px !important; padding: 10px 12px; border-radius: 6px; background: #fff; font-size: 13.5px !important; line-height: 1.45; }
.opcion__precio span { display: block; color: var(--texto); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.opcion__precio strong { margin-right: 4px; color: var(--azul); font-size: 22px; }
.opcion .opcion__precio + .boton, .opcion .opcion__precio:last-of-type { margin-bottom: 20px !important; }

/* ---------------------------------------------------------------- Bodycam */
.destacados { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.destacados li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; border-radius: 8px; background: var(--gris-tarjeta); color: var(--texto-oscuro); font-size: 14.5px; font-weight: 500; text-align: center; }
.destacados .icono { width: 34px; height: 34px; color: var(--rojo); }
.modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 28px; margin-bottom: 36px; }
.modelos article { padding: 24px; border-radius: 8px; background: #fff; text-align: center; }
.modelos img { width: 100%; max-width: 260px; margin: 0 auto 12px; display: block; }
.modelos h3 { color: var(--azul); font-size: 22px; }
@media (max-width: 900px) { .destacados { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .destacados { grid-template-columns: 1fr 1fr; } .modelos { grid-template-columns: 1fr 1fr; gap: 14px; } .modelos article { padding: 14px; } }

/* ---------------------------------------------------------------- formularios */
.soporte { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.formulario { display: grid; gap: 18px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulario label { display: grid; gap: 6px; color: var(--texto-oscuro); font-size: 14px; font-weight: 600; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario textarea, .formulario input[type="file"] { width: 100%; padding: 12px 14px; border: 1px solid #CDD2D8; border-radius: 6px; background: #fff; color: var(--texto-oscuro); font: 400 15px/1.4 'Poppins', Arial, sans-serif; }
.formulario input:focus, .formulario textarea:focus { border-color: var(--azul); outline: 2px solid rgba(28, 52, 83, .15); }
.formulario fieldset { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; border: 0; }
.formulario legend { width: 100%; margin-bottom: 8px; color: var(--texto-oscuro); font-size: 14px; font-weight: 600; }
.formulario .opcion-chica { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.formulario .opcion-chica input { width: 18px; height: 18px; accent-color: var(--rojo); }
.formulario .boton { justify-self: start; cursor: pointer; font-family: inherit; }
.formulario__alternativa { font-size: 14px; }
.formulario__alternativa a { color: var(--rojo); font-weight: 600; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { margin-bottom: 20px; padding: 14px 18px; border-radius: 6px; font-size: 15px; }
.aviso--ok { background: #E6F4EA; color: #1E5E33; }
.aviso--error { background: #FDECEA; color: #8A1C17; }
.descargas { padding: 28px; border-radius: 8px; background: var(--gris-tarjeta); }
.descargas h2 { margin-bottom: 18px; color: var(--rojo); font-size: 22px; }
.descargas h3 { margin: 18px 0 10px; font-size: 15px; }
.descargas ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.descargas a { display: block; padding: 10px 14px; border-radius: 4px; background: var(--azul); color: #fff; font-size: 14px; text-decoration: none; transition: background-color .15s; }
.descargas a:hover { background: var(--rojo); }
@media (max-width: 900px) { .soporte { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .formulario__fila { grid-template-columns: 1fr; } .formulario .boton { justify-self: stretch; } }

/* ---------------------------------------------------------------- notas del blog y textos legales */
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta-nota { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px -14px rgba(14, 26, 43, .3); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.tarjeta-nota:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(14, 26, 43, .4); }
.tarjeta-nota img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tarjeta-nota > div { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.tarjeta-nota__tema { margin-bottom: 6px; color: var(--rojo); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tarjeta-nota h3 { margin-bottom: 10px; color: var(--azul); font-size: 18px; }
.tarjeta-nota__fecha { margin-bottom: 14px; font-size: 13px; }
@media (max-width: 900px) { .notas { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.nota-cabeza { padding: 64px 0 48px; background: linear-gradient(120deg, var(--azul-oscuro), var(--azul)); color: #fff; }
.nota-cabeza h1 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
.nota-cabeza .heroe__etiqueta a { color: inherit; text-decoration: none; }
.nota-cabeza__fecha { margin-top: 14px; color: #C3CDDA; font-size: 14px; }
.nota { padding-top: 48px; }
.nota .angosto { max-width: 780px; }
.nota h2 { margin: 36px 0 14px; color: var(--azul); font-size: 26px; }
.nota h3 { margin: 26px 0 10px; color: var(--texto-oscuro); font-size: 19px; }
.nota p, .nota li { color: var(--texto-oscuro); font-size: 16.5px; line-height: 1.75; }
.nota p { margin-bottom: 16px; }
.nota ul, .nota ol { margin: 0 0 20px; padding-left: 22px; }
.nota li { margin-bottom: 6px; }
.nota a { color: var(--rojo); }
.nota__portada { display: block; width: 100%; max-height: 420px; margin-bottom: 32px; border-radius: 8px; object-fit: cover; }
.nota__producto { display: block; width: 220px; margin: 8px auto 24px; mix-blend-mode: multiply; }
.nota__destacado { padding: 16px 20px; border-left: 4px solid var(--rojo); background: var(--gris-tarjeta); font-weight: 500; }
.nota__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 20px; padding: 24px 26px; border-radius: 8px; background: var(--azul); }
.nota__cta p { margin: 0; color: #fff; font-size: 17px; font-weight: 500; }
.nota .nota__cta a.boton { color: #fff; }
.nota__volver { margin-top: 32px; }
.nota__volver a { font-weight: 600; text-decoration: none; }
.nota--legal h2 { font-size: 20px; text-transform: none; }

/* ---------------------------------------------------------------- Supervisa App (el sitio de pscorp.ar/supervisa en un marco) */
.sv-marco { display: block; width: 100%; height: 2400px; border: 0; background: #1B1A1A; }
.heroe--foto-derecha .fondo { object-position: 78% center; }