/* ============================================================
   RUNA · web-hero.css · PROPUESTA (Iker 06/10/2026 19:0x): cabecera con fotos de fondo
   Toda la primera pantalla, de borde a borde: textos y botones encima; debajo, las fotos más destacadas de los
   trabajos, cambiando con un fundido. v2 (Iker 19:2x): la foto se ve bastante más (62 %), velo solo en la zona del texto; con NGS. Solo tokens --runa-* del kit.
   Solo se enlaza en sitio_hero (construir.py borrador --hero).
   ============================================================ */
.hero-fondo{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--runa-linea)}
.hf-fondo{position:absolute;inset:0;z-index:-1;background:var(--runa-fondo)}
.hf-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;
  transition:opacity 1.2s cubic-bezier(.65,0,.35,1)}
.hf-fondo img.on{opacity:.62} /* Iker 19:2x: «se tiene que ver más la imagen» (antes .3) */
/* foto de producto sin fondo (auriculares): entera, a la derecha, sin recortar */
.hf-fondo img.hf-recorte{inset:6% 4% 6% 42%;width:auto;height:auto;max-width:54%;max-height:88%;margin:auto 0 auto auto;object-fit:contain}
.hf-fondo img.hf-recorte.on{opacity:.85}
/* velo del color del fondo, más denso a la izquierda (donde va el texto) para que se lea siempre bien */
.hf-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--runa-fondo) 88%,transparent) 0%,color-mix(in srgb,var(--runa-fondo) 70%,transparent) 30%,color-mix(in srgb,var(--runa-fondo) 15%,transparent) 55%,transparent 72%)}

.hf-texto{display:flex;flex-direction:column;justify-content:center;min-height:clamp(520px,72vh,660px);padding-block:var(--e8) var(--e9)}
.hf-texto > *{max-width:680px}
.hf-texto h1{margin-top:var(--e3)}
.hf-texto .subtitulo{margin:var(--e2) 0 0}
.hf-texto .lista-rombo{margin-top:var(--e5)}

/* pie: qué trabajo se ve detrás, con enlace al caso */
.hf-pie{position:absolute;left:0;right:0;bottom:var(--e5);display:flex;justify-content:flex-end;pointer-events:none}
.hf-pie a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--runa-texto);background:color-mix(in srgb,var(--runa-fondo) 80%,transparent);padding:6px 10px;border-radius:var(--runa-radio-s)}
.hf-pie a svg{height:10px;width:auto}
.hf-pie a:hover{color:var(--runa-texto)}
.hf-pie a:not([href]) svg{display:none} /* sin caso publicado (NGS): sin flecha ni enlace */

@media (prefers-reduced-motion:reduce){.hf-fondo img{transition:none}}

/* móvil: la foto detrás de todo el bloque, un poco más suave; el velo, parejo */
@media (max-width:640px){
  .hf-fondo img.on{opacity:.6}
  .hf-fondo img.hf-recorte{inset:auto 0 4% auto;max-width:70%;max-height:55%}
  .hf-fondo img.hf-recorte.on{opacity:.55}
  .hf-fondo::after{background:color-mix(in srgb,var(--runa-fondo) 48%,transparent)}
  .hf-texto{min-height:0;padding-block:var(--e7) calc(var(--e8) + var(--e5))}
  .hf-pie{bottom:var(--e4)}
  .hf-pie a{min-height:44px}
}

