/* =========================================================
   JOHAN.MOV — estilos
   Colores y medidas principales: cambia aquí y se actualiza todo.
   ========================================================= */

/* Tipografía Inter Tight alojada en el sitio (licencia SIL OFL 1.1: fonts/OFL-Inter-Tight.txt) */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-tight-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #04070d;
  --azul: #2f7bff;
  --azul-claro: #8cc4ff;
  --azul-medio: #1d5bd6;
  --azul-oscuro: #0b2a57;
  --tinta: #eef3fa;
  --tinta-2: rgba(238, 243, 250, 0.8);   /* texto secundario (contraste AA) */
  --tinta-3: rgba(238, 243, 250, 0.64);  /* texto terciario (contraste AA) */
  --error: #ffb4b4;
  --exito: #9be8b8;
  --pendiente: #ffd98a;
  --oscuro: #05080f;
  --borde: rgba(255, 255, 255, 0.12);
  --borde-2: rgba(255, 255, 255, 0.24);

  --letra: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --margen: clamp(16px, 5vw, 72px);
  --radio: 28px;
  --desenfoque: blur(22px) saturate(140%);
  --sombra: 0 30px 80px rgba(0, 0, 0, 0.45);
}

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

html, body { margin: 0; overflow-x: clip; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
img, video { display: block; max-width: 100%; }
code { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.9em; }

html { scroll-padding-top: 96px; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
[tabindex='-1']:focus { outline: none; }
[hidden] { display: none !important; }

/* Texto que solo leen los lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enlace "Saltar al contenido" (visible al navegar con teclado) */
.saltar {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 0.8em 1.2em;
  border-radius: 999px;
  background: #fff;
  color: var(--oscuro);
  font-weight: 600;
  transform: translateY(-180%);
  transition: transform 0.15s;
}
.saltar:focus { transform: none; }

/* Datos que aún no has llenado en js/datos.js */
.dato-pendiente {
  padding: 0 0.3em;
  border-radius: 6px;
  border: 1px dashed rgba(255, 196, 0, 0.6);
  background: rgba(255, 196, 0, 0.14);
  color: var(--pendiente);
}
.aviso-borrador {
  padding: 0.9em 1.2em;
  border-radius: 16px;
  border: 1px solid rgba(255, 196, 0, 0.5);
  background: rgba(40, 30, 6, 0.88);
  color: var(--pendiente);
  font-size: 0.88rem;
  line-height: 1.45;
}
.aviso-borrador.flotante {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(440px, calc(100% - 32px));
}
.aviso-borrador-cerrar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 196, 0, 0.5);
  color: var(--pendiente);
}
.aviso-borrador-cerrar:hover { background: rgba(255, 196, 0, 0.15); }

.icono {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   FONDO: luces azules y grano
   ========================================================= */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.brillo { position: absolute; border-radius: 50%; }
.brillo-1 {
  width: 130vmax;
  height: 70vmax;
  left: 50%;
  bottom: -48vmax;
  margin-left: -65vmax;
  background: radial-gradient(closest-side, rgba(47, 123, 255, 0.5), rgba(29, 91, 214, 0.22) 45%, transparent);
}
.brillo-2 {
  width: 80vmax;
  height: 80vmax;
  left: -30vmax;
  top: -36vmax;
  background: radial-gradient(closest-side, rgba(11, 42, 87, 0.95), transparent);
}
.brillo-3 {
  width: 50vmax;
  height: 50vmax;
  right: -18vmax;
  top: 18vh;
  background: radial-gradient(closest-side, rgba(47, 123, 255, 0.2), transparent);
}
.grano {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Anillo que sigue al cursor (solo con mouse) */
.cursor-anillo {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: none;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.cursor-anillo span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--oscuro);
  opacity: 0;
  transition: opacity 0.25s;
}
.cursor-anillo.ver { background: #fff; border-color: #fff; }
.cursor-anillo.ver span { opacity: 1; }

/* =========================================================
   VIDRIO, PÍLDORAS Y BOTONES
   ========================================================= */
.tarjeta-vidrio,
.pill,
.boton-vidrio,
.boton-circulo,
.nav,
.filtros {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--borde);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.tarjeta-vidrio {
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--sombra);
}

/* Elementos que reaccionan al clic (onda + presión) */
.boton,
.pill,
.boton-circulo,
.filtro,
.faq-pregunta,
.nav-enlaces a,
.servicio,
.tipo,
.video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.onda {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35);
  z-index: -1;
}
.boton-blanco .onda,
.filtro.activo .onda { background: rgba(47, 123, 255, 0.35); }
.video .onda { z-index: 3; background: rgba(255, 255, 255, 0.22); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.62em 1.15em 0.62em 0.8em;
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--tinta);
  white-space: nowrap;
}
.punto {
  width: 0.62em;
  height: 0.62em;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
.punto-latido { animation: latido 2.2s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 196, 255, 0.7), 0 0 12px rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(140, 196, 255, 0), 0 0 12px rgba(255, 255, 255, 0.6); }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: box-shadow 0.4s, background-color 0.4s, border-color 0.4s;
}
.boton span { display: inline-block; }
.boton-blanco {
  background: linear-gradient(180deg, #ffffff, #dfe7f2);
  color: var(--oscuro);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 30px rgba(140, 196, 255, 0.22);
}
.boton-blanco:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 14px 44px rgba(140, 196, 255, 0.45);
}
/* Brillo que cruza el botón blanco */
.boton-blanco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(140, 196, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.boton-blanco:hover::after { transform: translateX(120%); }
.boton-vidrio { color: var(--tinta); }
.boton-vidrio:hover { background-color: rgba(255, 255, 255, 0.12); border-color: var(--borde-2); }
.boton-chico { padding: 0.62em 1.2em; font-size: 0.86rem; }
.boton-grande { padding: 1.1em 1.9em; font-size: 1rem; }

.boton-circulo {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}
.boton-circulo:hover { background-color: rgba(255, 255, 255, 0.14); border-color: var(--borde-2); }

/* ---------- Colores de marca al pasar el cursor (o al llegar con el teclado) ----------
   Una capa con el color oficial aparece suavemente detrás del texto/ícono.
   WhatsApp usa texto oscuro sobre su verde (contraste 10:1; el blanco no se leería). */
.marca-whatsapp::before,
.marca-instagram::before,
.marca-tiktok::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.marca-whatsapp::before { background: #25d366; }
.marca-instagram::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.marca-tiktok::before { background: #000000; }

.marca-whatsapp:hover::before,
.marca-whatsapp:focus-visible::before,
.marca-instagram:hover::before,
.marca-instagram:focus-visible::before,
.marca-tiktok:hover::before,
.marca-tiktok:focus-visible::before { opacity: 1; }

/* Ojo: no transicionar opacity/transform aquí; GSAP las anima y una transición CSS las deja a medias */
.marca-whatsapp { transition: color 0.35s, box-shadow 0.4s, border-color 0.4s; }
.marca-whatsapp:hover,
.marca-whatsapp:focus-visible {
  color: #05080f;
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.7), 0 14px 44px rgba(37, 211, 102, 0.45);
}
.marca-whatsapp .onda { background: rgba(255, 255, 255, 0.5); }

.marca-instagram,
.marca-tiktok { transition: color 0.35s, box-shadow 0.4s, border-color 0.4s; }
.marca-instagram:hover,
.marca-instagram:focus-visible {
  color: #ffffff;
  border-color: rgba(253, 89, 73, 0.6);
  box-shadow: 0 10px 30px rgba(214, 36, 159, 0.45);
}
.marca-tiktok:hover,
.marca-tiktok:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: -4px 0 16px rgba(37, 244, 238, 0.45), 4px 0 16px rgba(254, 44, 85, 0.45);
}
/* Efecto clásico del logo de TikTok: sombras cian y roja */
.marca-tiktok .icono { transition: filter 0.35s; }
.marca-tiktok:hover .icono,
.marca-tiktok:focus-visible .icono {
  filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55);
}

