/* ==========================================================================
   DC Fisioterapia · «Diseño 2026» (v3) en todo el sitio público (2.4.0)
   El lenguaje de la portada v3 llevado a las demás páginas: cabeceras en la noche de marca con el isotipo que se
   dibuja, el hilo dorado que recorre la página y se detiene en cada sección (escritorio), revelados suaves,
   tarjetas con respuesta al pasar el cursor, llamado final con el logo donde aterriza el punto, ruta de Diana en
   las páginas de barrio y transiciones suaves entre páginas. Todo queda quieto con «reducir movimiento» o con
   «Pausar movimiento» (se recuerda en el navegador). Se carga solo con el ajuste `sitio_v3` (body.sitio-v3).
   ========================================================================== */

.sitio-v3 {
  --s3-noche: #0B1A33;
  --s3-aqua: #8FDCD9;
  --s3-claro: #D7E2EC;
  --s3-tenue: #AFC2D4;
  --s3-teal: #1A9A9E;
  --s3-curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Transición suave entre páginas (navegadores que la soportan; nada en los demás) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sitio-v3 .cabecera { view-transition-name: s3-cabecera; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }
}

/* ---------- Cabecera de cada página: la noche de marca, como el hero de la portada ---------- */
.sitio-v3 .cabecera-pagina {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(60rem 26rem at 88% 18%, rgba(30, 111, 168, .38) 0%, rgba(30, 111, 168, 0) 70%),
    radial-gradient(40rem 22rem at 6% 110%, rgba(18, 122, 125, .45) 0%, rgba(18, 122, 125, 0) 70%),
    linear-gradient(160deg, var(--s3-noche) 0%, var(--azul-marino) 58%, #10365A 100%);
  padding: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem) 0 clamp(2.5rem, 1.6rem + 3vw, 4rem);
}
.sitio-v3 .cabecera-pagina .curva-sup-izq { opacity: .55; }
.sitio-v3 .cabecera-pagina > .contenedor { position: relative; z-index: 1; }
.sitio-v3 .cabecera-pagina h1, .sitio-v3 .cabecera-pagina h2, .sitio-v3 .cabecera-pagina h3 { color: #fff; }
.sitio-v3 .cabecera-pagina h1 .acento { color: var(--oro); }
.sitio-v3 .cabecera-pagina .eyebrow { color: var(--s3-aqua); }
.sitio-v3 .cabecera-pagina .bajada, .sitio-v3 .cabecera-pagina p { color: var(--s3-claro); }
.sitio-v3 .cabecera-pagina .miga, .sitio-v3 .cabecera-pagina .miga li + li::before { color: var(--s3-tenue); }
.sitio-v3 .cabecera-pagina .miga a { color: var(--s3-claro); }
.sitio-v3 .cabecera-pagina .miga a:hover { color: #fff; }
.sitio-v3 .cabecera-pagina a:not(.btn) { color: #fff; }
.sitio-v3 .cabecera-pagina svg { color: var(--s3-aqua); }
.sitio-v3 .cabecera-pagina .btn-secundario, .sitio-v3 .cabecera-pagina .btn-texto { --b-fondo: transparent; --b-texto: #fff; --b-borde: rgba(255, 255, 255, .7); }
.sitio-v3 .cabecera-pagina .btn-secundario:hover, .sitio-v3 .cabecera-pagina .btn-texto:hover { --b-fondo: #fff; --b-texto: var(--verde); --b-borde: #fff; }
.sitio-v3 .cabecera-pagina .credenciales strong { color: #fff; }
.sitio-v3 .cabecera-pagina .credenciales span, .sitio-v3 .cabecera-pagina .credenciales li { color: var(--s3-claro); }
.sitio-v3 .cabecera-pagina .referencia-barrio { color: var(--s3-claro); }
.sitio-v3 .cabecera-pagina .tarjeta, .sitio-v3 .cabecera-pagina form, .sitio-v3 .cabecera-pagina .alerta { color: var(--azul-marino); }
.sitio-v3 .cabecera-pagina .tarjeta p, .sitio-v3 .cabecera-pagina form p { color: var(--gris-texto); }
.sitio-v3 .cabecera-pagina .tarjeta h2, .sitio-v3 .cabecera-pagina .tarjeta h3 { color: var(--azul-marino); }
.sitio-v3 .cabecera-pagina .tarjeta a:not(.btn) { color: var(--verde); }
/* foto en la cabecera (Sobre Diana): marco dorado que se asienta, como el marco del video de la portada */
.sitio-v3 .cabecera-pagina .foto { outline: 2px solid rgba(201, 160, 74, .85); outline-offset: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }

/* isotipo que se dibuja a la derecha de la cabecera (lo pone sitio3.js; solo en escritorio y sin columnas propias) */
.s3-isotipo { overflow: visible; }
.s3-isotipo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s3-isotipo .aro { stroke: #3DB5B8; stroke-width: 4.01; }
.s3-isotipo .arco { stroke: #4C9BD6; stroke-width: 4.68; }
.s3-isotipo .verde { stroke: #3DB5B8; stroke-width: 6; }
.s3-isotipo .marino { stroke: #fff; stroke-width: 6; }
.s3-isotipo .cabeza { fill: #fff; }
.s3-isotipo .punto { fill: var(--oro); }
.s3-isotipo--cabecera {
  position: absolute; z-index: 0; top: 50%; translate: 0 -50%; pointer-events: none; opacity: .95;
  right: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter)));
  width: clamp(8.5rem, 3rem + 11vw, 15.5rem);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25));
}
@media (max-width: 63.99em) { .s3-isotipo--cabecera { display: none; } }
/* dibujo progresivo (solo con JS y movimiento permitido) */
.s3-por-dibujar path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.s3-por-dibujar .cabeza, .s3-por-dibujar .punto { opacity: 0; }
.s3-dibujar path { animation: s3-trazo 1.15s cubic-bezier(.65, 0, .35, 1) forwards; }
.s3-dibujar path:nth-of-type(2) { animation-delay: .14s; }
.s3-dibujar path:nth-of-type(3) { animation-delay: .52s; }
.s3-dibujar path:nth-of-type(4) { animation-delay: .44s; }
.s3-dibujar path:nth-of-type(5) { animation-delay: .3s; }
.s3-dibujar path:nth-of-type(6) { animation-delay: .38s; }
.s3-dibujar path:nth-of-type(7) { animation-delay: .5s; }
.s3-dibujar .cabeza { animation: s3-aparecer .45s ease .72s forwards; }
.s3-dibujar .punto { animation: s3-aparecer .45s ease 1.05s forwards, s3-latido 1.6s ease-in-out 1.6s 2; transform-box: fill-box; transform-origin: center; }
@keyframes s3-trazo { to { stroke-dashoffset: 0; } }
@keyframes s3-aparecer { to { opacity: 1; } }
@keyframes s3-latido { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }

/* ---------- Hilo dorado (escritorio): baja por el margen y se detiene en cada sección ---------- */
.sitio-v3 #contenido { position: relative; }
.sitio-v3.s3-con-hilo #contenido > section { position: relative; }
.sitio-v3.s3-con-hilo #contenido > section > .contenedor { position: relative; z-index: 2; }
.s3-hilo { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.s3-hilo__base { fill: none; stroke: rgba(61, 181, 184, .55); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.s3-hilo__avance { fill: none; stroke: var(--s3-teal); stroke-width: 3; stroke-linecap: round; }
.s3-estacion { fill: #fff; stroke: var(--s3-teal); stroke-width: 2; transition: fill .35s, stroke .35s; }
.s3-estacion.s3-alcanzada { fill: var(--oro); stroke: #fff; }
.s3-onda { fill: none; stroke: var(--oro); stroke-width: 2; animation: s3-onda 1.1s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes s3-onda { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 3.2; } }
.s3-viajero { fill: var(--oro); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 2px 6px rgba(11, 26, 51, .35)); transition: opacity .3s; }
.s3-viajero.s3-oculto { opacity: 0; }

/* ---------- Revelados al hacer scroll (solo los que están más abajo al cargar; sin JS todo se ve) ---------- */
.sitio-v3 .s3-revelar { opacity: 0; translate: 0 22px; transition: opacity .7s var(--s3-curva) var(--s3-retraso, 0s), translate .8s var(--s3-curva) var(--s3-retraso, 0s); }
.sitio-v3 .s3-revelar.s3-visible, .sitio-v3 .s3-revelar:focus-within { opacity: 1; translate: none; }

/* ---------- Respuesta al cursor ---------- */
.sitio-v3 .tarjeta { transition: transform .28s var(--s3-curva), box-shadow .28s var(--s3-curva), border-color .28s; }
.sitio-v3 .tarjeta:not(form):not(:has(form, input, select, textarea, button)):has(a[href]):hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: rgba(18, 122, 125, .28); }
.sitio-v3 .ficha-servicio > svg:first-child { transition: transform .35s var(--s3-curva); }
.sitio-v3 .ficha-servicio:hover > svg:first-child { transform: scale(1.06) rotate(-3deg); }
.sitio-v3 .enlace-flecha svg { transition: translate .25s var(--s3-curva); }
.sitio-v3 .tarjeta:hover .enlace-flecha svg, .sitio-v3 .enlace-flecha:hover svg { translate: 4px 0; }
.sitio-v3 .chip-barrio { transition: background .2s, color .2s, border-color .2s, transform .2s var(--s3-curva); }
.sitio-v3 .chip-barrio:hover { background: var(--verde); border-color: var(--verde); color: #fff; transform: translateY(-2px); }
.sitio-v3 .chip-barrio:hover svg { color: #fff; }
.sitio-v3 .titulo-seccion::after { transform-origin: left center; transition: transform .8s var(--s3-curva) .15s; }
.sitio-v3 .s3-revelar .titulo-seccion::after, .sitio-v3 .titulo-seccion.s3-revelar::after { transform: scaleX(0); }
.sitio-v3 .s3-visible .titulo-seccion::after, .sitio-v3 .titulo-seccion.s3-visible::after { transform: none; }

/* pasos: el número se enciende con un anillo dorado al aparecer */
.sitio-v3 .pasos li { transition: transform .28s var(--s3-curva), box-shadow .28s; }
.sitio-v3 .pasos li.s3-visible::before { animation: s3-anillo 1.3s ease-out .25s 1; }
@keyframes s3-anillo { from { box-shadow: 0 0 0 0 rgba(201, 160, 74, .65); } to { box-shadow: 0 0 0 14px rgba(201, 160, 74, 0); } }

/* preguntas: abren y cierran con suavidad donde el navegador lo permite */
.sitio-v3 .faq { interpolate-size: allow-keywords; transition: border-color .25s, box-shadow .25s; }
.sitio-v3 .faq[open] { border-color: rgba(18, 122, 125, .35); box-shadow: var(--sombra); }
.sitio-v3 .faq::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.sitio-v3 .faq[open]::details-content { block-size: auto; }

/* ---------- Llamado final: la noche de marca con el logo (ahí aterriza el punto dorado) ---------- */
.sitio-v3 .s3-cta {
  position: relative; text-align: left; color: #fff; overflow: hidden;
  background:
    radial-gradient(50rem 24rem at 12% 20%, rgba(61, 181, 184, .22) 0%, rgba(61, 181, 184, 0) 70%),
    linear-gradient(135deg, var(--azul-marino) 0%, #0F3A5E 55%, var(--verde-profundo) 100%);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(4rem, 3rem + 4vw, 6.5rem);
}
.s3-cta__caja { display: flex; align-items: center; gap: clamp(1.75rem, 1rem + 3vw, 4.5rem); }
.s3-cta__logo { width: clamp(7rem, 4.5rem + 8vw, 11.5rem); height: auto; flex: none; }
.sitio-v3 .s3-cta h2 { color: #fff; font-size: var(--t-h2); margin: .2rem 0 .75rem; }
.sitio-v3 .s3-cta .eyebrow { color: var(--s3-aqua); }
.sitio-v3 .s3-cta .cta-final-texto { color: var(--s3-claro); max-width: 54ch; margin: 0 0 1.5rem; }
.sitio-v3 .s3-cta .grupo-botones { justify-content: flex-start; }
.sitio-v3 .s3-cta .firma { color: #9fd3d1; }
.sitio-v3 .s3-cta :focus-visible { outline-color: var(--s3-aqua); }
.s3-js .s3-cta:not(.s3-llego) .s3-cta__logo.s3-por-dibujar { opacity: .9; }
.s3-cta.s3-llego .s3-cta__logo .punto { animation: s3-latido 1.4s ease-in-out 0s 2; transform-box: fill-box; transform-origin: center; }
@media (max-width: 47.99em) {
  .s3-cta__caja { flex-direction: column; text-align: center; }
  .sitio-v3 .s3-cta .grupo-botones { justify-content: center; }
  .sitio-v3 .s3-cta .cta-final-texto { margin-inline: auto; }
}

/* ---------- Páginas de barrio: Diana sale y llega a tu barrio ---------- */
.s3-ruta { display: none; margin: 0; }
@media (min-width: 64em) {
  .s3-ruta {
    display: block; position: absolute; z-index: 0; top: 50%; translate: 0 -46%; pointer-events: none;
    right: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter)));
    width: clamp(17rem, 9rem + 14vw, 23rem);
  }
  .sitio-v3 .cabecera-pagina:has(.s3-ruta) h1, .sitio-v3 .cabecera-pagina:has(.s3-ruta) .bajada { max-width: min(60ch, calc(100% - 25rem)); }
}
.s3-ruta svg { width: 100%; height: auto; overflow: visible; }
.s3-ruta .calles path { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 9; stroke-linecap: round; }
.s3-ruta .calles path.angosta { stroke-width: 4; stroke: rgba(255, 255, 255, .07); }
.s3-ruta .camino-base { fill: none; stroke: rgba(143, 220, 217, .35); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.s3-ruta .camino { fill: none; stroke: var(--s3-aqua); stroke-width: 3.5; stroke-linecap: round; }
.s3-ruta .salida circle { fill: var(--s3-noche); stroke: var(--s3-aqua); stroke-width: 3; }
.s3-ruta .casa { fill: #fff; }
.s3-ruta .casa-techo { fill: var(--oro); }
.s3-ruta .etq { font-family: var(--f-texto); font-size: 13px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(11, 26, 51, .85); stroke-width: 4px; stroke-linejoin: round; letter-spacing: .02em; }
.s3-ruta .etq-destino { font-size: 15px; fill: var(--oro); }
.s3-ruta .aro-avatar { fill: none; stroke: var(--oro); stroke-width: 3; }
.s3-ruta .avatar-movil { opacity: 0; }
/* con movimiento: el camino se dibuja y Diana lo recorre (sitio3.js); sin movimiento queda llegando, como al final */
.s3-js .s3-ruta.s3-animar .camino { stroke-dasharray: 1; stroke-dashoffset: 1; }
.s3-js .s3-ruta.s3-animar.s3-en-vista .camino { animation: s3-trazo 2.6s cubic-bezier(.45, 0, .25, 1) forwards; }
.s3-js .s3-ruta.s3-animar .avatar-fijo { opacity: 0; }
.s3-js .s3-ruta.s3-animar.s3-en-vista .avatar-movil { opacity: 1; }

/* ---------- Celular: sin hilo; revelados más cortos ---------- */
@media (max-width: 56.24em) {
  .sitio-v3 .s3-revelar { translate: 0 14px; }
  .sitio-v3 .cabecera-pagina { padding-top: clamp(1.75rem, 1rem + 4vw, 2.5rem); }
}

/* ---------- Movimiento reducido o pausado: todo en su estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .sitio-v3 .s3-revelar { opacity: 1; translate: none; transition: none; }
  .s3-dibujar path, .s3-dibujar .cabeza, .s3-dibujar .punto, .sitio-v3 .pasos li.s3-visible::before, .s3-onda { animation: none !important; }
  .s3-por-dibujar path { stroke-dashoffset: 0; }
  .s3-por-dibujar .cabeza, .s3-por-dibujar .punto { opacity: 1; }
  .sitio-v3 .tarjeta, .sitio-v3 .chip-barrio, .sitio-v3 .faq::details-content { transition: none; }
}
html[data-movimiento="off"] .sitio-v3 .s3-revelar { opacity: 1; translate: none; transition: none; }

@media print {
  .s3-hilo, .s3-isotipo--cabecera, .s3-ruta { display: none !important; }
  /* lo que no alcanzó a revelarse o dibujarse sale completo en el papel */
  .sitio-v3 .s3-revelar { opacity: 1 !important; translate: none !important; }
  .s3-por-dibujar path { stroke-dashoffset: 0 !important; }
  .s3-por-dibujar .cabeza, .s3-por-dibujar .punto { opacity: 1 !important; }
  /* textos claros de la noche de marca: en negro sobre el papel */
  .sitio-v3 .cabecera-pagina, .sitio-v3 .s3-cta { background: none !important; color: #000 !important; }
  .sitio-v3 .cabecera-pagina *, .sitio-v3 .s3-cta * { color: #000 !important; }
  .sitio-v3 .s3-cta .s3-isotipo .marino { stroke: #0B1A33 !important; }
  .sitio-v3 .s3-cta .s3-isotipo .cabeza { fill: #0B1A33 !important; }
}