/**
 * PH Portfolio — Ficha de caso v2 (rediseño front, 2026-10-06)
 * Referencia de estructura: tahitinumerique.pf/realisations/…
 * Solo en single case-study (la versión anterior sigue en ?case=v1). Depende de home-v2.css (header, menú, contacto, footer).
 *
 * Estrategia: los componentes del CSS antiguo (.ph-*) se re-tematizan redefiniendo sus variables (acento verde → naranja,
 * Literata/Onest → Instrument), y solo se re-maqueta lo que cambia de estructura (hero, columnas, cierre).
 */

/* ---------- 1. Re-tematizado de los tokens del CSS antiguo ---------- */
body.phx-body{
  --ph-font-display:var(--phx-serif);--ph-font-body:var(--phx-sans);--ph-font-sans:var(--phx-sans);
  --ph-accent:#FF4D00;--ph-accent-bright:#FF4D00;--ph-accent-dark:#C23A00;--ph-accent-bg:rgba(255,77,0,.06);
  --ph-accent-opacity:rgba(255,77,0,.9);--ph-accent-12:rgba(255,77,0,.12);--ph-accent-18:rgba(255,77,0,.18);--ph-accent-20:rgba(255,77,0,.2);--ph-accent-25:rgba(255,77,0,.25);
  --ph-text-primary:var(--phx-ink);--ph-text-secondary:var(--phx-ink-2);--ph-text-muted:#8A7F75;--ph-text-body-sm:var(--phx-ink-2);
  --ph-bg:var(--phx-bg);--ph-bg-warm:var(--phx-bg-2);--ph-bg-surface:var(--phx-bg-2);--ph-bg-alt:var(--phx-bg-2);--ph-bg-placeholder:var(--phx-bg-2);
  --ph-home-bg:var(--phx-bg);--ph-home-bg-alt:var(--phx-bg-2);--ph-home-tag-bg:rgba(255,77,0,.08);
  --ph-border:var(--phx-line);--ph-separator:var(--phx-line);--ph-radius:20px;
}
html[data-theme="dark"] body.phx-body{--ph-text-muted:#A39A90;--ph-accent-bg:rgba(255,77,0,.1);--ph-accent-dark:#FF7A3D}

/* ---------- 2. Página ---------- */
.phx-case.ph-page{max-width:none;margin:0;background:transparent}
.phx-case main{display:block}

/* ---------- 3. Hero: título grande, portada redondeada, ficha + intro ---------- */
.phx-ch{padding:clamp(120px,16vh,172px) var(--phx-gutter) clamp(32px,5vw,56px)}
.phx-ch__title{font-family:var(--phx-serif);font-weight:400;font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.01em;max-width:15em;color:var(--phx-ink)}
.phx-ch__cover{margin:0 var(--phx-gutter);border-radius:24px;overflow:hidden;background:var(--phx-bg-2);box-shadow:0 0 0 1px var(--phx-line)}
.phx-ch__cover img{display:block;width:100%;height:auto;aspect-ratio:21/10;object-fit:cover;object-position:center top}
.phx-ch__info{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5.5vw,80px);row-gap:36px;padding:clamp(56px,7vw,104px) clamp(20px,8.9vw,128px) clamp(24px,4vw,56px)}
/* Separador vertical que desaparece solo cuando el dato salta de línea (el borde queda fuera y se recorta) */
.phx-ch__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font-size:clamp(18px,1.55vw,22px);color:var(--phx-ink);margin:0 0 28px -28px;width:calc(100% + 28px);overflow:hidden}
.phx-ch__row span{padding:0 28px 0 28px;margin-left:-1px;border-left:1px solid var(--phx-line)}
.phx-ch__tags{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.phx-ch__tags li{border:1px solid var(--phx-line);padding:10px 13px;font-size:13px;font-weight:600;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:var(--phx-ink-2)}
.phx-ch__intro{font-size:clamp(19px,1.6vw,23px);line-height:1.6;color:var(--phx-ink-2);max-width:34em}
.phx-ch__intro p{margin:0 0 1em}.phx-ch__intro p:last-child{margin-bottom:0}

/* ---------- 4. Secciones: título a la izquierda (fijo), texto a la derecha ---------- */
.phx-case .ph-section{max-width:none;margin:0;padding:clamp(48px,6vw,96px) clamp(20px,8.9vw,128px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vw,56px);align-items:start;background:transparent}
.phx-case .ph-section-tag{height:auto;overflow:visible;margin-bottom:14px}
.phx-case .ph-section-tag__text{font-family:var(--phx-sans);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--phx-primary)}
.phx-case .ph-section-tag__line{display:none}
.phx-case .ph-section__heading{font-family:var(--phx-serif);font-weight:400;font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-.005em;margin:0;color:var(--phx-ink)}
.phx-case .ph-section__heading em,.phx-case .ph-section__heading i{font-family:var(--phx-serif);font-style:italic;color:var(--phx-primary)}
.phx-case .ph-body-text{max-width:40em;margin:0;font-size:clamp(18px,1.4vw,20px);line-height:1.7;color:var(--phx-ink)}
.phx-case .ph-body-text p{margin:0 0 1.15em}
.phx-case .ph-body-text p:last-child{margin-bottom:0}
.phx-case .ph-body-text em{color:inherit;font-style:italic}
.phx-case .ph-body-text a{color:#C23A00;text-decoration-color:currentColor}
html[data-theme="dark"] .phx-case .ph-body-text a{color:#FF7A3D}

/* Callout y cita */
.phx-case .ph-callout{background:var(--phx-bg-2);border:1px solid var(--phx-line);border-radius:24px;padding:clamp(24px,3vw,40px)}
.phx-case .ph-callout__content{font-size:clamp(18px,1.45vw,21px);line-height:1.65;color:var(--phx-ink)}
.phx-case .ph-reflection-box{border-radius:24px}
.phx-case .ph-reflection-box__body{font-family:var(--phx-serif);font-size:clamp(24px,2.4vw,34px);line-height:1.3;color:var(--phx-ink)}

/* Tarjetas y línea de tiempo: ver sección 9 (segunda pasada) */
.phx-case .ph-section--cards,.phx-case .ph-section--timeline{grid-template-columns:1fr}
.phx-case .ph-section--cards .phx-sec__head,.phx-case .ph-section--timeline .phx-sec__head{grid-column:1;position:static}
.phx-case .ph-section--cards > :not(.phx-sec__head),.phx-case .ph-section--timeline > :not(.phx-sec__head){grid-column:1;min-width:0}
.phx-case .ph-section--cards .ph-body-text{max-width:46em}

/* Imágenes: esquinas redondeadas + contorno para que no se fundan con el fondo */
.phx-case .ph-image-block img,.phx-case .ph-image-block picture,.phx-case .ph-simple-frame,.phx-case .ph-monitor-frame{border-radius:20px}
.phx-case .ph-image-block img{box-shadow:0 0 0 1px var(--phx-line)}

/* ---------- 5. Índice lateral (discreto): solo puntos; la etiqueta aparece al pasar o en la sección activa ---------- */
.phx-case .ph-section-nav{left:auto;right:22px;top:50%;gap:2px;align-items:flex-end}
.phx-case .ph-section-nav__item{flex-direction:row-reverse;gap:10px}
.phx-case .ph-section-nav__dot{width:6px;height:6px;opacity:.35}
.phx-case .ph-section-nav__label{font-family:var(--phx-sans);font-size:12px;opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;background:var(--phx-bg);padding:3px 8px;border-radius:6px}
.phx-case .ph-section-nav__item:hover .ph-section-nav__label,.phx-case .ph-section-nav__item.is-active .ph-section-nav__label{opacity:1;transform:none}
.phx-case .ph-section-nav__item.is-active .ph-section-nav__dot{background:var(--phx-primary);transform:scale(1.6)}
@media (max-width:1400px){.phx-case .ph-section-nav{display:none}}
.phx-past-sections .ph-section-nav{opacity:0;pointer-events:none}
.phx-case .ph-section-nav{transition:opacity .25s ease}

/* ---------- 6. Cierre: siguiente caso, otros proyectos ---------- */
.phx-next{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(72px,10vw,150px) var(--phx-gutter) clamp(24px,3vw,48px)}
.phx-next__mark{display:block;width:44px;height:50px;background:var(--phx-primary);-webkit-mask:var(--phx-iso) no-repeat center/contain;mask:var(--phx-iso) no-repeat center/contain;margin-bottom:clamp(36px,5vw,64px)}
.phx-next__link{display:inline-flex;align-items:center;gap:12px;font-size:clamp(18px,1.5vw,21px);color:var(--phx-ink-2);transition:color .2s}
.phx-next__link svg{color:var(--phx-primary);transition:transform .25s}
.phx-next__link:hover{color:var(--phx-ink)}.phx-next__link:hover svg{transform:translateX(4px)}
.phx-next__title{margin:18px 0 0;font-family:var(--phx-serif);font-size:clamp(26px,2.6vw,38px);line-height:1.15;max-width:22em;color:var(--phx-ink)}
.phx-next__title em{color:var(--phx-primary)}

.phx-more{padding:clamp(70px,10vw,150px) 0 clamp(40px,6vw,90px)}
.phx-more h2{text-align:center;font-family:var(--phx-serif);font-weight:400;font-size:clamp(36px,4.86vw,70px);line-height:1.05;padding:0 var(--phx-gutter)}
.phx-more__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,64px);margin:clamp(40px,6vw,88px) auto 0;padding:0 clamp(20px,6.67vw,96px);max-width:1500px}
.phx-more__card{display:block;color:inherit}
.phx-more__img{display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--phx-bg-2);box-shadow:0 0 0 1px var(--phx-line)}
.phx-more__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.phx-more__card:hover .phx-more__img img{transform:scale(1.03)}
.phx-more__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:22px}
.phx-more__head h3{font-family:var(--phx-serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.08;color:var(--phx-ink-2);transition:color .2s}
.phx-more__head svg{flex:none;margin-top:8px;color:var(--phx-ink-2);opacity:.6;transition:color .2s,opacity .2s,transform .25s}
.phx-more__card:hover h3{color:var(--phx-ink)}.phx-more__card:hover .phx-more__head svg{color:var(--phx-primary);opacity:1;transform:translate(3px,-3px)}
.phx-more__meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:18px 0 0 -22px;width:calc(100% + 22px);overflow:hidden;font-size:18px;color:var(--phx-ink)}
.phx-more__meta span{padding:0 22px;margin-left:-1px;border-left:1px solid var(--phx-line)}
.phx-more__all{text-align:center;margin-top:clamp(40px,6vw,80px)}
.phx-more__all a{display:inline-flex;align-items:center;gap:10px;color:var(--phx-ink-2);font-size:18px}
.phx-more__all a svg{color:var(--phx-primary);width:18px;height:18px}
.phx-more__all a:hover{color:var(--phx-ink)}

