/* ==========================================================================
   PALM ONE — Homepage (nueva versión, basada en exploración de Fiore/Lovable)
   Usa las variables ya definidas en css/styles.css (--black, --yellow, etc.)
   Tipografía: Manrope en todo el sitio, según Design System aprobado.
   ========================================================================== */

/* CORRECCIÓN (30-sep-2026): el comentario original de este bloque decía que
   la Homepage nueva no tiene header fijo, pero .ph-header SÍ es
   position:fixed (ver css/styles.css) — así quedó desde que se agregó el
   fondo sólido al hacer scroll. Con "scroll-padding-top:0" cada botón de
   "siguiente sección" aterrizaba justo debajo del header fijo, tapando el
   título de la sección de destino (el caso más visible: "Muchos elementos /
   Un solo sistema"). Se restaura el mismo criterio que ya usa styles.css
   (alto real del header + un respiro) para que el título siempre quede
   completo debajo del header. */
html { scroll-padding-top: 0 !important; }
/* Cada sección de la Homepage ya trae su propio relleno superior (>= alto del
   header fijo) para que el título nunca quede tapado, y llena exactamente una
   pantalla (100svh) para que el botón de "siguiente sección" quede abajo y visible. */

/* ---------- Animación de entrada al aparecer en pantalla ----------
   Solo se ocultan las secciones si el pequeño script inline al inicio del
   <body> confirma que JavaScript sí está activo (agrega la clase "js-anim"
   a <html>). Si por algún motivo JS no corriera, las secciones se quedan
   visibles normalmente — nunca dependen de JS para poder verse. */
html.js-anim :where(.ph-hero, .ph-realidad, .ph-gap, .ph-one, .ph-scale, .ph-results, .ph-insights, .ph-ctafinal) {
  /* Solo fundido (sin translateY): el desplazamiento de 28px hacía que el
     navegador calculara mal el destino de los botones "siguiente sección" y
     aterrizara 28px más abajo de lo debido, tapando los títulos. */
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,.84,.44,1);
}
html.js-anim :where(.ph-hero, .ph-realidad, .ph-gap, .ph-one, .ph-scale, .ph-results, .ph-insights, .ph-ctafinal).is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim :where(.ph-hero, .ph-realidad, .ph-gap, .ph-one, .ph-scale, .ph-results, .ph-insights, .ph-ctafinal) {
    transition: none; opacity: 1; transform: none;
  }
}

/* ---------- TU REALIDAD ---------- */
.ph-realidad { min-height: 100vh;
  padding: 46px 56px 48px 88px;
  display: grid;
  align-content: center;
  gap: 36px;
  align-items: start;
  background: #FAFAF9;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
}
.ph-realidad__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ph-realidad__kicker-line { width: 22px; height: 1.5px; background: var(--black); }
.ph-realidad__kicker span:last-child { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; }
.ph-realidad__title {
  margin: 0; font-size: clamp(29.5px, 2.35vw, 37.5px); line-height: 1.06;
  letter-spacing: -.03em; font-weight: 700;
}
.ph-realidad__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--steel); max-width: 340px; }

.ph-realidad__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.ph-card {
  position: relative;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 12px 14px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all .2s ease;
  border: 1px solid var(--grey);
  background: #ffffff;
  color: var(--black);
}
.ph-card[aria-pressed="true"] {
  border-color: var(--yellow);
  background: var(--yellow);
}
.ph-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--grey); }
.ph-card__name { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.ph-card__body { margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: #4a4e52; }
.ph-card__arrow { margin-top: 10px; align-self: flex-end; font-size: 14.5px; line-height: 1; opacity: .45; transition: opacity .2s ease; }
.ph-card[aria-pressed="true"] .ph-card__arrow { opacity: 1; }

.ph-realidad__footer {
  margin-top: 16px;
  border-top: 1px solid var(--grey);
  padding-top: 15px;
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}
.ph-realidad__status { display: flex; align-items: center; gap: 13px; flex: none; }
.ph-realidad__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--grey); flex: none; transition: background .2s ease; }
.ph-realidad__dot.is-on { background: var(--yellow); }
.ph-realidad__status span:last-child { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--steel); white-space: nowrap; }
.ph-realidad__divider { align-self: stretch; background: var(--grey); }
.ph-realidad__quote { margin: 0; font-size: 15px; line-height: 1.42; color: var(--black); max-width: 620px; }
.ph-realidad__quote .is-steel { color: var(--steel); }

.ph-realidad__cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid rgba(17,19,21,.45); padding-bottom: 5px;
  font: 600 14.5px Manrope, sans-serif; color: var(--black); letter-spacing: .01em; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ph-realidad__cta span:last-child { font-size: 16px; line-height: 1; }
.ph-realidad__cta:hover { border-bottom-color: var(--yellow); color: var(--yellow); }

@media (max-width: 899px) {
  .ph-realidad { padding: 40px 22px 44px; grid-template-columns: 1fr; gap: 28px; }
  .ph-realidad__cards { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 14px; }
  .ph-card { height: auto; min-height: 172px; padding: 20px 18px 18px; }
  .ph-card__name { font-size: 16.5px; }
  .ph-card__body { font-size: 14px; }
  .ph-realidad__footer { grid-template-columns: 1fr; gap: 14px; }
  .ph-realidad__divider { display: none; }
  .ph-realidad__quote { font-size: 17.5px; line-height: 1.5; max-width: 520px; }
}

/* ---------- PERFORMANCE GAP ---------- */
/* Igual al diseño de Fiore: intro + gráfico de 2 líneas divergentes
   arriba, "¿Por qué aparece? — Cuatro razones comunes" abajo. El SVG solo
   dibuja la geometría (líneas, puntos, glow); todo el texto traducible
   (data-es/data-en) va en overlays HTML posicionados en % sobre el SVG,
   mismo patrón que el diagrama de Quiénes Somos. Las 4 tarjetas de razones
   son botones que se expanden al hacer clic (ver homepage.js). */
.ph-gap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  background: var(--black);
  color: var(--white);
  padding: 64px 56px 48px;
}
.ph-gap__top { max-width: 1180px; width: 100%; margin: 0 auto; }
.ph-gap__grid { display: grid; grid-template-columns: minmax(0,4.5fr) minmax(0,7fr); gap: clamp(28px,3vw,56px); align-items: center; }
.ph-gap__intro { min-width: 0; }

.ph-gap__eyebrow { display: flex; align-items: center; gap: 10px; }
.ph-gap__eyebrow-arrow { font-size: 13px; line-height: 1; color: rgba(250,250,249,.6); }
.ph-gap__eyebrow span:last-child { font-size: 10.5px; font-weight: 600; letter-spacing: .15em; color: rgba(250,250,249,.78); }

.ph-gap__title { margin: 18px 0 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.ph-gap__title .is-yellow { color: var(--yellow); }
.ph-gap__lead { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: rgba(250,250,249,.72); max-width: 420px; }

.ph-gap__chartwrap { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) clamp(150px,15vw,200px); gap: 20px; align-items: center; }
.ph-gap__chart { position: relative; width: 100%; aspect-ratio: 1000 / 440; }
.ph-gap__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ph-gap__chart-labels { position: absolute; inset: 0; pointer-events: none; }
.ph-gap__chart-label { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; white-space: nowrap; }
.ph-gap__chart-label--y { transform: translate(-50%, calc(-100% - 10px)); }
.ph-gap__chart-label--w { transform: translate(-50%, 10px); }
.ph-gap__chart-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.ph-gap__chart-icon svg { width: 18px; height: 18px; }
.ph-gap__chart-label--y .ph-gap__chart-icon { color: var(--yellow); }
.ph-gap__chart-label--w .ph-gap__chart-icon { color: rgba(250,250,249,.8); }
.ph-gap__chart-label span:last-child { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.ph-gap__chart-label--y span:last-child { color: var(--white); }
.ph-gap__chart-label--w span:last-child { color: rgba(250,250,249,.85); }
.ph-gap__chart-time { position: absolute; transform: translate(-50%,-50%); font-size: 12px; letter-spacing: .18em; font-weight: 600; color: rgba(250,250,249,.55); white-space: nowrap; }

.ph-gap__legend { display: grid; gap: 42px; min-width: 0; }
.ph-gap__legend-item { display: flex; align-items: flex-start; gap: 8px; }
.ph-gap__legend-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 99px; background: var(--white); flex: none; }
.ph-gap__legend-dot--yellow { background: var(--yellow); }
.ph-gap__legend-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; }
.ph-gap__legend-item:first-child .ph-gap__legend-title { color: var(--yellow); }
.ph-gap__legend-item:last-child .ph-gap__legend-title { color: var(--white); }
.ph-gap__legend-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(250,250,249,.66); }

.ph-gap__reasons {
  max-width: 1180px; width: 100%; margin: clamp(28px,4svh,44px) auto 0;
  padding-top: clamp(18px,3svh,30px); border-top: 1px solid rgba(250,250,249,.12);
  display: grid; grid-template-columns: minmax(0,2.4fr) minmax(0,9.6fr); gap: 32px; align-items: start;
}
.ph-gap__reasons-head { min-width: 0; }
.ph-gap__reasons-title { margin: 14px 0 0; font-size: clamp(20px,2.2vw,26px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--white); }
.ph-gap__reasons-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }

.ph-gap__reason {
  position: relative; min-width: 0; text-align: left; cursor: pointer;
  border: 1px solid rgba(250,250,249,.14); border-radius: 8px; background: rgba(250,250,249,.03);
  padding: 18px 34px 16px 18px; display: flex; flex-direction: column;
  color: inherit; font-family: inherit;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ph-gap__reason::after {
  content: '+'; position: absolute; top: 14px; right: 16px; font-size: 17px; font-weight: 300; line-height: 1;
  color: rgba(250,250,249,.4); transition: transform .25s ease, color .2s ease;
}
.ph-gap__reason:hover { transform: translateY(-4px); border-color: rgba(234,203,53,.5); box-shadow: 0 14px 28px rgba(0,0,0,.35); }
.ph-gap__reason[aria-expanded="true"] {
  border-color: var(--yellow); box-shadow: 0 14px 28px rgba(0,0,0,.4);
  background: linear-gradient(125deg, rgba(234,203,53,.09), rgba(250,250,249,.02) 50%, rgba(234,203,53,.05));
}
.ph-gap__reason[aria-expanded="true"]::after { transform: rotate(45deg); color: var(--yellow); }
.ph-gap__reason-top { display: flex; align-items: center; gap: 14px; }
.ph-gap__reason-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--yellow); }
.ph-gap__reason-icon { width: 22px; height: 22px; display: grid; place-items: center; color: rgba(250,250,249,.85); }
.ph-gap__reason-icon svg { width: 20px; height: 20px; }
.ph-gap__reason-title { margin-top: 16px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--white); }
.ph-gap__reason-desc { margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(250,250,249,.62); }
.ph-gap__reason-extra {
  max-height: 0; opacity: 0; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--yellow);
  transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease, padding-top .3s ease;
}
.ph-gap__reason[aria-expanded="true"] .ph-gap__reason-extra {
  margin-top: 12px; padding-top: 12px; max-height: 120px; opacity: 1; border-top: 1px solid rgba(234,203,53,.25);
}

.ph-gap__footer {
  max-width: 1180px; width: 100%; margin: clamp(20px,3svh,34px) auto 0;
  padding-top: clamp(14px,2.2svh,20px); border-top: 1px solid rgba(250,250,249,.12);
  display: flex; justify-content: flex-end;
}
.ph-gap__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid rgba(250,250,249,.45); padding-bottom: 5px;
  font: 600 14.5px Manrope, sans-serif; color: var(--white); letter-spacing: .01em; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ph-gap__cta span:last-child { font-size: 16px; line-height: 1; }
.ph-gap__cta:hover { border-bottom-color: var(--yellow); color: var(--yellow); }

@media (max-width: 1080px) {
  .ph-gap__reasons { grid-template-columns: 1fr; gap: 20px; }
  .ph-gap__reasons-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 899px) {
  .ph-gap { padding: 48px 22px 44px; }
  .ph-gap__grid { grid-template-columns: 1fr; gap: 32px; }
  .ph-gap__lead { max-width: none; }
  .ph-gap__chartwrap { grid-template-columns: 1fr; gap: 24px; }
  .ph-gap__chart-labels { display: none; }
  .ph-gap__legend { grid-template-columns: 1fr; gap: 16px; }
  .ph-gap__reasons-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .ph-gap__footer { justify-content: flex-start; }
}

@media (max-width: 479px) {
  .ph-gap__reasons-grid { grid-template-columns: 1fr; }
}

/* ---------- CÓMO ACTIVAMOS CAPACIDAD ---------- */
/* Estructura fiel al diseño real de Fiore en Lovable: una píldora
   "necesidad del negocio", líneas conectoras que se abren hacia 2
   caminos (Transformation & Capability Delivery / Specialized Capacity
   on Demand, cada uno con su fila de 4 pasos), y un cierre con check +
   píldora "un mismo objetivo". Paleta, tipografía e iconografía = resto
   del sitio. Fondo panorámico decorativo (cap-section-bg.jpg) detrás de
   todo, muy sutil. */
.ph-cap { position: relative; background: #FAFAF9; color: var(--black); padding: 56px 56px 60px 88px; border-top: 1px solid var(--grey); overflow: hidden; }
.ph-cap__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(/assets/images/cap-section-bg-v2.jpg);
  background-size: 100% auto; background-position: center center; background-repeat: no-repeat;
  opacity: .8;
}

/* Anclado a la izquierda (no centrado) para que el bloque no "flote" hacia
   el centro en pantallas muy anchas: el resto de las secciones de la
   Homepage mantienen su título pegado al padding izquierdo de la sección,
   asi que esta usa el mismo criterio. */
