/* ============================================================
   CLÍNICA SAN XAVIER — INTERVENCIÓN VISUAL (v4, agresiva)
   Capa aditiva final, sobre flujo.css + direccion-arte.css.
   No toca estructura, navegación, contenido ni Hero. Interviene
   fuerte el espacio negativo: escala grande, superposición,
   elementos que atraviesan secciones, texturas fotográficas
   (SVG/gradientes propios, sin dependencias externas).
   Reversible: basta con quitar este <link>.
   ============================================================ */

/* ---------- grano fotográfico grande, reutilizable ---------- */
.ia-grano{ position:absolute; inset:0; pointer-events:none; opacity:.09; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.03 0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:300px 300px;
}

/* ============================================================
   1. VESTÍBULO — la mascota gana un fondo de material a escala
   completa (papel + trazo de tinta), y una forma enorme que
   sale del contenedor y perfora la sección siguiente.
   ============================================================ */
.vestibulo{ overflow:visible !important; position:relative; }
.vestibulo-visual{ position:relative; }
.vestibulo-visual::before{ width:104%; height:96%; right:-14%; top:-4%; opacity:.7; }

.ia-vestibulo-marca{
  position:absolute; z-index:-1; right:-6vw; top:-10vh;
  width:min(52vw,780px); height:min(52vw,780px);
  background: radial-gradient(circle at 38% 32%, var(--light-blue) 0%, var(--primary) 55%, transparent 78%);
  opacity:.16; border-radius:38% 62% 55% 45% / 48% 42% 58% 52%;
  filter: blur(6px);
}
.ia-vestibulo-trazo{
  position:absolute; z-index:0; left:-4vw; bottom:-18vh; width:min(44vw,560px); height:min(44vw,560px);
  border:2px solid var(--pink-deep); opacity:.35;
  border-radius:60% 40% 45% 55% / 55% 60% 40% 45%;
  transform: rotate(-8deg);
}
@media (max-width:900px){ .ia-vestibulo-marca, .ia-vestibulo-trazo{ display:none; } }

/* ============================================================
   2. TRANSICIÓN vestíbulo → partida: una franja que atraviesa
   el límite entre ambas secciones, para que dejen de sentirse
   como dos bloques apilados.
   ============================================================ */
.vestibulo{ margin-bottom:-64px; }
.partida{ position:relative; overflow:visible !important; padding-top:calc(64px + 100px) !important; }
.partida::after{
  content:""; position:absolute; z-index:-1; left:-6vw; right:-6vw; top:0; height:220px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--pink) 30%, var(--light-blue) 66%, transparent 100%);
  opacity:.35; transform:skewY(-2.2deg); transform-origin:left;
}
.partida::before{ width:640px; height:640px; left:-260px; top:-160px; opacity:.5; }

/* ============================================================
   3. EL CAMINO — un objeto de gran escala (arco de trazo) que
   cruza detrás de los tres pasos, más una mancha que se asoma
   fuera del "wrap" por ambos lados.
   ============================================================ */
.camino{ position:relative; overflow:visible !important; }
.camino::before{
  content:""; position:absolute; z-index:0; left:50%; top:38px;
  width:min(1400px,150vw); height:340px; margin-left:calc(min(1400px,150vw) / -2);
  border:2px dashed var(--line); border-radius:50%;
  clip-path: inset(0 0 50% 0);
  opacity:.6;
}
.ia-camino-mancha{
  position:absolute; z-index:0; right:-8vw; bottom:-14vh;
  width:min(38vw,460px); height:min(38vw,460px);
  background: radial-gradient(circle, var(--green-light), transparent 72%);
  opacity:.5; filter: blur(4px);
}
@media (max-width:780px){ .camino::before, .ia-camino-mancha{ display:none; } }

/* ============================================================
   4. SALA DE ESPERA — composición completa: la mascota ya no
   vive sola en su tarjeta. Gana una plataforma de material
   grande detrás (textura + trazo + sombra profunda) y un bloque
   tipográfico enorme, casi-watermark, que atraviesa el fondo.
   ============================================================ */