/* Texto con degradado blanco → gris azulado */
.degradado {
  background: linear-gradient(90deg, #ffffff 0%, #d4e3f6 45%, #7590b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Palabra gigante de fondo
   (se centra con flex, sin "translate": GSAP la mueve con el scroll) */
.palabra-fondo {
  position: absolute;
  z-index: -1;
  display: flex;
  justify-content: center;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(47, 123, 255, 0.5), rgba(47, 123, 255, 0.03) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mancha azul desenfocada (el vidrio la difumina) */
.mancha {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  background: radial-gradient(closest-side, rgba(47, 123, 255, 0.75), rgba(29, 91, 214, 0.28) 55%, transparent);
}

/* =========================================================
   MENÚ
   ========================================================= */
.cabecera {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 var(--margen);
  pointer-events: none;
}
.cabecera > * { pointer-events: auto; }
.logo {
  justify-self: start;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
}
.logo span { color: var(--azul-claro); }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  transition: background-color 0.4s, box-shadow 0.4s;
}
.cabecera.compacta .nav {
  background-color: rgba(6, 10, 18, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 12px 40px rgba(0, 0, 0, 0.45);
}
.nav-alternar { width: 38px; height: 38px; }
.nav-enlaces {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.nav-enlaces a {
  z-index: 1;
  padding: 0.55em 1em;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--tinta-2);
  transition: color 0.3s;
}
.nav-enlaces a:hover,
.nav-enlaces a.activo { color: var(--tinta); }
.nav-indicador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@media (max-width: 860px) {
  .cabecera { grid-template-columns: 1fr auto; }
  .nav-enlaces {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border-radius: 24px;
    background: rgba(8, 13, 24, 0.82);
    border: 1px solid var(--borde);
    -webkit-backdrop-filter: var(--desenfoque);
    backdrop-filter: var(--desenfoque);
    box-shadow: var(--sombra);
    visibility: hidden;
    opacity: 0;
  }
  .nav-enlaces a { padding: 0.85em 1.1em; font-size: 1rem; }
  .nav-enlaces a.activo { background: rgba(255, 255, 255, 0.08); }
  .nav-indicador { display: none; }
}

/* =========================================================
   SECCIONES (base)
   ========================================================= */
.seccion,
.hero {
  position: relative;
  isolation: isolate;
}
.seccion { padding: clamp(100px, 16vh, 180px) var(--margen); }
/* La presencia acompaña el desplazamiento sin modificar los transforms de GSAP. */
.scroll-presencia {
  transition: opacity 0.48s ease;
}
.scroll-presencia.scroll-presencia--fuera { opacity: 0; }
:where(.cabeza-seccion, .servicios-grid, .tipos-grid, .videos-grid, .sobre-escena, .factores, .precio-cta, .faq-lista, .contacto-grid, .cta-entre, .pie).scroll-presencia {
  transition: opacity 0.48s ease, translate 0.48s cubic-bezier(0.2, 0.7, 0.2, 1);
}
:where(.cabeza-seccion, .servicios-grid, .tipos-grid, .videos-grid, .sobre-escena, .factores, .precio-cta, .faq-lista, .contacto-grid, .cta-entre, .pie).scroll-presencia--fuera[data-scroll-lado="arriba"] {
  translate: 0 -16px;
}
:where(.cabeza-seccion, .servicios-grid, .tipos-grid, .videos-grid, .sobre-escena, .factores, .precio-cta, .faq-lista, .contacto-grid, .cta-entre, .pie).scroll-presencia--fuera[data-scroll-lado="abajo"] {
  translate: 0 16px;
}
.cabeza-seccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto clamp(44px, 7vh, 76px);
  text-align: center;
}
.titulo-seccion { font-size: clamp(2.4rem, 5.6vw, 5.4rem); }
.cabeza-seccion p { color: var(--tinta-2); max-width: 46ch; }
.palabra { display: inline-block; }

.icono-circulo {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff, #cfd9e6);
  color: var(--oscuro);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.07), 0 8px 24px rgba(140, 196, 255, 0.25);
}

/* =========================================================
   PORTADA
   ========================================================= */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 4vw;
  padding: 120px var(--margen) 90px;
  /* Recorta solo a los lados: hacia abajo, la luz del teléfono y del fondo se desvanece
     sobre la sección siguiente en lugar de cortarse en seco. */
  overflow-x: clip;
  overflow-y: visible;
}
.hero-texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.titulo-grande { font-size: clamp(2.9rem, 6.3vw, 6.6rem); }
.titulo-grande .linea { display: block; }
.hero-sub {
  max-width: 44ch;
  color: var(--tinta-2);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-escena {
  position: relative;
  height: min(74vh, 660px);
  display: grid;
  place-items: center;
  perspective: 1400px;
}
/* Teléfono 3D: una caja con frente (pantalla con el video), trasera y cantos con grosor.
   .telefono-3d gira al bajar y .telefono hace la entrada (main.js); .telefono-giro gira
   con el cursor o el dedo (js/telefono-3d.js, que también arma los cantos y su luz). */
.telefono-3d { height: 100%; transform-style: preserve-3d; }
.telefono {
  --medio-grosor: 0px; /* lo calcula telefono-3d.js según el tamaño del teléfono */
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 19;
  border-radius: 46px;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y; /* en celular, deslizar en vertical sigue bajando por la página */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.telefono.arrastrando { cursor: grabbing; }
.telefono:focus-visible { outline-offset: 10px; }
.girando-telefono .cursor-anillo { visibility: hidden; }
.telefono-giro,
.telefono-cantos { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Relleno oscuro en el centro: tapa cualquier rendija entre los cantos y las caras */
.telefono-nucleo { position: absolute; inset: 1px; border-radius: 45px; background: #05070c; }

.telefono-cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 46px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.telefono-frente {
  padding: 9px;
  background: linear-gradient(160deg, #1d2534, #07090e 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateZ(var(--medio-grosor));
}
.telefono-trasera {
  container-type: size;
  background:
    radial-gradient(130% 70% at 18% 0%, rgba(140, 196, 255, 0.16), transparent 58%),
    radial-gradient(100% 60% at 90% 100%, rgba(154, 103, 255, 0.16), transparent 62%),
    linear-gradient(160deg, #1b2435, #080b12 62%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateY(180deg) translateZ(var(--medio-grosor));
}
/* Cámara genérica: una cápsula vertical con dos lentes y el flash (sin parecerse a una marca) */
.telefono-camara {
  position: absolute;
  left: 8cqw;
  top: 3.6cqh;
  width: 19cqw;
  height: 43cqw;
  border-radius: 9.5cqw;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px rgba(0, 0, 0, 0.5);
}
.telefono-camara i {
  position: absolute;
  left: 3cqw;
  width: 13cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(140, 196, 255, 0.55) 0 7%, #18233a 16%, #05070c 44%, #000 64%);
  box-shadow: 0 0 0 1.4cqw #0d121c, 0 0 0 calc(1.4cqw + 1px) rgba(255, 255, 255, 0.16);
}
.telefono-camara i:nth-child(1) { top: 3cqw; }
.telefono-camara i:nth-child(2) { top: 19cqw; }
.telefono-camara b {
  position: absolute;
  left: 7.25cqw;
  top: 35cqw;
  width: 4.5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6dc, #b9a77a 70%);
}
.telefono-marca {
  position: absolute;
  inset: 52% 0 auto;
  text-align: center;
  font-size: 12.5cqw;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--tinta);
}
.telefono-marca span { color: var(--azul-claro); }

/* Reflejo del vidrio: se desliza según el ángulo (lo mueve telefono-3d.js) */
.telefono-reflejo {
  position: absolute;
  inset: 0 -100%;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, 0.11) 47%, rgba(255, 255, 255, 0.03) 52%, transparent 58%);
  pointer-events: none;
  will-change: transform;
}

/* Cada tramo del canto: su ancho es el grosor del teléfono; la luz (--luz) cambia al girar */
.telefono-canto {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.05) 24%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.05) 76%, rgba(0, 0, 0, 0.55)),
    hsl(220 16% var(--luz, 22%));
}