.ph-cap__wrap { position: relative; z-index: 2; max-width: none; margin: 0; }

.ph-cap__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px 48px; }
.ph-cap__head-main { max-width: 900px; }
.ph-cap__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ph-cap__eyebrow-line { width: 26px; height: 2px; background: var(--yellow); flex: none; }
.ph-cap__eyebrow span:last-child { font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.ph-cap__title { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; }
.ph-cap__title .is-yellow { color: var(--yellow); }
.ph-cap__lead { max-width: 390px; margin: 0; padding-top: 30px; font-size: 15.5px; line-height: 1.65; color: #5A5F63; font-weight: 500; }
.ph-cap__lead:empty { display: none; }

.ph-cap__flow { position: relative; max-width: 1040px; margin: 34px auto 0; }

.ph-cap__need-row { display: flex; justify-content: center; }
.ph-cap__need {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid #E6E5E0; border-radius: 999px;
  padding: 10px 24px 10px 12px; box-shadow: 0 10px 26px rgba(17,19,21,.06);
}
.ph-cap__need-icon { width: 46px; height: 46px; border-radius: 50%; background: #F7F5EE; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ph-cap__need-text { display: flex; flex-direction: column; text-align: left; }
.ph-cap__need-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--black); }
.ph-cap__need-sub { margin-top: 3px; font-size: 12.5px; color: #6E7276; }

.ph-cap__branches { position: relative; height: 40px; }
.ph-cap__branch-stem { position: absolute; left: 50%; top: 0; width: 2px; height: 14px; transform: translateX(-50%); background: var(--black); }
.ph-cap__branch { position: absolute; top: 14px; bottom: 8px; }
.ph-cap__branch--l { left: 25%; right: 50%; border-top: 2px solid var(--yellow); border-left: 2px solid var(--yellow); border-top-left-radius: 22px; }
.ph-cap__branch--r { left: 50%; right: 25%; border-top: 2px solid var(--black); border-right: 2px solid var(--black); border-top-right-radius: 22px; }
.ph-cap__branch-arrow { position: absolute; bottom: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid; transform: translateX(-50%); }
.ph-cap__branch-arrow--l { left: 25%; border-top-color: var(--yellow); }
.ph-cap__branch-arrow--r { left: 75%; border-top-color: var(--black); }

.ph-cap__paths { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.ph-cap__path {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid rgba(224,223,218,.9); background: rgba(252,252,250,.96);
  border-radius: 24px; padding: 26px 30px 28px;
  box-shadow: 0 12px 30px rgba(17,19,21,.05);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ph-cap__path:hover { border-color: rgba(234,203,53,.65); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,19,21,.09); }
.ph-cap__path--warm { background: rgba(251,247,236,.96); border-color: rgba(234,203,53,.4); }

.ph-cap__path-head { display: flex; align-items: center; gap: 12px; }
.ph-cap__path-n { font-size: 13px; font-weight: 700; color: var(--black); }
.ph-cap__path-rule { width: 22px; height: 2px; background: #C9CCC6; flex: none; }
.ph-cap__path-name { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--black); line-height: 1.4; }
.ph-cap__path-title { margin: 14px 0 0; font-size: clamp(24px, 2vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--black); }
.ph-cap__path-title .is-yellow { color: var(--yellow); }
.ph-cap__path-body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: #5E6670; max-width: 470px; }

.ph-cap__path-steps { display: flex; align-items: flex-start; gap: 6px; margin: 22px 0 24px; }
.ph-cap__path-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ph-cap__path-step-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 1px solid #ECEBE6; box-shadow: 0 6px 14px rgba(17,19,21,.07); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ph-cap__path-step-label { font-size: 12px; font-weight: 500; line-height: 1.3; color: #3F454B; max-width: 120px; }
.ph-cap__path-arrow { flex: none; align-self: flex-start; margin-top: 15px; font-size: 20px; font-weight: 700; line-height: 1; color: var(--yellow); }

.ph-cap__path-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: auto; padding: 12px 24px; border-radius: 999px;
  background: var(--white); border: 1px solid #E2E1DC; color: var(--black);
  font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 16px rgba(17,19,21,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ph-cap__path--warm .ph-cap__path-cta { background: var(--yellow); border-color: rgba(17,19,21,.08); box-shadow: 0 8px 20px rgba(234,203,53,.28); }
.ph-cap__path-cta:hover { transform: translateX(2px); }

.ph-cap__close { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.ph-cap__check { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid #E6E5E0; box-shadow: 0 8px 20px rgba(17,19,21,.1); display: inline-flex; align-items: center; justify-content: center; }
.ph-cap__goal { margin-top: 8px; display: inline-flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid #E6E5E0; border-radius: 999px; padding: 12px 26px 12px 14px; box-shadow: 0 10px 26px rgba(17,19,21,.06); }
.ph-cap__goal-icon { width: 46px; height: 46px; border-radius: 50%; background: #F7F5EE; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ph-cap__goal-text-wrap { display: flex; flex-direction: column; text-align: left; }
.ph-cap__goal-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #8A8E91; }
.ph-cap__goal-text { margin-top: 3px; font-size: 19px; font-weight: 700; line-height: 1.22; color: var(--black); }
.ph-cap__goal-text .is-yellow { color: var(--yellow); }

.ph-cap__footer { position: relative; z-index: 2; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--grey); display: flex; align-items: center; justify-content: flex-end; }
.ph-cap__next-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--black); border-bottom: 2px solid var(--yellow); padding-bottom: 4px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.ph-cap__next-link:hover { color: #8a6f10; }

@media (max-width: 899px) {
  .ph-cap__footer { justify-content: flex-start; }
}

/* En pantallas anchas (>=1180px) el diseño real de Fiore usa mucho menos
   relleno vertical que en tablet — sin este ajuste la sección se ve más
   "grande"/espaciada de lo que debería en desktop. */
@media (min-width: 1180px) {
  .ph-cap { padding: 84px 64px 14px; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
  .ph-cap__eyebrow { margin-bottom: 6px; }
  .ph-cap__lead { padding-top: 14px; }
  .ph-cap__flow { margin-top: 4px; }
  .ph-cap__branches { height: 26px; }
  .ph-cap__path { padding: 15px 30px 15px; }
  .ph-cap__path-title { margin-top: 8px; }
  .ph-cap__path-steps { margin: 10px 0; }
  .ph-cap__path-step-icon { width: 40px; height: 40px; }
  .ph-cap__need { padding: 7px 20px 7px 9px; }
  .ph-cap__need-icon { width: 38px; height: 38px; }
  .ph-cap__close { margin-top: 12px; }
  .ph-cap__goal { padding: 8px 22px 8px 10px; }
  .ph-cap__goal-icon { width: 38px; height: 38px; }
  .ph-cap__footer { margin-top: 14px; padding-top: 10px; }
}
/* Pantallas altas: el bloque (título + diagrama) se subía al centro y el título quedaba muy abajo;
   se sube un poco más hacia el header. En laptops (poca altura) no cambia nada. */
@media (min-width: 1180px) and (min-height: 861px) {
  .ph-cap { padding-bottom: calc(14px + 14svh); }
}
/* Pantallas bajas (laptops 768-860px de alto): se quita el check decorativo y
   se compactan un poco los bloques para que el botón inferior entre completo. */
@media (min-width: 1180px) and (max-height: 860px) {
  .ph-cap { padding-top: 72px; padding-bottom: 10px; }
  .ph-cap__check { display: none; }
  .ph-cap__close { margin-top: 8px; }
  .ph-cap__need { margin-top: 4px; }
  .ph-cap__path { padding: 10px 28px 10px; }
  .ph-cap__path-steps { margin: 6px 0; }
  .ph-cap__goal { padding: 6px 22px 6px 10px; }
  .ph-cap__footer { margin-top: 10px; padding-top: 6px; }
}

.ph-cap__merge { display: none; }
@media (max-width: 1179px) {
  .ph-cap { padding: 52px 40px 52px; }
  /* Tablet/móvil: las 2 tarjetas van lado a lado, justo debajo de las 2 ramas */
  .ph-cap__paths { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ph-cap__path { padding: 18px 16px 16px; display: flex; flex-direction: column; }
  .ph-cap__path:hover { transform: none; }
  .ph-cap__path-head { gap: 8px; flex-wrap: wrap; }
  .ph-cap__path-rule { display: none; }
  .ph-cap__path-name { font-size: 10.5px; letter-spacing: .1em; }
  .ph-cap__path-title { font-size: clamp(18px, 2.6vw, 22px); }
  .ph-cap__path-steps { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 18px; }
  .ph-cap__path-step { flex-direction: row; text-align: left; gap: 10px; align-items: center; }
  .ph-cap__path-step-icon { width: 34px; height: 34px; }
  .ph-cap__path-step-icon svg { width: 17px; height: 17px; }
  .ph-cap__path-step-label { max-width: none; font-size: 12.5px; }
  .ph-cap__path-arrow { display: none; }
  .ph-cap__path-cta { margin-top: auto; }
  .ph-cap__branches { height: 34px; }
  /* Las 2 ramas de abajo se juntan en el objetivo */
  .ph-cap__close { margin-top: 0; gap: 0; }
  .ph-cap__merge { display: block; position: relative; width: 100%; height: 40px; }
  .ph-cap__merge-l, .ph-cap__merge-r { position: absolute; top: 0; bottom: 8px; }
  .ph-cap__merge-l { left: 25%; right: 50%; border-bottom: 2px solid var(--yellow); border-left: 2px solid var(--yellow); border-bottom-left-radius: 22px; }
  .ph-cap__merge-r { left: 50%; right: 25%; border-bottom: 2px solid var(--black); border-right: 2px solid var(--black); border-bottom-right-radius: 22px; }
  .ph-cap__merge-arrow { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--black); }
  .ph-cap__check { display: none; }
  .ph-cap__goal { margin-top: 0; }
}

@media (max-width: 899px) {
  .ph-cap { padding: 48px 22px 46px; }
  .ph-cap__head { flex-direction: column; gap: 18px; }
  .ph-cap__lead { padding-top: 0; max-width: 100%; }
  .ph-cap__need { flex-direction: column; text-align: center; gap: 8px; padding: 18px 22px; }
  .ph-cap__need-text { text-align: center; align-items: center; }
  .ph-cap__goal { flex-direction: column; text-align: center; padding: 18px 26px; gap: 8px; }
  .ph-cap__goal-text-wrap { text-align: center; align-items: center; }
}
@media (max-width: 639px) {
  .ph-cap { padding: 44px 16px 42px; }
  .ph-cap__paths { gap: 10px; }
  .ph-cap__path { padding: 14px 12px 12px; border-radius: 18px; }
  .ph-cap__path-body { display: none; }
  .ph-cap__path-title br { display: none; }
  .ph-cap__path-name { font-size: 9.5px; }
  .ph-cap__path-title { font-size: 16.5px; margin-top: 8px; }
  .ph-cap__path-steps { margin: 12px 0 14px; gap: 9px; }
  .ph-cap__path-step-icon { width: 30px; height: 30px; }
  .ph-cap__path-step-icon svg { width: 15px; height: 15px; }
  .ph-cap__path-step-label { font-size: 11.5px; line-height: 1.25; }
  .ph-cap__path-cta { font-size: 12px; padding: 8px 12px; min-height: 44px; align-self: stretch; justify-content: space-between; gap: 6px; }
}


/* ---------- NUESTRO ENFOQUE / SCALE ---------- */
.ph-scale { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; background: var(--black); color: var(--white); padding: 48px 56px 38px 88px; }
.ph-scale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; opacity: .9; }
.ph-scale__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17,19,21,.94) 12%, rgba(17,19,21,.66) 48%, rgba(17,19,21,.82) 100%),
    radial-gradient(60% 70% at 88% 34%, rgba(234,203,53,.16), rgba(17,19,21,0) 70%),
    linear-gradient(180deg, rgba(17,19,21,.62), rgba(17,19,21,.28) 45%, rgba(17,19,21,.9));
}
.ph-scale__content { position: relative; }

.ph-scale__kicker, .ph-scale__footer-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ph-scale__kicker-line { width: 22px; height: 1.5px; background: rgba(250,250,249,.6); }
.ph-scale__kicker span:last-child { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; color: rgba(250,250,249,.82); }
.ph-scale__title { margin: 0; font-size: clamp(48.5px, 4.4vw, 68px); line-height: 1; letter-spacing: -.01em; font-weight: 700; }
.ph-scale__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: rgba(250,250,249,.78); max-width: 640px; }

/* Riel simplificado: linea recta con progreso, en vez de la curva SVG original */
/* Riel simplificado: ahora en fila flex junto a la nota de impacto,
   para que esta última quede SIEMPRE dentro del área visible (sin el
   truco de desborde con posición negativa que causaba el recorte). */
.ph-scale__rail-row { display: flex; align-items: flex-start; gap: 24px; margin-top: 28px; }
.ph-scale__rail-wrap { flex: 1 1 auto; min-width: 0; }
/* Riel diagonal ascendente (fiel al código real de Fiore) */
.ph-scale__stair { position: relative; height: 310px; }
.ph-scale__stair-svg { position: absolute; top: 0; left: 0; width: 100%; height: 260px; overflow: visible; }
.ph-scale__stair-track { fill: none; stroke: rgba(250,250,249,.34); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ph-scale__stair-fill {
  fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.08 99;
  transition: stroke-dasharray .5s ease;
}

.ph-scale__node {
  position: absolute; transform: translate(-50%, -50%);
  width: 156px; min-height: 128px; padding: 0; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  text-align: left; color: var(--white); cursor: pointer;
}
.ph-scale__node-letter { display: block; margin-bottom: 5px; font-size: 38px; font-weight: 700; line-height: .9; color: rgba(250,250,249,.82); transition: color .2s ease; }
.ph-scale__node-dot {
  width: 13px; height: 13px; border-radius: 50%; background: rgba(17,19,21,.7);
  border: 1.4px solid rgba(250,250,249,.65); transition: all .2s ease;
}
.ph-scale__node-label {
  display: block; margin-top: 10px; font-size: 9px; letter-spacing: .18em; font-weight: 600; color: rgba(250,250,249,.58);
  background: rgba(17,19,21,.72); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); padding: 3px 6px; border-radius: 4px;
  transition: color .2s ease;
}
.ph-scale__node-name {
  display: block; margin-top: 5px; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  background: rgba(17,19,21,.72); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); padding: 1px 6px; border-radius: 4px;
}
.ph-scale__node-body { display: block; margin-top: 5px; max-width: 145px; font-size: 11.5px; line-height: 1.4; color: rgba(250,250,249,.7); }

.ph-scale__node[aria-pressed="true"] .ph-scale__node-letter { color: var(--yellow); }
.ph-scale__node[aria-pressed="true"] .ph-scale__node-dot { width: 15px; height: 15px; background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 6px rgba(234,203,53,.18); }
.ph-scale__node[aria-pressed="true"] .ph-scale__node-label { color: var(--yellow); }

.ph-scale__impact-note {
  flex: 0 0 130px; margin-top: 78px; /* alinea aprox. con el centro vertical del riel */
  display: flex; flex-direction: column; gap: 8px;
  font-size: 9.5px; line-height: 1.4; letter-spacing: .16em; font-weight: 600; color: rgba(250,250,249,.68);
}
.ph-scale__dotted-line { border-top: 1.5px dotted rgba(234,203,53,.75); }
.ph-scale__arrow { color: var(--yellow); font-size: 15.5px; margin-top: -20px; }

/* Panel de etapa activa */
.ph-scale__panel {
  margin-top: 26px; border: 1px solid rgba(250,250,249,.24); border-radius: 16px;
  background: rgba(17,19,21,.5); padding: 18px 22px;
  display: grid; grid-template-columns: 140px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
  align-items: center;
}
.ph-scale__panel-num { display: flex; align-items: center; gap: 10px; padding-right: 18px; }
.ph-scale__panel-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid var(--yellow); flex: none; }
.ph-scale__panel-n { display: block; font-size: 10.5px; letter-spacing: .2em; font-weight: 600; color: rgba(250,250,249,.6); }
.ph-scale__panel-name { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .18em; font-weight: 700; color: var(--yellow); }
.ph-scale__panel-claim { padding: 0 22px; border-left: 1px solid rgba(250,250,249,.18); font-size: 18px; line-height: 1.35; font-weight: 700; }
.ph-scale__panel-detail { padding: 0 22px; border-left: 1px solid rgba(250,250,249,.18); font-size: 14.5px; line-height: 1.5; color: rgba(250,250,249,.76); }
.ph-scale__panel-outcome { padding: 0 22px; border-left: 1px solid rgba(250,250,249,.18); font-size: 14.5px; line-height: 1.5; }
.ph-scale__panel-outcome span:first-child { display: block; color: rgba(250,250,249,.56); }
.ph-scale__panel-outcome span:last-child { display: block; margin-top: 4px; color: var(--white); }
.ph-scale__panel-nav { display: flex; gap: 10px; justify-content: flex-end; padding-left: 18px; }
.ph-scale__panel-nav button {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(250,250,249,.4); color: rgba(250,250,249,.8); font-size: 16.5px; cursor: pointer;
}
.ph-scale__panel-nav button.is-yellow { border-color: var(--yellow); color: var(--yellow); }

.ph-scale__footer-kicker { margin-top: 0; margin-bottom: 0; }
.ph-scale__bottom-row { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ph-scale__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid rgba(250,250,249,.45); padding-bottom: 5px;
  font: 600 14.5px Manrope, sans-serif; color: var(--white); letter-spacing: .01em; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ph-scale__cta span:last-child { font-size: 16px; line-height: 1; }
.ph-scale__cta:hover { border-bottom-color: var(--yellow); color: var(--yellow); }

@media (max-width: 899px) {
  .ph-scale { padding: 52px 22px; }
  .ph-scale__rail-row { display: none; } /* en móvil usamos la lista vertical simple */
  .ph-scale__mobile-list { display: grid; gap: 10px; margin-top: 34px; }
  .ph-scale__panel { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .ph-scale__panel-claim, .ph-scale__panel-detail, .ph-scale__panel-outcome { padding: 0; border-left: none; }
  .ph-scale__panel-nav { justify-content: flex-start; }
  .ph-scale__bottom-row { justify-content: flex-start; }
}
@media (min-width: 900px) {
  .ph-scale__mobile-list { display: none; }
}

/* ---------- SCALE: lista móvil ---------- */
.ph-scale__mobile-item {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  text-align: left; min-height: 44px; padding: 13px 14px; border-radius: 14px;
  border: 1px solid rgba(250,250,249,.22); background: rgba(17,19,21,.42);
  color: var(--white); cursor: pointer; width: 100%; margin-bottom: 10px;
}
.ph-scale__mobile-item[aria-pressed="true"] { border-color: var(--yellow); background: rgba(234,203,53,.08); }
.ph-scale__mobile-dot-col { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 3px; }
.ph-scale__mobile-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.4px solid rgba(250,250,249,.6); }
.ph-scale__mobile-item[aria-pressed="true"] .ph-scale__mobile-dot { background: var(--yellow); border-color: var(--yellow); }
.ph-scale__mobile-line { width: 1px; flex: 1; min-height: 18px; background: rgba(250,250,249,.28); }
.ph-scale__mobile-tag { display: block; font-size: 10.5px; letter-spacing: .2em; font-weight: 600; color: rgba(250,250,249,.6); }
.ph-scale__mobile-item[aria-pressed="true"] .ph-scale__mobile-tag { color: var(--yellow); }
.ph-scale__mobile-name { display: block; margin-top: 6px; font-size: 17.5px; font-weight: 700; }
.ph-scale__mobile-body { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(250,250,249,.72); }
.ph-scale__impact-note-mobile {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 10px; letter-spacing: .16em; font-weight: 600; color: rgba(250,250,249,.68);
}
.ph-scale__impact-note-mobile .ph-scale__dotted-line { flex: 1; }

/* ---------- RESULTADOS QUE SE SOSTIENEN ---------- */
.ph-results {
  position: relative;
  overflow: hidden;
  background: #FAFAF9;
  padding: 64px 88px 52px 88px;
}
.ph-results__bg { position: absolute; inset: 0; z-index: 0; }
.ph-results__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ph-results__scrim { position: absolute; inset: 0; background: rgba(250,250,249,.55); }
.ph-results__inner { position: relative; z-index: 1; max-width: none; margin: 0; }
.ph-results__top { max-width: 760px; }
.ph-results__kicker { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--black); margin-bottom: 18px; }
.ph-results__kicker-line { width: 22px; height: 2px; background: var(--yellow); }
.ph-results__title { margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; color: var(--black); }
.ph-results__lead { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--steel); }