/* portada con vídeo (IDENTIDAD 19/10/2026; Iker: opacidad 1, degradado sin cambios). Trabajos sigue con fotos */
.hf-fondo .hf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:1}
/* cabecera v2 (MARKETING 19/10/2026): H1 pequeño con la palabra clave + gancho grande (aspecto del H1 de antes, no es H1) */
.hf-texto h1.hf-h1{margin:0;text-wrap:balance}
.hf-gancho{font-family:var(--f-titular);font-weight:800;letter-spacing:-.01em;line-height:1.05;font-size:clamp(34px,5.2vw,64px);margin:var(--e3) 0 .4em;text-wrap:balance}
@media (max-width:640px){.hf-gancho{font-size:clamp(28px,8.2vw,34px)}}
/* cabecera v2 (IDENTIDAD 19/10/2026 12:13): el degradado crema va dentro del vídeo; en escritorio se quita el CSS (si no, sale doble de claro). En móvil se queda el velo */
@media (min-width:641px){.hf-fondo--video::after{display:none}}
/* logos de fabricantes en la cabecera (Iker 19/10/2026): ordenador, abajo del todo a 40 px del borde; móvil, seguidos bajo el botón. Una tinta */
.hf-logos{display:flex;flex-direction:column;gap:12px}
.hf-logos-tit{margin:0;font:600 11px/1.4 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--runa-texto);opacity:.7}
.hf-logos-fila{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.hf-logo{display:flex;align-items:center;color:var(--runa-texto)}
.hf-logo svg{height:100%;width:auto;display:block}
.hf-logo a{display:flex;align-items:center;height:100%;padding:10px 0;margin:-10px 0;box-sizing:content-box;color:inherit;transition:opacity .2s}
.hf-logo a:hover{opacity:.6}
.hf-logo a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.hf-logo--palabra{height:26px}.hf-logo--ancho{height:12px}.hf-logo--sello{height:42px}
@media (min-width:641px){.hero-fondo--logos .hf-texto{padding-bottom:calc(var(--e9) + 72px)}.hf-logos-pie{position:absolute;left:0;right:0;bottom:40px}}
@media (max-width:640px){.hero-fondo--logos .hf-texto{padding-bottom:var(--e6)}.hf-logos-pie{padding-bottom:var(--e7)}
  .hf-logos-fila{gap:12px 10px;flex-wrap:nowrap;justify-content:space-between}.hf-logo--palabra{height:18px}.hf-logo--ancho{height:8.5px}.hf-logo--sello{height:30px}}
.hf-logo--lineas{height:30px}.hf-logo--compacto{height:23px}
@media (max-width:640px){.hf-logo--lineas{height:21px}.hf-logo--compacto{height:16px}}
@media (max-width:359px){.hf-logos-fila{flex-wrap:wrap}}

/* ===== cabecera v3 (MARKETING 19/10/2026 18:21 · Iker 18:18): título grande = H1, una línea, botón de muestra, nota y piloto ===== */
.hf-texto h1.hf-titulo{font-family:var(--f-titular);font-weight:800;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(34px,4.4vw,58px);margin:0;max-width:none;text-wrap:nowrap;color:var(--runa-texto)}
.hf-texto .hf-linea{margin:var(--e4) 0 0;font-size:clamp(18px,1.6vw,22px);color:var(--runa-texto)}
.hf-acc{margin-top:var(--e6);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hf-acc .botones{margin:0}
.hf-nota{margin:0;font:400 14px/1.45 var(--f-texto);color:var(--runa-texto);opacity:.82;max-width:44ch}
.hf-piloto{display:inline;font:600 14px/1.6 var(--f-texto);color:var(--runa-texto);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;padding:6px 0;margin-top:2px}
.hf-piloto svg{display:inline-block;vertical-align:middle;margin:-2px 0 0 6px;height:9px;width:auto;transition:transform .2s}
.hf-piloto:hover{color:var(--runa-arcilla-700,var(--runa-texto))}.hf-piloto:hover svg{transform:translateX(3px)}
/* las 3 líneas del título enlazan a su servicio (Iker 19/10/2026): texto en el color de siempre; solo la flecha lleva el color del servicio */
.hf-titulo .hf-srv{display:flex;align-items:center;gap:.3em;width:max-content;max-width:100%;color:inherit;text-decoration:none;transition:color .2s}
.hf-titulo .hf-srv svg{flex:none;height:.4em;width:auto;color:var(--c5);fill:currentColor;transition:transform .25s cubic-bezier(.65,0,.35,1)}
/* al pasar el ratón: las palabras, un poco más claras (como los logos); sin color de servicio ni subrayado. La flecha conserva su color */
.hf-titulo .hf-srv:hover{color:color-mix(in srgb,var(--runa-texto) 60%,transparent)}
.hf-titulo .hf-srv:hover svg{transform:translateX(.12em)}
.hf-titulo .hf-srv:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:4px;border-radius:4px}
/* legibilidad: velo crema detrás del texto, también en ordenador (el degradado del vídeo no llega a 1024-1280 px) */
@media (min-width:641px){
  .hf-fondo--video::after{display:block;
    background:linear-gradient(90deg,color-mix(in srgb,var(--runa-fondo) 80%,transparent) 0%,color-mix(in srgb,var(--runa-fondo) 66%,transparent) 38%,transparent 62%)}
}
@media (max-width:640px){
  .hf-fondo--video::after{background:linear-gradient(180deg,color-mix(in srgb,var(--runa-fondo) 82%,transparent) 0%,color-mix(in srgb,var(--runa-fondo) 76%,transparent) 70%,color-mix(in srgb,var(--runa-fondo) 60%,transparent) 100%)}
  .hf-texto h1.hf-titulo{font-size:clamp(28px,8vw,34px)}
  .hf-texto .hf-linea{font-size:17px}
  .hf-acc{margin-top:var(--e5)}
}
/* formulario: modo «muestra gratis» */
.formulario:not(:has(select[name="servicio"] option[value="muestra"]:checked)) .campo-muestra{display:none}

/* permisos de la muestra gratis (Iker 19/10/2026): se abren como una pestaña al elegir «Muestra gratis» */
.muestra-permisos{grid-column:1/-1;margin:var(--e2) 0 0;padding:var(--e4);border:1.5px solid var(--runa-texto);border-radius:var(--runa-radio);background:var(--runa-fondo);display:grid;gap:12px;transform-origin:top}
.formulario .muestra-permisos legend{font:600 12px/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;padding:0 6px;margin-left:-6px}
.formulario .muestra-permisos label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.formulario .muestra-permisos label span{font:400 14px/1.45 var(--f-texto);letter-spacing:0;text-transform:none}
.formulario .muestra-permisos input[type=checkbox]{flex:none;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;box-shadow:none;border-radius:4px;accent-color:var(--runa-accion);cursor:pointer}
.muestra-permisos .req{color:var(--runa-accion);font-weight:700}
.muestra-permisos .permisos-nota{margin:0;font-size:12px;opacity:.75}
.formulario .muestra-permisos input:user-invalid + span{color:#a1301f}
.formulario:has(select[name="servicio"] option[value="muestra"]:checked) .muestra-permisos{animation:permisos-abre .45s cubic-bezier(.65,0,.35,1)}
@keyframes permisos-abre{from{opacity:0;transform:translateY(-8px) scaleY(.92);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){.formulario .muestra-permisos{animation:none!important}}