/* ============================================================
   CLÍNICA SAN XAVIER — DIRECCIÓN DE ARTE
   Capa aditiva sobre "flujo.css". No redefine estructura, solo
   construye profundidad, textura y ritmo alrededor de lo que
   ya existe: la nota doblada, la paleta de marca y las imágenes
   protagonistas se mantienen intactas.

   Vocabulario reutilizado del sistema original:
   - la esquina doblada (--note-cut) como firma de marca
   - formas orgánicas irregulares (como .vestibulo-blob)
   - la paleta: azul, rosa, verde, beige, crema, papel

   Progresión de ritmo entre secciones:
   vestíbulo (calma-interés) → partida (interés) → camino (riqueza)
   → espera (pausa cálida) → consultorio (riqueza) → pausa (dinamismo)
   → pasillo (interés editorial) → despedida (calma) → cta-final (resolución)
   ============================================================ */

/* ---------- grano de papel, sutil, en toda la página ---------- */
body.flujo{ position:relative; }
body.flujo::after{
  content:"";
  position:fixed; inset:0; z-index:250; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.13  0 0 0 0 0.1  0 0 0 0 0.05  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce){ body.flujo::after{ opacity:.035; } }

/* ============================================================
   1. VESTÍBULO — un plano cálido detrás de la mascota, además
   del blob existente: introduce el papel/beige de marca como
   segundo material, y deja que se asome fuera del contenedor.
   ============================================================ */
.vestibulo{ overflow:hidden; }
.vestibulo-visual{ overflow:visible; }
.vestibulo-visual::before{
  content:"";
  position:absolute; z-index:0;
  width:78%; height:64%; right:-8%; top:8%;
  background: var(--beige);
  opacity:.55;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 8% 100%, 0 86%);
  transform: rotate(-4deg);
}
@media (max-width:900px){ .vestibulo-visual::before{ display:none; } }

/* ============================================================
   2. PUNTO DE PARTIDA — un lavado orgánico de verde suave que
   marca el inicio del "interés" en la lectura de la página.
   ============================================================ */
.partida{ overflow:hidden; }
.partida::before{
  content:"";
  position:absolute; z-index:0;
  width:420px; height:420px; left:-160px; top:-120px;
  background: var(--green-light);
  opacity:.35; filter: blur(2px);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
}
.partida .wrap{ position:relative; z-index:1; }

/* ============================================================
   3. EL CAMINO — cada paso recibe un plano de color propio
   detrás de su número: no es un ícono nuevo, es profundidad
   ligada al color que ya distingue a cada paso.
   ============================================================ */
.paso{ position:relative; }
.paso-numero{ position:relative; z-index:2; }
.paso::before{
  content:"";
  position:absolute; z-index:1; top:-18px; left:50%;
  width:112px; height:112px; margin-left:-56px;
  opacity:.4;
  border-radius: 44% 56% 61% 39% / 52% 45% 55% 48%;
  background: var(--light-blue);
}
.paso--rosa::before{ background: var(--pink); border-radius: 55% 45% 40% 60% / 44% 55% 45% 56%; }
.paso--verde::before{ background: var(--green-light); border-radius: 39% 61% 55% 45% / 58% 42% 58% 42%; }

/* ============================================================
   4. SALA DE ESPERA — construye una composición alrededor de
   la mascota-abrazo existente: un segundo plano de papel con
   textura y un marco desplazado, en vez de reemplazar la imagen.
   ============================================================ */
.espera-visual{ overflow:visible; }
.espera-tagline{
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-style: italic; color: var(--primary-deep);
  font-size: 1.05rem; line-height:1.5;
}
.espera-tagline strong{ font-style: normal; font-weight: 700; }
.espera-visual .note{ position:relative; z-index:2; }
.espera-visual::before{
  content:"";
  position:absolute; z-index:0;
  inset: 2% 4%;
  background: radial-gradient(ellipse at 62% 38%, var(--beige), var(--green-light) 68%, transparent 100%);
  opacity:.5;
  filter: blur(30px);
  border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
}
@media (max-width:900px){
  .espera-visual::before{ opacity:.35; }
}

/* ============================================================
   5. CONSULTORIO — un lavado de color grande y bajo, que da
   profundidad de fondo a la retícula de puertas sin competir
   con el contenido (opacidad baja, detrás de todo).
   ============================================================ */
