/* =========================================================
   JOHAN.MOV — luz, filamentos y vidrio
   Capa visual adicional. Los estilos originales siguen en estilos.css.
   ========================================================= */

:root {
  --violeta: #aa83ff;
  --violeta-claro: #e2d2ff;
}

/* Textura sutil en todo el recorrido; la luz violeta acompaña al azul original. */
.ambiente::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(172, 153, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(172, 153, 255, .065) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 70% 38%, #000, transparent);
  mask-image: radial-gradient(ellipse 75% 80% at 70% 38%, #000, transparent);
}

.brillo-violeta {
  width: min(82vw, 1100px);
  height: min(82vw, 1100px);
  right: -18vw;
  top: -36vw;
  background: radial-gradient(circle, rgba(120, 73, 242, .28) 0%, rgba(69, 46, 163, .12) 38%, transparent 68%);
}

.luz-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: min(55vw, 720px);
  height: min(55vw, 720px);
  min-width: 360px;
  min-height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 108, 255, .19), rgba(79, 99, 236, .1) 30%, transparent 66%);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
}

.grano { opacity: .07; }

/* La portada usa una luz violeta suave detrás del texto y del teléfono. */
/* La luz violeta va en su propia capa y se desvanece hacia abajo:
   así el borde inferior de la portada no muestra un corte al bajar. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 62% at 77% 47%, rgba(56, 27, 128, .22), transparent 72%),
    radial-gradient(ellipse 60% 68% at 82% 90%, rgba(31, 67, 157, .14), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}

.hero-campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Difuminado inferior: las líneas y el halo se desvanecen antes del borde de la portada.
     Este contenedor no se mueve (lo que se mueve al bajar es su contenido), por eso el
     difuminado siempre cubre el borde y el corte nunca aparece. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, .8) 66%, rgba(0, 0, 0, .45) 76%, rgba(0, 0, 0, .15) 86%, rgba(0, 0, 0, .03) 92%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, .8) 66%, rgba(0, 0, 0, .45) 76%, rgba(0, 0, 0, .15) 86%, rgba(0, 0, 0, .03) 92%, transparent 96%);
}

.hero-campo-halo {
  position: absolute;
  width: min(86vw, 1180px);
  height: min(77vw, 850px);
  top: 5%;
  left: 35%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(154, 103, 255, .27), rgba(47, 88, 218, .13) 39%, transparent 72%);
  filter: blur(30px);
}

.hero-escena { z-index: 1; }
.hero-texto { text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.hero-texto .pill {
  border-color: rgba(201, 176, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .19), 0 0 36px rgba(141, 97, 255, .14);
}
.hero .titulo-grande .degradado {
  background: linear-gradient(100deg, #fff 0%, #eadcff 40%, #a6bfff 83%, #7c9efe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Botones de vidrio pulido: reflejo especular, borde claro y sombra interior. */
.boton {
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transition: box-shadow .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
}

.boton-blanco {
  color: #11172c;
  border-color: rgba(255, 255, 255, .87);
  background:
    radial-gradient(circle 125px at var(--brillo-x, 50%) var(--brillo-y, -30%), rgba(255, 255, 255, .9), transparent 80%),
    linear-gradient(169deg, rgba(255, 255, 255, .96) 0%, rgba(235, 239, 255, .87) 44%, rgba(184, 196, 238, .82) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .92),
    inset 0 -5px 13px rgba(74, 78, 147, .16),
    0 0 0 1px rgba(194, 183, 255, .25),
    0 16px 39px rgba(0, 0, 0, .28),
    0 6px 42px rgba(131, 83, 255, .22);
}

.boton-blanco:hover,
.boton-blanco:focus-visible {
  border-color: #fff;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 1),
    inset 0 -5px 13px rgba(74, 78, 147, .11),
    0 0 0 2px rgba(228, 218, 255, .43),
    0 20px 46px rgba(0, 0, 0, .3),
    0 7px 64px rgba(146, 96, 255, .38);
}

.boton-vidrio {
  color: #f6f2ff;
  border-color: rgba(212, 194, 255, .36);
  background:
    radial-gradient(circle 130px at var(--brillo-x, 50%) var(--brillo-y, -30%), rgba(236, 221, 255, .22), transparent 85%),
    linear-gradient(165deg, rgba(191, 165, 255, .18), rgba(42, 29, 91, .31) 55%, rgba(14, 24, 58, .45));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .31),
    inset 0 -5px 11px rgba(22, 11, 57, .22),
    0 10px 32px rgba(0, 0, 0, .19),
    0 0 34px rgba(119, 74, 240, .09);
}

