/* ==========================================================================
   Wëmark — Área de clientes: pantalla de acceso y plantilla de propuesta (.pp-*)
   Solo se carga en /clientes/ y /clients/. Usa los tokens de style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Acceso (pantalla oscura, como /contact/)
   -------------------------------------------------------------------------- */
.clients { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 15px; align-items: start; align-content: start; min-height: 100vh; min-height: 100svh; padding: 210px var(--gutter) var(--section-bottom); }
.clients__main { display: flex; flex-direction: column; gap: 15px; max-width: 420px; }
.clients__main .body { max-width: 320px; }
.clients__form { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.clients__field { display: flex; flex-direction: column; gap: 8px; }
.clients__field label { font-size: 14px; line-height: 1; color: rgba(255, 255, 255, 0.6); }
.clients__field input { width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--radius-card); background: var(--color-grey-input); color: var(--color-white); font: inherit; font-size: 16px; line-height: 1.4; outline: none; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.clients__field input:focus-visible { border-color: var(--color-white); background: #1c1c1c; }
.clients.is-error #ca-pass { border-color: #ff8a80; }
.clients__error { min-height: 19px; font-size: 14px; line-height: 1.35; color: #ff8a80; }
.clients__form .btn { align-self: flex-start; padding: 14px 26px; }
.clients__form .btn:focus-visible, .pp :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.clients__form .btn:disabled { opacity: 0.5; pointer-events: none; }
.clients__wait { display: none; }
.clients.is-busy .clients__go { display: none; }
.clients.is-busy .clients__wait { display: inline; }
@media (max-width: 809px) {
  .clients { grid-template-columns: 1fr; gap: 24px; padding: 130px var(--gutter) 80px; }
}

/* Con la propuesta abierta desaparece el sitio (barra, menú, acceso y pie): queda solo la propuesta */
body.client-open { background: var(--color-white); color: var(--color-black); }
body.client-open .nav, body.client-open .menu, body.client-open .footer, body.client-open .clients { display: none; }
body.pp-zoomed { overflow: hidden; }

/* --------------------------------------------------------------------------
   2. Propuesta: estructura
   -------------------------------------------------------------------------- */
.pp { --bar: 46px; --ink: var(--color-ink); --soft: var(--color-grey-text); --rule: var(--line-dark); --card: #f3f3f3; --hl: #000; --hl-ink: #fff;
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; color: var(--ink); }
.pp-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 var(--gutter);
  background: rgba(251, 251, 251, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: var(--color-black); font-family: var(--font-sans); }
.pp-bar__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap; }
.pp-bar__title span { opacity: 0.5; }
.pp-bar__title span::after { content: "·"; margin-left: 8px; }
.pp-bar__draft { flex: none; padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(255, 190, 0, 0.3); border: 1px dashed currentColor; font-style: normal; font-size: 11px; }
.pp-bar__title b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.pp-bar__out { padding: 8px 14px; font-size: 13px; background: var(--color-black); color: var(--color-white); }
.pp-bar__out:hover { background: transparent; color: var(--color-black); border-color: var(--color-black); }

.pp-sec { position: relative; padding: 0 var(--gutter) 130px; background: var(--color-white); scroll-margin-top: var(--bar); }
.pp-sec > .line { margin-bottom: 15px; }
.pp-sec--grey { background: #f3f3f3; --card: #fff; }  /* gris fijo: var(--card) aquí ya valdría blanco */
.pp-sec--dark { background: var(--color-black); color: var(--color-white); --ink: #fff; --soft: rgba(255, 255, 255, 0.6); --rule: var(--line-light); --card: #161616; --hl: #fff; --hl-ink: #000; }
/* el cambio de fondo hace de separador: las secciones con fondo propio empiezan con aire */
.pp-sec { padding-top: 15px; }
.pp-sec--grey, .pp-sec--dark, .pp-sec--grey + .pp-sec, .pp-sec--dark + .pp-sec { padding-top: 110px; }
.pp-sec--grey > .line, .pp-sec--dark > .line, .pp-sec--grey + .pp-sec > .line, .pp-sec--dark + .pp-sec > .line { display: none; }
.pp-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 15px; align-items: start; }
.pp-sec__label { position: sticky; top: calc(var(--bar) + 24px); display: flex; gap: 12px; font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: -0.2px; }
.pp-sec__label span { opacity: 0.4; font-variant-numeric: tabular-nums; }
.pp-sec__body { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.pp-sec__body > * { margin: 0; }
.pp-wide { margin-left: calc(-50% - 7.5px) !important; }   /* el bloque ocupa también la columna de la etiqueta */

/* --------------------------------------------------------------------------
   3. Portada
   -------------------------------------------------------------------------- */
.pp-sec--cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--bar) + 60px) var(--gutter) 96px; }
.pp-cover { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.pp-cover__eyebrow { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1; opacity: 0.6; }
.pp-cover__title { font-weight: 500; font-size: clamp(52px, 10.4vw, 168px); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; }
.pp-cover__sub { max-width: 30ch; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--soft); }
.pp-cover .line { margin-top: 40px; }
.pp-cover__foot { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; opacity: 0.6; }

/* --------------------------------------------------------------------------
   4. Texto
   -------------------------------------------------------------------------- */
.pp-title { font-weight: 500; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.pp-title + .pp-lead { margin-top: -22px; }
.pp-lead, .pp-text p { font-size: 19px; line-height: 1.5; max-width: 60ch; }
.pp-lead { color: var(--soft); }
.pp-text { display: flex; flex-direction: column; gap: 16px; }
.pp-text strong, .pp-lead strong { font-weight: 500; }
/* negrita + cursiva: Switzer no tiene cursiva; General Sans sí (700 italic real) */
.pp strong em { font-family: var(--font-sans); font-style: italic; font-weight: 700; letter-spacing: -0.015em; }
.pp-label { margin-bottom: 14px; font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: -0.2px; color: var(--soft); }
.pp-sub { display: flex; flex-direction: column; gap: 12px; margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--rule); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.025em; }
.pp-sub__num { font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.2px; color: var(--soft); font-variant-numeric: tabular-nums; }
.pp-note { margin-top: -26px; font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--soft); }
.pp-statement p:last-child { font-weight: 500; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.pp-quote { margin: 0 0 30px; display: flex; flex-direction: column; gap: 24px; }
.pp-quote blockquote { margin: 0; font-weight: 500; font-size: clamp(40px, 5.6vw, 88px); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance; }
.pp-quote figcaption { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--soft); }
.pp-quote cite { font-style: italic; }

