/* ============ PAGE HERO · sistema común de los heros de páginas internas (.ph-) ============
   Mismo ADN que el hero de la home: la palabra bermellón del titular son cubos (figura calzada sobre .ph-slot),
   sin recuadro, con un dato de instrumento arriba a la derecha.
   Lo usan 20-nosotros-hero, 30-casos-hero, 40-hosting-hero, 50-emprende-hero y 60-contacto-hero. */
.ph { position: relative; }
.ph-inner {
  --l: clamp(2.2rem, min(7.2vw, 10.5svh), 7.4rem);   /* tamaño de las líneas de texto del titular */
  --slot-h: min(33svh, 22vw);                           /* alto máximo de la palabra en cubos */
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: clamp(84px, 11.5vh, 118px);
  padding-bottom: clamp(20px, 4vh, 40px);
  gap: clamp(14px, 2.6vh, 28px);
}

/* --- fila superior: migas + dato de instrumento --- */
.ph-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ph-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--paper-2); }
.ph-crumb li { display: inline-flex; align-items: center; gap: .6em; }
.ph-crumb li + li::before { content: '/'; color: var(--muted); }
.ph-crumb li:first-child::before { content: ''; width: .62em; height: .62em; background: var(--accent); box-shadow: .62em .62em 0 -.12em var(--cobalt); margin-right: .45em; }
.ph-crumb .ph-n { color: var(--muted); }
.ph-crumb a { padding-block: .4em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .3em) / 0 1px no-repeat; transition: background-size .5s var(--ease-out), color .3s; }
.ph-crumb a:hover, .ph-crumb a:focus-visible { background-size: 100% 1px; color: var(--paper); }
.ph-crumb [aria-current] { color: var(--paper); }
.ph-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4em 1.4em; font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--muted); }
.ph-meta > div { display: flex; gap: .7em; }
.ph-meta dt { color: var(--muted); }
.ph-meta dd { margin: 0; color: var(--paper); font-weight: 500; }
.ph-meta .ph-live { display: inline-flex; align-items: center; gap: .55em; }
.ph-meta .ph-live::before { content: ''; width: .55em; height: .55em; background: var(--mint); animation: ph-blink 1.6s steps(2, jump-none) infinite; }
@keyframes ph-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- titular: la última palabra son cubos --- */
.ph-title { margin: auto 0; font-size: var(--l); line-height: .95; letter-spacing: -.045em; font-weight: 760; }
.ph-line { display: block; overflow: hidden; padding: .09em 0 .13em; margin: -.09em 0 -.13em; }
.ph-line-in { display: block; will-change: transform; }
.ph-l1 { color: var(--paper); }
.ph-l2 { color: var(--paper-2); }
.ph-l3 { margin-top: clamp(4px, 1.2vh, 14px); }
.ph-l3 .ph-line-in { display: flex; align-items: flex-end; }
.ph-in-done .ph-line { overflow: visible; }
.js:not(.ph-ready) .ph-line-in { transform: translateY(112%); }
.js:not(.ph-ready) [data-ph-in] { opacity: 0; }
.js.is-ready:not(.ph-ready) .ph-line-in { transform: none; }
.js.is-ready:not(.ph-ready) [data-ph-in] { opacity: 1; }

