/* Altara10 — sistema de diseño
   Paleta extraída del sitio anterior del cliente (K-Means + filtro de saturación).
   Ningún hexadecimal fuera del bloque :root. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Extraídos del sitio anterior del cliente ---- */
  --noche:          #0B0B21;  /* fondo dominante del hero, 33.2% */
  --violeta:        #9C35E6;  /* acento de marca, matiz 275° */
  --indigo:         #372F69;  /* fondo de tarjetas de la rejilla */
  --turquesa:       #48B5CF;  /* acento secundario. SOLO GRÁFICO
                                 Y SOLO SOBRE FONDO OSCURO */

  /* ---- Derivados sobre el mismo eje de matiz ---- */
  --noche-2:        #14142E;  /* superficie oscura alterna */
  --noche-3:        #1E1B45;  /* tarjeta sobre oscuro */
  --violeta-texto:  #7A22C9;  /* acento como TEXTO sobre claro */
  --violeta-claro:  #C08BF5;  /* acento como TEXTO sobre oscuro */
  --papel:          #FFFFFF;
  --bruma:          #F5F3FA;  /* superficie clara alterna */
  --gris-texto:     #524C6B;  /* secundario sobre claro */
  --texto-tenue:    #B9B8D6;  /* secundario sobre oscuro */
  --borde-claro:    #E4E0EE;  /* separador decorativo sobre claro */
  --borde-oscuro:   #2E2A55;  /* separador decorativo sobre oscuro */
  --borde-campo:    #807A98;  /* borde funcional sobre claro */
  --borde-campo-o:  #6B65A0;  /* borde funcional sobre oscuro */

  /* ---- Estados de formulario, funcionales, no de marca ---- */
  --error:          #E4626B;  /* sobre oscuro */
  --error-claro:    #B32A22;  /* sobre claro */
  --exito:          #5FD39A;  /* sobre oscuro */
  --exito-claro:    #15693B;  /* sobre claro */

  /* ---- Degradado de marca. UNA sola receta ---- */
  --degradado: linear-gradient(135deg, #1E1B45 0%, #4B2B8F 45%, #9C35E6 100%);

  /* Tipografía */
  --t-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-cuerpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fuente-titulo: "Manrope", system-ui, sans-serif;
  --fuente-cuerpo: "Inter", system-ui, sans-serif;

  /* Espaciado (escala de 4px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --contenedor: 1200px;
  --canal: 24px;
  --radio: 12px;
  --barra-alto: 72px;
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-alto) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.65;
  color: var(--noche);
  background: var(--papel);
}

@media (max-width: 1023px) {
  body {
    padding-bottom: var(--s-9);
  }

  a, button, input, select, textarea, summary, label {
    scroll-margin-bottom: var(--s-9);
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
}

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }

.prosa {
  max-width: 68ch;
}

.prosa + .prosa,
.prosa + p,
p + p {
  margin-top: var(--s-4);
}

/* ---------- Layout ---------- */

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

.seccion {
  padding-block: var(--s-9);
}

.fondo-noche { background: var(--noche); color: var(--papel); }
.fondo-noche-2 { background: var(--noche-2); color: var(--papel); }
.fondo-noche-3 { background: var(--noche-3); color: var(--papel); }
.fondo-papel { background: var(--papel); color: var(--noche); }
.fondo-bruma { background: var(--bruma); color: var(--noche); }

.fondo-noche .prosa,
.fondo-noche-2 .prosa,
.fondo-noche-3 .prosa,
.fondo-noche p,
.fondo-noche-2 p,
.fondo-noche-3 p {
  color: var(--texto-tenue);
}

.fondo-noche h1,
.fondo-noche h2,
.fondo-noche h3,
.fondo-noche-2 h1,
.fondo-noche-2 h2,
.fondo-noche-2 h3,
.fondo-noche-3 h1,
.fondo-noche-3 h2,
.fondo-noche-3 h3 {
  color: var(--papel);
}

.fondo-papel .prosa,
.fondo-bruma .prosa,
.fondo-papel p,
.fondo-bruma p {
  color: var(--gris-texto);
}

.acento-oscuro { color: var(--violeta-claro); }
.acento-claro { color: var(--violeta-texto); }

.rejilla-2 {
  display: grid;
  gap: var(--s-6);
}

.rejilla-pasos {
  display: grid;
  gap: var(--s-5);
}

.lista-sencilla {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.lista-sencilla li {
  position: relative;
  padding-left: var(--s-5);
}

.lista-sencilla li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

.fondo-papel .lista-sencilla li::before,
.fondo-bruma .lista-sencilla li::before {
  background: var(--violeta-texto);
}

.fondo-noche .lista-sencilla li::before,
.fondo-noche-2 .lista-sencilla li::before,
.fondo-noche-3 .lista-sencilla li::before {
  background: var(--turquesa);
}

/* ---------- Foco ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--violeta-texto);
  outline-offset: 3px;
}

.fondo-noche :focus-visible,
.fondo-noche-2 :focus-visible,
.fondo-noche-3 :focus-visible,
.barra :focus-visible,
.menu-panel :focus-visible,
.pie :focus-visible,
.hero :focus-visible,
.salto:focus-visible,
.flotantes :focus-visible,
.btn-whatsapp-flotante:focus-visible,
.btn-arriba:focus-visible {
  outline-color: var(--violeta-claro);
}

/* ---------- Salto al contenido ---------- */

.salto {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: 400;
  padding: var(--s-3) var(--s-4);
  background: var(--noche);
  color: var(--papel);
  text-decoration: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transform: translateY(-150%);
}

.salto:focus,
.salto:focus-visible {
  transform: translateY(0);
}

/* ---------- Barra superior ---------- */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  height: var(--barra-alto);
  background: var(--noche);
  border-bottom: 1px solid var(--borde-oscuro);
}

.barra-interno {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--papel);
  min-height: 48px;
  flex-shrink: 0;
}