.ph-results__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.ph-results__card {
  position: relative; min-width: 0; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(17,19,21,.08); background: var(--black);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ph-results__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(17,19,21,.28);
}
.ph-results__photo { position: absolute; inset: 0; z-index: 0; }
.ph-results__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: contrast(1.05) saturate(1.04);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.ph-results__card:hover .ph-results__photo img { transform: scale(1.06); }
.ph-results__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,19,21,0) 32%, rgba(17,19,21,.5) 62%, rgba(17,19,21,.93) 100%);
}
.ph-results__content { position: relative; z-index: 1; padding: 20px 20px 22px; }
.ph-results__num { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--yellow); }
.ph-results__name { margin: 8px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--white); }
.ph-results__desc { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(250,250,249,.78); }

.ph-results__footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--grey); display: flex; justify-content: flex-end; }
.ph-results__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid rgba(17,19,21,.45); padding-bottom: 5px;
  font: 600 14.5px Manrope, sans-serif; color: var(--black); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ph-results__cta span:last-child { font-size: 16px; line-height: 1; }
.ph-results__cta:hover { border-bottom-color: var(--yellow); color: var(--yellow); }

@media (max-width: 1180px) {
  .ph-results { padding: 56px 40px 46px; }
  .ph-results__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 599px) {
  .ph-results { padding: 48px 22px 40px; }
  .ph-results__grid { grid-template-columns: 1fr; gap: 12px; }
  
}

/* ---------- INSIGHTS ---------- */
.ph-insights { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: #FAFAF9; padding: 50px 56px 48px 88px; font-family: 'Manrope', Arial, sans-serif; }
.ph-insights__grid { display: grid; grid-template-columns: minmax(250px, 28fr) minmax(0, 72fr); gap: 54px; max-width: 1440px; margin: 0 auto; }

.ph-insights__intro { min-width: 0; }
.ph-insights__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.ph-insights__kicker-line { width: 22px; height: 1.5px; background: var(--black); flex: 0 0 auto; }
.ph-insights__kicker span:last-child { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; }
.ph-insights__title { margin: 0; font-size: clamp(42px, 3.2vw, 57px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.ph-insights__lead { margin: 24px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--steel); max-width: 380px; }
.ph-insights__explore-link {
  margin-top: 28px; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--yellow);
  display: inline-flex; align-items: center; gap: 18px; font-size: 15.5px; font-weight: 650;
  text-decoration: none; color: var(--black);
}
.ph-insights__divider { border-top: 1px solid var(--grey); margin-top: 32px; padding-top: 28px; }
.ph-insights__divider p { margin: 0; color: var(--steel); font-size: 16px; line-height: 1.5; }
.ph-insights__divider button {
  margin-top: 10px; padding: 0 0 5px; border: 0; border-bottom: 1.5px solid var(--yellow);
  background: transparent; color: var(--black); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}

.ph-insights__main { min-width: 0; }
.ph-insights__topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.ph-insights__filters { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.ph-insights__filter-btn {
  min-height: 38px; flex: 0 0 auto; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--grey); background: rgba(250,250,249,.75); color: var(--steel);
  font-size: 14px; font-weight: 550; cursor: pointer; transition: all .2s ease;
}
.ph-insights__filter-btn[aria-selected="true"] { border-color: var(--black); background: var(--black); color: var(--white); }
.ph-insights__filter-btn[aria-selected="true"][data-conv="true"] { border-color: rgba(234,203,53,.72); background: rgba(234,203,53,.12); color: var(--black); }
.ph-insights__toplink { flex: 0 0 auto; padding-bottom: 5px; border-bottom: 1.5px solid var(--yellow); font-size: 14px; font-weight: 650; text-decoration: none; color: inherit; }

.ph-insights__topics { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grey); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-insights__topics-label { margin-right: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; }
.ph-insights__topic { padding: 7px 11px; border: 1px solid var(--grey); border-radius: 7px; color: var(--steel); font-size: 12.5px; line-height: 1; }
.ph-insights__topic-link { margin-left: auto; padding-bottom: 4px; border-bottom: 1.5px solid var(--yellow); font-size: 13px; font-weight: 600; text-decoration: none; color: inherit; }

/* ---------- Tarjetas generadas por JS ---------- */
.ph-card-feature {
  position: relative; min-height: 328px; border: 1px solid rgba(17,19,21,.18); border-radius: 10px;
  overflow: hidden; color: var(--white); display: flex; align-items: stretch;
}
.ph-card-feature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.ph-card-feature__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,19,21,.96) 0%, rgba(17,19,21,.88) 38%, rgba(17,19,21,.36) 72%, rgba(17,19,21,.18) 100%); }
.ph-card-feature__body { position: relative; z-index: 1; padding: 32px 30px; width: min(620px, 100%); display: flex; flex-direction: column; }
.ph-card-feature__meta { display: flex; align-items: center; gap: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-card-feature__meta span:nth-child(2) { width: 1px; height: 15px; background: rgba(250,250,249,.42); }
.ph-card-feature__title { margin: 22px 0 0; max-width: 570px; font-size: clamp(27.5px, 2.2vw, 37.5px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }
.ph-card-feature__desc { margin: 12px 0 0; max-width: 550px; color: rgba(250,250,249,.76); font-size: 16px; line-height: 1.5; }
.ph-card-feature__footer { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ph-card-feature__cta { color: var(--white); padding-bottom: 5px; border-bottom: 1.5px solid var(--yellow); font-size: 15px; font-weight: 600; text-decoration: none; }
.ph-card-feature__proposal { font-size: 10px; letter-spacing: .16em; color: rgba(250,250,249,.52); }

.ph-cards-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ph-card-tool {
  position: relative; min-height: 222px; border: 1px solid var(--grey); border-radius: 10px; overflow: hidden;
  padding: 24px 24px 22px; background: rgba(255,255,255,.34);
}
.ph-card-tool__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-card-tool__title { margin: 24px 0 0; font-size: 23px; line-height: 1.15; font-weight: 700; }
.ph-card-tool__desc { margin: 10px 0 0; max-width: 330px; color: var(--steel); font-size: 15px; line-height: 1.45; }
.ph-card-tool__cta { display: inline-block; margin-top: 20px; padding-bottom: 4px; border-bottom: 1.5px solid var(--yellow); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }

.ph-card-conv {
  position: relative; min-height: 222px; border: 1px solid rgba(250,250,249,.15); border-radius: 10px; overflow: hidden;
  padding: 24px; color: var(--white); background: var(--black);
}
.ph-card-conv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; opacity: .32; }
.ph-card-conv__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,19,21,.98), rgba(17,19,21,.78) 62%, rgba(17,19,21,.42)); }
.ph-card-conv__inner { position: relative; z-index: 2; max-width: 390px; }
.ph-card-conv__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-card-conv__title { margin: 24px 44px 0 0; font-size: 23px; line-height: 1.12; font-weight: 700; }
.ph-card-conv__desc { margin: 10px 0 0; color: rgba(250,250,249,.72); font-size: 15px; line-height: 1.45; }
.ph-card-conv__cta { margin-top: 20px; padding: 0 0 4px; border: 0; border-bottom: 1.5px solid var(--yellow); background: transparent; color: var(--white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-block; }

.ph-card-perspective {
  position: relative; min-height: 168px; border: 1px solid var(--grey); border-radius: 10px; overflow: hidden;
  padding: 24px 28px; background: rgba(255,255,255,.34); margin-top: 14px;
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
}
.ph-card-perspective__main { flex: 1 1 360px; min-width: 0; }
.ph-card-perspective__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-card-perspective__title { margin: 18px 0 0; font-size: 23px; line-height: 1.15; font-weight: 700; }
.ph-card-perspective__desc { margin: 10px 0 0; max-width: 560px; color: var(--steel); font-size: 15px; line-height: 1.45; }
.ph-card-perspective__cta { margin-left: auto; padding-top: 4px; display: inline-block; padding-bottom: 4px; border-bottom: 1.5px solid var(--yellow); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }

.ph-articles-list .ph-card-feature { margin-bottom: 0; }
.ph-articles-list > * + * { margin-top: 14px; }
.ph-article-row {
  position: relative; border: 1px solid var(--grey); border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.34); padding: 24px 30px; min-height: 140px;
}
.ph-article-row .ph-card-feature__meta, .ph-article-row .ph-card-feature__title, .ph-article-row .ph-card-feature__desc { color: inherit; }
.ph-article-row .ph-card-feature__title { font-size: 23px; letter-spacing: -.01em; }
.ph-article-row .ph-card-feature__desc { color: var(--steel); }
.ph-article-row .ph-card-feature__cta { color: var(--black); }
.ph-article-row .ph-card-feature__proposal { color: rgba(116,121,125,.7); }