/* ---------- 7. Responsive ---------- */
@media (max-width:900px){
  .phx-ch__info{grid-template-columns:1fr;row-gap:28px}
  .phx-more__grid{grid-template-columns:1fr}
  .phx-ch__cover img{aspect-ratio:4/3}
}

/* ---------- 8. Encabezado: al hacer scroll gana fondo translúcido + desenfoque para no mezclarse con el contenido ---------- */
.phx-case .phx-hdr{transition:padding .25s ease,background-color .25s ease,backdrop-filter .25s ease,box-shadow .25s ease}
.phx-case .phx-hdr.is-solid{
  padding-top:14px;padding-bottom:14px;pointer-events:auto;
  background:color-mix(in srgb,var(--phx-bg) 78%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--phx-line);
}
body.phx-menu-open .phx-case .phx-hdr.is-solid{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .phx-case .phx-hdr.is-solid{background:var(--phx-bg)}
}

/* El índice lateral no debe asomar por encima del menú overlay */
body.phx-menu-open .ph-section-nav{opacity:0;visibility:hidden;pointer-events:none}

/* ==========================================================================
   9. FILAS TEXTO + IMAGEN (zig-zag), como en las páginas de referencia
   Dos columnas iguales: título + texto en una, imagen contenida en la otra (≈544px a 1440),
   alternando el lado en cada fila que lleva imagen. Las imágenes son más bajas que la pantalla.
   Sin imagen: título a la izquierda (fijo) | texto a la derecha.
   Excepción: scroll horizontal marcado «ancho completo» (.ph-image-block--hscroll-full): ocupa todo el ancho de contenido de la sección (sin sangrar a los márgenes). Por defecto el scroll se queda en la columna.
   ========================================================================== */