/* Respaldo para Safari: con el teléfono de espaldas, la pantalla (y su video) no se dibuja */
.telefono.de-espaldas .telefono-pantalla { visibility: hidden; }

/* Brillo azul y sombra detrás del teléfono: no giran con él, así nunca se ve su contorno */
.telefono-luz {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 118%;
  aspect-ratio: 3 / 4;
  translate: -50% -50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 58%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(closest-side, rgba(47, 123, 255, 0.26), rgba(47, 123, 255, 0.1) 58%, transparent);
}

.telefono-pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
  background: #02040a;
}
.video-destacado {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.telefono-pantalla.con-video .video-destacado { opacity: 1; }
.telefono-pantalla.con-video .pantalla-vacia { display: none; }

.pantalla-vacia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 115%, rgba(47, 123, 255, 0.55), transparent 60%), #03060c;
  color: var(--tinta-2);
  font-size: 0.8rem;
}
.pantalla-forma {
  position: absolute;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 42%;
  background: conic-gradient(from 0deg, rgba(47, 123, 255, 0), rgba(140, 196, 255, 0.35), rgba(47, 123, 255, 0));
  filter: blur(30px);
  animation: girar 14s linear infinite;
}
.pantalla-forma.f2 { width: 90%; opacity: 0.7; animation-duration: 9s; animation-direction: reverse; }
@keyframes girar { to { transform: rotate(360deg); } }
.pantalla-play {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--borde-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.3rem;
}
.pantalla-vacia small { position: relative; }

