/* ==========================================================================
   DC Fisioterapia · Portada v3 "El primer paso" (2.3.8)
   El isotipo es el protagonista: su círculo abre la escena, su figura se posa sobre el paciente del video,
   su arco azul mide como un goniómetro y su punto dorado recorre la página por un hilo hasta el llamado final.
   Movimiento solo con transform/opacity/stroke-dashoffset; con prefers-reduced-motion o "Pausar movimiento"
   todo queda quieto en su estado final. Contraste AA: el texto del hero va sobre un velo azul marino >= 80 %.
   ========================================================================== */

.pagina-inicio-v3 { --p3-noche: #0B1A33; --p3-marino: var(--azul-marino); --p3-aqua: #8FDCD9; --p3-alto-cab: 72px; }
.p3 { position: relative; background: var(--blanco); }
.p3 > section { position: relative; }
.p3 > section > .contenedor { position: relative; z-index: 2; }
.p3-antetitulo { font-family: var(--f-texto); font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin: 0 0 .6rem; }
.p3-encabezado { max-width: 44rem; margin: 0 0 2.25rem; position: relative; }
.p3-encabezado > p:last-child { color: var(--gris-texto); font-size: var(--t-grande); margin: 0; }
.p3-encabezado--fila { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.p3-pie-seccion { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.p3-nota { font-size: var(--t-peq); color: var(--gris-texto); border-left: 3px solid var(--oro); padding: .15rem 0 .15rem .85rem; margin: 1.5rem 0 0; }

/* ---------- Hilo y viajero (el "camioncito"): JS calcula el trazado con la posición real de cada parada ---------- */
.p3-hilo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.p3-hilo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p3-hilo__base { stroke: var(--verde); stroke-width: 2; stroke-dasharray: 2 9; opacity: .32; }
.p3-hilo__avance { stroke: var(--verde); stroke-width: 3; }
.p3-hilo__estela { stroke: var(--oro); stroke-width: 4; opacity: .95; stroke-dasharray: 0 99999; }
.p3-hilo__estela--lejos { stroke-width: 3; opacity: .45; }
.p3-viajero {
  position: absolute; left: 0; top: 0; z-index: 6; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(19, 41, 75, .85), 0 6px 18px rgba(19, 41, 75, .35);
  pointer-events: none; opacity: 0; transition: opacity .3s; will-change: translate;
}
.p3-viajero::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--oro); opacity: 0; }
.p3-js .p3-viajero.activo { opacity: 1; }
.p3-viajero { transition: opacity .3s, scale .35s cubic-bezier(.3, 1.5, .5, 1); }
.p3-viajero.en-parada { scale: 1.3; }
/* celular: el riel va en el margen de 16 px, así que el viajero y las estaciones son más pequeños */
@media (max-width: 56.24em) {
  .p3-viajero { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(19, 41, 75, .85), 0 3px 10px rgba(19, 41, 75, .3); }
  .p3-viajero::after { inset: -6px; }
  .p3-viajero.en-parada { scale: 1.15; }
}
.p3-js .p3-viajero.en-parada::after { animation: p3-onda 1.2s ease-out 2; }
.p3-js .p3-viajero.en-hueco { opacity: 0; }
/* en el mapa el viajero es Diana (foto real) con aro dorado */
.p3-viajero.con-foto { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: #fff url("/assets/img/marca/diana-avatar.webp") center / cover no-repeat; box-shadow: 0 0 0 3px var(--oro), 0 8px 22px rgba(19, 41, 75, .38); }
.p3-viajero.con-foto::after { border-color: var(--oro); }
@keyframes p3-onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.p3-nodo { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--verde); flex: none; transition: background .3s, border-color .3s, transform .3s; }
.p3-nodo--margen { position: absolute; left: calc(10px - var(--gutter)); top: .35rem; opacity: 0; }
/* estaciones del riel (títulos de sección): visibles cuando el JS las alinea en el riel */
.p3-js .p3-nodo--margen, .p3-js .p3-nodo--titulo { opacity: 1; margin-left: -7px; }
@media (max-width: 56.24em) { .p3-js .p3-nodo--margen, .p3-js .p3-nodo--titulo { width: 10px; height: 10px; border-width: 2px; margin-left: -5px; top: -1.05rem; } }
.p3-resenas .contenedor, .p3-faq .contenedor, .p3-blog .contenedor, .p3-mapa .contenedor { position: relative; }
.p3-ancla { position: relative; height: 0; }
.p3-nodo--der { position: absolute; right: calc(12px - var(--gutter)); top: -.4rem; opacity: 0; }
.p3-nodo--izq { position: absolute; left: calc(10px - var(--gutter)); top: 0; opacity: 0; }
.p3-ancla--abajo { margin-top: 1.5rem; }
.p3-ancla--fin { margin-top: .75rem; }
.p3-ancla-contenedor { height: 0; }
/* en el celular el hilo llega al video de Diana por el riel derecho: el ancla izquierda no hace falta */
@media (max-width: 56.24em) { .p3-ancla-contenedor { display: none; } }
.p3-nodo.p3-alcanzada, .p3-paso__marca.p3-alcanzada { background: var(--oro); border-color: var(--azul-marino); }
.p3-paso__marca.p3-alcanzada { color: var(--azul-marino); }

/* ---------- HERO ---------- */
.p3-hero { position: relative; z-index: 3; background: var(--p3-noche); color: #fff; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.p3-hero__escena { position: relative; width: 100%; aspect-ratio: 9 / 10; max-height: 62svh; overflow: hidden; background: #1a2b45; }
.p3-hero--sin-medios .p3-hero__escena { background: radial-gradient(circle at 60% 45%, #1d3a66 0%, var(--p3-noche) 70%); }
.p3-hero__fija, .p3-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--p3-pos, 50% 0%); }
.p3-hero__video { opacity: 0; transition: opacity .7s ease; }
.p3-hero.con-video .p3-hero__video { opacity: 1; }
.p3-hero__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 26, 51, 0) 62%, rgba(11, 26, 51, .55) 86%, var(--p3-noche) 100%); }
/* max-width: none: el reset global (img, svg, video { max-width: 100% }) achataba la figura cuando el video desborda a lo ancho */
.p3-figura { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; overflow: visible; pointer-events: none; opacity: 0; }
.p3-js .p3-figura.lista { opacity: 1; }
.p3-figura line, .p3-figura path, .p3-figura circle { vector-effect: none; }
.p3-figura__trazo { fill: none; stroke-linecap: round; transition: stroke .6s ease; }
.p3-figura__cabeza { transition: stroke .6s ease; }
.p3-figura__trazo.verde { stroke: #1A9A9E; }
.p3-figura__trazo.marino { stroke: var(--azul-marino); }
.p3-figura__aro { fill: none; stroke: #1A9A9E; }
.p3-figura__arco-logo, .p3-figura__arco { fill: none; stroke: #2F86C6; stroke-linecap: round; }
.p3-figura__cabeza { fill: var(--azul-marino); stroke: var(--azul-marino); }
.p3-figura__punto { fill: var(--oro); stroke: #fff; }
/* sobre el video, los trazos azul marino llevan un halo claro para leerse sobre ropa oscura */
.p3-figura .marino, .p3-figura__cabeza { paint-order: stroke; }
.p3-figura.siguiendo .p3-figura__trazo.marino { stroke: #E9F3FB; }
.p3-figura.siguiendo .p3-figura__cabeza { fill: none; stroke: #E9F3FB; opacity: 0; transition: opacity .7s .2s, stroke .6s ease; }
/* el punto dorado del pie se va con la cabeza (en escritorio sale volando hacia «Así funciona»; en el celular no hace falta) */
.p3-figura.siguiendo .p3-figura__punto { opacity: 0; transition: opacity .6s .25s; }
.p3-figura__grados { font-family: var(--f-titulo); font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(11, 26, 51, .82); stroke-linejoin: round; opacity: 0; transition: opacity .35s; font-variant-numeric: tabular-nums; }
.p3-figura.siguiendo { filter: drop-shadow(0 0 3px rgba(11, 26, 51, .55)); }

.p3-dato {
  position: absolute; left: 0; top: 0; z-index: 3; margin: 0; display: grid; gap: .2rem; padding: .6rem .85rem .6rem; border-radius: 14px;
  background: rgba(11, 26, 51, .74); color: #fff; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 10px 30px rgba(11, 26, 51, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--f-texto); line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; pointer-events: none;
}
.p3-js .p3-dato.visible { opacity: 1; transform: none; }
.p3-dato__etq { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p3-aqua); }
.p3-dato__fila { display: flex; align-items: center; gap: .65rem; }
.p3-dato__max { font-family: var(--f-titulo); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p3-dato__nota { font-size: .8125rem; color: rgba(255, 255, 255, .82); }
/* gráfica en vivo del ángulo (últimos ~4 s): se ve cuando el video corre */
.p3-dato__grafica { display: block; width: 7rem; height: 24px; overflow: visible; opacity: .35; transition: opacity .4s; }
.p3-dato__grafica.con-datos { opacity: 1; }
.p3-dato__grafica polyline { fill: none; stroke: var(--p3-aqua); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p3-dato__grafica circle { fill: var(--oro); }

.p3-hero__contenido { position: relative; z-index: 2; padding-top: 1.25rem; padding-bottom: 1rem; }
.p3-hero .p3-antetitulo { color: var(--p3-aqua); }
.p3-hero h1 { color: #fff; font-size: clamp(2.15rem, 1.4rem + 3vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: .9rem; }
.p3-acento { font-family: var(--f-acento); font-weight: 400; color: var(--oro); letter-spacing: 0; white-space: nowrap; font-size: 1.08em; }
.p3-bajada { font-size: var(--t-grande); color: rgba(255, 255, 255, .9); max-width: 36rem; margin-bottom: 1.4rem; }
.p3-btn-principal { --b-fondo: var(--verde); --b-borde: var(--verde); box-shadow: 0 8px 24px rgba(18, 122, 125, .35); }
.p3-btn-wa { --b-fondo: #fff; --b-texto: var(--azul-marino); --b-borde: #fff; }
.p3-btn-wa:hover { --b-fondo: #EAF6F0; --b-borde: #EAF6F0; --b-texto: var(--azul-marino); }
.p3-btn-wa svg { width: 22px; height: 22px; color: #1EA952; flex: none; }
.p3-cotizar { margin: 1.1rem 0 0; font-size: var(--t-peq); }
.p3-cotizar a { color: rgba(255, 255, 255, .88); }
.p3-cotizar a:hover { color: #fff; }
.p3-sellos { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.p3-sellos li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); font-size: .9rem; color: rgba(255, 255, 255, .92); }
.p3-sellos svg { width: 17px; height: 17px; color: var(--p3-aqua); flex: none; }
.p3-hero__pie { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1.5rem; padding: .25rem var(--gutter) 1.25rem; width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; }
.p3-pausa {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  background: rgba(11, 26, 51, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); font: 600 .875rem/1 var(--f-texto);
  backdrop-filter: blur(6px);
}
.p3-pausa:hover { background: rgba(11, 26, 51, .8); }
.p3-pausa:focus-visible, .p3-bajar:focus-visible { outline: 3px solid var(--p3-aqua); outline-offset: 3px; }
.p3-pausa__icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.p3-pausa__icono .seguir { display: none; fill: currentColor; stroke-width: 1.5; }
.p3-pausa.pausado .pausa { display: none; }
.p3-pausa.pausado .seguir { display: inline; }
.p3-bajar { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; text-decoration: none; min-height: 44px; }
.p3-bajar:hover { color: var(--p3-aqua); }
.p3-bajar .p3-nodo { border-color: var(--p3-aqua); background: var(--p3-noche); }
.p3-aviso-previa { position: relative; z-index: 4; margin: 0; padding: .55rem var(--gutter); background: var(--aviso-suave); color: var(--azul-marino); font-size: var(--t-peq); text-align: center; }

/* Escritorio y tabletas horizontales: el video ocupa todo el fondo y el texto va a la izquierda sobre el velo */
@media (min-width: 56.25em) and (min-aspect-ratio: 11/10) {
  .p3-hero { display: block; height: calc(100svh - var(--p3-alto-cab)); min-height: 560px; max-height: 1000px; }
  /* la escena arranca en --p3-escena-izq; el JS la ajusta para que el paciente quede junto al texto y Diana dentro de la pantalla */
  .p3-hero__escena {
    position: absolute; inset: 0 0 0 var(--p3-escena-izq, 12%); width: auto; aspect-ratio: auto; max-height: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px); mask-image: linear-gradient(90deg, transparent 0, #000 160px);
  }
  .p3-hero__fija, .p3-hero__video { object-position: var(--p3-pos, 0% 25%); }
  /* velo: oscuro bajo el texto (contraste AA) y se abre justo donde termina el texto (--p3-texto-der lo pone el JS) */
  .p3-hero__velo {
    background:
      linear-gradient(90deg, rgba(11, 26, 51, .94) 0, rgba(11, 26, 51, .9) calc(var(--p3-texto-der, 46%) - 70px), rgba(11, 26, 51, .66) var(--p3-texto-der, 46%), rgba(11, 26, 51, .14) calc(var(--p3-texto-der, 46%) + 70px), rgba(11, 26, 51, 0) calc(var(--p3-texto-der, 46%) + 130px)),
      linear-gradient(0deg, rgba(11, 26, 51, .6) 0%, rgba(11, 26, 51, 0) 22%);
  }
  .p3-hero__contenido { height: 100%; display: flex; align-items: center; padding-top: 0; padding-bottom: 4.5rem; }
  .p3-hero__texto { max-width: min(34rem, 40vw); }
  .p3-hero__pie { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 1.4rem; }
}

/* ---------- Recorrido (5 pasos en zigzag; el hilo pasa por cada marca) ---------- */
.p3-recorrido { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.p3-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; max-width: 52rem; }
.p3-paso { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: center; }
.p3-paso__marca {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--verde);
  font-family: var(--f-titulo); font-weight: 700; color: var(--verde); position: relative; z-index: 2; transition: background .3s, border-color .3s, color .3s;
}
.p3-paso__tarjeta { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: center; background: #fff; border: var(--borde); border-radius: var(--radio); padding: 1rem 1.15rem; box-shadow: var(--sombra); }
.p3-paso__tarjeta h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.p3-paso__tarjeta p { margin: 0; color: var(--gris-texto); }
.p3-figurita { width: 72px; height: 72px; }
.p3-figurita polyline { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.p3-figurita .verde { stroke: var(--verde); }
.p3-figurita .marino { stroke: var(--azul-marino); }
.p3-figurita .cabeza { fill: var(--azul-marino); }
.p3-figurita .punto { fill: var(--oro); }
.p3-figurita .silla { fill: none; stroke: #9FB2B8; stroke-width: 2.2; stroke-linecap: round; }
.p3-figurita .chispa { fill: none; stroke: var(--oro); stroke-width: 2; stroke-linecap: round; }
.p3-figurita .hoja { fill: #fff; stroke: var(--azul); stroke-width: 2; }
.p3-figurita .hoja-lineas { fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; }
.p3-figurita .banda { fill: none; stroke: #1A9A9E; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 3.2; }
@media (min-width: 56.25em) {
  .p3-pasos { gap: 1.4rem; margin-left: 2%; }
  .p3-paso { grid-template-columns: 52px minmax(0, 34rem); }
  .p3-paso--2, .p3-paso--4 { margin-left: 14%; }
  .p3-paso--3 { margin-left: 28%; }
  .p3-paso__marca { width: 48px; height: 48px; font-size: 1.15rem; }
  .p3-figurita { width: 84px; height: 84px; }
  .p3-paso__tarjeta { grid-template-columns: 84px 1fr; padding: 1.15rem 1.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .p3-js:not([data-movimiento="off"]) .p3-paso__tarjeta { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .p3-js:not([data-movimiento="off"]) .p3-paso.visible .p3-paso__tarjeta { opacity: 1; transform: none; }
}

/* ---------- Medición (goniómetro que termina en el logo) ---------- */
.p3-medicion { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; background: #F1F7F7; }
.p3-medicion__rejilla { display: grid; gap: 2rem; align-items: center; }
.p3-gonio { position: relative; margin: 0 auto; width: min(100%, 25rem); text-align: center; }
.p3-gonio__svg { width: 100%; height: auto; overflow: visible; }
.p3-gonio__svg line { stroke-linecap: round; }
.p3-gonio__svg .verde { stroke: var(--verde); stroke-width: 5.6; }
.p3-gonio__svg .marino { stroke: var(--azul-marino); stroke-width: 5.6; }
.p3-gonio__svg .cabeza { fill: var(--azul-marino); }
.p3-gonio__svg .punto { fill: var(--oro); }
.p3-gonio__aro { fill: none; stroke: var(--verde); stroke-width: 4; opacity: .18; transition: opacity .6s; }
.p3-gonio__arco-logo { fill: none; stroke: var(--azul); stroke-width: 4.68; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.p3-gonio.coincide .p3-gonio__aro { opacity: 1; }
.p3-gonio.coincide .p3-gonio__arco-logo { opacity: 1; }
.p3-gonio__escala .mayor { stroke: var(--azul-marino); stroke-width: 1.1; opacity: .55; }
.p3-gonio__escala .menor { stroke: var(--azul-marino); stroke-width: .7; opacity: .35; }
.p3-gonio__numeros text { font-family: var(--f-texto); font-weight: 700; font-size: 4.2px; fill: var(--azul-marino); opacity: .62; }
.p3-gonio.coincide .p3-gonio__arco-logo { animation: p3-destello 1.2s ease-out 1; }
@keyframes p3-destello { 0% { stroke: var(--oro); stroke-width: 7.5; } 100% { stroke: var(--azul); stroke-width: 4.68; } }
.p3-gonio__barrido { fill: rgba(30, 111, 168, .14); stroke: var(--azul); stroke-width: 1.4; }
.p3-gonio__pivote { fill: #fff; stroke: var(--azul-marino); stroke-width: 1; }
.p3-gonio figcaption { display: grid; justify-items: center; gap: .1rem; margin-top: .5rem; }
.p3-gonio__valor { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; color: var(--azul-marino); font-variant-numeric: tabular-nums; }
.p3-gonio__etq { font-size: var(--t-peq); color: var(--gris-texto); }
.p3-nodo--gonio { position: absolute; left: 50.4%; top: 37.2%; margin: -7px 0 0 -7px; opacity: 0; }
.p3-medidas { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .65rem; }
.p3-medidas li { display: flex; gap: .75rem; align-items: flex-start; }
.p3-medidas svg { width: 26px; height: 26px; color: var(--verde); flex: none; margin-top: .05rem; }
@media (min-width: 56.25em) { .p3-medicion__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }

/* ---------- Servicios ---------- */
.p3-servicios { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.p3-servicios .p3-encabezado { padding-left: 0; }
.p3-nodo--titulo { position: absolute; left: 0; top: .3rem; opacity: 0; }
.p3-servicios__rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.p3-servicio { display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra); border: var(--borde); transition: transform .25s ease, box-shadow .25s ease; }
.p3-servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); color: inherit; }
.p3-servicio:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.p3-servicio picture, .p3-servicio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p3-servicio img { transition: transform .6s ease; }
.p3-servicio:hover img { transform: scale(1.04); }
.p3-servicio__cuerpo { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.p3-servicio__cuerpo h3 { margin: 0; }
.p3-servicio__cuerpo p { margin: 0; color: var(--gris-texto); flex: 1; }
.p3-servicio__enlace { display: inline-flex; align-items: center; gap: .3rem; color: var(--verde); font-weight: 700; margin-top: .4rem; }

/* ---------- Mapa con la ruta (el punto dorado viaja por la calle) ---------- */
.p3-mapa { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; background: #FBF6EE; }
.p3-mapa__lienzo { position: relative; margin: 0 0 1.5rem; border-radius: calc(var(--radio) + 6px); overflow: hidden; background: #F4E9D8; box-shadow: var(--sombra); }
.p3-mapa__lienzo img { width: 100%; height: auto; aspect-ratio: 2688 / 1520; }
.p3-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.p3-mapa__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p3-mapa__base { stroke: #fff; stroke-width: 9; stroke-dasharray: 3 22; opacity: .9; }
.p3-mapa__avance { stroke: var(--verde); stroke-width: 12; opacity: .92; }
.p3-mapa__casa, .p3-mapa__salida, .p3-mapa__eta {
  position: absolute; z-index: 2; padding: .3rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; pointer-events: none;
  background: #fff; color: var(--azul-marino); box-shadow: 0 6px 18px rgba(19, 41, 75, .2);
}
.p3-mapa__salida { left: 69%; top: 2.5%; }
.p3-mapa__casa { left: 3%; top: 60%; background: var(--azul-marino); color: #fff; }
.p3-mapa__eta { left: 0; top: 0; transform: translate(-50%, -150%); background: var(--azul-marino); color: #fff; opacity: 0; transition: opacity .3s; }
.p3-mapa__eta.visible { opacity: 1; }
.p3-barrios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.p3-barrios a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; border: var(--borde); background: #fff; text-decoration: none; color: var(--azul-marino); font-weight: 500; min-height: 40px; }
.p3-barrios a:hover { border-color: var(--verde); color: var(--verde); }
.p3-barrios svg { color: var(--verde); }
@media (max-width: 34em) { .p3-mapa__casa, .p3-mapa__salida, .p3-mapa__eta { font-size: .7rem; padding: .2rem .5rem; } .p3-mapa__salida { left: 62%; } .p3-mapa__casa { top: 56%; } }

/* ---------- Conoce a Diana (video real con subtítulos) ---------- */
.p3-diana { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.p3-diana__rejilla { display: grid; gap: 2.25rem; align-items: center; }
.p3-diana__medio { margin: 0 auto; width: min(100%, 20rem); position: relative; }
@media (max-width: 56.24em) { .p3-diana__medio { margin-bottom: 3rem; } }
.p3-diana__video, .p3-diana__retrato img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 26px; background: #0B1A33; box-shadow: var(--sombra-alta); }
.p3-diana__medio figcaption { text-align: center; font-size: var(--t-peq); color: var(--gris-texto); margin-top: .6rem; }
.p3-diana__play {
  position: absolute; left: 50%; top: calc(50% - 1.1rem); transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem; min-height: 60px; padding: .55rem 1.25rem .55rem .6rem; border-radius: 999px; cursor: pointer;
  background: rgba(11, 26, 51, .8); color: #fff; border: 1px solid rgba(255, 255, 255, .35); font: 700 1rem/1.1 var(--f-texto); white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(11, 26, 51, .35);
}
.p3-diana__play svg { width: 44px; height: 44px; padding: 11px 9px 11px 13px; border-radius: 50%; background: var(--oro); fill: var(--azul-marino); flex: none; }
.p3-diana__play:hover { background: rgba(11, 26, 51, .92); }
.p3-diana__play:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
/* el atributo hidden debe ganarle al display propio (si no, el botón queda encima del video mientras suena) */
.p3-diana__play[hidden], .p3-pausa[hidden] { display: none; }
.p3-rol { color: var(--verde); font-weight: 700; margin-top: -.3rem; }
.p3-datos { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; }
.p3-datos li { display: flex; gap: .7rem; align-items: flex-start; }
.p3-datos svg { width: 24px; height: 24px; color: var(--verde); flex: none; margin-top: .1rem; }
@media (min-width: 56.25em) { .p3-diana__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4.5rem; } }

/* ---------- Reseñas y preguntas ---------- */
.p3-resenas { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.p3-resenas__caja { max-width: 46rem; margin: 0 auto; text-align: center; }
.p3-google { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--gris-texto); margin-bottom: .5rem; }
.p3-faq { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.p3-faq__caja { max-width: 50rem; }
.p3-faq__item { border-bottom: var(--borde); }
.p3-faq__item h3 { margin: 0; font-size: 1.1rem; }
.p3-faq__item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; background: none; border: 0; text-align: left; font: inherit; color: var(--azul-marino); cursor: pointer; min-height: 48px; }
.p3-faq__item button svg { width: 22px; height: 22px; flex: none; color: var(--verde); transition: transform .25s; }
.p3-faq__item button[aria-expanded="true"] svg { transform: rotate(45deg); }
.p3-faq__item button:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.p3-js .p3-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.p3-js .p3-faq__panel > div { overflow: hidden; }
.p3-js .p3-faq__panel:not(.abierto) > div { visibility: hidden; transition: visibility 0s .3s; }
.p3-js .p3-faq__panel.abierto { grid-template-rows: 1fr; }
.p3-faq__panel p { color: var(--gris-texto); margin: 0 0 1.1rem; }
.p3-blog { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; background: #F1F7F7; }

/* ---------- Llamado final: el punto dorado llega al pie del isotipo ---------- */
.p3-cta { background: linear-gradient(135deg, var(--azul-marino) 0%, #0F3A5E 55%, var(--verde-profundo) 100%); color: #fff; padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; overflow: hidden; }
.p3-cta__rejilla { display: grid; gap: 1.75rem; align-items: center; justify-items: start; position: relative; }
.p3-cta h2 { color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.p3-cta p { color: rgba(255, 255, 255, .88); max-width: 36rem; }
.p3-cta :focus-visible { outline-color: var(--p3-aqua); }
.p3-cta__logo { width: clamp(7.5rem, 5rem + 10vw, 12rem); height: auto; overflow: visible; }
.p3-cta__logo path { fill: none; stroke-linecap: round; }
.p3-cta__logo .aro { stroke: #3DB5B8; stroke-width: 4.01; }
.p3-cta__logo .arco { stroke: #4C9BD6; stroke-width: 4.68; }
.p3-cta__logo .verde { stroke: #3DB5B8; stroke-width: 6; }
.p3-cta__logo .marino { stroke: #fff; stroke-width: 6; }
.p3-cta__logo .cabeza { fill: #fff; }
.p3-cta__logo .punto { fill: var(--oro); }
.p3-nodo--final { position: absolute; opacity: 0; left: 0; top: 0; }
@media (min-width: 56.25em) { .p3-cta__rejilla { grid-template-columns: auto minmax(0, 1fr); gap: 3.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .p3-js:not([data-movimiento="off"]) .p3-cta__logo { opacity: .22; transition: opacity .4s; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo { opacity: 1; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .cabeza, .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .punto { opacity: 0; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo path { animation: p3-dibujar 1s cubic-bezier(.2, .7, .2, 1) forwards; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .arco { animation-delay: .2s; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .verde, .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .marino { animation-delay: .45s; animation-duration: .6s; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .cabeza { animation: p3-aparecer .4s .9s forwards; }
  .p3-js:not([data-movimiento="off"]) .p3-cta.completo .p3-cta__logo .punto { transform-box: fill-box; transform-origin: center; animation: p3-aterrizar .55s 1.1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
}
@keyframes p3-dibujar { to { stroke-dashoffset: 0; } }
@keyframes p3-aparecer { to { opacity: 1; } }
@keyframes p3-aterrizar { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 100% { opacity: 1; transform: none; } }

/* ---------- Sin movimiento (preferencia del sistema o botón "Pausar movimiento") ---------- */
@media (prefers-reduced-motion: reduce) {
  .p3-viajero { display: none; }
  .p3-hero__video { display: none; }
}
[data-movimiento="off"] .p3-viajero { display: none; }
[data-movimiento="off"] .p3-dato { transition: none; }

/* ---------- Celular: hilo por tramos, pasos y servicios más compactos ---------- */
@media (max-width: 56.24em) {
  .p3-nodo--margen, .p3-nodo--titulo, .p3-ancla { display: none; }
  .p3-paso__tarjeta { grid-template-columns: 48px 1fr; gap: .75rem; padding: .9rem 1rem; }
  .p3-figurita { width: 48px; height: 48px; }
  .p3-servicios__rejilla { gap: .85rem; }
  .p3-servicio { flex-direction: row; align-items: stretch; }
  .p3-servicio .foto-generica { flex: none; width: 112px; margin: 0; }
  .p3-servicio .foto-generica img, .p3-servicio picture { width: 112px; height: 100%; min-height: 112px; aspect-ratio: auto; object-fit: cover; }
  .p3-servicio__cuerpo { padding: .85rem 1rem; }
  .p3-servicio__cuerpo h3 { font-size: 1.05rem; }
  .p3-viajero.con-foto { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}
.whatsapp-flotante { transition: opacity .3s, visibility .3s, transform .3s; }
.p3-wa-en-hero .whatsapp-flotante { opacity: 0; visibility: hidden; transform: translateY(14px); }

/* Conoce a Diana con foto 8:9 (5-nov-2026): no recortar a 9:16 */
.p3-diana__retrato img { aspect-ratio: 1440 / 1620; object-fit: contain; }
/* 2.5.0 · W5: la foto de presentación (1440×1620) se ve más grande que el video vertical que reemplazó */
.p3-diana__medio.p3-diana__retrato { width: min(100%, 25rem); }