/* Campos pendientes (solo en local: con --deploy una propuesta con pendientes no se publica) */
.pp-pending { display: inline-block; padding: 0.15em 0.6em; border: 1px dashed currentColor; border-radius: var(--radius-pill); background: rgba(255, 190, 0, 0.22); font-family: var(--font-sans); font-size: 0.7em; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; vertical-align: middle; white-space: normal; }
.pp-todo { font-size: 16px; }
.pp-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; padding: 18px; border: 1px dashed var(--rule); border-radius: var(--radius-card); text-align: center; }
.pp-ph .pp-pending { font-size: 12px; }

/* --------------------------------------------------------------------------
   5. Tarjetas, cifras, etiquetas, listas
   -------------------------------------------------------------------------- */
.pp-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); }
.pp-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 22px; border-radius: var(--radius-card); background: var(--card); }
.pp-card h4 { margin: 0 0 auto; padding-bottom: 26px; font-weight: 500; font-size: 24px; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.pp-card p { font-size: 16px; line-height: 1.4; color: var(--soft); }
.pp-card__num { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--soft); }
.pp-cards + .pp-note { margin-top: -30px; }

.pp-stats { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 40px var(--gap); }
.pp-stat { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pp-stat__value { font-weight: 500; font-size: clamp(44px, 5.2vw, 84px); line-height: 0.98; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-stats[style*="--cols:4"] .pp-stat__value { font-size: clamp(36px, 3.5vw, 56px); }
.pp-stat__text { font-size: 16px; line-height: 1.4; color: var(--soft); max-width: 30ch; }

.pp-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-tag { padding: 16px 26px; border-radius: var(--radius-pill); background: var(--hl); color: var(--hl-ink); font-weight: 500; font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -0.02em; }

.pp-checks, .pp-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.pp-checks li, .pp-list li { position: relative; padding: 16px 0 16px 40px; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 1.4; }
.pp-checks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--hl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.8 10.4 2.8 2.8 5.6-6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.pp-sec--dark .pp-checks li::before { filter: invert(1); }
.pp-list { counter-reset: pp; }
.pp-list li { counter-increment: pp; padding-left: 0; }
.pp-list:not(.pp-list--num) li { padding-left: 26px; }
.pp-list:not(.pp-list--num) li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pp-list--num li { padding-left: 52px; }
.pp-list--num li::before { content: counter(pp, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }

.pp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-flow li { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--card); font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1; }
.pp-flow li + li::before { content: "→"; margin: 0 6px 0 -34px; opacity: 0.45; }
.pp-flow li + li { margin-left: 22px; }

/* --------------------------------------------------------------------------
   6. Tablas (en móvil cada fila pasa a ser una tarjeta: sin scroll horizontal)
   -------------------------------------------------------------------------- */
.pp-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.pp-table caption { padding-bottom: 14px; text-align: left; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--soft); }
.pp-table th, .pp-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.pp-table thead th { padding-top: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--soft); border-bottom-color: var(--ink); }
.pp-table tbody th { font-weight: 500; }
.pp-table tr.is-hl th, .pp-table tr.is-hl td { background: var(--hl); color: var(--hl-ink); border-bottom-color: var(--hl); font-weight: 500; }
.pp-table tr.is-hl th:first-child { padding-left: 14px; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.pp-table tr.is-hl td:last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.pp-table tr.is-hl td:last-child { padding-right: 14px; }
.pp-list strong, .pp-checks strong { font-weight: 600; }
.pp-table--pairs { font-size: 18px; }
.pp-table--pairs th, .pp-table--pairs td { width: 50%; padding: 18px 24px 18px 0; }
.pp-table--pairs tbody th { font-weight: 400; color: var(--soft); }
.pp-table--pairs tbody td { font-weight: 500; }
.pp-table-wrap + .pp-note { margin-top: -28px; }

/* --------------------------------------------------------------------------
   7. Medios: cajas, galerías, mapa
   -------------------------------------------------------------------------- */
.pp-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--card); opacity: 0; transition: opacity 0.6s var(--ease-out); cursor: zoom-in; }
.pp-img.is-loaded { opacity: 1; }
.pp-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; border-radius: var(--radius-card); background: var(--card); align-items: center; }
.pp-box:not(:has(.pp-box__media)) { grid-template-columns: 1fr; }
.pp-box__media { border-radius: 6px; overflow: hidden; }
.pp-box__body { display: flex; flex-direction: column; gap: 12px; }
.pp-box h4 { margin: 0; font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -0.025em; }
.pp-box p { font-size: 18px; line-height: 1.45; max-width: 56ch; }
.pp-box--hl { background: var(--hl); color: var(--hl-ink); padding: 34px; }
.pp-box--hl p { font-size: 20px; }

