/* CSI Seguridad Inteligente — sitio web
   Colores y tipografía de la guía de marca (marca/guia.html). */

:root {
  --noche: #0E2A47;
  --noche-honda: #0A1F36;
  --amarillo: #F6B21A;
  --amarillo-suave: #FFF1CC;
  --oro: #8A5F00;
  --crema: #FBF6EC;
  --blanco: #FFFFFF;
  --tinta: #13202E;
  --gris: #55606C;
  --celeste: #E3ECF5;
  --linea: #E6DECE;
  --wa: #25D366;
  --wa-tinta: #062E18;

  --radio: 22px;
  --radio-chico: 12px;
  --ancho: 1180px;
  --margen: clamp(1.15rem, 4vw, 2.5rem);
  --aire: clamp(4rem, 9vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.032em; line-height: 1.05; }
h3 { font-size: 1.25rem; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }

.ancho { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--amarillo); color: var(--noche); font-weight: 800;
  padding: .6rem 1rem; border-radius: 8px;
}
.saltar:focus { top: 1rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 800; line-height: 1.15; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.boton:active { transform: translateY(1px); }
.boton-wa { background: var(--wa); color: var(--wa-tinta); }
.boton-wa:hover { background: #3BE07A; }
.boton-linea { border-color: rgba(251, 246, 236, .55); color: var(--crema); }
.boton-linea:hover { border-color: var(--crema); }
.boton-oscuro { background: var(--noche); color: var(--crema); }
.boton-oscuro:hover { background: #17406B; }
.boton-chico { padding: .6rem 1rem; font-size: .95rem; }
.boton-grande { padding: 1.15rem 1.9rem; font-size: 1.15rem; }
.ico-wa { width: 1.35em; height: 1.35em; flex: none; }

/* ---------- Aviso de temporada ---------- */
.aviso { background: var(--amarillo); color: var(--noche); text-align: center; font-weight: 800; font-size: .95rem; }
.aviso a { display: block; padding: .6rem var(--margen); text-decoration: underline; text-underline-offset: 3px; }
.aviso[hidden] { display: none; }

/* ---------- Cabecera ---------- */
.cabeza { background: var(--noche); color: var(--crema); }
.cabeza-fila { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.marca { margin-right: auto; display: block; }
.marca img { width: 128px; height: auto; }
.menu { display: none; gap: 1.75rem; font-weight: 600; font-size: .98rem; }
.menu a { text-decoration: none; padding-block: .4rem; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--amarillo); }

/* ---------- Inicio ---------- */
.inicio { background: var(--noche); color: var(--crema); padding-block: clamp(1.75rem, 5vw, 4rem) clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.inicio-rejilla { display: grid; gap: 2.75rem; }
.inicio h1 {
  font-size: clamp(2.45rem, 6.1vw, 4.5rem);
  line-height: 1.01; letter-spacing: -0.04em;
  max-width: 13ch;
}
.entrada { margin-top: 1.35rem; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.5; color: #D6E1ED; max-width: 33rem; }
.acciones { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.pruebas { margin-top: 2.1rem; display: grid; gap: .55rem; font-weight: 600; font-size: .98rem; color: #D6E1ED; }
.pruebas li, .checks li { position: relative; padding-left: 1.85rem; }
.pruebas li::before, .checks li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 1.15rem; height: 1.15rem;
  background: var(--amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.inicio-fotos { position: relative; padding-bottom: 11rem; }
.foto-camara { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 30% 75%; border-radius: var(--radio); }

.monitor {
  position: absolute; left: -.35rem; right: 1.5rem; bottom: 0;
  background: #06121F; color: var(--crema);
  border-radius: 16px; padding: .5rem;
  box-shadow: 0 22px 50px -12px rgba(3, 12, 24, .75);
}
.monitor img { width: 100%; border-radius: 9px; }
.monitor-barra {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .45rem .5rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; font-size: .78rem; letter-spacing: .02em;
}
.monitor-hora { margin-left: auto; color: var(--amarillo); }
.punto { width: .6rem; height: .6rem; border-radius: 50%; background: #FF4D3D; animation: graba 1.6s steps(1) infinite; }
@keyframes graba { 50% { opacity: .25; } }
.monitor figcaption { padding: .55rem .45rem .3rem; font-size: .85rem; line-height: 1.35; color: #C9D6E4; }

/* ---------- Bloques ---------- */
.bloque { padding-block: var(--aire); }
.crema { background: var(--crema); }
.blanco { background: var(--blanco); }
.noche { background: var(--noche); color: var(--crema); }

.titulo { max-width: 41rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.titulo p { margin-top: .9rem; font-size: 1.15rem; color: var(--gris); }
.titulo-chico h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.titulo-chico p { font-size: 1.05rem; }

/* ---------- Lo que vas a ver ---------- */
.pantallas { display: grid; gap: 2.5rem; }
.pantalla img { width: 100%; border-radius: 14px; border: 8px solid #06121F; background: #06121F; }
.pantalla figcaption { margin-top: .9rem; color: var(--gris); max-width: 38rem; }
.pantalla figcaption strong { color: var(--tinta); }
.ventajas { display: grid; gap: 1.6rem; align-content: start; }
.ventajas > div { border-top: 3px solid var(--amarillo); padding-top: .9rem; }
.ventajas p { margin-top: .4rem; color: var(--gris); }

/* ---------- Precios ---------- */
.precios-rejilla { display: grid; gap: 2.5rem; }

.kits { border-bottom: 1px solid var(--linea); }
.kit {
  position: relative;
  display: grid; gap: .8rem 1.5rem; align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nombre precio" "para para" "boton boton";
  padding: 1.5rem 0; border-top: 1px solid var(--linea);
}
.kit-nombre { grid-area: nombre; }
.kit-nombre h3 { font-size: 1.55rem; }
.kit-para { grid-area: para; color: var(--gris); max-width: 30rem; }
.kit-para strong { color: var(--tinta); }
.kit-precio { grid-area: precio; text-align: right; }
.kit .boton { grid-area: boton; }
.monto { display: block; font-size: clamp(2.1rem, 4.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--noche); font-variant-numeric: tabular-nums; }
.unidad { display: block; margin-top: .3rem; font-size: .85rem; font-weight: 600; color: var(--gris); }

.lentes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .55rem; max-width: 8.5rem; }
.lentes i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--amarillo) 0 2.5px, var(--noche) 3.5px); }

.kit-recomendado {
  background: var(--amarillo-suave); border-top-color: transparent;
  margin-inline: -1rem; padding: 2.6rem 1rem 1.6rem; border-radius: var(--radio-chico);
}
.kit-recomendado + .kit { border-top-color: transparent; }
.sello {
  position: absolute; left: 1rem; top: .85rem;
  font-size: .8rem; font-weight: 800; color: var(--oro);
}

.incluye { background: var(--noche); color: var(--crema); border-radius: var(--radio); overflow: hidden; align-self: start; }
.incluye img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.incluye-texto { padding: 1.6rem 1.5rem 1.75rem; }
.checks { margin-top: 1rem; display: grid; gap: .6rem; font-weight: 600; }
.cuenta { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(251, 246, 236, .2); color: #D6E1ED; font-size: .98rem; }
.cuenta strong { color: var(--amarillo); display: block; font-size: 1.1rem; line-height: 1.35; margin-bottom: .3rem; }

.sueltas { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.sueltas-lista { display: grid; gap: 1.75rem; }
.sueltas-lista li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.15rem; align-items: start; }
.sueltas-lista img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio-chico); }
.sueltas-lista h4 { font-size: 1.15rem; }
.sueltas-lista p { margin-top: .35rem; color: var(--gris); font-size: .98rem; line-height: 1.5; }
.sueltas-lista .precio-suelto { margin-top: .6rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--noche); }
.sueltas-lista a, .mantenimiento a { font-weight: 800; color: var(--noche); text-underline-offset: 3px; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; }
.sueltas-lista a { display: inline-block; margin-top: .55rem; font-size: .98rem; }
.mantenimiento { margin-top: 2.5rem; padding: 1.25rem 1.4rem; background: var(--crema); border-radius: var(--radio-chico); max-width: 46rem; }

/* ---------- Precio final ---------- */
.comparar { display: grid; gap: 2.5rem; }
.comparar-texto p { margin-top: 1.1rem; color: #D6E1ED; font-size: 1.1rem; max-width: 34rem; }
.comparar-texto p:last-child { color: var(--crema); font-weight: 700; }
.respuestas > div { padding: 1.1rem 0; border-top: 1px solid rgba(251, 246, 236, .18); }
.respuestas > div:last-child { border-bottom: 1px solid rgba(251, 246, 236, .18); }
.respuestas dt { color: #A9BCD0; font-size: .98rem; }
.respuestas dd { position: relative; margin-top: .25rem; padding-left: 1.85rem; font-weight: 700; font-size: 1.1rem; line-height: 1.4; }
.respuestas dd::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.2rem; height: 1.2rem; background: var(--amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Cotizador ---------- */
.cotizador { display: grid; gap: 2rem; }
.cotizador fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.cotizador fieldset[hidden] { display: none; }
.cotizador legend { padding: 0; margin-bottom: .9rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: .7rem; }
.num {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%; background: var(--noche); color: var(--amarillo); font-size: .95rem; letter-spacing: 0;
}
.opciones { display: flex; flex-wrap: wrap; gap: .55rem; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: block; padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--blanco); border: 2px solid var(--linea);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.opcion:hover span { border-color: var(--noche); }
.opcion input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.opcion input:focus-visible + span { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.lista-lugar {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 20rem; padding: .8rem 2.8rem .8rem 1.1rem;
  font: inherit; font-weight: 700; color: var(--tinta);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E2A47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 1.1rem no-repeat;
  border: 2px solid var(--linea); border-radius: 999px; cursor: pointer;
}
.lista-lugar:hover { border-color: var(--noche); }
.nota-lugar { margin-top: .7rem; font-size: .95rem; color: var(--gris); }

.resultado { background: var(--noche); color: var(--crema); border-radius: var(--radio); padding: 1.75rem 1.5rem 1.6rem; align-self: start; }
.resultado-etiqueta { font-size: .9rem; font-weight: 700; color: #A9BCD0; }
.resultado-nombre { margin-top: .35rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.resultado-precio { margin-top: .6rem; font-size: clamp(3rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.resultado-precio:empty { display: none; }
.resultado-precio small { display: block; margin-top: .45rem; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: #D6E1ED; }
.resultado-nota { margin-top: .9rem; color: #D6E1ED; }
.resultado .boton { margin-top: 1.4rem; width: 100%; }
.resultado-pie { margin-top: 1rem; font-size: .88rem; color: #A9BCD0; line-height: 1.45; }

/* ---------- Cómo trabajamos ---------- */
.proceso { display: grid; gap: 3rem; }
.pasos-lista { counter-reset: paso; display: grid; gap: 1.9rem; max-width: 36rem; }
.pasos-lista li { counter-increment: paso; position: relative; padding-left: 3.6rem; }
.pasos-lista li::before {
  content: counter(paso); position: absolute; left: 0; top: -.2rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: var(--noche); font-weight: 800; font-size: 1.15rem;
}
.pasos-lista li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: -1.7rem; width: 2px; background: var(--linea);
}
.pasos-lista p { margin-top: .4rem; color: var(--gris); }
.proceso-foto img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--radio); }
.proceso-foto figcaption { margin-top: .9rem; font-size: .95rem; color: var(--gris); max-width: 30rem; }

/* ---------- Trabajos ---------- */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.galeria li { position: relative; overflow: hidden; border-radius: 14px; background: var(--celeste); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.galeria span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .85rem .7rem;
  background: linear-gradient(to top, rgba(6, 18, 31, .82), rgba(6, 18, 31, 0));
  color: var(--crema); font-weight: 700; font-size: .88rem; line-height: 1.25;
}

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 1rem; }
.acordeon { border-bottom: 1px solid var(--linea); }
.acordeon details { border-top: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.2rem 3rem 1.2rem 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.3;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem;
  background:
    linear-gradient(var(--noche), var(--noche)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--noche), var(--noche)) center / 2.5px 100% no-repeat;
  transition: transform .2s ease;
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details p { padding: 0 2.5rem 1.4rem 0; color: var(--gris); max-width: 40rem; }

/* ---------- Cierre ---------- */
.cierre-rejilla { display: grid; gap: 3rem; }
.cierre h2 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); max-width: 16ch; }
.cierre h2 + p { margin-top: 1.2rem; font-size: 1.2rem; color: #D6E1ED; max-width: 32rem; }
.cierre .boton { margin-top: 2rem; }
.datos { display: grid; gap: 0; align-self: end; }
.datos > div { padding: 1rem 0; border-top: 1px solid rgba(251, 246, 236, .18); }
.datos dt { font-size: .9rem; color: #A9BCD0; }
.datos dd { font-weight: 700; font-size: 1.12rem; }
.datos a { text-decoration-color: var(--amarillo); text-underline-offset: 3px; text-decoration-thickness: 2px; }

.pie { background: var(--noche-honda); color: #A9BCD0; padding-block: 1.75rem 6.5rem; font-size: .92rem; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ---------- Barra fija en celular ---------- */
.barra-wa {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1rem; border-radius: 999px;
  background: var(--wa); color: var(--wa-tinta); font-weight: 800; text-decoration: none;
  box-shadow: 0 10px 30px -6px rgba(3, 12, 24, .55);
  transform: translateY(140%); transition: transform .25s ease;
}
.barra-wa.visible { transform: none; }

/* ============ Tableta ============ */
@media (min-width: 700px) {
  .cabeza .boton-chico span::before { content: "WhatsApp "; }
  .ventajas { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .kit {
    grid-template-columns: 9.5rem 1fr auto auto;
    grid-template-areas: "nombre para precio boton";
    gap: 1.5rem; padding: 1.6rem 0;
  }
  .kit-recomendado { margin-inline: -1.25rem; padding: 2.9rem 1.25rem 1.6rem; }
  .sello { left: 1.25rem; }
  .sueltas-lista { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .sueltas-lista li { grid-template-columns: 1fr; }
  .sueltas-lista img { aspect-ratio: 4 / 3.4; }
  .galeria { grid-template-columns: 1.55fr 1fr 1fr 1fr 1.55fr; grid-auto-rows: clamp(190px, 23vw, 290px); gap: .8rem; }
  .galeria img { aspect-ratio: auto; }
  .galeria .g-alta { grid-row: 1 / span 2; }
  .galeria .g-alta:first-child { grid-column: 1; }
  .galeria .g-alta:not(:first-child) { grid-column: 5; }
  .cotizador { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
  .resultado { position: sticky; top: 1.5rem; padding: 2rem 1.9rem; }
  .pie { padding-bottom: 1.75rem; }
  .barra-wa { display: none; }
}

/* ============ Escritorio ============ */
@media (min-width: 980px) {
  .cabeza { position: sticky; top: 0; z-index: 20; }
  section[id] { scroll-margin-top: 4.5rem; }
  .menu { display: flex; }
  .marca img { width: 137px; }

  .inicio-rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 4.5rem; align-items: center; }
  .inicio-fotos { padding-bottom: 7.5rem; }
  .foto-camara { aspect-ratio: 4 / 4.5; object-position: 30% 40%; }
  .monitor { left: -20%; right: auto; width: 72%; bottom: 0; }

  .pantallas { grid-template-columns: 1.5fr 1fr; gap: 3.5rem; align-items: start; }
  .ventajas { grid-template-columns: 1fr; gap: 1.75rem; }

  .precios-rejilla { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 4rem; }
  .incluye { position: sticky; top: 6rem; }

  .comparar { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
  .proceso { grid-template-columns: 1.2fr .8fr; gap: 5rem; align-items: start; }
  .preguntas { grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: start; }
  .preguntas .titulo { position: sticky; top: 6.5rem; }
  .cierre-rejilla { grid-template-columns: 1.3fr .7fr; gap: 5rem; }
  .resultado { top: 6rem; }
}

@media (min-width: 980px) and (max-width: 1150px) {
  .kit { grid-template-columns: 8rem 1fr auto; grid-template-areas: "nombre para precio" "boton boton boton"; }
  .kit .boton { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}