.phx-case{--phx-pad:clamp(20px,8.9vw,128px);--phx-colgap:clamp(40px,6.67vw,96px);--phx-bleed:calc(var(--phx-gutter) - var(--phx-pad))}

.phx-case .phx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--phx-colgap);row-gap:clamp(28px,3.5vw,48px);align-items:center}
.phx-case .phx-row .phx-main{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--phx-colgap);align-items:start;min-width:0}
.phx-case .phx-row .phx-media{grid-column:1 / -1;min-width:0}
.phx-case .phx-row .phx-media:empty{display:none}

/* Con imagen: texto en una columna, imagen en la otra */
.phx-case .phx-row--media .phx-main{display:block;grid-column:1;grid-row:1}
.phx-case .phx-row--media .phx-media{grid-column:2;grid-row:1}
.phx-case .phx-row--media.phx-flip .phx-main{grid-column:2}
.phx-case .phx-row--media.phx-flip .phx-media{grid-column:1}

/* Excepción: medios horizontales muy anchos → texto arriba, medio a ancho completo debajo */
.phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-main{display:grid;grid-column:1 / -1;grid-row:1}
.phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-media{grid-column:1 / -1;grid-row:2;margin-inline:0}

/* Cabeceras dentro de las filas */
.phx-case .phx-row--media .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){position:static;margin-bottom:clamp(20px,2.4vw,32px)}
.phx-case .phx-row:not(.phx-row--media) .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head),
.phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){grid-column:1;position:sticky;top:112px;align-self:start;margin-bottom:0}
.phx-case .phx-row:not(.phx-row--media) .phx-main > :is(.phx-sec__body,.phx-card__text,.phx-tl__text),
.phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-main > :is(.phx-sec__body,.phx-card__text,.phx-tl__text){grid-column:2;min-width:0}
.phx-case .phx-sec__body,.phx-case .phx-card__text,.phx-case .phx-tl__text{min-width:0}

/* ----- Imágenes: contenidas en su columna, nunca más altas que la pantalla ----- */
.phx-case .phx-media .ph-image-block,.phx-case .phx-media .ph-simple-frame,.phx-case .phx-media .ph-monitor-frame,.phx-case .phx-media .ph-slider,.phx-case .phx-media .ph-spread{width:100%;max-width:none;margin:0}
.phx-case .phx-media .ph-image-block+.ph-image-block,.phx-case .phx-media > * + *{margin-top:20px}
.phx-case .phx-media .ph-image-block:not(.ph-image-block--hscroll) img{display:block;width:100%;height:auto;max-height:min(66vh,620px);object-fit:contain;background:var(--phx-bg-2);border-radius:20px}

/* ----- Tarjetas a 100% y línea de tiempo: filas abiertas separadas por un filete ----- */
.phx-case .ph-cards--100{gap:0}
.phx-case .ph-cards--100 .ph-card{padding:clamp(40px,5vw,72px) 0;background:transparent;border:0;border-top:1px solid var(--phx-line);border-radius:0;overflow:visible}
.phx-case .ph-cards--100 .ph-card:last-child{border-bottom:1px solid var(--phx-line)}
.phx-case .ph-timeline{margin:0;padding:0;gap:0}
.phx-case .ph-timeline__item{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--phx-line)}
.phx-case .ph-timeline__item:last-child{border-bottom:1px solid var(--phx-line)}
.phx-case .ph-timeline__item::before,.phx-case .ph-timeline__item::after{display:none!important}