/* el slot: caja con la proporción exacta de la palabra; el JS calza la figura encima */
.ph-slot {
  --ratio: 5;
  position: relative; display: block; flex: 0 1 auto; min-width: 0;
  width: min(100%, calc(var(--slot-h) * var(--ratio))); aspect-ratio: var(--ratio);
  container-type: size;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ph-slot-txt { position: absolute; left: 0; bottom: -.1em; white-space: nowrap; line-height: 1; letter-spacing: -.05em; font-size: calc(100cqh * .9); font-weight: 780; color: var(--accent); transition: opacity .6s var(--ease-out); }
.ph-gl .ph-slot-txt { opacity: 0; }
.ph-stacked .ph-slot-txt { white-space: normal; line-height: .85; font-size: calc(100cqh * .42); bottom: 0; }
.ph-slot::after { content: ''; position: absolute; inset: -8px -12px -6px; border: 1px solid var(--cobalt); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.ph-h { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--cobalt); opacity: 0; transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; transform: scale(.4); }
.ph-h--tl { left: -17px; top: -13px; } .ph-h--tr { right: -17px; top: -13px; } .ph-h--bl { left: -17px; bottom: -11px; } .ph-h--br { right: -17px; bottom: -11px; }
.ph-tag { position: absolute; left: 50%; top: calc(100% + 22px); transform: translate(-50%, 6px); white-space: nowrap; background: var(--cobalt); color: #fff; font-family: var(--font-mono); font-size: .76rem; line-height: 1; padding: .55em .85em; border-radius: 5px; opacity: 0; transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ph-slot:hover::after, .ph-slot:focus-visible::after, .ph-slot.is-hit::after { opacity: 1; }
.ph-slot:hover .ph-h, .ph-slot:focus-visible .ph-h, .ph-slot.is-hit .ph-h { opacity: 1; transform: none; }
.ph-slot:hover .ph-tag, .ph-slot:focus-visible .ph-tag { opacity: 1; transform: translate(-50%, 0); }
.ph-slot:focus-visible { outline: none; }

/* --- fila inferior: bajada · CTAs · scroll --- */
.ph-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); align-items: end; }
.ph-lead { grid-column: 1 / span 4; font-size: clamp(.98rem, .9rem + .3vw, 1.18rem); line-height: 1.45; color: var(--paper-2); max-width: 40ch; text-wrap: pretty; }
.ph-actions { grid-column: 6 / span 5; display: grid; gap: 14px; justify-items: start; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-cta .btn { white-space: nowrap; }
.ph-note { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
.ph-tools { grid-column: 11 / span 2; display: grid; justify-items: end; }
.ph-scroll { display: inline-flex; align-items: center; gap: .8em; font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--paper-2); }
.ph-scroll:hover { color: var(--paper); }
.ph-scroll-line { position: relative; width: 1px; height: 38px; background: var(--line-strong); overflow: hidden; }
.ph-scroll-line::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 8px; background: var(--accent); animation: ph-drop 1.8s var(--ease-inout) infinite; }
@keyframes ph-drop { 0% { transform: translateY(-10px); } 70%, 100% { transform: translateY(40px); } }

/* /contacto/: hero más corto para que el formulario asome en el primer scroll */
.ph--contacto .ph-inner { --l: clamp(2.2rem, min(6vw, 8svh), 5.6rem); --slot-h: min(23svh, 16vw); min-height: 0; }

body[data-page="contacto"] .ctc-stage { opacity: 0; transition: opacity .8s var(--ease-out); }
body[data-page="contacto"] .ctc-stage.is-live { opacity: 1; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .ph-lead { grid-column: 1 / span 6; }
  .ph-actions { grid-column: 7 / span 6; }
  .ph-tools { display: none; }
}
@media (max-width: 760px) {
  .ph-inner { --l: min(13.4vw, 8.2svh); --slot-h: 24svh; padding-top: clamp(76px, 11svh, 96px); }
  .ph-top { flex-direction: column; gap: 10px; }
  .ph-meta { justify-content: flex-start; font-size: .72rem; }
  .ph-bottom { grid-template-columns: 1fr; }
  .ph-lead, .ph-actions { grid-column: 1 / -1; max-width: none; }
  .ph-lead { font-size: .98rem; max-width: 34ch; }
  .ph-actions { width: 100%; }
  .ph-cta { display: grid; width: 100%; gap: 8px; }
  .ph-cta .btn { justify-content: space-between; padding-block: 1em; }
  .ph-note { display: none; }
}
@media (max-width: 760px) {
  .ph--contacto .ph-inner { --l: min(13.4vw, 8.2svh); --slot-h: 24svh; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .ph-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-meta .ph-live::before, .ph-scroll-line::after { animation: none; }
}