.pp-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 26px var(--gap); }
.pp-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-shot__frame { overflow: hidden; border-radius: var(--radius-card); background: var(--card); aspect-ratio: 16 / 10; }
.pp-gallery--vertical .pp-shot__frame { aspect-ratio: 9 / 16; }
.pp-gallery--perfil .pp-shot__frame { aspect-ratio: 4 / 3; }
.pp-gallery--libre .pp-shot__frame { aspect-ratio: auto; }
.pp-gallery--libre .pp-img { height: auto; }
.pp-shot figcaption { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-sans); font-size: 13px; line-height: 1.35; }
.pp-shot figcaption strong { font-weight: 500; }
.pp-shot figcaption span { color: var(--soft); }
.pp-shot.is-hl .pp-shot__frame { outline: 2px solid var(--ink); outline-offset: 4px; }
.pp-shot.is-hl figcaption span { color: var(--ink); font-size: 15px; font-family: var(--font-display); }

.pp-mapwrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.pp-map { margin: 0; padding: 30px 26px 34px 34px; border-radius: var(--radius-card); background: var(--card); }
.pp-map__plot { position: relative; aspect-ratio: 1; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.pp-map__ax { position: absolute; font-family: var(--font-sans); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.pp-map__ax--x0 { left: 0; bottom: -20px; }
.pp-map__ax--x1 { right: 0; bottom: -20px; }
.pp-map__ax--y0 { left: -10px; bottom: 0; transform-origin: left bottom; transform: rotate(-90deg); }
.pp-map__ax--y1 { left: -10px; top: 0; transform-origin: left top; transform: rotate(-90deg) translateX(-100%); }
.pp-map__arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.pp-map__pt { position: absolute; display: flex; align-items: center; gap: 7px; transform: translate(-9px, 50%); font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; }
.pp-map__pt--izq { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), 50%); }
.pp-map__pt i, .pp-map__legend i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink); background: var(--card); font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; }
.pp-map__pt--hoy i, .pp-map__legend .is-hoy i { border-style: dashed; }
.pp-map__pt--objetivo i, .pp-map__legend .is-objetivo i { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.12); }
.pp-map__pt--objetivo span { padding: 5px 9px; border-radius: var(--radius-pill); background: var(--hl); color: var(--hl-ink); }
.pp-map__side { display: flex; flex-direction: column; gap: 34px; }
.pp-map__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.pp-map__legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.3; }
.pp-map__legend small { flex-basis: 100%; padding-left: 28px; font-size: 13px; color: var(--soft); }
.pp-map__legend .is-objetivo { font-weight: 500; }
.pp-map__legend .is-objetivo i { box-shadow: none; }
.pp-map__refs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   8. Fases, calendario, inversión, casos, cierre
   -------------------------------------------------------------------------- */