.ph-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ph-tools-grid .ph-card-tool { display: flex; flex-direction: column; min-height: 260px; }
.ph-tools-grid .ph-card-tool__cta { margin-top: auto; }

/* Tarjeta de herramienta destacada (pestaña "Todos"), con ilustración */
.ph-card-tool--featured { padding: 24px 210px 22px 24px; }
.ph-card-tool__content { position: relative; z-index: 2; }
.ph-card-tool__deco { position: absolute; right: 12px; top: 18px; bottom: 18px; width: 180px; }
.ph-card-tool__deco-stack { position: absolute; inset: 0; }
.ph-card-tool__deco-card {
  position: absolute; width: 82px; height: 160px; border: 1px solid rgba(116,121,125,.25);
  border-radius: 7px; background: rgba(250,250,249,.44); overflow: hidden;
}
.ph-card-tool__deco-card:nth-child(1) { top: 0; left: 0; }
.ph-card-tool__deco-card:nth-child(2) { top: 8px; left: 24px; }
.ph-card-tool__deco-card:nth-child(3) { top: 16px; left: 48px; }
.ph-card-tool__deco-card:nth-child(4) { top: 24px; left: 72px; }
.ph-card-tool__deco-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .2; }
.ph-card-tool__deco-line { position: absolute; inset: 0; width: 100%; height: 100%; }

.ph-conv-headline { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--steel); margin-bottom: 14px; }
.ph-conv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ph-conv-card {
  position: relative; min-height: 168px; border: 1px solid rgba(17,19,21,.12); border-radius: 10px; overflow: hidden;
  padding: 24px; background: rgba(255,255,255,.34); display: flex; flex-direction: column; justify-content: space-between;
}
.ph-conv-card.is-highlight { background: rgba(234,203,53,.08); }
.ph-conv-card__tag { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-conv-card__tag span { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.ph-conv-card__title { margin: 18px 0 0; font-size: 22px; line-height: 1.2; font-weight: 700; }
.ph-conv-card__cta { align-self: flex-start; margin-top: 18px; padding: 0 0 4px; border: 0; border-bottom: 1.5px solid var(--yellow); background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ph-conv-footer { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.ph-conv-footer button, .ph-conv-footer .ph-conv-footer-link {
  min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--yellow); border: none; color: var(--black);
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.ph-conv-footer span { font-size: 10px; letter-spacing: .16em; color: rgba(116,121,125,.7); }

.ph-perspectives-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ph-persp-card {
  position: relative; min-height: 188px; border: 1px solid var(--grey); border-radius: 10px; overflow: hidden;
  padding: 24px; background: rgba(255,255,255,.34); display: flex; flex-direction: column; justify-content: space-between;
}
.ph-persp-card__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.ph-persp-card__title { margin: 16px 0 0; font-size: 23px; line-height: 1.18; font-weight: 700; }
.ph-persp-card__desc { margin: 10px 0 0; color: var(--steel); font-size: 15px; line-height: 1.45; }
.ph-persp-card__cta { align-self: flex-start; margin-top: 18px; padding-bottom: 4px; border-bottom: 1.5px solid var(--yellow); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }

@media (max-width: 899px) {
  .ph-insights { padding: 56px 22px 58px; }
  .ph-insights__grid { grid-template-columns: 1fr; gap: 34px; }
  .ph-cards-secondary, .ph-tools-grid, .ph-conv-grid, .ph-perspectives-grid { grid-template-columns: 1fr; }
  .ph-card-tool--featured { padding: 24px; }
  .ph-card-tool__deco { display: none; }
}

/* ---------- SOBRE NOSOTROS ---------- */
.ph-about { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; background: var(--black); color: var(--white); overflow: hidden; padding: 50px 56px 80px 88px; }
.ph-about__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: .55; pointer-events: none; }
.ph-about__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, #111315 0%, rgba(17,19,21,.96) 34%, rgba(17,19,21,.82) 58%, rgba(17,19,21,.45) 100%); pointer-events: none; }
.ph-about__content { position: relative; display: flex; gap: 56px; align-items: flex-start; flex-wrap: wrap; }

.ph-about__main { flex: 1 1 480px; min-width: 280px; }
.ph-about__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.ph-about__kicker-line { width: 22px; height: 1.5px; background: rgba(250,250,249,.6); }
.ph-about__kicker span:last-child { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; color: rgba(250,250,249,.8); }
.ph-about__title { margin: 0; font-size: clamp(31px, 3vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; max-width: 560px; }
.ph-about__lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(250,250,249,.68); max-width: 540px; }
.ph-about__lead-strong { margin: 16px 0 0; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--white); max-width: 520px; }

.ph-about__chain { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; font-size: 12px; font-weight: 600; letter-spacing: .13em; }
.ph-about__chain-line { width: 26px; height: 1px; background: rgba(250,250,249,.4); }
.ph-about__chain-line--yellow { background: rgba(234,203,53,.6); }
.ph-about__chain-perf { color: var(--yellow); }

.ph-about__cta {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(250,250,249,.45); color: var(--white); font-size: 15px; font-weight: 500;
  padding: 13px 20px; border-radius: 2px; text-decoration: none;
}

.ph-about__side { flex: 1 1 280px; min-width: 250px; border-left: 1px solid rgba(250,250,249,.18); padding-left: 30px; }
.ph-about__side-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: rgba(250,250,249,.5); margin-bottom: 20px; }
.ph-about__side-statement { font-size: clamp(22px, 2vw, 29.5px); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.ph-about__side-statement .is-yellow { color: var(--yellow); }
.ph-about__side-list { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: rgba(250,250,249,.62); }

@media (max-width: 899px) {
  .ph-about { padding: 56px 22px 90px; }
  .ph-about__side { border-left: none; padding-left: 0; margin-top: 8px; border-top: 1px solid rgba(250,250,249,.18); padding-top: 24px; }
}

/* ---------- TU PUNTO DE PARTIDA ---------- */
/* ---------- TU PUNTO DE PARTIDA (fondo blanco, con interactividad al hover) ---------- */
.ph-start { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; background: #FAFAF9; color: var(--black); padding: 52px 56px 46px 88px; font-family: 'Manrope', Arial, sans-serif; }

.ph-start__intro { max-width: 620px; }
.ph-start__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--steel); margin-bottom: 18px; }
.ph-start__title { margin: 0; font-size: clamp(35px, 3.1vw, 50.5px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.ph-start__title .is-yellow { color: var(--yellow); }
.ph-start__lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.55; color: #4a4e52; max-width: 460px; }

.ph-start__band {
  position: relative; margin-top: 38px;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px;
}
.ph-start__rail { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--grey); z-index: 0; }

.ph-start__step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  border: 1px solid var(--grey); border-radius: 14px; background: var(--paper, #fff);
  padding: 26px 22px 24px; overflow: hidden; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ph-start__step-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); opacity: .08; pointer-events: none; z-index: 0;
}
.ph-start__circle {
  position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%;
  background: var(--paper, #fff); border: 1.5px solid var(--grey);
  display: flex; align-items: center; justify-content: center; color: var(--steel);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.ph-start__number { position: relative; z-index: 1; margin-top: 16px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--steel); transition: color .25s ease; }
.ph-start__label { position: relative; z-index: 1; margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--steel); }
.ph-start__value { position: relative; z-index: 1; margin-top: 8px; min-height: 40px; font-size: clamp(18.5px, 1.4vw, 22px); font-weight: 700; line-height: 1.25; color: var(--black); transition: color .25s ease; }

/* Interactividad: al pasar el mouse sobre una tarjeta, se ilumina el borde,
   crece el circulo y se resalta el valor — sin tocar la paleta base. */
.ph-start__step:hover {
  border-color: var(--yellow); box-shadow: 0 14px 30px rgba(17,19,21,.08); transform: translateY(-2px);
}
.ph-start__step:hover .ph-start__circle { border-color: var(--yellow); color: var(--yellow); transform: scale(1.08); }
.ph-start__step:hover .ph-start__number { color: var(--yellow); }
.ph-start__step:hover .ph-start__value { color: var(--yellow); }

.ph-start__connector { align-self: center; color: var(--yellow); font-size: 20px; z-index: 1; }

.ph-start__step[aria-selected="true"] { border-color: var(--black); box-shadow: 0 14px 30px rgba(17,19,21,.08); }
.ph-start__step[aria-selected="true"] .ph-start__circle { border-color: var(--yellow); color: var(--yellow); }
.ph-start__step[aria-selected="true"] .ph-start__number,
.ph-start__step[aria-selected="true"] .ph-start__value { color: var(--yellow); }

.ph-start__readout {
  position: relative; z-index: 1; margin-top: 20px; padding: 28px;
  background: var(--black); color: var(--white); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(250,250,249,.14);
}
.ph-start__readout-head { display: flex; align-items: center; gap: 14px; }
.ph-start__readout-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--black); font-size: 10px; font-weight: 700;
}
.ph-start__readout-headtext { min-width: 0; }
.ph-start__readout-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: rgba(250,250,249,.45); }
.ph-start__readout-value { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; }
.ph-start__readout-rule { margin: 22px 0 18px; height: 1px; background: rgba(250,250,249,.13); }
.ph-start__readout-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--yellow); margin-bottom: 8px; }
.ph-start__readout-insight { margin: 0; max-width: 480px; font-size: 13px; line-height: 1.6; color: rgba(250,250,249,.63); }
.ph-start__readout-progress { display: flex; gap: 5px; margin-top: 22px; }
.ph-start__readout-progress span { height: 3px; flex: 1; background: rgba(250,250,249,.12); border-radius: 2px; transition: background .25s ease; }
.ph-start__readout-progress span.is-on { background: var(--yellow); }

.ph-start__next-btn {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 34px;
  background: var(--yellow); color: var(--black); font: 700 15px Manrope, sans-serif;
  padding: 15px 26px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .2s ease;
}
.ph-start__next-btn:hover { transform: translateY(-2px); }

@media (max-width: 899px) {
  .ph-start { padding: 56px 22px 54px; }
  .ph-start__band { grid-template-columns: 1fr; gap: 16px; }
  .ph-start__rail { display: none; }
  .ph-start__connector { display: none; }
  .ph-start__step { flex-direction: row; align-items: center; gap: 16px; padding: 18px; }
  .ph-start__circle { width: 54px; height: 54px; flex: none; }
  .ph-start__number, .ph-start__label, .ph-start__value { margin-top: 0; }
  .ph-start__number { display: block; }
}

/* ---------- CTA FINAL ---------- */
.ph-ctafinal { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; background: var(--black); color: var(--white); padding: 54px 56px 56px 76px; overflow: hidden; font-family: 'Manrope', Arial, sans-serif; }
.ph-ctafinal__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 51%; opacity: 1; filter: brightness(1.35) saturate(1.06); }
.ph-ctafinal__scrim-1 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,19,21,.68) 0%, rgba(17,19,21,.38) 45%, rgba(17,19,21,.05) 76%, rgba(17,19,21,.1) 100%); }
.ph-ctafinal__scrim-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,19,21,0), rgba(17,19,21,.14)); }

.ph-ctafinal__content { position: relative; min-height: 360px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.ph-ctafinal__main { max-width: 650px; }
.ph-ctafinal__eyebrow { font-size: 11.5px; font-weight: 600; color: rgba(250,250,249,.78); margin-bottom: 20px; }
.ph-ctafinal__title { margin: 0; font-size: clamp(37.5px, 4.3vw, 68px); line-height: 1.02; font-weight: 700; }
.ph-ctafinal__title .is-yellow { color: var(--yellow); }
.ph-ctafinal__lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.65; color: rgba(250,250,249,.76); max-width: 510px; }

.ph-ctafinal__btn {
  margin-top: 28px; min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px;
  background: var(--yellow); color: var(--black); font: 600 14.5px Manrope, sans-serif;
  padding: 14px 22px; border-radius: 6px; border: none; cursor: pointer;
}
.ph-ctafinal__note { margin-top: 12px; font-size: 14px; color: rgba(250,250,249,.62); }
.ph-ctafinal__explore { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: rgba(250,250,249,.66); }
.ph-ctafinal__explore-link { color: var(--yellow); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(234,203,53,.5); padding-bottom: 2px; }
.ph-ctafinal__explore-link:hover { border-bottom-color: var(--yellow); }