.consultorio{ position:relative; overflow:hidden; }
.consultorio::before{
  content:"";
  position:absolute; z-index:0;
  width:60%; min-width:520px; aspect-ratio:1/1;
  right:-14%; top:-8%;
  background: var(--beige);
  opacity:.4;
  border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;
}
.consultorio .wrap{ position:relative; z-index:1; }

/* ============================================================
   6. PAUSA — el gradiente azul ya es el momento de mayor
   dinamismo; se le añade tactilidad (grano cálido) para que
   no se sienta como una superficie digital fría.
   ============================================================ */
.pausa::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-size: 220px 220px;
}
.pausa-wrap{ position:relative; z-index:1; }

/* ============================================================
   7. PASILLO DE VOCES — una comilla editorial a gran escala,
   detrás del carrusel: recurso tipográfico, no un ícono.
   ============================================================ */
.pasillo{ position:relative; overflow:hidden; }
.pasillo::before{
  content:"\201C";
  position:absolute; z-index:0; top:-4.2rem; left:2%;
  font-family: var(--font-display); font-style:italic;
  font-size: 22rem; line-height:1; color:var(--primary);
  opacity:.05; pointer-events:none; user-select:none;
}
.pasillo .wrap{ position:relative; z-index:1; }

/* ============================================================
   8. DESPEDIDA / CTA FINAL — mantiene el FAQ limpio (pausa en
   el ritmo) y concentra la riqueza en el cierre: un marco
   desplazado detrás de la mascota-video, en el mismo lenguaje
   ya usado en la sala de espera, para cerrar el sistema visual.
   ============================================================ */
.cta-final-visual{ position:relative; overflow:visible; }
.cta-final-visual::before{
  content:"";
  position:absolute; z-index:0;
  width:82%; height:82%; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(-3deg);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.cta-final-visual img{ position:relative; z-index:1; }

/* ============================================================
   REFINAMIENTO v2 — más detalle, más tacto, mismo lenguaje.
   Todo lo de abajo afina lo anterior o suma detalles pequeños
   que se descubren al recorrer la página, sin agregar objetos
   sueltos ni romper nada de lo ya construido.
   ============================================================ */

/* ---------- 1b. VESTÍBULO — un tercer plano, más fino, detrás
   del beige, para reforzar la sensación de profundidad y una
   base de sombra cálida bajo la tarjeta flotante ---------- */
.vestibulo-visual::after{
  content:"";
  position:absolute; z-index:0;
  width:56%; height:44%; left:-4%; bottom:2%;
  border: 1.5px solid var(--pink-deep);
  opacity:.4;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  transform: rotate(3deg);
}
@media (max-width:900px){ .vestibulo-visual::after{ display:none; } }
.vestibulo-tarjeta-flotante{ position:relative; }
.vestibulo-tarjeta-flotante::before{
  content:"";
  position:absolute; z-index:-1; inset:6px -6px -10px 10px;
  background: var(--green-light); opacity:.5;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

/* pequeñas manchas de color detrás de los íconos de confianza,
   del mismo tono que cada ícono representa */
.vestibulo-confianza li{ position:relative; }
.vestibulo-confianza li img{ position:relative; z-index:1; padding:3px; }
.vestibulo-confianza li:nth-child(1) img{ background: radial-gradient(circle, var(--pink) 55%, transparent 72%); }
.vestibulo-confianza li:nth-child(2) img{ background: radial-gradient(circle, var(--light-blue) 55%, transparent 72%); }
.vestibulo-confianza li:nth-child(3) img{ background: radial-gradient(circle, var(--green-light) 55%, transparent 72%); }

/* ---------- 3b. EL CAMINO — un resplandor cálido bajo la línea
   punteada, para que la conexión entre pasos se sienta menos
   técnica y más como un trazo hecho a mano ---------- */
.camino-linea{ position:relative; }
.camino-linea::after{
  content:"";
  position:absolute; z-index:-1; top:14px; left:12%; right:12%; height:40px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--light-blue) 50%, var(--green-light) 100%);
  opacity:.18; filter: blur(14px);
}
@media (max-width:780px){ .camino-linea::after{ display:none; } }

/* ---------- 4b. SALA DE ESPERA — la cita entre comillas gana
   una pequeña sombra de papel debajo, para que no flote sin
   peso sobre el fondo ---------- */