.pp-phase { border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.pp-phase__head { display: flex; align-items: flex-start; gap: 22px; padding: 26px; border-bottom: 1px solid var(--rule); }
.pp-phase__num { flex: none; font-weight: 500; font-size: clamp(44px, 4.6vw, 72px); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pp-phase__head h3 { margin: 0; font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.03em; }
.pp-phase__kind { margin-top: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--soft); }
.pp-phase__body { display: flex; flex-direction: column; gap: 30px; padding: 26px; }
.pp-phase__lead { font-size: 20px; line-height: 1.4; max-width: 50ch; }
.pp-phase__group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 20px; padding-top: 22px; border-top: 1px solid var(--rule); }
.pp-phase__group:not(:has(h4)) { grid-template-columns: 1fr; border-top: 0; padding-top: 0; }
.pp-phase__group h4 { grid-row: span 3; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; }
.pp-phase__group > :not(h4) { grid-column: -2; }
.pp-chip { padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid currentColor; font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.pp-phase__gtext, .pp-phase__gnote { font-size: 16px; line-height: 1.45; color: var(--soft); max-width: 58ch; }
.pp-phase__gnote { font-style: italic; }
.pp-phase ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pp-phase li { position: relative; padding: 9px 0 9px 20px; font-size: 17px; line-height: 1.42; }
.pp-phase li + li { border-top: 1px solid var(--rule); }
.pp-phase li::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pp-phase li strong { font-weight: 500; }
.pp-phase__out { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 8px; background: var(--hl); color: var(--hl-ink); font-size: 18px; line-height: 1.4; }
.pp-phase__out span { font-family: var(--font-sans); font-size: 12px; font-weight: 500; opacity: 0.6; }
.pp-phase__note { font-size: 15px; line-height: 1.45; color: var(--soft); max-width: 62ch; }

.pp-cal { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.pp-cal__item { flex: var(--w, 1) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-cal__bar { height: 10px; margin-bottom: 14px; border-radius: var(--radius-pill); background: var(--ink); }
.pp-cal__item.is-open .pp-cal__bar { background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: 0.55; }
.pp-cal__name { font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -0.025em; }
.pp-cal__what { font-size: 15px; line-height: 1.4; color: var(--soft); }
.pp-cal__dur { margin-top: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--rule); font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1; }

.pp-inv { border-top: 1px solid var(--ink); }
.pp-inv__head, .pp-inv__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: baseline; }
.pp-inv__head { padding: 12px 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--soft); }
.pp-inv__head span:last-child, .pp-inv__price { text-align: right; }
.pp-inv__row { padding: 22px 0; border-top: 1px solid var(--rule); }
.pp-inv__phase { font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; }
.pp-inv__what { font-size: 16px; line-height: 1.4; color: var(--soft); }
.pp-inv__price { font-weight: 500; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pp-inv__price.is-long { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
.pp-inv__price .pp-pending, .pp-inv__foot .pp-pending { font-size: 11px; }
.pp-inv__foot { margin: -14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--soft); }

.pp-cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pp-case { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: #222; color: var(--color-white); }
.pp-case video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pp-case:hover video { transform: scale(1.03); }
.pp-case__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%); }
.pp-case__text { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font-family: var(--font-sans); }
.pp-case__text small { font-size: 12px; opacity: 0.85; }
.pp-case__text strong { font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.pp-case__text em { margin-top: 9px; font-style: normal; padding: 9px 15px; font-size: 13px; }

.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-actions .btn { padding: 16px 26px; font-size: 16px; font-family: var(--font-sans); white-space: normal; }
.pp-btn-line { border-color: var(--ink); color: var(--ink); }
.pp-btn-line:hover { background: var(--ink); color: var(--color-white); }
.pp-actions .is-pending { opacity: 0.75; }
.pp-end { padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--soft); }
.pp-sec:last-of-type { padding-bottom: 150px; }