/* ----- Tarjetas en rejilla (50 / 30 / 25): cajas redondeadas con tipografía legible ----- */
.phx-case .ph-cards--50,.phx-case .ph-cards--30,.phx-case .ph-cards--25{gap:clamp(16px,2vw,28px)}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card{display:flex;flex-direction:column;gap:22px;padding:clamp(24px,3vw,40px);background:var(--phx-bg-2);border:1px solid var(--phx-line);border-radius:24px;overflow:hidden}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card > *{grid-column:auto}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__num{font-size:clamp(36px,3.4vw,48px)}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__title{font-size:clamp(24px,2.1vw,30px)}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__body{font-size:clamp(16px,1.2vw,18px)}

/* Elementos comunes de tarjeta */
.phx-case .phx-card__head{display:flex;flex-direction:column;gap:14px}
.phx-case .ph-cards .ph-card__num{display:block;font-family:var(--phx-serif);font-weight:400;font-size:clamp(56px,6vw,88px);line-height:.9;color:var(--phx-primary);margin:0}
.phx-case .ph-cards .ph-card__title{font-family:var(--phx-serif);font-weight:400;font-size:clamp(28px,2.9vw,40px);line-height:1.1;letter-spacing:-.003em;color:var(--phx-ink);margin:0}
.phx-case .ph-cards .ph-card__body{font-size:clamp(18px,1.4vw,20px);line-height:1.7;color:var(--phx-ink);max-width:40em;margin:0}
.phx-case .ph-cards .ph-card__body p{margin:0 0 1.1em}.phx-case .ph-cards .ph-card__body p:last-child{margin-bottom:0}
.phx-case .ph-cards .ph-card__body strong{color:var(--phx-ink)}
.phx-case .ph-cards .ph-card__list{margin:clamp(20px,2.4vw,32px) 0 0;max-width:none}
.phx-case .ph-cards .ph-card__list li{font-size:clamp(16px,1.25vw,18px);line-height:1.55;padding:12px 0 12px 26px}
.phx-case .ph-cards .ph-card__list li+li{border-top:1px solid var(--phx-line)}
.phx-case .ph-cards .ph-card__list--pros li{color:var(--phx-ink)}
.phx-case .ph-cards .ph-card__list--cons li{color:var(--phx-ink-2)}

/* Línea de tiempo: etiqueta, título y texto */
.phx-case .ph-timeline__num{display:block;font-family:var(--phx-sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--phx-primary);margin:0 0 14px}
.phx-case .ph-timeline__title{font-family:var(--phx-serif);font-weight:400;font-size:clamp(30px,3.2vw,46px);line-height:1.06;letter-spacing:-.005em;color:var(--phx-ink);margin:0}
.phx-case .ph-timeline__desc{font-size:clamp(18px,1.4vw,20px);line-height:1.7;color:var(--phx-ink);max-width:40em}
.phx-case .ph-timeline__desc p{margin:0 0 1.1em}.phx-case .ph-timeline__desc p:last-child{margin-bottom:0}
.phx-case .ph-timeline__desc strong{color:var(--phx-ink)}
.phx-case .ph-timeline__desc ul{list-style:none;margin:0 0 1.2em;padding:0}
.phx-case .ph-timeline__desc li{position:relative;padding:6px 0 6px 22px}
.phx-case .ph-timeline__desc li::before{content:"";position:absolute;left:2px;top:.95em;width:6px;height:6px;border-radius:50%;background:var(--phx-primary)}

/* Cita: tamaño contenido para que los textos largos se lean */
.phx-case .ph-reflection-box__body{font-size:clamp(22px,2vw,30px);line-height:1.45}

/* ----- Móvil / tablet: una sola columna, texto primero, imagen debajo ----- */
@media (max-width:900px){
  .phx-case .phx-row{grid-template-columns:1fr}
  .phx-case .phx-row .phx-main,.phx-case .phx-row--media .phx-main,.phx-case .phx-row--media.phx-flip .phx-main{grid-column:1;grid-row:auto;display:block}
  .phx-case .phx-row .phx-media,.phx-case .phx-row--media .phx-media,.phx-case .phx-row--media.phx-flip .phx-media{grid-column:1;grid-row:auto}
  .phx-case .phx-row .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){position:static;margin-bottom:20px}
  .phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-media{margin-inline:0}
  .phx-case .ph-cards--50,.phx-case .ph-cards--30,.phx-case .ph-cards--25{grid-template-columns:1fr}
}

/* ==========================================================================
   10. ACERCAMIENTO A LA PÁGINA «DATA / IA» DE LA REFERENCIA (medido a 1440px)
   Columnas de 576px con márgenes de 96px · títulos serif 46px/1 · texto 16–17px/1,6 en gris suave ·
   filas sin filetes ni cajas, separadas solo por aire · imágenes contenidas con esquinas suaves.
   ========================================================================== */
