/* Supervisa · sitio web.
   Idea: el parte de la guardia. Fondo papel, tinta casi negra, el rojo de la marca solo para la acción y la tilde;
   titulares en Archivo ancha y pesada, texto en IBM Plex Sans y los datos (horas, puntos, metros) en IBM Plex Mono. */
:root {
  --tinta: #1b1a1a;
  --tinta-2: #2a2827;
  --tinta-3: #3b3836;
  --papel: #f5f4f2;
  --papel-2: #ebe8e4;
  --blanco: #ffffff;
  --rojo: #d11f22;
  --rojo-vivo: #e62629;
  --rojo-oscuro: #8e1517;
  --gris: #615c59;
  --gris-claro: #b9b3ae;
  --linea: #dfdbd6;
  --ok: #1e9e57;
  --ambar: #d9770b;
  --titular: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --texto: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --dato: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --radio: 14px;
  --ancho: 1180px;
  --tel: clamp(210px, 24vw, 290px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--rojo-vivo); outline-offset: 3px; border-radius: 4px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blanco); color: var(--tinta); padding: 10px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }
.ancho { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(18px, 4vw, 36px); }
.icono { flex: none; }

/* ------------------------------------------------------------------ texto */
.titular { font: 800 clamp(2.5rem, 6.2vw, 4.75rem)/0.98 var(--titular); font-stretch: 112%; letter-spacing: -0.025em; text-wrap: balance; }
.titulo { font: 800 clamp(1.85rem, 3.9vw, 3rem)/1.04 var(--titular); font-stretch: 110%; letter-spacing: -0.02em; text-wrap: balance; }
.subtitulo { font: 700 clamp(1.2rem, 2vw, 1.45rem)/1.2 var(--titular); font-stretch: 105%; letter-spacing: -0.01em; text-wrap: balance; }
.bajada { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--gris); max-width: 60ch; text-wrap: pretty; }
.rotulo { display: inline-flex; align-items: center; gap: 10px; font: 500 0.78rem/1 var(--dato); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.rotulo::before { content: ''; width: 22px; height: 2px; background: var(--rojo); }
.dato { font-family: var(--dato); font-variant-numeric: tabular-nums; }
.rojo { color: var(--rojo); }

/* ---------------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 2px solid transparent; border-radius: 10px; font: 600 0.97rem/1.1 var(--texto); text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s; white-space: nowrap; }
.boton:active { transform: translateY(1px); }
.boton--grande { min-height: 54px; padding: 14px 24px; font-size: 1.05rem; }
.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: var(--rojo-vivo); }
.boton--linea { border-color: currentColor; }
.boton--linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.boton--claro { background: var(--blanco); color: var(--tinta); }
.boton--claro:hover { background: var(--papel-2); }
.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--rojo); padding-bottom: 2px; }
.enlace .icono { width: 18px; height: 18px; transition: transform .2s; }
.enlace:hover .icono { transform: translateX(4px); }

/* --------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.cabecera.bajo { border-bottom-color: var(--linea); box-shadow: 0 8px 24px -18px rgba(27, 26, 26, .35); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca__nombre { font: 800 1.55rem/1 var(--titular); font-stretch: 100%; letter-spacing: -0.03em; }
.marca__nombre b { color: var(--rojo); font-weight: inherit; }
.navegacion { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); }
.navegacion > a { position: relative; padding: 8px 2px; white-space: nowrap; font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--tinta-3); }
.navegacion > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.navegacion > a:hover::after, .navegacion > a[aria-current]::after { transform: scaleX(1); }
.navegacion > a[aria-current] { color: var(--tinta); font-weight: 600; }
.navegacion__acciones { display: flex; gap: 10px; margin-left: clamp(4px, 1vw, 14px); }
.hamburguesa { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; background: var(--tinta); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburguesa i { display: block; width: 20px; height: 2px; background: var(--blanco); transition: transform .2s, opacity .2s; }
.hamburguesa[aria-expanded='true'] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] i:nth-of-type(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .hamburguesa { display: flex; }
  .navegacion { position: fixed; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 0 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px clamp(18px, 4vw, 36px) 28px; background: var(--papel); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .navegacion.abierta { visibility: visible; opacity: 1; transform: none; }
  .navegacion > a { padding: 18px 2px; font: 700 1.45rem/1.1 var(--titular); border-bottom: 1px solid var(--linea); color: var(--tinta); }
  .navegacion > a::after { display: none; }
  .navegacion > a[aria-current] { color: var(--rojo); }
  .navegacion__acciones { flex-direction: column; margin: 24px 0 0; }
  .navegacion__acciones .boton { min-height: 54px; font-size: 1.05rem; }
}

/* ----------------------------------------------------------------- tramos */
.tramo { padding-block: clamp(64px, 9vw, 120px); }
.tramo--oscuro { background: var(--tinta); color: var(--papel); }
.tramo--oscuro .bajada, .tramo--oscuro .rotulo { color: var(--gris-claro); }
.tramo--blanco { background: var(--blanco); }
.tramo--rojo { background: var(--rojo); color: var(--blanco); }
.tramo--rojo .bajada { color: #ffe1e1; }
.tramo--rojo .rotulo { color: #ffd0d0; }
.tramo--rojo .rotulo::before { background: var(--blanco); }
.encabezado { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 780px; }
.encabezado--centro { margin-inline: auto; text-align: center; justify-items: center; }

/* ------------------------------------------------------------- el celular */
.telefono { flex: none; width: var(--tel); padding: calc(var(--tel) * 0.034); border-radius: calc(var(--tel) * 0.15); background: #0d0c0c; box-shadow: inset 0 0 0 2px #3d3a38, inset 0 0 0 4px #0d0c0c, 0 40px 70px -30px rgba(13, 12, 12, .55), 0 18px 30px -18px rgba(13, 12, 12, .4); }
.telefono__pantalla { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: calc(var(--tel) * 0.118); background: var(--papel); }
.telefono__pantalla > img, .telefono__pantalla > video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.telefono--chico { --tel: clamp(170px, 18vw, 220px); }
.telefono--grande { --tel: clamp(240px, 27vw, 330px); }

.monitor { border-radius: 14px; overflow: hidden; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), 0 40px 80px -40px rgba(27, 26, 26, .45); }
.monitor__barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.monitor__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--gris-claro); }
.monitor__barra span { margin-left: 10px; font: 500 0.72rem/1 var(--dato); color: var(--gris); }
.monitor img { width: 100%; }

/* ------------------------------------------------------------------ héroe */
.heroe { position: relative; overflow: hidden; background: var(--tinta); color: var(--papel); padding-block: clamp(40px, 6vw, 84px) clamp(56px, 7vw, 100px); }
.heroe::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 45%, rgba(209, 31, 34, .30), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(209, 31, 34, .12), transparent 70%); pointer-events: none; }
.heroe::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(245, 244, 242, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 244, 242, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); pointer-events: none; }
.heroe__fila { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.heroe__texto { display: grid; gap: 24px; justify-items: start; }
.heroe .rotulo { color: var(--gris-claro); }
.heroe .bajada { color: #cfc9c4; }
.heroe .titular { font-size: clamp(2.3rem, 4.7vw, 3.9rem); }
.heroe .titular em { font-style: normal; color: var(--blanco); position: relative; white-space: nowrap; }
.heroe .titular .tilde { display: inline-block; width: .78em; height: .78em; margin-left: .12em; vertical-align: -.06em; }
.heroe .titular .tilde rect { fill: var(--rojo); }
.heroe .titular .tilde path { fill: none; stroke: #fff; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 0; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.heroe .boton--linea { color: var(--papel); }
.heroe .boton--linea:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.lugares { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; padding-top: 22px; border-top: 1px solid rgba(245, 244, 242, .16); width: 100%; }
.lugares li { display: inline-flex; align-items: center; gap: 8px; font: 500 0.82rem/1.2 var(--dato); letter-spacing: .04em; text-transform: uppercase; color: #cfc9c4; }
.lugares .icono { width: 18px; height: 18px; color: var(--rojo-vivo); }

.escena { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); }
.escena .telefono { --tel: clamp(220px, 21vw, 280px); }
.capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.capa--visible { opacity: 1; }
.capa--escritorio { display: grid; align-content: start; gap: 18px; padding: 16% 9% 0; background: radial-gradient(120% 80% at 20% 0%, #4a2326, #17151a 60%); color: #fff; }
.capa--escritorio .hora { font: 600 calc(var(--tel) * .2)/1 var(--titular); letter-spacing: -.03em; text-align: center; }
.capa--escritorio .fecha { margin-top: -10px; font: 500 calc(var(--tel) * .045)/1 var(--texto); text-align: center; opacity: .8; }
.capa--escritorio .apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9% 7%; margin-top: 16%; }
.capa--escritorio .apps span { aspect-ratio: 1; border-radius: 24%; background: rgba(255, 255, 255, .14); }
.capa--escritorio .apps .propia { position: relative; background: var(--rojo); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.capa--escritorio .apps .propia svg { width: 62%; }
.capa--escritorio .apps .propia::after { content: 'Supervisa'; position: absolute; top: 108%; left: 50%; transform: translateX(-50%); font: 500 calc(var(--tel) * .036)/1 var(--texto); }
.capa--presentacion { display: grid; place-content: center; justify-items: center; gap: 6%; background: var(--papel); color: var(--tinta); }
.capa--presentacion svg { width: calc(var(--tel) * .3); }
.capa--presentacion strong { font: 800 calc(var(--tel) * .15)/1 var(--titular); letter-spacing: -.03em; }
.capa--presentacion strong b { color: var(--rojo); font-weight: inherit; }
.capa--presentacion small { font: 500 calc(var(--tel) * .034)/1 var(--dato); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.toque { position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; }

.pasos { display: grid; gap: 4px; min-width: 0; flex: 0 0 clamp(170px, 17vw, 230px); }
.pasos li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 9px 12px 9px 0; font-size: .92rem; line-height: 1.25; color: #9d9792; border-left: 2px solid rgba(245, 244, 242, .14); padding-left: 14px; transition: color .3s, border-color .3s; }
.pasos li span { font: 500 .72rem/1 var(--dato); letter-spacing: .08em; color: inherit; }
.pasos li.activo { color: var(--blanco); border-left-color: var(--rojo-vivo); }
.pasos li.hecho { color: #cfc9c4; border-left-color: rgba(245, 244, 242, .4); }

@media (max-width: 900px) {
  .heroe__fila { grid-template-columns: 1fr; }
  .escena { flex-direction: column; }
  .escena .telefono { --tel: min(66vw, 280px); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; width: 100%; flex: none; }
}

/* --------------------------------------------------------------- servicios */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.servicio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) 0; border-radius: 22px; background: var(--blanco); overflow: hidden; text-decoration: none; color: var(--tinta); box-shadow: 0 0 0 1px var(--linea); transition: transform .25s, box-shadow .25s; }
.servicio:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--tinta), 0 30px 50px -30px rgba(27, 26, 26, .4); }
.servicio--oscuro { background: var(--tinta); color: var(--papel); box-shadow: none; }
.servicio--oscuro .servicio__lista li, .servicio--oscuro p { color: #cfc9c4; }
.servicio__texto { display: grid; align-content: start; gap: 14px; padding-bottom: clamp(24px, 3vw, 40px); min-width: 0; }
.servicio__texto p { color: var(--gris); }
.servicio__texto .titulo { font-size: clamp(1.6rem, 2.5vw, 2.15rem); }
.servicio__lista { display: grid; gap: 8px; margin-top: 4px; }
.servicio__lista li { display: flex; gap: 10px; font-size: .96rem; line-height: 1.35; color: var(--tinta-3); }
.servicio__lista .icono { width: 18px; height: 18px; margin-top: 2px; color: var(--rojo); }
.servicio .telefono { --tel: clamp(150px, 15vw, 200px); align-self: end; margin-bottom: calc(var(--tel) * -0.5); }
.servicio .enlace { justify-self: start; margin-top: 8px; }
@media (max-width: 860px) { .servicios { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .servicio { grid-template-columns: 1fr; }
  .servicio .telefono { justify-self: center; --tel: 190px; margin-bottom: -120px; }
}

/* ------------------------------------------------------------------ fichas */
.fichas { display: grid; gap: clamp(24px, 4vw, 48px); }
.fichas__botones { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.fichas__botones::-webkit-scrollbar { display: none; }
.fichas__botones button { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 16px; border: 1.5px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta-3); font: 600 .95rem/1 var(--texto); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.fichas__botones button:hover { border-color: var(--tinta); }
.fichas__botones button[aria-selected='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.fichas__botones .icono { width: 18px; height: 18px; }
.tramo--oscuro .fichas__botones button { border-color: var(--tinta-3); color: #cfc9c4; }
.tramo--oscuro .fichas__botones button[aria-selected='true'] { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 6vw, 90px); }
.ficha[hidden] { display: none; }
.ficha__texto { display: grid; gap: 18px; justify-items: start; }
.ficha__pantallas { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 24px); }
.ficha__pantallas .telefono:nth-child(2) { --tel: clamp(150px, 16vw, 200px); margin-bottom: 26px; }
@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha__pantallas { justify-content: center; order: -1; }
  .ficha__pantallas .telefono { --tel: min(46vw, 230px); }
  .ficha__pantallas .telefono:nth-child(2) { --tel: min(34vw, 170px); }
}

/* -------------------------------------------------------- listas de puntos */
.puntos { display: grid; gap: 12px; }
.puntos li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.45; }
.puntos .icono { width: 22px; height: 22px; margin-top: 2px; color: var(--rojo); }
.tramo--oscuro .puntos .icono, .tramo--rojo .puntos .icono { color: currentColor; }
.puntos strong { font-weight: 600; }

/* ---------------------------------------------------------------- funciones */
.funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.funcion { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: var(--blanco); }
.funcion .icono { width: 28px; height: 28px; color: var(--rojo); }
.funcion h3 { font: 700 1.12rem/1.2 var(--titular); letter-spacing: -.01em; }
.funcion p { font-size: .96rem; line-height: 1.5; color: var(--gris); }
@media (max-width: 900px) {
  .funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funcion:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .funciones { grid-template-columns: 1fr; } }
.tramo--oscuro .funciones { background: var(--tinta-3); border-color: var(--tinta-3); }
.tramo--oscuro .funcion { background: var(--tinta-2); }
.tramo--oscuro .funcion p { color: #bfb9b4; }
.tramo--oscuro .funcion .icono { color: var(--rojo-vivo); }

/* ------------------------------------------------------- bloques alternados */
.bloque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.bloque + .bloque { margin-top: clamp(64px, 9vw, 130px); }
.bloque__texto { display: grid; gap: 18px; justify-items: start; }
.bloque__imagen { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2vw, 22px); min-width: 0; }
.bloque__imagen .monitor { width: 100%; }
.bloque--inverso .bloque__imagen { order: -1; }
.bloque__imagen .telefono + .telefono { --tel: clamp(150px, 16vw, 200px); margin-bottom: 28px; }
@media (max-width: 860px) {
  .bloque { grid-template-columns: 1fr; }
  .bloque .bloque__imagen { order: -1; }
  .bloque__imagen .telefono { --tel: min(50vw, 240px); }
  .bloque__imagen .telefono + .telefono { --tel: min(36vw, 175px); }
}

/* ------------------------------------------------------------------ videos */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.video { display: grid; justify-items: center; gap: 22px; text-align: center; }
.video .telefono { --tel: clamp(200px, 21vw, 260px); }
.video h3 { font: 700 1.2rem/1.2 var(--titular); }
.video p { font-size: .96rem; color: var(--gris-claro); max-width: 30ch; }
.telefono--video video { background: var(--papel); }
@media (max-width: 760px) {
  .videos { grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(clamp(18px, 4vw, 36px) * -1); padding-inline: clamp(18px, 4vw, 36px); padding-bottom: 8px; scrollbar-width: none; }
  .videos::-webkit-scrollbar { display: none; }
  .video { scroll-snap-align: center; }
  .video .telefono { --tel: min(56vw, 250px); }
}

/* ---------------------------------------------------------------- registro */
.registro { display: grid; gap: 0; border-radius: 16px; background: var(--tinta-2); padding: 8px 0; font: 400 .86rem/1.4 var(--dato); color: #d8d2cd; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); width: 100%; }
.registro li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 18px; border-bottom: 1px solid rgba(245, 244, 242, .07); }
.registro li:last-child { border-bottom: 0; }
.registro time { color: #8f8984; }
.registro .estado { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.registro .estado--ok { background: rgba(30, 158, 87, .2); color: #6fe0a4; }
.registro .estado--ojo { background: rgba(217, 119, 11, .22); color: #ffbd6b; }
.registro .estado--rojo { background: rgba(230, 38, 41, .25); color: #ff9c9e; }

/* -------------------------------------------------------------------- pasos */
.camino { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); counter-reset: paso; }
.camino li { counter-increment: paso; display: grid; align-content: start; gap: 10px; padding-top: 20px; border-top: 2px solid var(--tinta); }
.camino li::before { content: '0' counter(paso); font: 600 .85rem/1 var(--dato); color: var(--rojo); letter-spacing: .1em; }
.camino h3 { font: 700 1.25rem/1.2 var(--titular); }
.camino p { color: var(--gris); font-size: .98rem; }
@media (max-width: 760px) { .camino { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- preguntas */
.preguntas { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px; font: 700 1.1rem/1.3 var(--titular); cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--rojo); border-bottom: 2px solid var(--rojo); transform: rotate(45deg); transition: transform .2s; margin-right: 6px; }
.preguntas details[open] summary::after { transform: rotate(-135deg); }
.preguntas details p { padding: 0 2px 22px; color: var(--gris); max-width: 68ch; }

/* ----------------------------------------------------------- portada interna */
.portada { background: var(--tinta); color: var(--papel); padding-block: clamp(40px, 6vw, 80px) 0; overflow: hidden; position: relative; }
.portada::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 82% 60%, rgba(209, 31, 34, .28), transparent 70%); pointer-events: none; }
.portada__fila { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(24px, 5vw, 70px); }
.portada__texto { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(48px, 7vw, 96px); }
.portada .bajada { color: #cfc9c4; }
.portada .rotulo { color: var(--gris-claro); }
.portada .boton--linea { color: var(--papel); }
.portada .boton--linea:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.portada__imagen { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2vw, 22px); }
.portada__imagen .telefono { --tel: clamp(200px, 23vw, 290px); margin-bottom: calc(var(--tel) * -0.42); }
.portada__imagen .telefono + .telefono { --tel: clamp(150px, 17vw, 215px); }
.portada--corta { padding-block: clamp(48px, 7vw, 96px); }
.portada--corta .portada__texto { padding-bottom: 0; max-width: 780px; }
@media (max-width: 860px) {
  .portada__fila { grid-template-columns: 1fr; }
  .portada__texto { padding-bottom: 12px; }
  .portada__imagen .telefono { --tel: min(52vw, 250px); }
  .portada__imagen .telefono + .telefono { --tel: min(38vw, 180px); }
}
.migas { display: flex; gap: 8px; font: 500 .78rem/1 var(--dato); letter-spacing: .06em; text-transform: uppercase; color: var(--gris-claro); }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--blanco); }

/* cifras: datos reales del producto, en fila */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.cifra { display: grid; gap: 6px; padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 30px); background: var(--papel); }
.cifra strong { font: 800 clamp(1.9rem, 3.4vw, 2.7rem)/1 var(--titular); font-stretch: 110%; letter-spacing: -.02em; }
.cifra strong small { font-size: .5em; font-weight: 700; margin-left: 4px; }
.cifra span { font-size: .92rem; color: var(--gris); line-height: 1.4; }

/* tarjetas de la emergencia */
.emergencia { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 6vw, 90px); }
.emergencia__texto { display: grid; gap: 20px; justify-items: start; }
.emergencia__pantallas { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 24px); }
.emergencia__pantallas .telefono { box-shadow: inset 0 0 0 2px #3d3a38, 0 40px 70px -30px rgba(60, 0, 0, .7); }
.emergencia__pantallas .telefono + .telefono { --tel: clamp(150px, 16vw, 205px); margin-bottom: 30px; }
@media (max-width: 860px) {
  .emergencia { grid-template-columns: 1fr; }
  .emergencia__pantallas { justify-content: center; }
  .emergencia__pantallas .telefono { --tel: min(48vw, 230px); }
  .emergencia__pantallas .telefono + .telefono { --tel: min(36vw, 172px); }
}

/* contacto */
.contactos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.contacto { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
.contacto .icono { width: 30px; height: 30px; color: var(--rojo); }
.contacto h2 { font: 700 1.3rem/1.2 var(--titular); }
.contacto p { color: var(--gris); }
.contacto .boton { justify-self: start; margin-top: 6px; }
.contacto .dato { font-size: 1.15rem; font-weight: 600; user-select: all; }

/* cierre y pie */
.tramo--cierre { background: var(--tinta); color: var(--papel); position: relative; overflow: hidden; }
.tramo--cierre::before { content: ''; position: absolute; inset: 0; background: radial-gradient(45% 90% at 100% 100%, rgba(209, 31, 34, .35), transparent 70%); pointer-events: none; }
.cierre { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: clamp(24px, 5vw, 64px); }
.cierre > div:first-child { display: grid; gap: 16px; }
.cierre .bajada { color: #cfc9c4; }
.cierre__acciones { display: grid; gap: 12px; }
@media (max-width: 860px) { .cierre { grid-template-columns: 1fr; } }

.pie { background: #121111; color: #b9b3ae; padding-block: clamp(48px, 6vw, 72px) 28px; font-size: .95rem; }
.pie__columnas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); }
.pie .marca { color: var(--blanco); margin-bottom: 14px; }
.pie h2 { font: 500 .74rem/1 var(--dato); letter-spacing: .12em; text-transform: uppercase; color: #8f8984; margin-bottom: 14px; }
.pie nav, .pie__columnas > div { display: grid; align-content: start; gap: 10px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie__marca p { max-width: 36ch; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(32px, 5vw, 56px); padding-top: 22px; border-top: 1px solid #2a2827; font: 400 .78rem/1.4 var(--dato); color: #8f8984; }
@media (max-width: 860px) { .pie__columnas { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 460px) { .pie__columnas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- movimiento */
/* Lo que aparece al bajar parte de un estado visible: sin el programa de animación, la página se lee entera igual */
.con-movimiento [data-aparece] { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .con-movimiento [data-aparece] { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------ la vuelta al sitio de PSCORP */
.franja-empresa { background: #121111; color: #b9b3ae; font-size: .86rem; }
.franja-empresa .ancho { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.franja-empresa a { display: inline-flex; align-items: center; gap: 8px; color: var(--blanco); font-weight: 600; text-decoration: none; }
.franja-empresa a:hover { text-decoration: underline; text-decoration-color: var(--rojo-vivo); text-underline-offset: 3px; }
.franja-empresa .icono { width: 16px; height: 16px; }
.navegacion > a.navegacion__empresa { display: none; }
@media (max-width: 1180px) {
  /* En el celular la vuelta va dentro del menú: la franja correría la cabecera y el menú la taparía */
  .franja-empresa { display: none; }
  .navegacion > a.navegacion__empresa { display: block; color: var(--gris); font-size: 1.1rem; }
}

/* El menú del celular cuelga de la cabecera: con el desenfoque de fondo, la cabecera pasa a ser la referencia de lo
   'fijo' y el menú quedaba de alto cero (no se abría). Corregido el 2026-10-13. */
@media (max-width: 1180px) {
  .navegacion { position: absolute; inset: 100% 0 auto 0; height: calc(100vh - 68px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 68px - env(safe-area-inset-top, 0px)); }
}

/* Dentro de la página de Control de Rondas de rocidop.com.ar el sitio se ve tal cual, con su menú. El pie y la vuelta a
   PSCORP no van: abajo ya está el pie de Rocidop. El alto de pantalla es el de todo el sitio (marco con alto
   automático), así que el menú del celular toma el alto de su contenido. */
.embebido .franja-empresa, .embebido .navegacion > a.navegacion__empresa, .embebido .pie { display: none; }
@media (max-width: 1180px) {
  .embebido .navegacion { height: auto; padding-bottom: 32px; }
}