/* --------------------------------------------------------------------------
   9. Índice flotante y ampliación de capturas
   -------------------------------------------------------------------------- */
.pp-index { position: fixed; left: 50%; bottom: 26px; z-index: 40; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 30px); font-family: var(--font-sans); }
.pp-index__btn, .pp-index__list { border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); color: var(--color-black); }
.pp-index__btn { display: flex; align-items: center; gap: 16px; padding: 13px 14px 13px 18px; font-size: 15px; line-height: 1.2; font-weight: 500; white-space: nowrap; max-width: 100%; }
.pp-index__cur { overflow: hidden; text-overflow: ellipsis; }
.pp-index__icon { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 30px; height: 30px; padding: 0 8px; border-radius: 5px; background: #e8e8e8; }
.pp-index__icon i { height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease); }
.pp-index.is-open .pp-index__icon i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.pp-index.is-open .pp-index__icon i:nth-child(2) { transform: scaleX(0); }
.pp-index.is-open .pp-index__icon i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.pp-index__list { margin: 0; padding: 8px; list-style: none; width: 300px; max-width: 100%; max-height: min(60vh, 520px); overflow-y: auto; background: rgba(255, 255, 255, 0.94); }
.pp-index__list a { display: flex; gap: 12px; padding: 9px 10px; border-radius: 6px; font-size: 14px; line-height: 1.2; font-weight: 500; color: rgba(0, 0, 0, 0.55); }
.pp-index__list a span { width: 18px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.pp-index__list a:hover, .pp-index__list a.is-current { background: #ececec; color: var(--color-black); }

.pp-zoom { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 70px 20px 30px; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.pp-zoom[hidden] { display: none; }
.pp-zoom img { max-width: 100%; max-height: 100%; border-radius: 6px; cursor: default; }
.pp-zoom .btn { position: absolute; top: 16px; right: 16px; font-family: var(--font-sans); }

/* --------------------------------------------------------------------------
   10. Tableta y móvil
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .pp-cards[style*="--cols:5"], .pp-cards[style*="--cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-mapwrap { grid-template-columns: 1fr; }
  .pp-stats[style*="--cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .pp-sec { padding-bottom: 80px; }
  .pp-sec--grey, .pp-sec--dark, .pp-sec--grey + .pp-sec, .pp-sec--dark + .pp-sec { padding-top: 70px; }
  .pp-sec--cover { padding: calc(var(--bar) + 40px) var(--gutter) 84px; }
  .pp-sec__grid { grid-template-columns: 1fr; gap: 26px; }
  .pp-sec__label { position: static; }
  .pp-sec__body { gap: 34px; }
  .pp-wide { margin-left: 0 !important; }
  .pp-bar__title span { display: none; }
  .pp-lead, .pp-text p, .pp-checks li, .pp-list li { font-size: 17px; }
  .pp-sub { margin-top: 26px; }
  .pp-note { margin-top: -18px; }
  .pp-cover .line { margin-top: 20px; }
  .pp-quote { margin-bottom: 10px; }
  .pp-cards, .pp-cards[style] { grid-template-columns: 1fr; gap: 10px; }
  .pp-card { min-height: 0; }
  .pp-card h4 { padding-bottom: 12px; font-size: 22px; }
  .pp-stats, .pp-stats[style] { grid-template-columns: 1fr; gap: 28px; }
  .pp-stat__value, .pp-stats[style*="--cols:4"] .pp-stat__value { font-size: 52px; }
  .pp-tag { padding: 13px 20px; }
  .pp-flow li + li { margin-left: 0; }
  .pp-flow li + li::before { display: none; }

  /* Tablas → tarjetas apiladas */
  .pp-table, .pp-table tbody, .pp-table tr, .pp-table th, .pp-table td, .pp-table caption { display: block; }
  .pp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .pp-table tr { padding: 16px; border-radius: var(--radius-card); background: var(--card); }
  .pp-table th, .pp-table td, .pp-table tr.is-hl th, .pp-table tr.is-hl td { padding: 0; border: 0; border-radius: 0; background: none; }
  .pp-table tr.is-hl th:first-child { padding-left: 0; }
  .pp-table tr.is-hl td:last-child { padding-right: 0; border-radius: 0; }
  .pp-table tr.is-hl { background: var(--hl); color: var(--hl-ink); }
  .pp-table tbody th { margin-bottom: 10px; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
  .pp-table td { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 15px; }
  .pp-table tr.is-hl td { border-top: 1px solid rgba(128, 128, 128, 0.4); padding: 7px 0; }
  .pp-table td::before { content: attr(data-label); flex: none; font-family: var(--font-sans); font-size: 13px; color: var(--soft); }
  .pp-table tr.is-hl td::before { color: inherit; opacity: 0.6; }
  .pp-table td { text-align: right; }
  /* pares "lo que frena / nuestra solución": tarjetas que se deslizan de lado (una a la vista y la siguiente asomando).
     Arriba el freno, abajo, sobre negro, la solución. Así diez puntos ocupan el alto de uno. */
  .pp-table-wrap--pairs { margin: 0 calc(-1 * var(--gutter)); }
  .pp-table.pp-table--pairs tbody { flex-direction: row; gap: 10px; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pp-table.pp-table--pairs tbody::-webkit-scrollbar { display: none; }
  .pp-table.pp-table--pairs tr { flex: 0 0 84%; display: flex; flex-direction: column; padding: 0; overflow: hidden; scroll-snap-align: start; }
  .pp-table.pp-table--pairs tr::before { content: attr(data-pos); padding: 16px 18px 0; font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1; color: var(--soft); font-variant-numeric: tabular-nums; }
  .pp-table.pp-table--pairs th, .pp-table.pp-table--pairs td { display: block; width: auto; margin: 0; padding: 18px; border: 0; text-align: left; font-size: 20px; line-height: 1.22; letter-spacing: -0.02em; }
  .pp-table.pp-table--pairs tbody th { flex: 1; padding-top: 22px; padding-bottom: 26px; font-weight: 500; color: var(--ink); }
  .pp-table.pp-table--pairs td { min-height: 46%; background: var(--hl); color: var(--hl-ink); font-weight: 500; }
  .pp-table.pp-table--pairs tbody th::before, .pp-table.pp-table--pairs td::before { content: attr(data-label); display: block; margin-bottom: 10px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; color: inherit; opacity: 0.55; }
  .pp-table-wrap--pairs::after { content: attr(data-hint) "  →"; display: block; margin: 14px var(--gutter) 0; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--soft); }

  .pp-box { grid-template-columns: 1fr; padding: 18px; }
  .pp-box--hl { padding: 24px; }
  .pp-gallery { grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); gap: 20px 10px; }
  .pp-map { padding: 22px 16px 30px 28px; }
  .pp-map__ax { font-size: 9px; letter-spacing: 0.02em; }
  .pp-map__pt span { display: none; }           /* en el teléfono, los nombres van en la leyenda */
  .pp-map__pt, .pp-map__pt--izq { transform: translate(-9px, 50%); }
  .pp-phase__head, .pp-phase__body { padding: 20px 18px; }
  .pp-phase__head { gap: 16px; }
  .pp-phase__group { grid-template-columns: 1fr; }
  .pp-phase__group h4 { grid-row: auto; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
  .pp-phase__group > :not(h4) { grid-column: auto; }
  .pp-cal { flex-direction: column; gap: 26px; }
  .pp-cal__item { flex: none; }
  .pp-inv__head { display: none; }
  .pp-inv__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .pp-inv__price { text-align: left; margin-top: 8px; font-size: 26px; }
  .pp-cases { grid-template-columns: 1fr; }
  .pp-actions .btn { width: 100%; }
  .pp-index { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-img { opacity: 1; transition: none; }
  .pp-case video, .pp-index__icon i { transition: none; }
}
@media print {
  .pp-bar, .pp-index { display: none; }
  .pp .reveal, .pp .line { opacity: 1; transform: none; }
}