.phx-case{--phx-pad:clamp(20px,6.67vw,96px);--phx-colgap:clamp(40px,6.67vw,96px);--phx-bleed:calc(var(--phx-gutter) - var(--phx-pad))}
.phx-case .ph-section{padding-inline:var(--phx-pad);padding-block:clamp(40px,5.5vw,80px)}
.phx-ch__info{padding-inline:var(--phx-pad);column-gap:var(--phx-colgap)}

/* Títulos de fila: 46px serif, interlineado 1 */
.phx-case .ph-section__heading,
.phx-case .ph-cards--100 .ph-card__title,
.phx-case .ph-timeline__title{font-size:clamp(30px,3.2vw,46px);line-height:1;letter-spacing:.02em;font-weight:400}
.phx-case .ph-section-tag{margin-bottom:12px}
.phx-case .phx-row--media .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){margin-bottom:clamp(16px,1.7vw,24px)}

/* Texto: 16–17px, interlineado 1,6, gris suave (lo destacado en tinta) */
.phx-case .ph-body-text,
.phx-case .ph-cards .ph-card__body,
.phx-case .ph-timeline__desc,
.phx-case .ph-callout__content{font-size:clamp(16px,1.2vw,17.5px);line-height:1.62;letter-spacing:.01em;color:var(--phx-ink-2)}
.phx-case .ph-body-text strong,.phx-case .ph-cards .ph-card__body strong,.phx-case .ph-timeline__desc strong{color:var(--phx-ink)}
.phx-case .ph-body-text,.phx-case .ph-cards .ph-card__body,.phx-case .ph-timeline__desc{max-width:none}
.phx-case .ph-cards .ph-card__list li{font-size:clamp(15px,1.1vw,16.5px)}
.phx-case .ph-cards .ph-card__num{font-size:clamp(44px,4.6vw,64px)}

/* Sin filetes: las filas se separan solo con aire */
.phx-case .ph-cards--100 .ph-card,.phx-case .ph-timeline__item{border:0!important;padding-block:clamp(40px,5.5vw,80px)}
.phx-case .ph-cards--100{gap:0}

/* Imágenes: formato contenido (≈576px de ancho), esquinas suaves */
.phx-case .phx-media .ph-image-block:not(.ph-image-block--hscroll) img{max-height:min(62vh,560px);border-radius:16px}
.phx-case .ph-image-block img,.phx-case .ph-simple-frame,.phx-case .ph-monitor-frame{border-radius:16px}

/* Cabecera: título a 80px como la referencia */
.phx-ch__title{font-size:clamp(40px,5.55vw,80px);line-height:1;max-width:12em}
.phx-ch__intro{font-size:clamp(17px,1.25vw,18px);line-height:1.6}

/* ==========================================================================
   11. CABECERA EN BANDA (por defecto) — título + datos a la izquierda, resumen a la derecha,
   como en la página «Data / IA» de la referencia. La portada se monta sobre el borde inferior.
   ========================================================================== */