.espera-linea-cita{ position:relative; z-index:2; }
.espera-linea-cita::before{
  content:"";
  position:absolute; z-index:-1; inset:6px -6px -10px 8px;
  background: var(--primary-deep); opacity:.5;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* ---------- 5b. CONSULTORIO — cada puerta recibe una identidad
   sutil: un filo de color propio arriba y un halo cálido detrás
   de su mascota, en vez de un fondo idéntico para las seis ---------- */
.puerta{ position:relative; border-top:3px solid transparent; }
.puerta:nth-child(6n+1){ border-top-color: var(--pink-deep); }
.puerta:nth-child(6n+2){ border-top-color: var(--secondary); }
.puerta:nth-child(6n+3){ border-top-color: var(--green-deep); }
.puerta:nth-child(6n+4){ border-top-color: var(--beige); }
.puerta:nth-child(6n+5){ border-top-color: var(--pink-deep); }
.puerta:nth-child(6n+6){ border-top-color: var(--secondary); }
.puerta-boton img{ position:relative; z-index:1; border-radius:50%; }
.puerta-boton{ position:relative; }
.puerta-boton::before{
  content:"";
  position:absolute; z-index:0; left:20px; top:14px;
  width:52px; height:52px; border-radius:50%;
  background: var(--cream-dark);
  transition: background .3s;
}
.puerta[open-estado="true"] .puerta-boton::before{ background: var(--light-blue); opacity:.5; }

/* ---------- 6b. PAUSA — un anillo de luz más orgánico detrás
   del respirador, para acompañar la respiración con la mirada ---------- */
.respirador{ position:relative; }
.respirador::before{
  content:"";
  position:absolute; z-index:-1; top:50%; left:50%;
  width:340px; height:340px; margin:-170px 0 0 -170px;
  border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}

/* ---------- 7b. PASILLO DE VOCES — las tarjetas se despegan
   ligeramente entre sí, como notas reales sobre una mesa, y
   ganan una sombra de papel más cálida ---------- */
.voz{ box-shadow: 0 18px 34px rgba(62, 95, 138,.10); transition: transform .3s var(--ease-soft); }
.pasillo-pista .voz:nth-child(odd){ transform: rotate(-0.6deg); }
.pasillo-pista .voz:nth-child(even){ transform: rotate(0.6deg); }
.pasillo-pista .voz:hover{ transform: translateY(-4px) rotate(0deg); }

/* ---------- 8b. DESPEDIDA — el número de cada pregunta gana
   el mismo lenguaje de plano de color que "el camino", para
   que el sistema se sienta consistente hasta el final ---------- */
.faq-num{ position:relative; display:inline-flex; }
.faq-num::before{
  content:"";
  position:absolute; z-index:-1; inset:-6px -8px -4px -6px;
  background: var(--cream-dark);
  border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%;
  opacity:.8;
}

/* ---------- material: fibra de papel dentro de la única "nota"
   con imagen de la página, para reforzar tactilidad ---------- */
.espera-visual .note::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.9' numOctaves='2' 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.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}

/* ---------- footer: una costura sutil de la misma esquina
   doblada, como remate del sistema visual, no un divisor nuevo ---------- */
.pie{ position:relative; }
.pie::before{
  content:"";
  position:absolute; z-index:1; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--pink-deep), var(--secondary) 45%, var(--green-deep) 100%);
  opacity:.55;
}

/* ============================================================
   REFINAMIENTO v3 — los espacios que aún estaban en blanco.
   No se vuelve a tocar nada del vestíbulo, la partida (encabezado),
   el camino (línea de pasos), la espera, el consultorio (retícula),
   la pausa, el pasillo ni la mascota del cierre: eso ya quedó
   resuelto en v1/v2. Esto llena lo que quedaba plano alrededor:
   la barra de navegación, el menú móvil, el riel, la fila de
   chips, el interior de las puertas y del FAQ, el texto del CTA
   final y las columnas del footer.
   ============================================================ */

/* ---------- NAVBAR — una costura de marca en el borde inferior,
   visible solo cuando la barra ya tiene fondo (al hacer scroll) ---------- */
.nav{ position:fixed; }
.nav.con-fondo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--pink-deep), var(--secondary) 50%, var(--green-deep) 100%);
  opacity:.4;
}