.espera{ position:relative; overflow:visible !important; }
.espera::before{
  content:"Escuchar"; position:absolute; z-index:0; left:-2%; bottom:-6%;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(5rem,13vw,11rem); line-height:1; color:var(--primary);
  opacity:.045; pointer-events:none; user-select:none; white-space:nowrap;
}
.espera-visual{ position:relative; }
.espera-visual::before{ inset:-10% -10%; opacity:.6; filter: blur(64px); }
.ia-espera-plataforma{
  position:absolute; z-index:0; inset:-4% -18% -16% -14%;
  background: radial-gradient(ellipse at 50% 50%, var(--pink) 0%, var(--beige) 45%, var(--light-blue) 75%, transparent 100%);
  opacity:.55; border-radius:46% 54% 40% 60% / 55% 45% 62% 38%;
  transform: rotate(-3deg);
  filter: blur(22px);
}
.ia-espera-plataforma::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='e'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23e)'/></svg>");
  opacity:.12; mix-blend-mode:multiply;
}
/* la tarjeta ya no corta en seco contra el blob: un halo de luz entre
   ambos (elemento propio, para no pisar el grano de papel existente
   en .note::after) difumina el borde recto de la tarjeta */
.espera-visual .note{ position:relative; z-index:2; }
.ia-espera-halo{
  position:absolute; z-index:1; inset:-34px;
  background: radial-gradient(ellipse at center, var(--paper) 40%, rgba(255,253,249,.5) 64%, transparent 84%);
}
@media (max-width:900px){
  .espera::before{ font-size:clamp(3rem,16vw,6rem); }
  .ia-espera-plataforma{ inset:-4% -8% -10% -8%; }
  .ia-espera-halo{ inset:-26px; }
}

/* ============================================================
   5. CONSULTORIO — la mancha de fondo crece a escala de sección
   completa y dos manchas secundarias más pequeñas rompen la
   uniformidad de la retícula de 6 puertas, saliendo del wrap.
   ============================================================ */
.consultorio::before{ width:78%; min-width:640px; right:-22%; top:-16%; opacity:.5; }
.ia-consultorio-sombra{
  position:absolute; z-index:0; left:-10vw; bottom:-12vh;
  width:min(30vw,380px); height:min(30vw,380px);
  background: radial-gradient(circle, var(--pink), transparent 70%);
  opacity:.45; filter: blur(2px);
}
.ia-consultorio-linea{
  position:absolute; z-index:0; left:50%; top:0; bottom:0; width:1px;
  background: linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
  opacity:.5;
}
@media (max-width:1000px){ .ia-consultorio-sombra, .ia-consultorio-linea{ display:none; } }

/* ============================================================
   6. PAUSA — el gradiente azul se rompe con un objeto orgánico
   grande semitransparente detrás del respirador, más una
   costura que conecta visualmente con el pasillo siguiente.
   ============================================================ */
.pausa{ position:relative; overflow:visible !important; margin-bottom:-56px; }
.ia-pausa-orbe{
  position:absolute; z-index:0; right:-14%; top:-18%;
  width:min(46vw,560px); height:min(46vw,560px);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.16), transparent 68%);
  border-radius:50%;
}
.ia-pausa-orbe-2{
  position:absolute; z-index:0; left:-10%; bottom:-22%;
  width:min(30vw,360px); height:min(30vw,360px);
  border:1.5px solid rgba(255,255,255,.18); border-radius:44% 56% 60% 40% / 50% 55% 45% 50%;
}
@media (max-width:900px){ .ia-pausa-orbe, .ia-pausa-orbe-2{ display:none; } }

/* ============================================================
   7. PASILLO DE VOCES — la comilla editorial crece muchísimo
   y se le suma una segunda capa desplazada (efecto de doble
   exposición tipográfica), más una franja de transición hacia
   la despedida.
   ============================================================ */