.phx-ch{background:var(--phx-primary);color:var(--phx-on-primary);padding:clamp(120px,15vh,168px) var(--phx-gutter) calc(clamp(64px,10vw,142px) + clamp(24px,3.5vw,48px));position:relative;z-index:0}
.phx-ch__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(32px,5.5vw,80px);align-items:center;max-width:1440px;margin:0 auto}
.phx-ch__title{color:var(--phx-on-primary);max-width:none}
.phx-ch__title em,.phx-ch__title i{color:#FFF7F0}
.phx-ch__facts{margin-top:clamp(28px,3vw,44px)}
.phx-ch__row{margin:0 0 20px;width:auto;overflow:visible;font-size:clamp(17px,1.4vw,20px);color:var(--phx-on-primary);display:flex;flex-wrap:wrap;gap:6px 0}
.phx-ch__row span{padding:0 22px 0 0;margin:0 22px 0 0;border:0;border-right:1px solid rgba(27,23,20,.4)}
.phx-ch__row span:last-child{border-right:0;margin-right:0;padding-right:0}
.phx-ch__tags li{border:1px solid rgba(27,23,20,.45);color:var(--phx-on-primary)}
.phx-ch__intro{font-size:clamp(17px,1.25vw,18px);line-height:1.6;color:var(--phx-on-primary);max-width:34em}
.phx-ch__intro p{margin:0 0 1em}.phx-ch__intro p:last-child{margin-bottom:0}
.phx-ch__cover{position:relative;z-index:1;margin-top:calc(-1 * clamp(64px,10vw,142px));box-shadow:0 30px 60px -30px rgba(27,23,20,.35)}
body:not(.phx-menu-open) .phx-hdr:not(.is-solid) .phx-logo,
body:not(.phx-menu-open) .phx-hdr:not(.is-solid) .phx-logo-iso{background:var(--phx-on-primary)}
.phx-hdr:not(.is-solid) .phx-burger{border-color:var(--phx-on-primary);color:var(--phx-on-primary);background:transparent}
@media (max-width:900px){.phx-ch__in{grid-template-columns:1fr;row-gap:32px}}

/* ==========================================================================
   12. SIN FONDOS NI CAJAS: llamadas, tarjetas en rejilla y cita se leen como texto abierto
   ========================================================================== */
.phx-case .ph-callout,.phx-case .ph-reflection-box,
.phx-case .ph-cards:not(.ph-cards--100) .ph-card{background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.phx-case .ph-callout{border:0!important;padding:0!important}
.phx-case .ph-callout__content{font-size:clamp(17px,1.3vw,19px);color:var(--phx-ink-2)}
.phx-case .ph-callout__content strong{color:var(--phx-ink)}

.phx-case .ph-reflection-box{border:0!important;padding:0!important;gap:8px}
.phx-case .ph-reflection-box__mark{color:var(--phx-primary);font-size:72px;height:44px;opacity:1}
.phx-case .ph-reflection-box__body{font-family:var(--phx-serif);font-size:clamp(22px,2vw,30px);line-height:1.4;color:var(--phx-ink)}

/* Tarjetas en rejilla (p. ej. «Resultados»): columnas abiertas separadas por un filete superior */
.phx-case .ph-cards:not(.ph-cards--100){gap:clamp(40px,5vw,72px) clamp(40px,6.67vw,96px)}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card{border:0!important;border-top:1px solid var(--phx-line)!important;padding:clamp(24px,2.6vw,36px) 0 0!important;gap:18px}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__num{font-size:clamp(40px,3.6vw,52px)}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__title{font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:.015em}
.phx-case .ph-cards:not(.ph-cards--100) .ph-card__body{font-size:clamp(16px,1.2vw,17.5px);color:var(--phx-ink-2)}

/* ==========================================================================
   13. MÁS AIRE Y MEJOR RELACIÓN TEXTO ↔ IMAGEN
   ========================================================================== */
.phx-case .ph-section,
.phx-case .ph-cards--100 .ph-card,
.phx-case .ph-timeline__item{padding-block:clamp(56px,8vw,120px)!important}
.phx-case .ph-section--cards,.phx-case .ph-section--timeline{padding-block:clamp(24px,3vw,48px)!important}
.phx-case .phx-row{column-gap:clamp(48px,8vw,120px);row-gap:clamp(32px,4vw,56px);align-items:center}
.phx-case .phx-row--media .phx-main{align-self:center}
.phx-case .phx-row--media .phx-media{align-self:center}
.phx-case .ph-section__heading,.phx-case .ph-cards--100 .ph-card__title,.phx-case .ph-timeline__title{margin-bottom:0}
.phx-case .phx-row--media .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){margin-bottom:clamp(24px,2.4vw,36px)}
.phx-case .ph-section-tag{margin-bottom:16px}

/* Tarjetas en rejilla: número + título arriba, texto debajo (apilados) */
.phx-case .ph-cards:not(.ph-cards--100) .phx-main{display:block!important;grid-column:auto!important}
.phx-case .ph-cards:not(.ph-cards--100) .phx-main > :is(.phx-card__head,.phx-card__text){position:static!important;grid-column:auto!important}
.phx-case .ph-cards:not(.ph-cards--100) .phx-card__head{margin-bottom:18px}

/* Índice lateral: la etiqueta solo aparece al pasar el ratón (la activa se marca con el punto) para no tapar el texto */
.phx-case .ph-section-nav__item.is-active .ph-section-nav__label{opacity:0;transform:translateX(6px)}
.phx-case .ph-section-nav__item:hover .ph-section-nav__label{opacity:1;transform:none}

.phx-case .ph-cards:not(.ph-cards--100) .phx-card__head{margin-bottom:20px!important}

/* Datos de la cabecera: en pantallas estrechas se apilan, sin separador colgando */
@media (max-width:900px){
  .phx-ch__row{flex-direction:column;gap:6px}
  .phx-ch__row span,.phx-ch__row span:last-child{border-right:0;margin:0;padding:0}
}

/* Anular reglas heredadas de .ph-page / .ph-page--case-study (relleno superior en móvil, texto centrado) */
.phx-case.ph-page{padding:0!important;text-align:left}
.phx-case .phx-ch__facts,.phx-case .phx-ch__row{text-align:left;align-items:flex-start}

/* cierre de página: banda suave que fija el final */
.phx-footer--end{display:block;height:clamp(96px,12vw,160px);padding:0;margin-top:clamp(48px,6vw,96px);background:color-mix(in srgb,var(--phx-primary) 7%,var(--phx-bg));border-top:1px solid var(--phx-line)}

/* ===== Archivo de proyectos v2 (cards como tahitinumerique.pf/realisations) ===== */
.phx-archive__list{padding:clamp(48px,6vw,96px) var(--phx-gutter) 0;max-width:1440px;margin:0 auto}
.phx-archive__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6.5vw,96px);row-gap:clamp(48px,6vw,88px)}
.phx-card__link{display:block;color:var(--phx-ink)}
.phx-card__img{border-radius:16px;overflow:hidden;background:var(--phx-bg-2);box-shadow:0 0 0 1px var(--phx-line);aspect-ratio:16/10}
.phx-card__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.phx-card__ph{display:block;width:100%;height:100%;background:color-mix(in srgb,var(--phx-primary) 8%,var(--phx-bg))}
.phx-card__body{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:clamp(22px,2.4vw,34px)}
.phx-card__title{margin:0;font-family:var(--phx-serif);font-weight:400;font-size:clamp(28px,3.1vw,44px);line-height:1.06;letter-spacing:-.005em;max-width:15em}
.phx-card__title em{color:var(--phx-primary)}
.phx-card__arrow{flex:none;color:var(--phx-ink-2);margin-top:6px;transition:transform .3s,color .3s}
.phx-card__meta{margin:22px 0 0;color:var(--phx-ink);font-size:clamp(16px,1.3vw,19px);display:flex;flex-wrap:wrap;gap:6px 0}
.phx-card__meta span{padding:0 22px 0 0;margin:0 22px 0 0;border:0;border-right:1px solid var(--phx-line)}
.phx-card__meta span:last-child{border-right:0;margin-right:0;padding-right:0}
.phx-card__link:hover .phx-card__img img{transform:scale(1.035)}
.phx-card__link:hover .phx-card__arrow{transform:translate(4px,-4px);color:var(--phx-primary)}
.phx-archive__back{color:var(--phx-on-primary);text-decoration:underline;text-underline-offset:4px}
.phx-archive__empty{text-align:center;color:var(--phx-ink-2);padding:80px 0}
.phx-ch--archive{padding-bottom:clamp(64px,8vw,112px)}
@media (max-width:760px){.phx-archive__grid{grid-template-columns:1fr}}