.pantalla-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px 20px;
  pointer-events: none;
  font-size: 0.72rem;
}
.pantalla-top { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pantalla-360 {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde-2);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.66rem;
  font-weight: 600;
}
.avatar {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--azul-claro), var(--azul-medio));
  color: var(--oscuro);
  font-weight: 600;
}
.pantalla-abajo { display: flex; flex-direction: column; gap: 6px; }
.pantalla-progreso { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.pantalla-progreso span {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.pantalla-tiempo { display: flex; justify-content: space-between; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.tarjeta-render {
  position: absolute;
  right: 0;
  top: 9%;
  width: 190px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.tarjeta-render-titulo { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.tarjeta-render p { font-size: 0.76rem; line-height: 1.35; color: var(--tinta-2); }
.anillo { position: relative; width: 86px; height: 86px; margin-top: 10px; }
.anillo::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #0b111d, #04070d);
}
.anillo svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 6; }
.anillo-pista { stroke: rgba(255, 255, 255, 0.08); }
.anillo-valor {
  stroke: var(--azul-claro);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(140, 196, 255, 0.6));
}
.anillo-numero {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta-timeline {
  position: absolute;
  left: 0;
  bottom: 11%;
  width: 250px;
  padding: 14px 16px 16px;
  border-radius: 20px;
}
.timeline-cabeza {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.timeline-pistas { position: relative; display: grid; gap: 6px; margin-top: 10px; }
.pista { position: relative; height: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.pista span {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(var(--a) * 1%);
  width: calc(var(--b) * 1% - 2px);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(140, 196, 255, 0.8), rgba(47, 123, 255, 0.55));
}
.pista:nth-child(2) span { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22)); }
.pista.audio span { background: repeating-linear-gradient(90deg, rgba(140, 196, 255, 0.6) 0 2px, transparent 2px 4px); }
.cabezal {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
}
.pill-flotante { position: absolute; left: 6%; top: 18%; }

.indicador-scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.indicador-scroll i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--tinta), transparent);
  transform-origin: top;
  animation: gotear 1.8s ease-in-out infinite;
}
@keyframes gotear {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Botón para pausar las animaciones que se repiten */
.boton-pausa {
  position: absolute;
  left: var(--margen);
  bottom: 22px;
  z-index: 3;
  font-size: 0.8rem;
  cursor: pointer;
}
.animaciones-pausadas .pantalla-forma,
.animaciones-pausadas .punto-latido,
.animaciones-pausadas .indicador-scroll i { animation-play-state: paused; }

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 112px;
  }
  .hero-escena { height: min(64vh, 540px); }
  .tarjeta-render { width: 148px; padding: 14px 12px; top: 4%; }
  .tarjeta-render p { display: none; }
  .anillo { width: 64px; height: 64px; }
  .tarjeta-timeline { width: 200px; bottom: 6%; }
  .pill-flotante { left: 0; top: auto; bottom: 30%; font-size: 0.78rem; }
  .indicador-scroll { display: none; }
  .boton-pausa { bottom: 14px; }
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.servicio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  cursor: pointer;
  transition: border-color 0.4s;
}
.servicio:hover { border-color: var(--borde-2); }
/* Luz que sigue al mouse dentro de la tarjeta */
.servicio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(140, 196, 255, 0.18), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.servicio:hover::before,
.servicio.abierto::before { opacity: 1; }
.servicio h3 { font-size: 1.4rem; letter-spacing: -0.03em; padding-right: 40px; }
.servicio > p { color: var(--tinta-2); font-size: 0.95rem; }
.servicio-mas { height: 0; overflow: hidden; opacity: 0; }
.servicio-mas ul {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.servicio-mas li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.servicio-mas li .icono { color: var(--azul-claro); }
.servicio-abrir {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--borde);
  transition: background-color 0.3s, color 0.3s;
}
.servicio.abierto .servicio-abrir { background: #fff; color: var(--oscuro); }

@media (max-width: 1060px) { .servicios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .servicios-grid { grid-template-columns: 1fr; } }

/* =========================================================
   DIFERENCIALES (videos)
   ========================================================= */
.dif-fondo {
  top: clamp(70px, 11vh, 130px);
  left: 0;
  justify-content: flex-start;
  font-size: clamp(5rem, 17vw, 19rem);
}
.mancha-dif {
  width: 70vw;
  height: 34vw;
  left: 15vw;
  top: 58%;
  margin-top: -17vw;
  transform: rotate(-18deg);
}

.filtros {
  position: relative;
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 5px;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  z-index: 1;
  flex: 0 0 auto;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--tinta-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.filtro:hover { color: var(--tinta); }
.filtro.activo { color: var(--oscuro); }
.filtros-indicador {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(140, 196, 255, 0.35);
}

.videos-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  container-type: inline-size;
}
.videos-grid {
  --gap: clamp(10px, 1.6vw, 20px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(calc((100cqi - 2 * var(--gap)) / 3 * 0.5625), auto);
  grid-auto-flow: dense;
  gap: var(--gap);
}
.videos-grid.un-solo-video { grid-auto-rows: auto; }
.videos-grid.un-solo-video > .video:not(.oculto) {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: center;
}
.videos-grid.un-solo-video > .video.horizontal {
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
}
.videos-grid.un-solo-video > .video.vertical {
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
}
.videos-grid.un-solo-video > .video.panorama { width: 100%; }
.video {
  border-radius: 22px;
  background: #060a12;
  border: 1px solid var(--borde);
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.video.vertical { grid-row: span 3; }
.video.panorama {
  grid-column: 1 / -1;
  aspect-ratio: 5 / 2;
  min-height: 40cqi;
}
.video.oculto { display: none; }
.video:hover {
  border-color: rgba(140, 196, 255, 0.45);
  box-shadow: 0 20px 60px rgba(47, 123, 255, 0.22);
}
.video-marco { position: absolute; inset: 0; }
.video-marco video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s;
}
.video.con-video .video-marco video { opacity: 1; }
.video[data-categoria="motion"] .video-marco {
  background: #f7f9fa url('../assets/motion-01-poster.webp') center / cover no-repeat;
}
.video[data-categoria="motion"] .video-marco video { opacity: 0; }
.video[data-categoria="motion"].reproduciendo .video-marco video { opacity: 1; }
.video.panorama .video-marco {
  background: #eff4fa url('../assets/valla-01-poster.webp') center / contain no-repeat;
}
.video.panorama .video-marco video { object-fit: contain; opacity: 0; }
.video.panorama.reproduciendo .video-marco video { opacity: 1; }
.video-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(90% 70% at 30% 110%, rgba(47, 123, 255, 0.42), transparent 60%),
    radial-gradient(60% 50% at 90% 0%, rgba(140, 196, 255, 0.14), transparent),
    linear-gradient(160deg, #0a1426, #04070d);
  color: var(--tinta-3);
}
.video.con-video .video-vacio { display: none; }
.vacio-numero {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: rgba(238, 243, 250, 0.12);
}
.video-vacio small { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.7rem; }
.video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(2, 4, 8, 0.78));
  pointer-events: none;
}
.video-info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.video-info h3 { font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -0.03em; }
.pill-mini { font-size: 0.72rem; padding: 0.45em 0.95em 0.45em 0.7em; }
.video-play {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--oscuro);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.video:hover .video-play { transform: scale(1.12); }