.marca img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.marca span {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.nav-escritorio {
  display: none;
  margin-left: auto;
}

.nav-escritorio ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-escritorio a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-3);
  text-decoration: none;
  color: var(--texto-tenue);
  position: relative;
}

.nav-escritorio a::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 10px;
  height: 2px;
  background: var(--violeta-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-escritorio a:hover,
.nav-escritorio a:focus-visible,
.nav-escritorio a[aria-current="page"] {
  color: var(--papel);
}

.nav-escritorio a:hover::after,
.nav-escritorio a:focus-visible::after,
.nav-escritorio a[aria-current="page"]::after {
  transform: scaleX(1);
}

.barra-acciones {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.nav-escritorio + .barra-acciones {
  margin-left: 0;
}

.btn-whatsapp-barra {
  gap: var(--s-2);
}

.btn-whatsapp-barra svg {
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .btn-whatsapp-barra .btn-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .btn-whatsapp-barra {
    padding: 0;
    width: 48px;
  }
}

.btn-menu {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borde-campo-o);
  color: var(--papel);
  cursor: pointer;
  border-radius: 8px;
}

.btn-menu svg {
  pointer-events: none;
}

/* ---------- Menú móvil ---------- */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: var(--noche);
  color: var(--papel);
  padding: calc(var(--barra-alto) + var(--s-5)) var(--canal) var(--s-7);
  overflow: auto;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s ease, visibility 0.28s;
}

.menu-panel.es-abierto {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.menu-panel[hidden] {
  display: block;
}

.menu-panel nav ul {
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s-3) 0;
  text-decoration: none;
  color: var(--papel);
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  border-bottom: 1px solid var(--borde-oscuro);
}

.menu-panel a[aria-current="page"] {
  color: var(--violeta-claro);
  box-shadow: inset 4px 0 0 var(--violeta-claro);
  padding-left: var(--s-4);
}

.cuerpo-bloqueado {
  overflow: hidden;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 var(--s-5);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primario {
  background: var(--degradado);
  color: var(--papel);
  border-color: transparent;
}

.btn-primario:hover,
.btn-primario:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--violeta) 40%, transparent);
}

.btn-secundario-oscuro {
  background: transparent;
  color: var(--papel);
  border-color: var(--borde-campo-o);
}

.btn-secundario-oscuro:hover,
.btn-secundario-oscuro:focus-visible {
  background: var(--noche-3);
  border-color: var(--violeta-claro);
}

.btn-secundario-claro {
  background: transparent;
  color: var(--violeta-texto);
  border-color: var(--violeta-texto);
}

.btn-secundario-claro:hover,
.btn-secundario-claro:focus-visible {
  background: var(--bruma);
}

