/* ==========================================================
   Portada con más impacto · 30/10/2026
   - El mensaje, los botones y la valoración, en la primera pantalla.
   - La banda cielo pasa a ser prueba social (opiniones reales).
   - Servicios en dos caminos claros (sustituye a las carpetas).
   - Caso Radar SCT corto y galería en una sola fila.
   Copia previa: version-antes-portada-impacto-2026-10-30/
   ========================================================== */

/* ---------- 1. Primera pantalla ---------- */
.hero-msg{position:absolute;left:clamp(24px,6vw,96px);bottom:clamp(80px,15svh,160px);z-index:4;max-width:min(560px,44vw);color:#fafaf7;
  animation:hero-msg-in .7s cubic-bezier(.23,1,.32,1) .15s both}
@keyframes hero-msg-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-msg .eyebrow{color:#f5ecc2!important;margin:0 0 16px}
.hero-msg h1{font:400 clamp(40px,4.3vw,68px)/1.02 'DM Serif Display',Georgia,serif;letter-spacing:-.03em;color:#fafaf7!important;margin:0 0 26px;text-wrap:balance;text-shadow:0 2px 24px #2a061466}
.hero-msg h1 em{font-style:italic;color:#f5ecc2!important}
.hero-msg .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero-msg .btn{background:#fafaf7;color:#7d133a!important;border:1.5px solid #fafaf7;border-radius:40px;padding:17px 26px;font-size:11px}
.hero-msg .btn.outline{background:transparent;color:#fafaf7!important;border-color:#fafaf7aa}
.hero-rating{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px;border-radius:40px;background:#fafaf714;border:1px solid #fafaf733;color:#fafaf7;text-decoration:none;font:700 12px/1 Raleway,sans-serif;letter-spacing:.4px}
.hero-rating[hidden]{display:none}
.hr-stars{color:#f5ecc2;letter-spacing:2px;font-size:14px}
/* La foto se aparta a la derecha para dejar sitio al mensaje */
.hero-poster .poster-photo{left:64%}
.hero-poster .poster-hand{right:3vw;top:12%}
.hero-poster .poster-name{padding-left:12vw}

/* El escenario ocupa lo que queda de pantalla bajo la cabecera, para que botones y valoración se vean al entrar */
.hero-poster .poster-stage{height:calc(100svh - 128px);min-height:560px}

/* Banda cielo: ya sin titular repetido, más compacta */
.poster-intro{padding:96px clamp(20px,5vw,60px) 64px}
.poster-intro .lead{font-size:18px}

/* Prueba social con opiniones reales (se rellena desde opiniones.php) */
.proof{max-width:1120px;margin:40px auto 0}
.proof[hidden]{display:none}
.proof-head{margin:0 0 18px;font:800 12px/1.4 Raleway,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#191919}
.proof-stars{color:#7d133a;letter-spacing:3px;font-size:16px}
.proof-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.proof-quote{margin:0;background:#fafaf7;border-radius:18px;padding:22px 24px;box-shadow:0 12px 30px #7d133a1a}
.proof-quote blockquote{margin:0 0 12px;font:400 19px/1.35 'DM Serif Display',Georgia,serif;color:#7d133a}
.proof-quote figcaption{font:700 12px/1.4 Raleway,sans-serif;color:#191919}
.proof-quote figcaption span{font-weight:500;opacity:.75}
.proof-more{display:inline-block;margin-top:22px;color:#7d133a}

/* ---------- 2. Dos caminos (sustituye a las carpetas) ---------- */
.paths .section-head{margin-bottom:40px}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.path-col{border-radius:22px;padding:30px 32px 32px;display:flex;flex-direction:column}
.path-empresa{background:#7d133a;color:#fafaf7}
.path-ti{background:#f5ecc2;color:#191919}
.path-pill{align-self:flex-start;font:800 10px/1.4 Raleway,sans-serif;letter-spacing:1.8px;text-transform:uppercase;padding:7px 12px;border-radius:30px;margin-bottom:10px}
.path-empresa .path-pill{background:#fafaf7;color:#7d133a}
.path-ti .path-pill{background:#7d133a;color:#fafaf7}
.path-item{display:grid;grid-template-columns:48px 1fr auto;gap:4px 14px;align-items:start;padding:20px 0;border-bottom:1px solid currentColor;text-decoration:none;color:inherit}
.path-empresa .path-item{border-bottom-color:#fafaf733}
.path-ti .path-item{border-bottom-color:#7d133a33}
.pi-n{font:400 34px/1 'Indie Flower',cursive;rotate:-6deg}
.path-empresa .pi-n{color:#f5ecc2}
.path-ti .pi-n{color:#7d133a}
.pi-body b{display:block;font:400 26px/1.1 'DM Serif Display',Georgia,serif;margin-bottom:6px}
.path-empresa .pi-body b{color:#fafaf7}
.path-ti .pi-body b{color:#7d133a}
.pi-body span{display:block;font-size:15px;line-height:1.55}
.path-empresa .pi-body span{color:#fafaf7!important;opacity:.9}
.path-ti .pi-body span{color:#191919}
.pi-go{font-size:20px;align-self:center;transition:transform .25s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.path-item:hover .pi-go{transform:translate(4px,-4px)}.path-item:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
.path-cta{align-self:flex-start;margin-top:24px}
.path-empresa .path-cta{background:#fafaf7;color:#7d133a!important;border-color:#fafaf7}
.path-ti .path-cta{background:#7d133a;color:#fafaf7!important}

/* ---------- 3. Caso Radar SCT, corto ---------- */
.lab-compact{background:#a7d4e4}
.lab-compact .wrap{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.lab-compact .lab-case{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px 56px;align-items:center}
.lab-compact h2{font-size:clamp(32px,3.4vw,50px);margin:14px 0 16px;color:#7d133a}
.lab-intro{font-size:15px;margin:0 0 18px;color:#191919}
.lab-points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.lab-points li{font-size:15px;line-height:1.55;color:#191919;padding-left:0}
.lab-points b{display:block;font:800 10px/1.4 Raleway,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#7d133a;margin-bottom:2px}
.lab-compact .lab-visual{transform:rotate(1.5deg);margin:0}
.lab-compact .btn{background:#7d133a;color:#fafaf7!important}

/* ---------- 4. Galería en una fila ---------- */
.gallery-compact{height:auto!important}
.gallery-compact .wrap{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.gallery-compact .gallery-head{padding:0 0 34px}
.gallery-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.gallery-compact .g-item{width:auto;transform:none!important}
.gallery-compact .g-item img{aspect-ratio:16/10}
.gallery-compact .g-item p b{font-size:24px}

/* ---------- Móvil ---------- */
@media(max-width:800px){
  .hero-poster .poster-stage{height:calc(100svh - 120px);min-height:540px}
  .hero-poster .poster-photo{left:50%;height:60%}
  .hero-poster .poster-name{padding-left:0}
  .hero-poster .poster-hand{display:none}
  .hero-msg{left:0;right:0;bottom:0;max-width:none;padding:80px 20px 66px;background:linear-gradient(to top,#7d133a 62%,#7d133a00)}
  .hero-msg .eyebrow{font-size:9px;margin-bottom:10px}
  .hero-msg h1{font-size:clamp(30px,8.6vw,40px);margin-bottom:18px}
  .hero-msg .btn{padding:14px 18px;font-size:10px}
  .hero-rating{margin-top:14px}
  .poster-intro{padding:84px 20px 48px}
  .proof-quotes{grid-template-columns:1fr}
  .proof-quote:nth-child(n+3){display:none}
  .paths-grid,.lab-compact .lab-case,.gallery-grid{grid-template-columns:1fr}
  .path-col{padding:24px 20px}
  .pi-body b{font-size:22px}
  .lab-compact .lab-visual{transform:none}
}
@media(prefers-reduced-motion:reduce){.hero-msg{animation:none}}

/* ---------- Revisión 04/11/2026 ----------
   Portátiles pequeños e iPad en horizontal (801-1199 px): el nombre y la foto se van a la derecha
   para que el titular no pise «Pereda». La nota manuscrita, más estrecha, fuera de la cara.
   Copia previa: version-antes-revision-2026-11-04/ */
@media(min-width:801px) and (max-width:1399px){
  .poster-name{flex-direction:row;justify-content:center;align-items:flex-start;gap:.22em;font-size:min(10.5vw,19svh);padding-top:clamp(24px,5svh,56px)}
  .pn-1,.pn-2{translate:0 0}
  .poster-photo{left:72%;height:min(74%,calc(100% - 19svh - 40px))}
  .hero-msg{max-width:min(480px,44vw)}
  .hero-msg h1{font-size:clamp(36px,min(4.3vw,6.4svh),60px)}
  .hero-poster .poster-hand{display:none}
}
@media(min-width:801px){.hero-poster .poster-hand{max-width:min(300px,22vw);right:2.5vw;top:9%}}