.boton-vidrio:hover,
.boton-vidrio:focus-visible {
  border-color: rgba(229, 213, 255, .72);
  background:
    radial-gradient(circle 140px at var(--brillo-x, 50%) var(--brillo-y, -30%), rgba(245, 231, 255, .3), transparent 85%),
    linear-gradient(165deg, rgba(203, 173, 255, .25), rgba(75, 51, 139, .4) 55%, rgba(25, 37, 81, .51));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 12px 36px rgba(0, 0, 0, .24),
    0 0 45px rgba(155, 104, 255, .23);
}

.boton-vidrio .punto {
  background: #ddc8ff;
  box-shadow: 0 0 14px rgba(191, 152, 255, .8);
}

.hero-acciones .boton { min-height: 52px; }
.nav-cta { border-radius: 999px; }
/* El corte editorial a mitad de página invita a escribir sin interrumpir la galería. */
.cta-entre {
  position: relative;
  padding: clamp(18px, 3vw, 42px) var(--margen) clamp(50px, 8vw, 104px);
  isolation: isolate;
}

.cta-entre-marco {
  position: relative;
  z-index: 0;
  width: min(1400px, 100%);
  min-height: 330px;
  margin: auto;
  padding: clamp(32px, 5vw, 74px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  overflow: hidden;
  border: 1px solid rgba(191, 163, 255, .31);
  border-radius: clamp(26px, 3.5vw, 44px);
  background:
    radial-gradient(ellipse 68% 135% at 87% 54%, rgba(121, 62, 225, .3), transparent 71%),
    radial-gradient(ellipse 75% 120% at 0% 105%, rgba(39, 91, 183, .19), transparent 70%),
    linear-gradient(135deg, rgba(22, 19, 56, .91), rgba(9, 13, 33, .95) 58%, rgba(16, 12, 38, .93));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 27px 80px rgba(0, 0, 0, .34),
    0 0 85px rgba(109, 70, 212, .08);
}

.cta-entre-marco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 78px, rgba(205, 185, 255, .035) 78px 79px);
}


.cta-entre-contenido { max-width: 740px; }
.cta-entre-etiqueta {
  display: block;
  margin-bottom: 20px;
  color: #ceb5ff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .23em;
}
.cta-entre h2 {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.25rem, 4.7vw, 5.1rem);
  line-height: 1;
}
.cta-entre h2 span {
  background: linear-gradient(95deg, #f7f0ff, #bca0ff 60%, #8caaff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-entre p {
  max-width: 48ch;
  margin-top: 22px;
  color: var(--tinta-2);
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
}
.cta-entre-boton { flex: none; margin-bottom: 4px; }

/* El último bloque se reconoce como cierre y deja visible la acción directa. */
.contacto {
  background: none;
}
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 62% at 50% 35%, rgba(110, 72, 214, .20), transparent 78%),
    radial-gradient(ellipse 82% 58% at 50% 72%, rgba(47, 123, 255, .13), transparent 80%);
  -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%);
}
.contacto-cierre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: min(1100px, 100%);
  margin-top: clamp(20px, 4vw, 52px);
  padding: 24px 28px;
  border-top: 1px solid rgba(216, 199, 255, .22);
}
.contacto-cierre p { color: var(--tinta-2); font-size: 1.05rem; }
.contacto-cierre-boton { border-color: rgba(212, 192, 255, .55); }

@media (max-width: 860px) {
  .hero-campo-halo { left: 8%; top: 21%; width: 105%; height: 65%; }
  .cta-entre-marco { align-items: flex-start; flex-direction: column; min-height: 0; }
  .cta-entre-boton { margin-top: 8px; }
}

@media (max-width: 560px) {
  .ambiente::before { background-size: 52px 52px; }
  .brillo-violeta { width: 100vw; height: 100vw; right: -44vw; top: -7vw; }
  .hero-campo-halo { top: 36%; }
  .hero-acciones { width: 100%; }
  .hero-acciones .boton { padding-inline: 1.2em; }
  .cta-entre { padding-bottom: 52px; }
  .cta-entre-marco { padding: 34px 26px; border-radius: 28px; }
  .cta-entre h2 { font-size: clamp(2.15rem, 10vw, 3.4rem); }
  .cta-entre-boton { width: 100%; }
  .contacto-cierre { flex-direction: column; padding-inline: 0; }
  .contacto-cierre-boton { width: 100%; max-width: 330px; }
  body:has(> #nl-badge-frame) .whatsapp-flotante { bottom: 82px; }
}

@media (hover: none), (pointer: coarse) {
  .luz-cursor { display: none; }
}