.btn[disabled] {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.enlace-texto {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--violeta-texto);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fondo-noche .enlace-texto,
.fondo-noche-2 .enlace-texto,
.fondo-noche-3 .enlace-texto {
  color: var(--violeta-claro);
}

/* ---------- Hero inicio ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--barra-alto) + var(--s-9));
  padding-bottom: var(--s-9);
  background: var(--noche);
  color: var(--papel);
  overflow: hidden;
}

.hero-fondo {
  position: absolute;
  inset: 0;
  background: var(--degradado);
  z-index: -2;
}

.hero-velo {
  position: absolute;
  inset: 0;
  background: var(--noche);
  opacity: 0.7;
  z-index: -1;
}

.hero-rejilla {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

.hero h1 {
  color: var(--papel);
}

.hero .prosa {
  margin-top: var(--s-5);
  color: var(--texto-tenue);
}

.foto-zoom {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--borde-oscuro);
}

.fondo-papel .foto-zoom,
.fondo-bruma .foto-zoom {
  border-color: var(--borde-claro);
}

.foto-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.foto-zoom:hover img,
.foto-zoom:focus-within img {
  transform: scale(1.03);
}

.foto-planta-caja {
  aspect-ratio: 4 / 3;
}

.foto-recorte-a {
  object-position: 22% 50%;
}

.foto-recorte-b {
  object-position: 82% 40%;
}

/* ---------- Página interior, franja ---------- */

.franja {
  padding-top: calc(var(--barra-alto) + var(--s-8));
  padding-bottom: var(--s-8);
  background: var(--noche);
  color: var(--papel);
}

.franja .prosa {
  margin-top: var(--s-5);
  color: var(--texto-tenue);
}

/* ---------- Señales ---------- */

.rejilla-senales {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.senal {
  background: var(--papel);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  padding: var(--s-5);
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.senal svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--violeta-texto);
}

.senal p {
  color: var(--noche);
  font-weight: 500;
}

/* ---------- Tarjetas de servicio ---------- */

.rejilla-servicios {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--noche-3);
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--radio);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--papel);
  min-height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-servicio:hover,
.tarjeta-servicio:focus-visible {
  transform: translateY(-3px);
  border-color: var(--violeta);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--noche) 50%, transparent);
}

.tarjeta-destacada {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--noche-3), var(--noche-3)) padding-box,
    var(--degradado) border-box;
}

.tarjeta-servicio svg {
  stroke: var(--violeta-claro);
}

.tarjeta-servicio h3 {
  color: var(--papel);
}

.tarjeta-servicio p {
  color: var(--texto-tenue);
}

/* ---------- Bloques dos columnas ---------- */

.bloque-dos {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.bloque-dos .lista-sencilla {
  margin-top: var(--s-5);
}

/* ---------- Pasos ---------- */

.paso {
  padding: var(--s-5);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  background: var(--papel);
}

.paso-num {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--violeta-texto);
  display: block;
  margin-bottom: var(--s-2);
}

.paso h3 {
  margin-bottom: var(--s-2);
}

.paso p {
  color: var(--gris-texto);
}

/* ---------- Acordeón ---------- */

.acordeon {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.acordeon details {
  background: var(--papel);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
}

.fondo-noche .acordeon details,
.fondo-noche-2 .acordeon details {
  background: var(--noche-3);
  border-color: var(--borde-oscuro);
}

.acordeon summary {
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
}

.acordeon summary::-webkit-details-marker {
  display: none;
}

.acordeon summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.acordeon details[open] summary::after {
  transform: rotate(-135deg);
}

.acordeon-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.acordeon details.es-abierto .acordeon-cuerpo {
  grid-template-rows: 1fr;
}

.acordeon-cuerpo-interno {
  overflow: hidden;
}

.acordeon-cuerpo .prosa,
.acordeon-cuerpo p {
  padding: 0 var(--s-5) var(--s-5);
}

.acordeon-cuerpo p + p {
  margin-top: var(--s-3);
  padding-top: 0;
}

/* ---------- Formulario ---------- */

.contacto-rejilla {
  display: grid;
  gap: var(--s-7);
}

.formulario {
  position: relative;
  display: grid;
  gap: var(--s-5);
}

.campo {
  display: grid;
  gap: var(--s-2);
}

.campo label {
  font-weight: 500;
}

.campo input,
.campo select,
.campo textarea {
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  background: var(--papel);
  color: var(--noche);
  width: 100%;
}

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

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--violeta-texto);
  outline-offset: 2px;
  border-color: var(--violeta-texto);
}

.campo-error {
  color: var(--error-claro);
  font-size: 0.9375rem;
  margin: 0;
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--error-claro);
}

.aviso-netsuite {
  padding: var(--s-4);
  background: var(--bruma);
  border: 1px solid var(--borde-claro);
  border-radius: 8px;
  color: var(--gris-texto);
}