.ph-ctafinal__signature {
  align-self: end; font-size: 11px; line-height: 1.65; font-weight: 500; letter-spacing: .12em;
  color: rgba(250,250,249,.52); border-left: 1px solid rgba(234,203,53,.5); padding: 4px 0 5px 15px;
}

@media (max-width: 899px) {
  .ph-ctafinal { padding: 62px 22px 66px; }
  .ph-ctafinal__bg { object-position: 62% center; opacity: .72; }
  .ph-ctafinal__content { align-items: flex-start; }
  .ph-ctafinal__signature { border-left: none; border-top: 1px solid rgba(234,203,53,.5); padding: 15px 0 0; }
}


/* ---------- ONE SYSTEM ---------- */
.ph-one { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: #FAFAF9; padding: 84px 28px 18px 56px; overflow: hidden; box-sizing: border-box; }
.ph-one__grid { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; }

.ph-one__intro { max-width: 640px; }
.ph-one__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ph-one__kicker-line { width: 22px; height: 1px; background: var(--black); }
.ph-one__kicker span:last-child { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; }
.ph-one__title { margin: 0; font-size: clamp(33px, 3vw, 47.5px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; }
.ph-one__lead { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #4a4e52; max-width: 660px; }

/* ---- Escritorio: tarjetas fotográficas apiladas ----
   Mismos 6 nodos, mismos data-node, mismo JS (setOneActive en
   homepage.js) — nada de la interacción cambió, solo el vestido visual
   y una entrada en abanico al hacer scroll (reaprovecha el .is-visible
   que homepage.js ya agrega a toda la sección, sin JS nuevo). */
.ph-one-photo { position: relative; width: 93%; height: clamp(270px, 46svh, 420px); min-width: 0; margin-top: clamp(8px, 1.4svh, 18px); }

/* Tarjetas al estilo de Fiore (Lovable): rectangulares (radio 8), escalonadas
   y pegadas al piso, más altas hacia el centro; texto arriba a la izquierda,
   foto "glass" abajo con multiply y número abajo a la izquierda. Los hovers,
   el abanico de entrada y el núcleo ONE SYSTEM son los mismos de siempre. */
.ph-one-photo__card {
  position: absolute; padding: clamp(14px, 2svh, 22px) 8px 0 clamp(12px, 1.2vw, 18px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  border: 1px solid rgba(116,121,125,.25); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: rgba(250,250,249,.58); z-index: 2;
  box-shadow: 0 10px 24px rgba(17,19,21,.055);
  transition: opacity .85s cubic-bezier(.16,.84,.44,1), transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .25s ease, background-color .25s ease, filter .25s ease;
  outline: none;
}
.ph-one-photo__card[data-node="1"] { left: 0%;     width: 10.2%; height: 76%; bottom: 5%; }
.ph-one-photo__card[data-node="2"] { left: 9.6%;   width: 11.7%; height: 84%; bottom: 1%; }
.ph-one-photo__card[data-node="3"] { left: 20.3%;  width: 12.7%; height: 91%; bottom: 0%; }
.ph-one-photo__card[data-node="4"] { left: 31.4%;  width: 16.6%; height: 98%; bottom: 0%; }
.ph-one-photo__card[data-node="5"] { left: 47.05%; width: 12.8%; height: 90%; bottom: 1.5%; }
.ph-one-photo__card[data-node="6"] { left: 58.75%; width: 12.5%; height: 79%; bottom: 5%; }
.ph-one-photo__card:hover,
.ph-one-photo__card[aria-pressed="true"] {
  transform: translateY(-8px) scale(1.022);
  background: #e9e8e3; border-color: var(--yellow); z-index: 4;
  box-shadow: 0 16px 32px rgba(17,19,21,.1), 0 0 16px rgba(234,203,53,.16);
}
.ph-one-photo__card.is-dim { opacity: .55; filter: brightness(.97) saturate(.72); }
.ph-one-photo__card img {
  position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: 55%;
  object-fit: cover; object-position: center; mix-blend-mode: multiply;
  filter: grayscale(.12) contrast(.98); opacity: .92;
  transition: filter .45s ease, transform .6s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  transform: scale(1);
}
.ph-one-photo__card:hover img,
.ph-one-photo__card[aria-pressed="true"] img { transform: scale(1.12); filter: contrast(1.06) saturate(1.3); opacity: 1; }
.ph-one-photo__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,250,249,.98) 0%, rgba(250,250,249,.92) 39%, rgba(250,250,249,.08) 68%, rgba(250,250,249,.4) 100%);
}
.ph-one-photo__tint { display: none; }
.ph-one-photo__border { display: none; }

/* Número abajo a la izquierda (generado con el data-node que ya existe) */
.ph-one-photo__card::after {
  content: "0" attr(data-node);
  position: absolute; left: clamp(12px, 1.2vw, 18px); bottom: clamp(8px, 1.3svh, 13px); z-index: 1;
  font-size: clamp(18px, 2.1svh, 26px); font-weight: 500; line-height: 1; color: var(--black);
  pointer-events: none; transition: color .3s ease;
}
.ph-one-photo__card[aria-pressed="true"]::after,
.ph-one-photo__card:hover::after { color: #8a6f10; }

.ph-one-photo__label {
  position: relative; z-index: 1; font-size: clamp(9px, .78vw, 12.5px); line-height: 1.2;
  font-weight: 700; letter-spacing: 0; color: var(--black); text-align: left;
  overflow-wrap: anywhere;
}
.ph-one-photo__label::before {
  content: ''; display: block; width: 18px; height: 2px; margin-bottom: clamp(8px, 1.4svh, 14px);
  background: var(--yellow); transition: width .25s ease;
}
.ph-one-photo__card:hover .ph-one-photo__label::before,
.ph-one-photo__card[aria-pressed="true"] .ph-one-photo__label::before { width: 28px; }


.ph-one-photo__items {
  position: relative; z-index: 1; margin: clamp(7px, 1.1svh, 12px) 0 0; padding: 0; list-style: none;
  display: block; pointer-events: none;
}
.ph-one-photo__items li {
  font-size: clamp(9.5px, .82vw, 13px); line-height: 1.38; font-weight: 500;
  color: var(--steel, #74797d); transition: color .25s ease;
}
.ph-one-photo__card:hover .ph-one-photo__items li,
.ph-one-photo__card[aria-pressed="true"] .ph-one-photo__items li { color: var(--black); }

/* Solo el conector corto ONE SYSTEM → PERFORMANCE MEDIBLE */
.ph-one-photo__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.ph-one-photo__connector { stroke: var(--yellow); stroke-width: 1.7; fill: none; }

/* Núcleo ONE SYSTEM (se vuelve amarillo al pasar por cualquier tarjeta) */
.ph-one-photo__core {
  position: absolute; left: 85.25%; top: 53%; transform: translate(-50%, -50%); z-index: 6;
  width: 12.5%; min-width: 86px; height: 79%; border-radius: 8px;
  background: linear-gradient(155deg, #171510, #0c0b09);
  border: 1px solid var(--yellow);
  box-shadow: 0 18px 36px rgba(17,19,21,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease;
}
.ph-one-photo__core.is-active {
  background: linear-gradient(155deg, #f7dd6e, var(--yellow)); border-color: var(--yellow); color: var(--black);
  box-shadow: 0 26px 48px -14px rgba(234,203,53,.55), 0 0 0 9px rgba(234,203,53,.12);
  transform: translate(-50%, -50%) scale(1.04);
}
.ph-one-photo__core strong { font-size: clamp(24px, 2.5vw, 42px); font-weight: 700; line-height: 1; letter-spacing: 0; }
.ph-one-photo__core small { margin-top: clamp(7px, 1.3svh, 12px); font-size: clamp(7px, .68vw, 10px); line-height: 1.2; letter-spacing: .28em; font-weight: 600; }

.ph-one-photo__output { position: absolute; left: calc(94.6% - 4.5px); top: 53%; transform: translateY(-50%); z-index: 6; display: flex; align-items: center; gap: 9px; }
.ph-one-photo__output-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); flex: none; box-shadow: 0 0 0 4px rgba(234,203,53,.18); }
.ph-one-photo__output span:last-child { font-size: clamp(7.5px, .68vw, 10.5px); line-height: 1.55; font-weight: 700; letter-spacing: .11em; color: var(--black); white-space: nowrap; }

/* ---- Entrada en abanico (solo con JS activo; sin JS, todo se ve normal) ---- */
html.js-anim .ph-one-photo__card {
  opacity: 0;
  transform: translateX(-42px) rotate(-6deg) scale(.93);
  transition: opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1), box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
html.js-anim .ph-one.is-visible .ph-one-photo__card { opacity: 1; transform: none; }
html.js-anim .ph-one.is-visible .ph-one-photo__card:hover,
html.js-anim .ph-one.is-visible .ph-one-photo__card[aria-pressed="true"] { transform: translateY(-8px); }
html.js-anim .ph-one.is-visible .ph-one-photo__card.is-dim { opacity: .55; }
/* especificidad más alta que la regla de arriba a propósito: solo así
   este transition-delay gana sobre el "transition:" (shorthand) que ya
   trae la regla html.js-anim .ph-one-photo__card de más arriba */
html.js-anim .ph-one-photo__card:nth-of-type(1) { transition-delay: .04s; }
html.js-anim .ph-one-photo__card:nth-of-type(2) { transition-delay: .13s; }
html.js-anim .ph-one-photo__card:nth-of-type(3) { transition-delay: .22s; }
html.js-anim .ph-one-photo__card:nth-of-type(4) { transition-delay: .31s; }
html.js-anim .ph-one-photo__card:nth-of-type(5) { transition-delay: .4s; }
html.js-anim .ph-one-photo__card:nth-of-type(6) { transition-delay: .49s; }

html.js-anim .ph-one-photo__core { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
html.js-anim .ph-one.is-visible .ph-one-photo__core {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity .6s ease .6s, transform .6s cubic-bezier(.22,.61,.36,1) .6s, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
html.js-anim .ph-one.is-visible .ph-one-photo__core.is-active { transform: translate(-50%, -50%) scale(1.04); }

html.js-anim .ph-one-photo__output { opacity: 0; transform: translateY(-50%) translateX(-10px); }
html.js-anim .ph-one.is-visible .ph-one-photo__output { opacity: 1; transform: translateY(-50%) translateX(0); transition: opacity .5s ease .78s, transform .5s ease .78s; }


html.js-anim .ph-one-photo__dots circle { opacity: 0; }
html.js-anim .ph-one.is-visible .ph-one-photo__dots circle { opacity: 1; transition: opacity .3s ease .92s, fill .2s ease, stroke .2s ease; }
html.js-anim .ph-one-photo__connector { opacity: 0; }
html.js-anim .ph-one.is-visible .ph-one-photo__connector { opacity: 1; transition: opacity .4s ease .95s; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .ph-one-photo__card,
  html.js-anim .ph-one-photo__core,
  html.js-anim .ph-one-photo__output,
  html.js-anim .ph-one-photo__lines .ph-one-photo__line,
  html.js-anim .ph-one-photo__dots circle,
  html.js-anim .ph-one-photo__connector {
    opacity: 1; transform: none; stroke-dashoffset: 0; transition: box-shadow .25s ease;
  }
  html.js-anim .ph-one-photo__core.is-active { transform: none; }
}

/* ---- Móvil: lista vertical simple ---- */
.ph-one-mobile { display: none; flex-direction: column; align-items: center; }
.ph-one-mobile__inputs { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; }
.ph-one-mobile__input {
  position: relative; width: 100%; min-height: 44px; margin-top: -4px; padding: 0 14px;
  border: 1px solid var(--grey); border-radius: 10px; overflow: hidden; background: rgba(17,19,21,.04);
  cursor: pointer; text-align: left; display: flex; align-items: center;
}
.ph-one-mobile__input:first-child { margin-top: 0; }
.ph-one-mobile__input[aria-pressed="true"] { border-color: var(--yellow); }
.ph-one-mobile__input img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .2; }
.ph-one-mobile__input[aria-pressed="true"] img { opacity: .44; }
.ph-one-mobile__tint { position: absolute; inset: 0; background: rgba(250,250,249,.55); }
.ph-one-mobile__text { position: relative; display: flex; flex-direction: column; padding: 12px 0; }
.ph-one-mobile__label { font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--black); }
.ph-one-mobile__items {
  margin-top: 3px; font-size: 9.5px; font-weight: 500; letter-spacing: .02em; color: var(--steel);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease;
}
.ph-one-mobile__input[aria-pressed="true"] .ph-one-mobile__items { max-height: 20px; opacity: 1; }
.ph-one-mobile__rail { position: absolute; right: 14px; top: 50%; width: 34px; height: 1px; background: rgba(17,19,21,.25); transform: translateY(-50%); }
.ph-one-mobile__input[aria-pressed="true"] .ph-one-mobile__rail { background: var(--yellow); }

.ph-one-mobile__connector { width: 1px; height: 27px; background: var(--grey); }
.ph-one-mobile__connector.is-active { background: var(--yellow); }
.ph-one-mobile__core {
  width: 80px; height: 70px; border-radius: 12px; border: 1px solid var(--grey);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--black);
}
.ph-one-mobile__core.is-active { background: var(--yellow); border-color: var(--yellow); }
.ph-one-mobile__core strong { font-size: 20px; }
.ph-one-mobile__core small { margin-top: 4px; font-size: 7.5px; font-weight: 700; letter-spacing: .12em; }
.ph-one-mobile__perf { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; opacity: 0; transition: opacity .3s ease; }
.ph-one-mobile__perf.is-active { opacity: 1; }

.ph-one__footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--grey); display: flex; align-items: center; justify-content: flex-end; }
.ph-one__next-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--black); border-bottom: 2px solid var(--yellow); padding-bottom: 4px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.ph-one__next-link:hover { color: #8a6f10; }

@media (max-width: 1279px) and (min-width: 900px) {
  .ph-one-photo__label { font-size: 10.3px; letter-spacing: .05em; }
  .ph-one-photo__card[data-node="6"] .ph-one-photo__label { font-size: 9.6px; }
}

@media (max-width: 899px) {
  .ph-one { padding: 48px 22px 50px; }
  .ph-one__grid { grid-template-columns: 1fr; gap: 34px; }
  .ph-one-photo { display: none; }
  .ph-one-mobile { display: flex; }
  .ph-one__footer { justify-content: flex-start; }
}

/* ==========================================================================
   PALM ONE — HERO
   Simplificaciones respecto al original (avisadas):
   1. Sin arrastre/pan horizontal del panel derecho (drag-to-pan) — queda fijo.
   2. La tarjeta flotante de la barrera aparece siempre arriba del punto,
      centrada, en vez del cálculo dinámico de si abre a la izquierda/derecha.
   3. Sin la coreografía de animación de entrada (aparición escalonada).
   ========================================================================== */

.ph-hero {
  display: grid;
  grid-template-columns: minmax(360px, 38.5%) minmax(0, 1fr);
  min-height: 100svh;
  position: relative;
  background: var(--black);
  overflow: hidden;
}

.ph-hero__bgwrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ph-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;
  opacity: 0; transition: opacity 1.8s ease;
}
.ph-hero__bg.is-active { opacity: 1; }
.ph-hero__bg-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,19,21,.04), rgba(17,19,21,0) 42%, rgba(17,19,21,.16)); }
.ph-hero__fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(250,250,249,1) 0%, rgba(250,250,249,1) 16%, rgba(250,250,249,.98) 24%,
    rgba(250,250,249,.82) 31%, rgba(250,250,249,.5) 39%, rgba(250,250,249,.2) 47%,
    rgba(250,250,249,.05) 53%, rgba(250,250,249,0) 58%);
}