/* ---------- MENÚ MÓVIL — el azul sólido gana un resplandor suave
   y grano, para que no sea un plano perfectamente plano ---------- */
.menu-movil{ overflow:hidden; }
.menu-movil::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(700px 500px at 50% 20%, rgba(255,255,255,.08), transparent 65%);
}
.menu-movil::after{
  content:"";
  position:absolute; inset:0; z-index:0; opacity:.08; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
}
.menu-movil a, .menu-movil .cerrar{ position:relative; z-index:1; }

/* ---------- RIEL — un hilo vertical muy fino conectando los
   puntos del recorrido, para que se lea como un trazo, no como
   una lista de marcadores sueltos ---------- */
.riel{ padding: 4px 0; }
.riel::before{
  content:"";
  position:absolute; left:3.5px; top:0; bottom:0; width:1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index:-1;
}

/* ---------- PARTIDA — un renglón de textura muy discreta detrás
   de la fila de chips, para que no queden flotando sobre blanco puro ---------- */
.partida-chips{ position:relative; padding: 18px 0; }
.partida-chips::before{
  content:"";
  position:absolute; z-index:-1; inset: 0 -4%;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* pequeña marca editorial junto a la frase de cierre de "el camino" */
.camino-nota{ position:relative; padding-left: 1.4em; }
.camino-nota::before{
  content:"—"; position:absolute; left:0; top:0; color:var(--green-deep); opacity:.6;
}

/* ---------- CONSULTORIO — el interior de cada puerta abierta
   gana una guía vertical del mismo color que su filo superior,
   llenando el corredor en blanco donde antes solo había texto ---------- */
.puerta-dentro-interior{ position:relative; }
.puerta-dentro-interior::before{
  content:"";
  position:absolute; left:44px; top:2px; bottom:8px; width:2px;
  background: var(--line);
}
.puerta:nth-child(6n+1) .puerta-dentro-interior::before{ background: var(--pink-deep); opacity:.5; }
.puerta:nth-child(6n+2) .puerta-dentro-interior::before{ background: var(--secondary); opacity:.5; }
.puerta:nth-child(6n+3) .puerta-dentro-interior::before{ background: var(--green-deep); opacity:.5; }
.puerta:nth-child(6n+4) .puerta-dentro-interior::before{ background: var(--beige); opacity:.8; }
.puerta:nth-child(6n+5) .puerta-dentro-interior::before{ background: var(--pink-deep); opacity:.5; }
.puerta:nth-child(6n+6) .puerta-dentro-interior::before{ background: var(--secondary); opacity:.5; }

/* ---------- DESPEDIDA — el mismo tipo de guía vertical en las
   respuestas del FAQ, para que el gutural izquierdo deje de
   sentirse vacío y conecte visualmente con el consultorio ---------- */
.faq-respuesta{ position:relative; }
.faq-respuesta p{ position:relative; }
.faq-respuesta::before{
  content:"";
  position:absolute; left:calc(2ch + 2px); top:0; bottom:22px; width:2px;
  background: var(--light-blue); opacity:.4;
}

/* el bloque de texto del CTA final gana una pequeña costura
   vertical junto al título, ligando este cierre con el resto
   del sistema (la misma idea usada en el FAQ y las puertas) ---------- */
.cta-final-wrap > div:first-child{ position:relative; padding-left: 22px; }
.cta-final-wrap > div:first-child::before{
  content:"";
  position:absolute; left:0; top:.15em; bottom:.6em; width:2px;
  background: rgba(255,255,255,.35);
}
@media (max-width:860px){ .cta-final-wrap > div:first-child{ padding-left:0; } .cta-final-wrap > div:first-child::before{ display:none; } }

/* ---------- FOOTER — cada columna gana un filo de color propio
   junto a su título, llenando el espacio en blanco que quedaba
   entre el nombre de la columna y su lista ---------- */
.pie-grid > div:nth-child(2) h4{ border-left: 2px solid var(--pink-deep); padding-left:10px; opacity:1; }
.pie-grid > div:nth-child(3) h4{ border-left: 2px solid var(--secondary); padding-left:10px; }
.pie-grid > div:nth-child(4) h4{ border-left: 2px solid var(--green-deep); padding-left:10px; }