@media (max-width: 760px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(calc((100cqi - var(--gap)) / 2 * 0.5625), auto);
  }
  .video { border-radius: 16px; }
  .video-info { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .video-info h3 { font-size: 0.85rem; }
  .video.horizontal .pill-mini { display: none; }
  .video-play { width: 34px; height: 34px; top: 8px; right: 8px; font-size: 0.8rem; }
}

/* =========================================================
   SOBRE MÍ
   ========================================================= */
.sobre { display: grid; place-items: center; overflow: hidden; }
.sobre-escena {
  position: relative;
  width: min(1200px, 100%);
  height: clamp(680px, 86vh, 760px);
}
.sobre-escena::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sobre-linea {
  position: absolute;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.9;
  font-size: clamp(3rem, 7.7vw, 8rem);
  white-space: nowrap;
}
.sobre-linea-1 { left: 5%; top: 2%; z-index: 4; }
.sobre-linea-2 {
  left: 40%;
  top: 13%;
  z-index: 4;
  background: linear-gradient(180deg, rgba(238, 243, 250, 0.85), rgba(238, 243, 250, 0.43));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sobre-foto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  margin: 0 auto;
  z-index: 3;
  width: clamp(290px, 30vw, 380px);
  aspect-ratio: 4 / 5.2;
  isolation: isolate;
}
.sobre-foto-resplandor {
  position: absolute;
  inset: 22% -24% -6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, rgba(38, 105, 244, 0.43), rgba(35, 84, 196, 0.19) 42%, transparent 73%);
  filter: blur(34px);
  opacity: 0.8;
  translate: var(--sobre-halo-x, 0px) var(--sobre-halo-y, 0px);
  transition: translate 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
.sobre-foto-marco {
  position: absolute;
  inset: 26% 6% 4%;
  z-index: 1;
  border: 1px solid rgba(166, 207, 255, 0.74);
  border-radius: 34px 34px 74px 74px;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(153, 203, 255, 0.72), transparent 54%),
    linear-gradient(148deg, #579cf9 4%, #176af0 57%, #082d91 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -30px 65px rgba(6, 18, 68, 0.38), 0 34px 70px rgba(4, 18, 58, 0.34);
  translate: var(--sobre-marco-x, 0px) var(--sobre-marco-y, 0px);
  transition: translate 0.48s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.sobre-foto-marco::before,
.sobre-foto-marco::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(220, 237, 255, 0.67);
  border-radius: inherit;
  pointer-events: none;
}
.sobre-foto-marco::before { inset: -11px; opacity: 0.7; }
.sobre-foto-marco::after { inset: 10px; opacity: 0.35; }
.sobre-foto-estrella {
  position: absolute;
  z-index: 2;
  width: 18%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 38% 35%, #dce9ff 1%, #9cabff 28%, #6669f7 65%, #284db5 100%);
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
  filter: drop-shadow(0 0 18px rgba(117, 127, 255, 0.65));
  transform-origin: center;
  transition: translate 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), rotate 0.78s cubic-bezier(0.18, 0.8, 0.2, 1), scale 0.78s cubic-bezier(0.18, 0.8, 0.2, 1), opacity 0.58s ease;
  pointer-events: none;
}
.sobre-foto-estrella-1 {
  top: 21%;
  right: -6%;
  translate: var(--sobre-estrella-1-x, 0px) var(--sobre-estrella-1-y, 0px);
}
.sobre-foto-estrella-2 {
  width: 10%;
  left: -9%;
  bottom: 24%;
  opacity: 0.82;
  translate: var(--sobre-estrella-2-x, 0px) var(--sobre-estrella-2-y, 0px);
}
.sobre-foto .sobre-foto-estrella.scroll-estrella--oculta { opacity: 0; scale: 0.38; }
.sobre-foto[data-scroll-lado="arriba"] .sobre-foto-estrella-1.scroll-estrella--oculta,
.sobre-foto[data-scroll-lado="abajo"] .sobre-foto-estrella-2.scroll-estrella--oculta { rotate: -130deg; }
.sobre-foto[data-scroll-lado="abajo"] .sobre-foto-estrella-1.scroll-estrella--oculta,
.sobre-foto[data-scroll-lado="arriba"] .sobre-foto-estrella-2.scroll-estrella--oculta { rotate: 130deg; }
.sobre-foto img {
  position: absolute;
  left: 2%;
  bottom: 2%;
  z-index: 3;
  width: 96%;
  height: 98%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  /* El rostro sobresale por arriba; el torso se recoge y se funde antes del borde inferior. */
  clip-path: polygon(0 0, 100% 0, 100% 82%, 94% 100%, 6% 100%, 0 82%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.88) 81%, rgba(0, 0, 0, 0.48) 89%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.88) 81%, rgba(0, 0, 0, 0.48) 89%, transparent 98%);
  filter: drop-shadow(0 16px 28px rgba(1, 8, 32, 0.44));
  translate: var(--sobre-retrato-x, 0px) var(--sobre-retrato-y, 0px);
  transition: opacity 0.6s ease, translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.sobre-foto.con-foto img { opacity: 1; }