.ph-hero__scroll {
  position: absolute; left: 22px; top: 52%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 5;
}
.ph-hero__scroll span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .22em; color: var(--steel); }
.ph-hero__scroll-line { width: 1px; height: 64px; background: var(--grey); }
.ph-hero__scroll-arrow { font-size: 12px; color: var(--steel); animation: heroScrollHint 3.2s ease-in-out infinite; }
@keyframes heroScrollHint { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }

.ph-hero__left {
  padding: clamp(92.5px, 10vh, 114.5px) 40px clamp(37.5px, 5vh, 53px) 88px;
  display: flex; flex-direction: column; justify-content: center; min-width: 0; position: relative; z-index: 2;
}
.ph-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(22px, 3.4vh, 33px); max-width: 560px; }
.ph-hero__eyebrow-line { width: 46px; height: 2px; background: var(--black); }
.ph-hero__eyebrow span:last-child { font-size: 12.5px; font-weight: 500; letter-spacing: .13em; color: var(--black); }

.ph-hero__title { margin: 0; max-width: 460px; font-size: clamp(32px, min(3.5vw, 6.4vh), 50px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.ph-hero__title-line { display: block; }
.ph-hero__title .is-yellow { color: var(--yellow); }

.ph-hero__lead-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin: 18px 0 0; }
.ph-hero__lead { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.5; color: #4a4e52; }

.ph-hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; margin: clamp(26px, 4vh, 38px) 0 0; max-width: 450px; }
.ph-hero__btn-primary {
  display: flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--black);
  font: 600 14px Manrope, sans-serif; padding: 12px 20px; border-radius: 6px; border: none; cursor: pointer;
}
.ph-hero__discover { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--black); }
.ph-hero__discover-circle { width: 26px; height: 26px; border: 1px solid var(--black); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }

/* ---- Panel derecho: montaña interactiva ---- */
.ph-hero__right { position: relative; overflow: hidden; min-height: 520px; z-index: 2; cursor: grab; touch-action: pan-y; }
.ph-hero__right.is-dragging { cursor: grabbing; }
.ph-hero__layer { position: absolute; inset: 0; width: 132%; will-change: transform; }
.ph-hero__path-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-hero__path-base { fill: none; stroke: rgba(17,19,21,.45); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ph-hero__path-dashed { fill: none; stroke: rgba(250,250,249,.55); stroke-width: 1; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.ph-hero__path-traveled { fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity .22s ease; }

.ph-hero__endpoint { position: absolute; top: 48.4%; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); z-index: 3; }
.ph-hero__endpoint-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ph-hero__endpoint-btn[aria-pressed="true"] .ph-hero__endpoint-dot { background: var(--yellow); box-shadow: none; }
.ph-hero__endpoint-btn[aria-pressed="true"] .ph-hero__endpoint-label { border-color: rgba(234,203,53,.75); }
.ph-hero__endpoint--start { left: 2.6%; }
.ph-hero__endpoint--end { right: 8%; flex-direction: row-reverse; }
.ph-hero__endpoint-dot {
  width: 13px; height: 13px; border-radius: 50%; background: transparent; border: 2px solid var(--white);
  box-shadow: 0 0 0 3px rgba(17,19,21,.35); flex: none; position: relative;
}
.ph-hero__endpoint-dot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(250,250,249,.35); }
.ph-hero__endpoint-dot--yellow { background: var(--yellow); border: none; box-shadow: none; position: relative; }
.ph-hero__endpoint-dot--yellow::before { display: none; }
.ph-hero__endpoint-dot--yellow::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(234,203,53,.5), rgba(234,203,53,0)); animation: destGlow 3.4s ease-in-out infinite; }
@keyframes destGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.ph-hero__endpoint-label {
  padding: 5px 8px; border-radius: 5px; background: rgba(17,19,21,.62); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border: 1px solid rgba(250,250,249,.16); font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  line-height: 1.35; color: var(--white); white-space: nowrap;
}
.ph-hero__endpoint-label--right { border-color: rgba(234,203,53,.4); text-align: right; }

.ph-hero__node { position: absolute; width: 1px; height: 1px; padding: 0; border: none; background: none; cursor: pointer; z-index: 2; }
.ph-hero__node[aria-pressed="true"] { z-index: 4; }
.ph-hero__node-dot {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1.5px rgba(250,250,249,.35), 0 0 0 4px rgba(17,19,21,.45);
  transition: background .2s ease, box-shadow .2s ease, width .2s ease, height .2s ease;
}
.ph-hero__node[aria-pressed="true"] .ph-hero__node-dot {
  width: 11px; height: 11px; background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(234,203,53,.28), 0 0 0 5px rgba(17,19,21,.45);
}
.ph-hero__node-label {
  position: absolute; padding: 4px 7px; border-radius: 5px; background: rgba(17,19,21,.6); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  font-size: 10.5px; font-weight: 500; letter-spacing: .03em; line-height: 1.25; color: var(--white);
  white-space: nowrap; border: 1px solid rgba(250,250,249,.16); transition: border-color .2s ease;
}
.ph-hero__node[aria-pressed="true"] .ph-hero__node-label { border-color: rgba(234,203,53,.75); }

/* Posiciones exactas de cada etiqueta respecto a su punto (del prototipo original) */
.ph-hero__node-label--1 { right: calc(100% + 11px); top: 50%; transform: translateY(-50%); }
.ph-hero__node-label--2 { right: calc(100% + 10px); top: calc(100% + 8px); }
.ph-hero__node-label--3 { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }
.ph-hero__node-label--4 { left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); }
.ph-hero__node-label--5 { left: calc(100% + 10px); bottom: calc(100% + 4px); }
.ph-hero__node-label--6 { right: calc(100% + 10px); bottom: calc(100% + 5px); }

/* Tarjeta flotante de detalle */
.ph-hero__tooltip {
  position: absolute; box-sizing: border-box; width: min(216px, 36%);
  background: rgba(17,19,21,.92); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border: 1px solid rgba(250,250,249,.14);
  border-radius: 8px; padding: 12px 13px 11px; min-height: 116px; box-shadow: 0 12px 30px rgba(0,0,0,.34);
  pointer-events: none; z-index: 6; display: none;
}
.ph-hero__tooltip.is-visible { display: block; pointer-events: auto; }
.ph-hero__tooltip-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--yellow); }
.ph-hero__tooltip-barrier { font-size: 10px; font-weight: 600; letter-spacing: .13em; color: rgba(250,250,249,.72); }
.ph-hero__tooltip-divider { width: 16px; height: 1px; background: rgba(250,250,249,.2); }
.ph-hero__tooltip-count { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: rgba(250,250,249,.5); }
.ph-hero__tooltip-title { color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.25; }
.ph-hero__tooltip-desc { margin: 7px 0 10px; font-size: 12px; line-height: 1.45; color: rgba(250,250,249,.76); }
.ph-hero__tooltip-cta {
  font: 500 10.5px Manrope, sans-serif; color: var(--yellow); display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer; min-height: 32px;
}

@media (max-width: 899px) {
  .ph-hero { grid-template-columns: 1fr; min-height: auto; }
  .ph-hero__bg { object-position: 58% center; }
  .ph-hero__fade { background: linear-gradient(180deg, rgba(250,250,249,1) 0%, rgba(250,250,249,.98) 36%, rgba(250,250,249,.7) 52%, rgba(250,250,249,.08) 72%, rgba(250,250,249,0) 82%); }
  .ph-hero__scroll { display: none; }
  .ph-hero__left { padding: 104px 22px 48px; }
  .ph-hero__eyebrow { max-width: none; }
  .ph-hero__title { max-width: none; font-size: clamp(32px, 6.6vw, 46px); }
  .ph-hero__lead { max-width: none; }
  .ph-hero__lead-row { gap: 10px 20px; }
  .ph-hero__actions { flex-wrap: wrap; max-width: none; margin-top: 22px; }
  .ph-hero__right { min-height: 520px; }
  .ph-hero__endpoint--end { right: 26%; }
  /* En móvil se ajustan las etiquetas de la primera y última barrera para que no se corten */
  .ph-hero__node-label--1 { left: calc(100% + 10px); right: auto; top: 50%; transform: translateY(-50%); }
  .ph-hero__node-label--6 { right: calc(100% + 10px); bottom: calc(100% + 5px); }
  .ph-hero__node-label--5 { left: auto; right: calc(100% + 10px); bottom: calc(100% + 4px); }
  .ph-hero__tooltip { left: 38% !important; top: 7% !important; transform: translate(-50%, 0) !important; }
}

/* ==========================================================================
   CONVERSEMOS — scrim, panel deslizante y buscador
   ========================================================================== */

.ph-conv-scrim {
  position: fixed; inset: 0; z-index: 900; background: rgba(17,19,21,.55);
  opacity: 0; display: none; transition: opacity .25s ease;
}
.ph-conv-scrim.is-open { opacity: 1; display: block; }

.ph-conv-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 910;
  width: min(438px, 92vw); box-sizing: border-box; background: var(--paper, #fff);
  border-left: 1px solid var(--grey); box-shadow: none;
  transform: translateX(101%); visibility: hidden;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
  display: flex; flex-direction: column; overflow: hidden;
}
/* La sombra y la visibilidad solo existen con el panel abierto: cerrado, su sombra se asomaba como una franja oscura en el borde derecho */
.ph-conv-panel.is-open { transform: translateX(0); visibility: visible; box-shadow: -24px 0 60px rgba(17,19,21,.28); transition-delay: 0s; }

.ph-conv-panel__mountain { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(308px, 30vh, 418px); pointer-events: none; overflow: hidden; }
.ph-conv-panel__mountain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; filter: grayscale(.75) saturate(.22) contrast(.95) brightness(.92); opacity: .46; }
.ph-conv-panel__mountain-fade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 0%, rgba(250,250,249,.92) 18%, rgba(250,250,249,.55) 46%, rgba(250,250,249,.14) 74%, rgba(250,250,249,0) 100%); }
.ph-conv-panel__mountain-dark { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(17,19,21,0) 0%, rgba(17,19,21,.55) 55%, rgba(17,19,21,.85) 100%); }
.ph-conv-panel__mountain-tag { position: absolute; left: 34px; right: 34px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; }
.ph-conv-panel__mountain-tag span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(250,250,249,.82); }
.ph-conv-panel__mountain-tag .is-yellow { color: var(--yellow); }

.ph-conv-panel__inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ph-conv-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 28px 0; }
.ph-conv-panel__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ph-conv-panel__kicker-line { width: 22px; height: 1.5px; background: var(--black); }
.ph-conv-panel__kicker span:last-child { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; }
.ph-conv-panel__head h2 { margin: 0; font-size: 24px; line-height: 1.14; letter-spacing: -.025em; font-weight: 700; }
.ph-conv-panel__close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--steel); cursor: pointer; padding: 0; min-width: 44px; min-height: 44px; }

.ph-conv-panel__progress { padding: 14px 28px 0; }
.ph-conv-panel__progress span { font-size: 11.5px; font-weight: 600; letter-spacing: .13em; color: var(--steel); }
.ph-conv-panel__progress-track { margin-top: 10px; height: 1px; background: var(--grey); position: relative; }
.ph-conv-panel__progress-fill { position: absolute; inset: 0 auto 0 0; width: 33.3%; height: 1px; background: var(--yellow); transition: width .3s ease; }
.ph-conv-panel__progress.is-hidden { display: none; }

.ph-conv-panel__body { flex: 1; overflow-y: auto; padding: 16px 28px 26px; }