.aviso-netsuite[hidden] {
  display: none;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.casilla input {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--violeta-texto);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-estado {
  min-height: 1.5em;
  margin: 0;
}

.form-estado.es-exito {
  color: var(--exito-claro);
}

.form-estado.es-error {
  color: var(--error-claro);
}

.tarjeta-dato {
  background: var(--papel);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  padding: var(--s-5);
}

.tarjeta-dato h2,
.tarjeta-dato h3 {
  margin-bottom: var(--s-2);
}

.tarjeta-dato p,
.tarjeta-dato a {
  color: var(--gris-texto);
}

.tarjeta-dato a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--violeta-texto);
  font-weight: 500;
}

.laterales {
  display: grid;
  gap: var(--s-4);
}

/* ---------- Pie ---------- */

.pie {
  background: var(--noche);
  color: var(--papel);
  padding-block: var(--s-8);
  border-top: 1px solid var(--borde-oscuro);
}

.pie-rejilla {
  display: grid;
  gap: var(--s-7);
}

.pie .marca {
  margin-bottom: var(--s-4);
}

.pie h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--papel);
  margin-bottom: var(--s-3);
}

.pie ul {
  list-style: none;
}

.pie a,
.pie p {
  color: var(--texto-tenue);
}

.pie a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie .marca {
  text-decoration: none;
}

.pie nav a,
.pie .dato {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.pie nav a:hover,
.pie nav a:focus-visible,
.pie a:hover,
.pie a:focus-visible {
  color: var(--papel);
}

.aviso-marcas {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--borde-oscuro);
  color: var(--texto-tenue);
  max-width: 80ch;
  font-size: 0.9375rem;
}

/* ---------- Flotantes ---------- */

.flotantes {
  position: fixed;
  z-index: 250;
  pointer-events: none;
}

.btn-flotante {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--borde-campo-o);
}

.btn-whatsapp-flotante {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 250;
  background: var(--noche-3);
  color: var(--papel);
}

.btn-whatsapp-flotante:hover,
.btn-whatsapp-flotante:focus-visible {
  border-color: var(--violeta-claro);
  background: var(--indigo);
}

.btn-arriba {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 250;
  background: var(--noche);
  color: var(--papel);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.btn-arriba.es-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.btn-arriba:hover,
.btn-arriba:focus-visible {
  border-color: var(--violeta-claro);
}

/* ---------- Servicio detalle ---------- */

.servicio {
  scroll-margin-top: calc(var(--barra-alto) + var(--s-5));
}

.servicio + .servicio {
  margin-top: var(--s-8);
}

.industria {
  padding: var(--s-6);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  background: var(--papel);
}

.industria + .industria {
  margin-top: var(--s-5);
}

.industria h2 {
  margin-bottom: var(--s-4);
}

.industria h3 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}

/* ---------- 404 ---------- */

.vacio {
  min-height: 50vh;
}

/* ---------- Utilidades ---------- */

.seccion-titulo {
  margin-bottom: var(--s-4);
}

.mt-6 { margin-top: var(--s-6); }

/* ---------- Breakpoints ---------- */

@media (min-width: 480px) {
  .rejilla-senales {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .hero-rejilla,
  .bloque-dos,
  .contacto-rejilla,
  .pie-rejilla {
    grid-template-columns: 1fr 1fr;
  }

  .pie-rejilla {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .rejilla-servicios {
    grid-template-columns: 1fr 1fr;
  }

  .rejilla-pasos {
    grid-template-columns: 1fr 1fr;
  }

  .rejilla-2 {
    grid-template-columns: 1fr 1fr;
  }

  .foto-recorte-a {
    object-position: 22% 50%;
  }

  .foto-recorte-b {
    object-position: 82% 40%;
  }
}

@media (min-width: 1024px) {
  .seccion {
    padding-block: var(--s-10);
  }

  .hero {
    padding-top: calc(var(--barra-alto) + var(--s-10));
    padding-bottom: var(--s-10);
  }

  .nav-escritorio {
    display: block;
    margin-left: auto;
  }

  .btn-menu {
    display: none;
  }

  .btn-whatsapp-flotante {
    display: none;
  }

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

  .rejilla-senales {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .rejilla-servicios {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-escritorio a {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .tarjeta-servicio:hover,
  .tarjeta-servicio:focus-visible {
    transform: none;
  }

  .btn:active {
    transform: none;
  }
}