/* cabecera: el párrafo de intro arranca a la altura de la primera línea del título */
.phx-ch__in{align-items:start}
.phx-ch__intro{padding-top:.3vw}

/* índice lateral: más separado del borde y con puntos y etiquetas más visibles */
.phx-case .ph-section-nav{right:clamp(28px,3vw,48px);gap:6px}
.phx-case .ph-section-nav__item{gap:12px}
.phx-case .ph-section-nav__dot{width:9px;height:9px;opacity:.5}
.phx-case .ph-section-nav__label{font-size:14px;padding:4px 10px}

/* índice lateral: oculto en la cabecera, visible desde «Cifras clave» hasta el cierre */
.phx-case .ph-section-nav{opacity:0;pointer-events:none}
body.phx-nav-on:not(.phx-past-sections) .ph-section-nav{opacity:1;pointer-events:auto}

/* cabecera: resumen un poco más grande y título en blanco */
.phx-ch__intro{font-size:clamp(19px,1.4vw,20px)}
.phx-ch__title,.phx-ch__title em,.phx-ch__title i{color:#fff}
.phx-ch__intro,.phx-ch__intro p{color:#fff}

/* sobre la banda naranja (cabecera sin scroll): logo, botón de menú y datos en blanco; con el encabezado sólido vuelven a tinta */
body:not(.phx-menu-open) .phx-hdr:not(.is-solid) .phx-logo,
body:not(.phx-menu-open) .phx-hdr:not(.is-solid) .phx-logo-iso{background:#fff}
body:not(.phx-menu-open) .phx-hdr:not(.is-solid) .phx-burger{border-color:#fff;color:#fff;background:transparent}
.phx-ch .phx-ch__row,.phx-ch .phx-ch__row span{color:#fff}
.phx-ch .phx-ch__row span{border-right-color:rgba(255,255,255,.55)}
.phx-ch__tags li{border-color:rgba(255,255,255,.7);color:#fff}

/* medida de lectura: contenido centrado en ~1430 px (columnas de ~670 px a 1900 de ancho, como la referencia) */
.phx-case{--phx-pad:max(clamp(20px,6.67vw,96px),calc((100vw - 1430px) / 2))}
.phx-case .phx-row{column-gap:clamp(40px,6vw,90px)}

/* ===== Lightbox: imágenes sueltas de la ficha (case-lightbox.js) ===== */
.phx-case .ph-image-block.has-lightbox{position:relative}
.phx-case .ph-image-block.has-lightbox img{cursor:zoom-in}
.ph-lightbox-trigger{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--phx-line);border-radius:50%;background:color-mix(in srgb,var(--phx-bg) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--phx-ink);cursor:zoom-in;opacity:.55;transition:opacity .2s ease,background-color .2s ease}
.phx-case .ph-image-block.has-lightbox:hover .ph-lightbox-trigger,.ph-lightbox-trigger:hover,.ph-lightbox-trigger:focus-visible{opacity:1}
.ph-lightbox-trigger:focus-visible{outline:2px solid var(--phx-primary);outline-offset:2px}
@media (hover:none){.ph-lightbox-trigger{opacity:1}}

.ph-lightbox{box-sizing:border-box;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(12,10,9,.94);color:#F6F0E6}
.ph-lightbox[open]{display:flex;align-items:center;justify-content:center}
.ph-lightbox::backdrop{background:rgba(12,10,9,.6)}
.ph-lightbox__fig{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;margin:0;padding:clamp(56px,7vh,72px) clamp(12px,3vw,40px) clamp(14px,3vh,28px)}
.ph-lightbox__scroll{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.ph-lightbox__img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;cursor:default}
/* scroll horizontal ampliado: 80 % del alto de pantalla y desplazamiento horizontal dentro */
.ph-lightbox--wide .ph-lightbox__scroll{flex:0 0 auto;height:80vh;height:80dvh;overflow-x:auto;overflow-y:hidden;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ph-lightbox--wide .ph-lightbox__img{width:auto;height:100%;max-width:none;max-height:none;object-fit:fill;flex:none}
.ph-lightbox--wide .ph-lightbox__scroll:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.ph-lightbox__cap{flex:none;max-width:60em;text-align:center}
.ph-lightbox__cap-title{margin:0;font-size:15px;font-weight:600;line-height:1.4}
.ph-lightbox__cap-desc{margin:4px 0 0;font-size:14px;line-height:1.5;color:rgba(246,240,230,.72)}
.ph-lightbox__close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(246,240,230,.4);border-radius:50%;background:rgba(12,10,9,.55);color:#F6F0E6;cursor:pointer}
.ph-lightbox__close:hover{background:rgba(246,240,230,.16)}
.ph-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .ph-lightbox[open]{animation:ph-lb-in .22s ease}
  .ph-lightbox[open] .ph-lightbox__img{animation:ph-lb-zoom .26s cubic-bezier(.2,.7,.2,1)}
}
@keyframes ph-lb-in{from{opacity:0}to{opacity:1}}
@keyframes ph-lb-zoom{from{transform:scale(.97)}to{transform:none}}

/* archivo: cliente y fecha de las tarjetas en tinta del tema (la cabecera de la ficha los lleva en blanco) */
.phx-archive .phx-card__meta,.phx-archive .phx-card__meta span{color:var(--phx-ink)}
.phx-archive .phx-card__meta span{border-right-color:var(--phx-line)}

/* imágenes sueltas: llenan todo el marco (se recortan); el lightbox las muestra completas */
.phx-case .phx-media .ph-image-block:not(.ph-image-block--hscroll) img{object-fit:cover;object-position:center top}

/* trama de cubos (la del menú overlay) como detalle en la cabecera naranja de la ficha y del archivo */
.phx-ch::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22104%22 height=%22180%22 viewBox=%220 0 104 180%22%3E%3Cpath d=%22M52 0L104 30L104 90L52 120L0 90L0 30Z M52 60L0 30 M52 60L104 30 M52 60L52 120 M0 90L52 120L52 180L0 210L-52 180L-52 120Z M0 150L-52 120 M0 150L52 120 M0 150L0 210 M104 90L156 120L156 180L104 210L52 180L52 120Z M104 150L52 120 M104 150L156 120 M104 150L104 210 M0 -90L52 -60L52 0L0 30L-52 0L-52 -60Z M0 -30L-52 -60 M0 -30L52 -60 M0 -30L0 30 M104 -90L156 -60L156 0L104 30L52 0L52 -60Z M104 -30L52 -60 M104 -30L156 -60 M104 -30L104 30%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%220.22%22 stroke-width=%221%22/%3E%3C/svg%3E");background-size:104px 180px;background-position:0 0;-webkit-mask-image:radial-gradient(ellipse 90% 130% at 0% 100%,#000 0%,transparent 78%);mask-image:radial-gradient(ellipse 90% 130% at 0% 100%,#000 0%,transparent 78%)}
.phx-ch__in{position:relative;z-index:1}

/* etiquetas de la cabecera: redondeadas */
.phx-ch__tags li{border-radius:999px;padding:9px 15px}

/* ===== Scroll horizontal en columna (por defecto) y banda de descanso ===== */
.phx-case .phx-media .ph-image-block--hscroll{width:100%;max-width:100%;height:min(62vh,560px);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:16px;background:var(--phx-bg-2);box-shadow:0 0 0 1px var(--phx-line);cursor:grab}
.phx-case .phx-media .ph-image-block--hscroll img{display:block;height:100%;width:auto;max-width:none;max-height:none;border-radius:0;box-shadow:none;object-fit:initial}
.phx-case .phx-media .ph-image-block--hscroll:active{cursor:grabbing}
.phx-case .phx-media .ph-hscroll-indicator{margin-top:12px}
@media (max-width:900px){.phx-case .phx-media .ph-image-block--hscroll{height:min(50vh,420px)}}

.phx-band{margin-block:clamp(16px,3vw,40px)}
.phx-case .phx-band .ph-image-block--full{width:100%;max-width:100%;margin:0}
@media (prefers-reduced-motion:reduce){.ph-band__img{transform:none!important}}

/* botón de ampliar de los scroll horizontales (fuera del contenedor que se desplaza) */
.ph-lightbox-wrap{position:relative}
.ph-lightbox-wrap:hover .ph-lightbox-trigger{opacity:1}

/* Más aire entre el texto y un scroll a ancho completo (solo filas con .ph-image-block--hscroll-full): 72 a 104 px */
.phx-case .phx-row--media:has(.ph-image-block--hscroll-full){row-gap:clamp(72px,7vw,104px)}

/* móvil vertical: los títulos no se fijan, fluyen con su texto */
@media (max-width:900px){
  .phx-case .phx-row:not(.phx-row--media) .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head),
  .phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-main > :is(.phx-sec__head,.phx-card__head,.phx-tl__head){position:static;grid-column:1;margin-bottom:clamp(20px,2.4vw,32px)}
  .phx-case .phx-row:not(.phx-row--media) .phx-main > :is(.phx-sec__body,.phx-card__text,.phx-tl__text),
  .phx-case .phx-row--media:has(.ph-image-block--hscroll-full) .phx-main > :is(.phx-sec__body,.phx-card__text,.phx-tl__text){grid-column:1}
}

/* Comparador antes/después: las imágenes parten desde arriba a la izquierda (1.28.2) */
.phx-case .phx-media .ph-spread img{object-fit:cover;object-position:left top}