/* ---- Tarjetas de opción reutilizables (steps 1 y 2) ---- */
.ph-conv-option {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--grey); background: #fff;
  color: var(--black); font-size: 14.5px; font-weight: 550; text-align: left; cursor: pointer;
}
.ph-conv-option[aria-pressed="true"] { border-color: var(--yellow); background: rgba(234,203,53,.08); }
.ph-conv-option svg { flex: none; }
.ph-conv-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-conv-option-list { display: grid; gap: 7px; }

.ph-conv-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
  margin-top: 20px; background: var(--yellow); color: var(--black); font: 600 14px Manrope, sans-serif;
  border: none; border-radius: 8px; cursor: pointer;
}
.ph-conv-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.ph-conv-btn-primary.is-dark { background: var(--black); color: var(--white); }
.ph-conv-btn-back {
  display: block; width: 100%; text-align: center; margin-top: 10px; padding: 12px 0;
  background: none; border: none; font-size: 14.5px; font-weight: 600; color: var(--steel); cursor: pointer;
}

.ph-conv-step__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--steel); }
.ph-conv-step__question { font-size: 16px; font-weight: 600; margin: 18px 0 10px; }

/* Step 3: formulario */
.ph-conv-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ph-conv-tag { font-size: 12.5px; letter-spacing: .04em; padding: 5px 9px; background: #fff; border: 1px solid var(--grey); border-left: 2px solid var(--yellow); border-radius: 6px; color: var(--black); }
.ph-conv-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; margin-top: 18px; }
.ph-conv-field { min-width: 0; }
.ph-conv-field input, .ph-conv-field textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ph-conv-field { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--steel); }
.ph-conv-field--wide { grid-column: 1 / -1; margin-top: 15px; }
.ph-conv-field input, .ph-conv-field textarea {
  border: 1px solid var(--grey); border-radius: 8px; padding: 11px 12px; font: 400 14px Manrope, sans-serif;
  color: var(--black); background: #fff;
}
.ph-conv-field textarea { line-height: 1.5; resize: vertical; }
.ph-conv-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #8a5a2a; min-height: 16px; }
.ph-conv-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.ph-conv-divider span:first-child, .ph-conv-divider span:last-child { flex: 1; height: 1px; background: var(--grey); }
.ph-conv-divider span:nth-child(2) { font-size: 12.5px; color: var(--steel); flex: none; }
.ph-conv-disclaimer { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--steel); }
.ph-conv-required-note { margin: 12px 0 0; font-size: 11.5px; color: var(--steel); }

/* Consentimiento de privacidad (necesario y opcional) */
.ph-conv-consent-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--grey); display: flex; flex-direction: column; gap: 16px; }
.ph-conv-consent-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--steel); margin-bottom: 10px; }
.ph-conv-consent-row { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ph-conv-consent-row input[type="checkbox"] {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.ph-conv-consent-box {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--grey); border-radius: 6px; background: #fff; transition: background .2s ease, border-color .2s ease;
}
.ph-conv-consent-box svg { opacity: 0; transition: opacity .15s ease; }
.ph-conv-consent-row input:checked + .ph-conv-consent-box { border-color: var(--yellow); background: var(--yellow); }
.ph-conv-consent-row input:checked + .ph-conv-consent-box svg { opacity: 1; }
.ph-conv-consent-text { flex: 1; font-size: 12.5px; line-height: 1.55; color: var(--steel); padding-top: 2px; }
.ph-conv-consent-text a { color: inherit; text-decoration: underline; }
.ph-conv-consent-withdraw { margin: 0; font-size: 12px; line-height: 1.5; color: var(--steel); }
.ph-conv-consent-withdraw a { color: inherit; text-decoration: underline; }

/* Confirmación */
.ph-conv-check {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--yellow); box-shadow: 0 8px 22px rgba(17,19,21,.08); margin-bottom: 20px;
}
.ph-conv-confirm-title { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--black); }
.ph-conv-confirm-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--steel); }
.ph-conv-hr { height: 1px; background: var(--grey); margin: 26px 0; }
.ph-conv-confirm-q { font-size: 17px; font-weight: 600; }

/* Transición WhatsApp */
.ph-conv-wa-message { margin-top: 20px; background: #fff; border: 1px solid var(--grey); border-left: 2px solid var(--yellow); border-radius: 2px; padding: 16px 17px; box-shadow: 0 8px 22px rgba(17,19,21,.06); }
.ph-conv-wa-label { font-size: 11.5px; font-weight: 600; letter-spacing: .13em; color: var(--steel); margin-bottom: 10px; }
.ph-conv-wa-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--black); }
.ph-conv-wa-action { margin-top: 22px; }
.ph-conv-wa-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--grey); background: #fff; color: var(--black);
  font: 600 13.5px Manrope, sans-serif; cursor: not-allowed; opacity: .55; text-decoration: none;
}
.ph-conv-wa-note { margin: 8px 0 0; font-size: 12.5px; color: var(--steel); }

/* Otros canales */
.ph-conv-channel-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--grey); background: #fff; color: var(--black); font-size: 14.5px; font-weight: 550; text-decoration: none; }
.ph-conv-channel-tagline { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }

@media (max-width: 899px) {
  .ph-conv-panel { width: 100vw; }
  .ph-conv-panel__head, .ph-conv-panel__progress, .ph-conv-panel__body { padding-left: 22px; padding-right: 22px; }
  .ph-conv-panel__mountain-tag { left: 22px; right: 22px; }
  .ph-conv-option-grid { grid-template-columns: 1fr; }
  .ph-conv-form-grid { grid-template-columns: 1fr; }
}

/* En móvil, las secciones no fuerzan pantalla completa (para evitar
   espacios vacíos raros cuando el contenido es corto en una pantalla
   angosta) — solo aplica el efecto de "pantalla completa" en escritorio. */
@media (max-width: 899px) {
  .ph-realidad, .ph-gap, .ph-one, .ph-scale, .ph-insights, .ph-about, .ph-start, .ph-ctafinal {
    min-height: auto;
  }
}

/* ---------- SCROLL-SNAP: DESACTIVADO POR AHORA ----------
   Se probó y generaba conflicto con los botones que hacen scroll automático
   (quedaban a medio camino entre dos secciones). Se deja documentado aquí
   por si se retoma más adelante, una vez que todas las secciones estén
   ajustadas para caber en una sola pantalla de forma más consistente.

@media (min-width: 900px) {
  html { scroll-snap-type: y mandatory; }
  .ph-hero, .ph-realidad, .ph-gap, .ph-one, .ph-scale,
  .ph-insights, .ph-about, .ph-start, .ph-ctafinal {
    scroll-snap-align: start;
  }
}
*/


/* ---------- Pulido móvil (nitidez y orden) ---------- */
@media (max-width: 539px) {
  /* 5 tarjetas en 2 columnas: la última ocupa todo el ancho para no quedar huérfana */
  .ph-realidad__cards .ph-card:last-child:nth-child(odd) {
    grid-column: 1 / -1; min-height: 0;
    display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    column-gap: 18px; align-items: center;
  }
  .ph-realidad__cards .ph-card:last-child:nth-child(odd) .ph-card__img { grid-row: 1 / span 3; }
  .ph-realidad__cards .ph-card:last-child:nth-child(odd) .ph-card__name { margin-top: 0; }
  .ph-realidad__cards .ph-card:last-child:nth-child(odd) .ph-card__arrow { justify-self: end; }
}