.pasillo::before{ font-size:clamp(14rem,32vw,34rem); top:-8rem; opacity:.045; }
.pasillo::after{
  content:"\201C"; position:absolute; z-index:0; top:-4rem; left:6%;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(10rem,24vw,26rem); line-height:1; color:var(--light-blue);
  opacity:.06; pointer-events:none; user-select:none;
}
.pasillo{ margin-bottom:-70px; padding-bottom:calc(110px + 70px); }
.despedida{ position:relative; }
.despedida::before{
  content:""; position:absolute; z-index:0; left:-6vw; right:-6vw; top:-2px; height:180px;
  background: linear-gradient(180deg, var(--primary-deep), transparent);
  opacity:.28; transform:skewY(1.6deg); transform-origin:right; pointer-events:none;
}
@media (max-width:780px){ .pasillo::after{ display:none; } }

/* ============================================================
   8. DESPEDIDA / CTA FINAL — la mascota-video gana escala mayor
   y una segunda forma que la atraviesa por detrás, más un halo
   grande que se sale del bloque azul.
   ============================================================ */
.cta-final{ position:relative; overflow:visible !important; }
.cta-final::before{
  content:""; position:absolute; z-index:0; right:-8vw; top:-30%;
  width:min(40vw,480px); height:min(40vw,480px);
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  border-radius:50%; pointer-events:none;
}
.cta-final-visual{ transform: scale(1.14); transform-origin:center; }
.cta-final-visual::after{
  content:""; position:absolute; z-index:-1; width:70%; height:70%; left:8%; top:18%;
  border:1px solid rgba(255,255,255,.25);
  border-radius:52% 48% 44% 56% / 50% 55% 45% 50%;
  transform: rotate(9deg);
}
@media (max-width:860px){ .cta-final-visual{ transform:none; } }

/* ---------- grano aplicado a los tres bloques oscuros, para que
   el azul no se sienta como una superficie digital plana ---------- */
.pausa, .pasillo, .cta-final{ isolation:isolate; }
.pausa > .ia-grano, .pasillo > .ia-grano, .cta-final > .ia-grano{ z-index:0; }

/* ============================================================
   9. FIX — .espera-linea-cita se sale por la izquierda en móvil.
   direccion-arte.css fija "position:relative" sin media query,
   y como carga después de flujo.css, pisa el "position:static"
   que flujo.css intenta aplicar a <=900px (misma especificidad,
   gana el que se declaró último). Resultado: en móvil el elemento
   conserva left:-24px de la regla de escritorio y sangra fuera
   del viewport. Como intervencion.css carga al final, forzamos
   aquí el comportamiento móvil correcto.
   ============================================================ */
@media (max-width:900px){
  .espera-linea-cita{ position:relative !important; left:auto !important; bottom:auto !important; margin-top:18px; max-width:none; }
}

/* ============================================================
   10. FIX — .pie-grid se desborda a la derecha en móvil. Ya tiene
   2 columnas a <=760px (flujo.css) pero a los items de grid les
   falta min-width:0, así que el contenido largo (texto/listas)
   no se encoge y empuja la columna fuera del viewport.
   ============================================================ */
@media (max-width:760px){
  .pie-grid > div{ min-width:0; }
}

/* ============================================================
   11. FIX — .vestibulo-tarjeta-flotante ("60 min por sesión")
   casi desaparece fuera del viewport. direccion-arte.css le puso
   position:relative (para anclar su propia sombra ::before) sin
   darse cuenta de que flujo.css ya la posiciona con
   position:absolute (left/bottom) para que flote sobre la mascota.
   Con position:relative, esos mismos left/bottom dejan de medirse
   contra el contenedor y la tarjeta se desplaza fuera de pantalla.
   position:absolute también sirve de contenedor para su ::before,
   así que restaurarlo no rompe la sombra.
   ============================================================ */
.vestibulo-tarjeta-flotante{ position:absolute !important; }

/* ============================================================
   12. FIX — el botón "Agenda tu cita" del header se parte en dos
   líneas en móvil: el logo+texto de marca deja poco espacio y el
   botón (sin white-space:nowrap) se encoge y envuelve el texto,
   perdiendo la forma de píldora.
   ============================================================ */
.nav-cta .btn{ white-space:nowrap; }
@media (max-width:480px){
  .nav-marca span{ font-size:1rem; }
  .nav-cta .btn{ padding:11px 18px; font-size:.85rem; }
}

/* ---------- red de seguridad: evita scroll horizontal residual
   causado por cualquier elemento decorativo que se escape ---------- */
html{ overflow-x:hidden; }