.sobre-foto-nombre,
.sobre-foto-cargo {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transition: translate 0.48s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sobre-foto-nombre {
  left: -2%;
  bottom: 13%;
  color: #f5f9ff;
  font-size: clamp(5.3rem, 8vw, 7.5rem);
  font-weight: 760;
  letter-spacing: -0.075em;
  line-height: 0.8;
  text-transform: uppercase;
  text-shadow: 0 4px 22px rgba(2, 11, 42, 0.36);
  translate: var(--sobre-texto-x, 0px) var(--sobre-texto-y, 0px);
}
.sobre-foto-cargo {
  left: 2%;
  bottom: 7.5%;
  color: rgba(240, 247, 255, 0.94);
  font-size: clamp(0.68rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-shadow: 0 2px 9px rgba(2, 11, 42, 0.45);
  translate: var(--sobre-cargo-x, 0px) var(--sobre-cargo-y, 0px);
}
@media (hover: hover) and (pointer: fine) {
  .sobre-foto:hover .sobre-foto-resplandor { opacity: 1; }
  .sobre-foto:hover .sobre-foto-marco { transform: scale(1.035) rotate(-1.1deg); }
  .sobre-foto:hover .sobre-foto-estrella-1 { rotate: 22deg; scale: 1.1; }
  .sobre-foto:hover .sobre-foto-estrella-2 { rotate: -32deg; scale: 1.16; }
  .sobre-foto:hover img { scale: 1.045; }
}
.foto-vacia {
  position: absolute;
  z-index: 2;
  left: 22%;
  bottom: 4%;
  width: 56%;
  height: 67%;
  fill: rgba(4, 7, 13, 0.36);
}
.sobre-foto.con-foto .foto-vacia { display: none; }
.sobre-tarjeta {
  position: absolute;
  z-index: 4;
  width: clamp(230px, 22vw, 290px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.sobre-tarjeta h3 { font-size: 1.25rem; letter-spacing: -0.03em; }
.sobre-tarjeta p { font-size: 0.88rem; color: var(--tinta-2); }
.sobre-tarjeta.t1 { left: 4%; bottom: 6%; }
.sobre-tarjeta.t2 { right: 3%; bottom: 22%; }

@media (max-width: 860px) {
  .sobre-escena {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .sobre-escena::before { display: none; }
  .sobre-linea,
  .sobre-foto,
  .sobre-tarjeta {
    position: relative;
    inset: auto;
    translate: none;
  }
  .sobre-linea { align-self: flex-start; font-size: clamp(2.8rem, 14vw, 5rem); }
  .sobre-linea-2 { align-self: flex-end; margin-top: -0.35em; }
  .sobre-foto { width: min(74vw, 380px); margin-top: -0.25em; flex: none; }
  .sobre-foto-nombre { font-size: clamp(3.7rem, 16vw, 6.7rem); }
  .sobre-foto-cargo { font-size: clamp(0.62rem, 2vw, 0.75rem); }
  .sobre-tarjeta { width: 100%; }
}
/* =========================================================
   PROCESO
   ========================================================= */
.proceso { overflow: clip; } /* "clip" (no "hidden") para que el detalle pueda quedarse fijo en celular */
.orbitas {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.orbita {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 29vw, 390px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.orbita + .orbita { margin-left: -3vw; }
.orbita-circulo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbita-circulo circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 0.8;
  stroke-dasharray: 4 6;
  transition: stroke 0.5s;
}
.orbita.activa .orbita-circulo circle { stroke: rgba(140, 196, 255, 0.75); }
.orbita-titulo {
  position: absolute;
  top: 15%;
  font-size: 0.92rem;
  color: var(--tinta-2);
  transition: color 0.4s;
}
.orbita.activa .orbita-titulo { color: var(--tinta); }
.orbita-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8%;
}
.orbita-pills .pill:nth-child(odd) { left: -1.6em; }
.orbita-pills .pill:nth-child(even) { left: 1.6em; }
.pill-paso { cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
.pill-paso:hover { background-color: rgba(255, 255, 255, 0.12); }
.pill-paso.activa {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(140, 196, 255, 0.55);
}
.pill-paso.activa .punto { background: var(--azul-claro); box-shadow: 0 0 14px var(--azul-claro); }

.detalle-paso {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 22px 28px;
  text-align: center;
}
.detalle-contenido { display: flex; flex-direction: column; gap: 8px; }
.detalle-etiqueta {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-claro);
}
.detalle-texto { color: var(--tinta-2); }

@media (max-width: 860px) {
  .orbitas { flex-direction: column; }
  .orbita { width: min(86vw, 360px); }
  .orbita + .orbita { margin-left: 0; margin-top: -12vw; }
  .orbita-pills .pill { font-size: 0.8rem; }
  .detalle-paso { position: sticky; bottom: 16px; z-index: 5; }
}

/* =========================================================
   TIPOS DE EDICIÓN
   ========================================================= */
.tipos { overflow: clip; }
.tipos-fondo {
  top: clamp(70px, 11vh, 130px);
  left: 0;
  right: 0;
  font-size: clamp(5rem, 18vw, 19rem);
}
.tipos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.tipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.tipo:hover {
  border-color: rgba(140, 196, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 60px rgba(47, 123, 255, 0.22);
}
/* Luz que sigue al mouse */
.tipo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -30%), rgba(140, 196, 255, 0.18), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.tipo:hover::before { opacity: 1; }
.tipo-numero {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--tinta-3);
}
.tipo h3 { font-size: 1.25rem; letter-spacing: -0.03em; }
.tipo p { flex: 1; color: var(--tinta-2); font-size: 0.92rem; }
.tipo-cotizar { margin-top: 6px; font-size: 0.8rem; cursor: pointer; }
.tipo:hover .tipo-cotizar { background-color: rgba(255, 255, 255, 0.14); border-color: var(--borde-2); }

@media (max-width: 1060px) { .tipos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .tipos-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PRECIO A TU MEDIDA
   ========================================================= */
.precio { overflow: clip; }
/* La luz nace y desaparece dentro de la sección por los cuatro lados,
   incluso cuando el zoom cambia el ancho o la altura del contenido. */
.precio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 76% at 50% 50%,
    rgba(38, 107, 224, 0.58) 0%,
    rgba(29, 91, 214, 0.37) 38%,
    rgba(17, 57, 132, 0.18) 65%,
    transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 49% 49% at center,
    #000 0%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 49% at center,
    #000 0%, #000 52%, transparent 100%);
}
.factores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.factor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
}
.factor-numero {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, rgba(140, 196, 255, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.factor h3 { font-size: 1.35rem; letter-spacing: -0.03em; }
.factor p { color: var(--tinta-2); font-size: 0.95rem; }
.precio-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 44px auto 0;
  text-align: center;
}
.precio-cta > p:first-child { color: var(--tinta-2); font-size: 1.05rem; }
.precio-cta .planes-nota { margin-top: 0; }

@media (max-width: 860px) {
  .factores { grid-template-columns: 1fr; max-width: 460px; }
}

/* =========================================================
   NOTAS DE "PRECIO A TU MEDIDA"
   ========================================================= */
.planes-nota {
  max-width: 60ch;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--tinta-3);
}

/* =========================================================
   PREGUNTAS
   ========================================================= */
.faq-lista {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item { border-radius: 22px; overflow: hidden; }
.faq-pregunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.faq-icono {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s, color 0.3s;
}
.faq-item.abierto .faq-icono { background: #fff; color: var(--oscuro); }
.faq-respuesta { height: 0; overflow: hidden; }
.faq-respuesta p { max-width: 62ch; padding: 0 24px 22px; color: var(--tinta-2); }

/* =========================================================
   CONTACTO Y PIE
   ========================================================= */
.contacto {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  overflow: hidden;
}
.contacto-titulo { max-width: 13ch; font-size: clamp(2.8rem, 7.6vw, 7.6rem); }
.contacto-sub { color: var(--tinta-2); }
.redes { display: flex; gap: 10px; }

/* Enlaces dentro de textos */
.formulario a,
.contacto-otros a:not(.boton):not(.boton-circulo),
.planes-nota a,
.faq-respuesta a,
.pie-identificacion a,
.pie-sic a,
.legal a:not(.boton) {
  color: var(--azul-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  gap: 18px;
  width: min(1100px, 100%);
  margin-top: 12px;
  text-align: left;
}

/* ---------- Formulario ---------- */
.formulario { padding: clamp(22px, 3vw, 34px); }
.form-campos,
.form-exito { display: flex; flex-direction: column; gap: 16px; }
.formulario h3,
.contacto-otros h3 { font-size: 1.6rem; letter-spacing: -0.03em; }
.form-ayuda,
.contacto-otros > p { color: var(--tinta-2); font-size: 0.92rem; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 0.92rem; font-weight: 500; }
.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.85em 1em;
  border-radius: 14px;
  border: 1px solid var(--borde-2);
  background: rgba(4, 7, 13, 0.6);
  color: var(--tinta);
  font: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.campo select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef3fa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 1.1em;
}
.campo select option { background: #0b111d; color: var(--tinta); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:not([type='checkbox']):focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(140, 196, 255, 0.4);
}
.campo [aria-invalid='true'] { border-color: var(--error) !important; }
.campo-ayuda { color: var(--tinta-3); font-size: 0.84rem; }
.campo-error { color: var(--error); font-size: 0.86rem; }
.campo-error:empty { display: none; }
.campo-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.campo-check input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--azul);
  cursor: pointer;
}
.campo-check label {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tinta-2);
  cursor: pointer;
}
.campo-check .campo-error { flex-basis: 100%; }
.formulario-enviar { align-self: flex-start; }
.formulario-enviar[aria-disabled='true'] { opacity: 0.7; cursor: progress; }
.form-estado { font-size: 0.92rem; }
.form-estado:empty { display: none; }
.form-estado.error { color: var(--error); }
.form-estado.info { color: var(--azul-claro); }
.form-exito { align-items: flex-start; }
.form-exito-texto { color: var(--tinta-2); }
.form-exito-texto strong { color: var(--tinta); }
.oculto-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto-otros {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
}

@media (max-width: 860px) {
  .contacto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .campo-doble { grid-template-columns: 1fr; }
}

/* ---------- Pie de página ---------- */
.pie {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px var(--margen) 32px;
  border-top: 1px solid var(--borde);
  font-size: 0.86rem;
  color: var(--tinta-3);
}
.pie-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}
.pie-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pie-legal a,
.pie-fila > a:last-child { color: var(--tinta-2); }
.pie-legal a:hover,
.pie-fila > a:last-child:hover { color: var(--tinta); }
.pie-legal a[aria-current='page'] { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.pie-identificacion,
.pie-sic { line-height: 1.6; }

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */
.cabecera-legal {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px var(--margen);
  background: rgba(4, 7, 13, 0.72);
  border-bottom: 1px solid var(--borde);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}
.pagina-legal .boton:active { transform: scale(0.96); }
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px var(--margen) 96px;
}
.legal > .aviso-borrador { margin-bottom: 24px; }
.legal h1 {
  margin: 18px 0 12px;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
}
.legal h2 {
  margin: 48px 0 12px;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.legal h3 {
  margin: 24px 0 8px;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.legal p,
.legal li { color: var(--tinta-2); line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul,
.legal ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding-left: 1.3em;
}
.legal strong { color: var(--tinta); font-weight: 600; }
.legal-fecha { color: var(--tinta-3); }
.legal-caja {
  margin-top: 24px;
  padding: 22px 26px;
}
.legal-caja h2 { margin: 0 0 10px; font-size: 1.1rem; }
.legal-caja ul,
.legal-caja ol { margin-bottom: 0; }
.legal-tabla {
  width: 100%;
  margin: 14px 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-tabla th,
.legal-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
  color: var(--tinta-2);
}
.legal-tabla th { color: var(--tinta); font-weight: 600; }
.gracias {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

/* =========================================================
   VISOR DE VIDEO
   ========================================================= */
.visor {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}
.visor[hidden] { display: none; }
.visor-fondo {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.62);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.visor-contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.visor-marco {
  position: relative;
  width: min(92vw, 1100px, 138.667vh);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 26px;
  background: #000;
  border: 1px solid var(--borde-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(47, 123, 255, 0.25);
}
.visor.vertical .visor-marco { width: auto; height: min(78vh, 860px); max-width: 92vw; aspect-ratio: 9 / 16; }
.visor.panorama .visor-marco { width: min(92vw, 1400px, 195vh); height: auto; aspect-ratio: 5 / 2; max-height: 78vh; }
.visor-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.visor-vacio {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--tinta-2);
  background: radial-gradient(90% 70% at 50% 110%, rgba(47, 123, 255, 0.45), transparent 60%), #04070d;
}
.visor-vacio p { color: var(--tinta); font-size: 1.15rem; }
.visor.sin-archivo .visor-vacio { display: flex; }
.visor.sin-archivo .visor-video { display: none; }
.visor-pie { display: flex; align-items: center; gap: 12px; }
.visor-titulo { font-size: 1.2rem; letter-spacing: -0.03em; }
.visor-cerrar { position: absolute; top: 20px; right: 20px; z-index: 2; }

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 65;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 58px;
  height: 58px;
  padding: 0 14px;
  border: 1px solid rgba(37, 211, 102, 0.6);
  border-radius: 999px;
  background: rgba(12, 30, 31, 0.96);
  color: #f5fff8;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 22px rgba(37, 211, 102, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, opacity 0.35s ease, visibility 0.35s ease,
    transform 0.35s ease;
}
.whatsapp-flotante-icono {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
}
.whatsapp-flotante-icono .icono {
  width: 28px;
  height: 28px;
  animation: whatsapp-latido 3.4s ease-in-out infinite;
}
.whatsapp-flotante-icono::before,
.whatsapp-flotante-icono::after {
  content: '';
  position: absolute;
  inset: -15px;
  z-index: -1;
  border: 1px solid rgba(37, 211, 102, 0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: whatsapp-onda 3.4s ease-out infinite;
}
.whatsapp-flotante-icono::after { animation-delay: 1.7s; }
.whatsapp-flotante-texto {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition: max-width 0.32s ease, margin-left 0.32s ease,
    opacity 0.2s ease, transform 0.32s ease;
}
@media (hover: hover) and (pointer: fine) {
  .whatsapp-flotante:hover { width: 150px; }
  .whatsapp-flotante:hover .whatsapp-flotante-texto {
    max-width: 90px;
    margin-left: 10px;
    opacity: 1;
    transform: translateX(0);
  }
  .whatsapp-flotante:hover .whatsapp-flotante-icono::before,
  .whatsapp-flotante:hover .whatsapp-flotante-icono::after { display: none; }
}
.whatsapp-flotante:focus-visible { width: 150px; outline: 2px solid #fff; outline-offset: 4px; }
.whatsapp-flotante:focus-visible .whatsapp-flotante-texto {
  max-width: 90px;
  margin-left: 10px;
  opacity: 1;
  transform: translateX(0);
}
.whatsapp-flotante:focus-visible .whatsapp-flotante-icono::before,
.whatsapp-flotante:focus-visible .whatsapp-flotante-icono::after { display: none; }
.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  border-color: #25d366;
  background: #25d366;
  color: #062315;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36), 0 0 28px rgba(37, 211, 102, 0.3);
}
.whatsapp-flotante:active { transform: scale(0.96); }
.whatsapp-flotante.escondido {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(0.9);
}
@keyframes whatsapp-latido {
  0%, 78%, 100% { transform: scale(1); }
  84% { transform: scale(1.08); }
  91% { transform: scale(1.02); }
}
@keyframes whatsapp-onda {
  0% { transform: scale(1); opacity: 0.45; }
  75%, 100% { transform: scale(1.55); opacity: 0; }
}
.animaciones-pausadas .whatsapp-flotante-icono .icono,
.animaciones-pausadas .whatsapp-flotante-icono::before,
.animaciones-pausadas .whatsapp-flotante-icono::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante,
  .whatsapp-flotante-texto { transition: none; }
  .whatsapp-flotante-icono .icono { animation: none; }
  .whatsapp-flotante-icono::before,
  .whatsapp-flotante-icono::after { display: none; }
}
@media (max-width: 560px) {
  .whatsapp-flotante { right: 14px; bottom: 14px; }
}

/* Aviso corto */
.aviso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 90;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  text-align: center;
  padding: 0.8em 1.3em;
  border-radius: 999px;
  font-size: 0.9rem;
  background: rgba(14, 22, 38, 0.8);
  border: 1px solid var(--borde-2);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   SIN ANIMACIONES (si no cargan las librerías)
   ========================================================= */
.sin-animacion .faq-respuesta,
.sin-animacion .servicio-mas { height: auto; opacity: 1; }
.sin-animacion .boton-pausa { display: none; }

/* Las animaciones son iguales en PC y celular, sin importar la opción "reducir movimiento"
   del sistema (decisión del dueño del sitio). Las que se repiten solas se detienen con
   el botón "Pausar animación" de la portada. */

/* El aviso corto sube en celular para no tapar el botón de WhatsApp */
@media (max-width: 560px) {
  .aviso { bottom: 84px; }
}

/* Aparición suave en páginas legales (la activa js/aparecer.js) */
.con-aparicion [data-aparecer] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.con-aparicion [data-aparecer].aparecido { opacity: 1; filter: none; transform: none; }