/* ---------- Pulido móvil/tablet: texto mínimo legible (nitidez) ---------- */
@media (max-width: 1023px) {
  .ph-hero__endpoint-label { font-size: 11px !important; }
  .ph-hero__endpoint-label.ph-hero__endpoint-label--right { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--1 { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--2 { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--3 { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--4 { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--5 { font-size: 11px !important; }
  .ph-hero__node-label.ph-hero__node-label--6 { font-size: 11px !important; }
  .ph-realidad__status span { font-size: 11.5px !important; }
  .ph-gap__eyebrow span { font-size: 11.5px !important; }
  .ph-gap__legend-title { font-size: 11.5px !important; }
  .ph-one-mobile__label { font-size: 11.5px !important; }
  .ph-one-mobile__core small { font-size: 9px !important; }
  .ph-cap__eyebrow span { font-size: 11.5px !important; }
  .ph-cap__need-kicker { font-size: 11.5px !important; }
  .ph-cap__goal-kicker { font-size: 11.5px !important; }
  .ph-scale__mobile-tag { font-size: 11.5px !important; }
  .ph-scale__impact-note-mobile span { font-size: 11.5px !important; }
  .ph-scale__panel-n { font-size: 11.5px !important; }
  .ph-scale__panel-name { font-size: 11.5px !important; }
  .ph-results__kicker span { font-size: 11.5px !important; }
  .ph-results__num { font-size: 11.5px !important; }
  .ph-ctafinal__signature span { font-size: 11.5px !important; }
}

/* Escritorio: las tarjetas de Resultados se miden por la altura de la pantalla para que la sección quepa sin encogerse demasiado */
@media (min-width: 1180px) {
  .ph-results__card { aspect-ratio: auto; height: clamp(250px, 45svh, 520px); }
  .ph-results__grid { margin-top: clamp(22px, 4svh, 40px); }
}


/* ---------- Cómo activamos capacidad: el título no debe "comerse" la imagen ----------
   La foto de fondo (ciudad / equipo) se estiraba hasta quedar detrás del título en
   pantallas anchas. Se pone un "halo" crema detrás del bloque del título que lo sigue
   donde quede (no depende de la altura de pantalla), y el fondo es el mismo crema
   de la Homepage. */
.ph-cap__head-main { position: relative; z-index: 1; }
.ph-cap__head-main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -56px -140px -30px -96px;
  background: radial-gradient(ellipse 78% 74% at 36% 50%, #FAFAF9 0%, #FAFAF9 58%, rgba(250,250,249,0) 100%);
}
@media (max-width: 1179px) { .ph-cap__head-main::before { inset: -30px -40px -16px -48px; } }
.ph-cap__bg { opacity: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
/* La caja del fondo mide exactamente lo que la foto (sin bordes duros): se desvanece arriba y abajo */
.ph-cap__bg { inset: auto; left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: auto; aspect-ratio: 2172 / 724; transform: translateY(-50%); background-size: 100% 100%; }
/* Móvil/tablet: al llegar desde el menú, el eyebrow y el título quedaban detrás del header fijo */
@media (max-width: 1179px) { .ph-cap { padding-top: 86px; } }


/* ==========================================================================
   HERO — puentesito (ruta) en amarillo
   Solo cambia el color/estilo de la línea: punteada amarilla con brillo suave.
   Fondos, posiciones, etiquetas y rotación de imágenes se mantienen igual.
   ========================================================================== */
.ph-hero__path-base {
  stroke: var(--yellow); stroke-width: 8; stroke-linecap: round; opacity: .28; filter: blur(5px);
}
.ph-hero__path-dashed {
  stroke: var(--yellow); stroke-width: 2.6; stroke-dasharray: 7 6; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(234,203,53,.9)) drop-shadow(0 1px 1px rgba(17,19,21,.45));
}
.ph-hero__path-traveled { stroke-width: 2.4; }


/* ==========================================================================
   HERO — etiquetas y puntos claros (estilo de Fiore)
   Solo color/estilo: no cambia posiciones ni la rotación de imágenes.
   ========================================================================== */
.ph-hero__endpoint { gap: 10px; }
.ph-hero__endpoint-dot {
  width: 13px; height: 13px; background: var(--white); border: 3px solid var(--yellow);
  box-shadow: 0 0 0 3px var(--white), 0 0 18px rgba(234,203,53,.7);
}
.ph-hero__endpoint-dot::before { display: none; }
.ph-hero__endpoint-btn[aria-pressed="true"] .ph-hero__endpoint-dot { background: var(--yellow); box-shadow: 0 0 0 3px var(--white), 0 0 18px rgba(234,203,53,.8); }
.ph-hero__endpoint-dot--yellow {
  width: 15px; height: 15px; background: var(--yellow); border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--yellow); position: relative;
}
.ph-hero__endpoint-dot--yellow::after { inset: -9px; background: radial-gradient(closest-side, rgba(234,203,53,.72), rgba(234,203,53,0)); }
.ph-hero__endpoint-label {
  padding: 9px 14px; border-radius: 6px; background: rgba(250,250,249,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(17,19,21,.12); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.4; color: var(--black); box-shadow: 0 8px 22px rgba(17,19,21,.14);
}
.ph-hero__endpoint-btn[aria-pressed="true"] .ph-hero__endpoint-label { border-color: rgba(234,203,53,.95); }
.ph-hero__endpoint-label--right {
  padding: 9px 13px; background: rgba(234,203,53,.9); border: 1px solid rgba(17,19,21,.18);
  letter-spacing: .18em; text-align: left; box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.ph-hero__node-dot {
  width: 11px; height: 11px; background: var(--white); border: 2.5px solid var(--yellow);
  box-shadow: 0 0 0 2.5px rgba(250,250,249,.92), 0 2px 8px rgba(17,19,21,.32);
}
.ph-hero__node[aria-pressed="true"] .ph-hero__node-dot {
  width: 14px; height: 14px; background: var(--white);
  box-shadow: 0 0 0 3px rgba(250,250,249,.95), 0 0 15px rgba(234,203,53,.8);
}
.ph-hero__node-label {
  padding: 5px 11px; border-radius: 6px; background: rgba(250,250,249,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.25; color: var(--black);
  box-shadow: 0 7px 18px rgba(17,19,21,.16); border: 1px solid rgba(17,19,21,.13);
}
.ph-hero__node[aria-pressed="true"] .ph-hero__node-label { border-color: rgba(234,203,53,.95); }
@media (max-width: 767px) {
  .ph-hero__node-label { padding: 4px 8px; box-shadow: 0 5px 14px rgba(17,19,21,.16); }
  .ph-hero__endpoint-label { padding: 7px 10px; }
  .ph-hero__endpoint-label--right { letter-spacing: .12em; }
}

/* ==========================================================================
   MÓVIL — ONE SYSTEM y SCALE con el mismo lenguaje visual de escritorio
   ========================================================================== */
@media (max-width: 899px) {
  /* ONE SYSTEM: tarjetas fotográficas (como escritorio) en 2 columnas escalonadas */
  .ph-one-mobile__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; padding-bottom: 20px; align-items: start; }
  .ph-one-mobile__input {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 226px; margin: 0; padding: 16px 10px 0 14px;
    border: 1px solid rgba(116,121,125,.25); border-radius: 8px; background: rgba(250,250,249,.58);
    box-shadow: 0 10px 24px rgba(17,19,21,.055);
    transition: transform .3s ease, box-shadow .3s ease, border-color .25s ease, background-color .25s ease;
  }
  .ph-one-mobile__input:nth-child(even) { transform: translateY(20px); }
  .ph-one-mobile__input[aria-pressed="true"] {
    background: #e9e8e3; border-color: var(--yellow); z-index: 2;
    box-shadow: 0 16px 32px rgba(17,19,21,.1), 0 0 16px rgba(234,203,53,.16);
  }
  .ph-one-mobile__input img {
    inset: auto; left: 0; right: 0; bottom: 8px; width: 100%; height: 48%;
    object-fit: cover; mix-blend-mode: multiply; filter: grayscale(.12) contrast(.98); opacity: .92;
  }
  .ph-one-mobile__input[aria-pressed="true"] img { opacity: 1; filter: contrast(1.06) saturate(1.3); }
  .ph-one-mobile__tint {
    background: linear-gradient(180deg, rgba(250,250,249,.98) 0%, rgba(250,250,249,.92) 39%, rgba(250,250,249,.08) 68%, rgba(250,250,249,.4) 100%);
  }
  .ph-one-mobile__input::after {
    content: "0" attr(data-node); position: absolute; left: 14px; bottom: 9px; z-index: 1;
    font-size: 20px; font-weight: 500; line-height: 1; color: var(--black); pointer-events: none;
  }
  .ph-one-mobile__input[aria-pressed="true"]::after { color: #8a6f10; }
  .ph-one-mobile__text { padding: 0; }
  .ph-one-mobile__label { font-size: 11.5px !important; line-height: 1.2; letter-spacing: 0; }
  .ph-one-mobile__label::before { content: ''; display: block; width: 18px; height: 2px; margin-bottom: 9px; background: var(--yellow); transition: width .25s ease; }
  .ph-one-mobile__input[aria-pressed="true"] .ph-one-mobile__label::before { width: 28px; }
  .ph-one-mobile__items { max-height: none !important; opacity: 1 !important; margin: 8px 0 0; padding: 0; list-style: none; display: block; }
  .ph-one-mobile__items li { font-size: 11.5px; line-height: 1.4; font-weight: 500; color: var(--steel, #74797d); }
  .ph-one-mobile__input[aria-pressed="true"] .ph-one-mobile__items li { color: var(--black); }
  .ph-one-mobile__rail { display: none; }
  .ph-one-mobile__connector { height: 30px; }
  .ph-one-mobile__core {
    width: 104px; height: 86px; border-radius: 8px; border: 1px solid var(--yellow);
    background: linear-gradient(155deg, #171510, #0c0b09); color: var(--white);
    box-shadow: 0 18px 36px rgba(17,19,21,.18); transition: background .35s ease, color .35s ease, box-shadow .35s ease;
  }
  .ph-one-mobile__core.is-active { background: linear-gradient(155deg, #f7dd6e, var(--yellow)); color: var(--black); box-shadow: 0 26px 48px -14px rgba(234,203,53,.55), 0 0 0 8px rgba(234,203,53,.12); }
  .ph-one-mobile__core strong { font-size: 30px; }
  .ph-one-mobile__core small { margin-top: 8px; letter-spacing: .28em; }
  .ph-one-mobile__perf { margin-top: 12px; }

  /* SCALE: la escalera S-C-A-L-E de escritorio, compacta */
  .ph-scale__rail-row { display: block; margin-top: 22px; }
  .ph-scale__impact-note { display: none; }
  .ph-scale__stair { height: 250px; }
  .ph-scale__stair-svg { height: 210px; }
  .ph-scale__node { width: 62px; min-height: 0; align-items: center; text-align: center; }
  .ph-scale__node-letter { font-size: 28px; margin-bottom: 6px; }
  .ph-scale__node-dot { width: 11px; height: 11px; }
  .ph-scale__node[aria-pressed="true"] .ph-scale__node-dot { width: 13px; height: 13px; box-shadow: 0 0 0 5px rgba(234,203,53,.18); }
  .ph-scale__node-label, .ph-scale__node-body { display: none; }
  .ph-scale__node-name { margin-top: 8px; font-size: 11.5px; padding: 1px 5px; }
  .ph-scale__node[aria-pressed="true"] .ph-scale__node-name { color: var(--yellow); }
  .ph-scale__mobile-list { margin-top: 6px; }
  .ph-scale__mobile-item { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ph-one-mobile__inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; row-gap: 32px; }
  .ph-one-mobile__input:nth-child(even) { transform: none; }
  .ph-one-mobile__input:nth-child(3n+2) { transform: translateY(20px); }
}

/* ---------- THE PERFORMANCE GAP en móvil: se muestran los detalles de la gráfica ---------- */
@media (max-width: 899px) {
  .ph-gap__chartwrap { gap: 30px; }
  .ph-gap__chart { margin: 44px 0 30px; }
  .ph-gap__chart-labels { display: block; }
  .ph-gap__chart-label { gap: 3px; }
  .ph-gap__chart-icon { width: 15px; height: 15px; }
  .ph-gap__chart-icon svg { width: 14px; height: 14px; }
  .ph-gap__chart-label span:last-child { font-size: 9.5px; letter-spacing: 0; }
  .ph-gap__chart-time { font-size: 9px; letter-spacing: .16em; }
  .ph-gap__chart svg text { font-size: 24px !important; }
}
@media (max-width: 359px) {
  .ph-gap__chart-label span:last-child { font-size: 8.5px; }
}
@media (max-width: 899px) {
  .ph-gap__chart-label--w:nth-child(6) { align-items: flex-start; transform: translate(-12%, 10px); }
  .ph-gap__chart-label--w:nth-child(6) .ph-gap__chart-icon { margin-left: 2px; }
  .ph-gap__chart-time { top: auto !important; bottom: -18px; left: 50% !important; transform: translateX(-50%); }
}
@media (max-width: 899px) {
  .ph-gap__chart-label--w:nth-child(6) span:last-child { white-space: normal; max-width: 44px; text-align: left; line-height: 1.15; }
}
@media (max-width: 359px) {
  .ph-gap__chart-label--w:nth-child(6) span:last-child { max-width: 36px; }
}

/* Hero (puente): que las etiquetas "Tecnología aislada" y "Decisiones lentas" no se apilen en teléfono */
@media (max-width: 1023px) {
  .ph-hero__node-label--5 { white-space: normal; width: min-content; max-width: 78px; line-height: 1.15; text-align: left; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .ph-hero__node-label--5 { left: calc(100% + 10px); right: auto; bottom: calc(100% + 4px); }
}
@media (max-width: 599px) {
  .ph-hero__node-label--4 { left: 50%; transform: translateX(-72%); }
  .ph-hero__node-label.ph-hero__node-label--5 {
    left: calc(100% + 4px); right: auto; top: calc(100% - 6px); bottom: auto;
    max-width: 66px; padding: 4px 6px; font-size: 10.5px !important;
  }
}
@media (max-width: 359px) {
  .ph-hero__node-label--4 { transform: translateX(-62%); }
}
@media (max-width: 339px) {
  .ph-hero__node-label--4 { transform: translateX(-80%); }
  .ph-hero__node-label.ph-hero__node-label--5 { max-width: 58px; font-size: 9.5px !important; }
}

/* ---------- CÓMO ACTIVAMOS CAPACIDAD en móvil/tablet: la foto queda DETRÁS de las tarjetas, como en escritorio ---------- */
.ph-cap__flank { display: none; }
@media (max-width: 899px) {
  .ph-cap__bg { display: none; }
  .ph-cap__need-row, .ph-cap__branches { position: relative; z-index: 3; }
  .ph-cap__flank {
    display: block; position: absolute; z-index: -1; pointer-events: none;
    width: 82vw; aspect-ratio: 782 / 724;
    background: url(/assets/images/cap-section-bg-v2.jpg) no-repeat; background-size: 278% auto;
  }
  .ph-cap__flank--l { left: -22px; top: -104px; background-position: 0 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
  .ph-cap__flank--r { right: -22px; bottom: -112px; background-position: 100% 50%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-image: linear-gradient(to top, transparent 0, #000 30%); }
  /* Tarjetas de vidrio: la foto se transparenta un poco detrás */
  .ph-cap__path { background: rgba(252,252,250,.8); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
  .ph-cap__path--warm { background: rgba(251,247,236,.8); }
  .ph-cap__close { position: relative; z-index: 3; }
}
@media (max-width: 639px) {
  .ph-cap__flank--l { left: -16px; }
  .ph-cap__flank--r { right: -16px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .ph-cap__flank { width: 62vw; }
}

/* ---------- CÓMO ACTIVAMOS CAPACIDAD en teléfono: una columna, mismos elementos que en PC ---------- */
@media (max-width: 767px) {
  .ph-cap__paths { grid-template-columns: 1fr; gap: 16px; }
  .ph-cap__path { padding: 20px 18px 18px; margin-inline: 24px; background: rgba(252,252,250,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .ph-cap__path--warm { background: rgba(251,247,236,.76); }
  .ph-cap__path-body { display: block; font-size: 13.5px; margin-top: 8px; }
  .ph-cap__path-title { font-size: 21px; }
  .ph-cap__path-name { font-size: 10.5px; }
  .ph-cap__path-steps { margin: 14px 0 16px; gap: 10px; }
  .ph-cap__path-step-label { font-size: 13px; }

  /* conectores: una sola línea vertical (necesidad → tarjetas → objetivo) */
  .ph-cap__branches { height: 32px; }
  .ph-cap__branch--l, .ph-cap__branch--r, .ph-cap__branch-arrow--r { display: none; }
  .ph-cap__branch-stem { height: 24px; }
  .ph-cap__branch-arrow--l { left: 50%; border-top-color: var(--black); }
  .ph-cap__merge { height: 32px; }
  .ph-cap__merge-r { display: none; }
  .ph-cap__merge-l { left: 50%; right: auto; width: 0; border: 0; border-left: 2px solid var(--black); border-radius: 0; bottom: 7px; }

  /* la foto: mitad izquierda asoma detrás de la tarjeta 01 (y arriba), mitad derecha detrás de la tarjeta 02 (y abajo) */
  .ph-cap__flank { width: 100vw; }
  .ph-cap__flank--l { left: -16px; top: -60px; }
  .ph-cap__flank--r { right: -16px; bottom: -84px; }
}

/* ==========================================================================
   HERO móvil/tablet vertical — el puente completo en una sola pantalla
   Antes el hero medía ~1040px y el puente quedaba cortado al final; ahora el
   hero ocupa la altura de la pantalla y el puente se adapta al espacio libre.
   Para volver al diseño anterior, borrar solo este bloque.
   ========================================================================== */
@media (max-width: 899px) and (orientation: portrait) {
  .ph-hero { min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .ph-hero__left { padding: 90px 22px 14px; }
  .ph-hero__eyebrow { margin-bottom: 16px; }
  .ph-hero__actions { margin-top: 18px; }
  .ph-hero__right { min-height: 340px; }
}

/* Pantallas de teléfono más bajas (≤780px de alto): texto un poco más compacto
   para que el puente también quepa completo sin hacer scroll */
@media (max-width: 899px) and (max-height: 780px) and (orientation: portrait) {
  .ph-hero__left { padding-top: 82px; padding-bottom: 8px; }
  .ph-hero__eyebrow { margin-bottom: 12px; }
  .ph-hero__title { font-size: 29px; }
  .ph-hero__lead-row { margin-top: 12px; gap: 8px 18px; }
  .ph-hero__lead { font-size: 14px; line-height: 1.4; }
  .ph-hero__actions { margin-top: 12px; }
  .ph-hero__right { min-height: 300px; }
}
/* El rótulo amarillo "Performance del negocio" se sube un poco para no tapar "Falta de adopción" */
@media (max-width: 420px) {
  .ph-hero__endpoint--end .ph-hero__endpoint-label { transform: translateY(-12px); }
}

/* Resultados que se sostienen — fotos más claras (pedido del equipo).
   Se sube la luz de la imagen y se suaviza el degradado oscuro de abajo,
   manteniendo legible el texto blanco. Para volver atrás, borrar este bloque. */
.ph-results__photo img { filter: brightness(1.22) contrast(1.02) saturate(1.12); }
.ph-results__photo::after {
  background: linear-gradient(180deg, rgba(17,19,21,0) 38%, rgba(17,19,21,.42) 62%, rgba(17,19,21,.86) 100%);
}
.ph-results__name, .ph-results__desc, .ph-results__num { text-shadow: 0 1px 10px rgba(17,19,21,.6); }

/* ==========================================================================
   HERO escritorio — el puente completo a la vista (sin arrastrar)
   Antes la capa medía 132% del panel y el final del puente ("Performance del
   negocio") quedaba fuera de pantalla hasta arrastrar. Ahora cabe completa.
   Para volver al diseño anterior, borrar solo este bloque.
   ========================================================================== */
@media (min-width: 900px) {
  .ph-hero__layer { width: 100%; }
  .ph-hero__right { cursor: default; }
  /* "Procesos desconectados" ahora va a la derecha de su punto: a la izquierda se cortaba con el borde del panel */
  .ph-hero__node-label--1 { right: auto; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
}