/* Portada (01-10): la película de la línea ligada al scroll, encima del lavado de cara. */
.pelicula{position:relative;height:560vh;background:#F1F4F8}
.pelicula-fija{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pelicula iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#F1F4F8}
.pelicula-texto{position:absolute;left:clamp(16px,5vw,72px);bottom:clamp(28px,9vh,96px);max-width:min(560px,86vw);display:grid;gap:10px;
  padding:22px 24px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(21,40,61,.10);transition:opacity .35s ease,transform .35s ease}
.pelicula-texto[data-oculto]{opacity:0;transform:translateY(10px)}
.pelicula-texto .lema{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--azul)}
.pelicula-texto h1,.pelicula-texto h2{margin:0;font-size:clamp(28px,4.2vw,52px);line-height:1.05;letter-spacing:-.025em;color:var(--tinta);text-wrap:balance}
.pelicula-texto h2{font-size:clamp(24px,3.2vw,40px)}
.pelicula-texto p{margin:0;color:var(--gris);font-size:16px;line-height:1.5}
.pelicula-texto .dato{font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600}
.pelicula-texto .botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pelicula-pista{position:absolute;right:clamp(16px,4vw,48px);top:50%;transform:translateY(-50%);display:grid;gap:10px}
.pelicula-pista span{width:8px;height:8px;border-radius:50%;background:rgba(21,40,61,.18);transition:background .3s,transform .3s}
.pelicula-pista span[data-activo]{background:var(--amarillo);transform:scale(1.4)}
.pelicula-baja{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:13px;color:var(--gris);transition:opacity .3s}
.pelicula-carga{position:absolute;inset:0;display:grid;place-items:center;color:var(--gris);font-weight:600;background:#F1F4F8;transition:opacity .5s}
.pelicula-carga[data-oculto]{opacity:0;pointer-events:none}
@media (max-width:760px){.pelicula{height:480vh}.pelicula-texto{padding:16px 18px;bottom:20px}.pelicula-pista{display:none}}
@media (prefers-reduced-motion:reduce){.pelicula-texto{transition:none}}

/* ── Piel B (07-10): la película se queda; sus textos pasan a titulares centrados arriba, sin tarjeta ── */
html[data-piel=b] .pelicula{background:#fff}
html[data-piel=b] .pelicula-fija{top:var(--b-menu)}
html[data-piel=b] .pelicula-fija{height:calc(100vh - var(--b-menu));height:calc(100svh - var(--b-menu))}
html[data-piel=b] .pelicula-fija::before{content:"";position:absolute;left:0;right:0;top:0;height:min(46%,400px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,0) 100%)}
html[data-piel=b] .pelicula-texto{z-index:2;left:50%;right:auto;top:clamp(26px,6vh,64px);bottom:auto;width:min(860px,calc(100% - 40px));max-width:none;transform:translateX(-50%);
  justify-items:center;gap:6px;padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;text-align:center}
html[data-piel=b] .pelicula-texto[data-oculto]{transform:translate(-50%,10px)}
html[data-piel=b] .pelicula-texto .lema{margin:0 0 2px;padding:0;border:0;background:none;font-size:clamp(14px,1.2vw,17px);letter-spacing:-.005em;font-weight:600;color:var(--azul)}
html[data-piel=b] .pelicula-texto h1,html[data-piel=b] .pelicula-texto h2{font-size:clamp(34px,4.6vw,64px);line-height:1.05;font-weight:600;letter-spacing:-.035em}
html[data-piel=b] .pelicula-texto p{max-width:34em;font-size:clamp(17px,1.6vw,21px);line-height:1.3;color:var(--tinta)}
html[data-piel=b] .pelicula-texto .dato{color:var(--azul)}
html[data-piel=b] .pelicula-texto .b-enlaces{margin-top:8px}
html[data-piel=b] .pelicula-baja{z-index:2;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-piel=b] .pelicula-pista{z-index:2}
html[data-piel=b] .pelicula-carga{background:#fff}
html[data-piel=b] .pelicula iframe{background:#fff}

/* ── Bandas de la portada ── */
.b-cab{--b-pt:clamp(80px,9vw,128px)}
.b-alta .p-heroe{width:auto;max-width:100%;max-height:min(540px,62vh);margin-inline:auto}
.p-linea img{width:min(1400px,100vw);max-width:none;aspect-ratio:16/7;object-fit:cover;object-position:50% 52%;margin-left:50%!important;transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 62%,transparent 100%)}
.b-tesela figure img{width:auto;max-width:92%;max-height:360px}
.b-tesela .p-foto{max-height:280px}
.b-banda .b-sim{margin-bottom:22px}
.b-tesela .b-sim{margin-bottom:18px}
.p-testimonios{margin-top:clamp(36px,5vw,56px)}
.p-testimonios .lv-testimonios{text-align:left}
.p-marcas{--b-pt:clamp(56px,6vw,80px)}
.p-marcas .lv-marcas{margin:22px auto 0;max-width:980px;padding:0}
.p-marcas .lv-marcas li{font-size:17px;font-weight:700;color:#8C9AAB;opacity:1}
.p-news{--b-pt:clamp(56px,6vw,80px)}
.p-news-form{width:min(560px,100%);margin:22px auto 0;text-align:left}
.p-news-form input[type=email]{border-radius:999px;padding:13px 20px}
/* Boletín (21-10): la privacidad, obligatoria y con su enlace; el newsletter, en su propia casilla, sin marcar y opcional.
   Las dos, alineadas a la izquierda: la segunda ocupa dos líneas y centradas quedaban descuadradas */
.p-news-form .lv-check{justify-content:flex-start;align-items:flex-start}
.p-news-form .lv-check input{margin-top:1px}
.p-news-form .lv-check+.lv-check{margin-top:8px}
.p-cierre{--b-pt:clamp(96px,12vw,160px)}
.p-cierre .b-enlaces{margin-top:28px}
@media (max-width:760px){
  html[data-piel=b] .pelicula-fija::before{height:52%}
  html[data-piel=b] .pelicula-texto{top:22px}
  .p-linea img{width:180vw;aspect-ratio:16/9}
  .b-tesela figure img{max-height:260px}
  .b-tesela .p-foto{max-height:200px}
  .b-alta .p-heroe{width:128%;max-width:none;max-height:none;margin-left:-14%}
  .p-news-form .lv-campo-fila{flex-direction:column}
}
html[data-piel=b] .pelicula-texto .dato{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.pelicula-sim{position:absolute;left:16px;top:14px;z-index:2;padding:5px 10px 5px 6px;border-radius:999px;background:rgba(255,255,255,.82)}
@media (max-width:760px){
  .pelicula-sim{left:50%;top:auto;bottom:14px;transform:translateX(-50%);white-space:nowrap}
  html[data-alt-portada] .pelicula-sim{bottom:72px}
  html[data-piel=b] .pelicula-baja{display:none}
}

/* 08-10: la película se reproduce sola, como un vídeo: la sección ocupa una sola pantalla, sin recorrido de scroll */
.pelicula,html[data-piel=b] .pelicula{height:auto}
@media (max-width:760px){.pelicula,html[data-piel=b] .pelicula{height:auto}}
.pelicula-boton{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;padding:8px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:inherit;font-size:13px;font-weight:600;color:var(--tinta);cursor:pointer;box-shadow:0 6px 18px -10px rgba(21,40,61,.45)}
.pelicula-boton:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.pelicula-pista span{cursor:pointer}
.pelicula-fija,html[data-piel=b] .pelicula-fija{position:relative;top:auto}
html section.pelicula{padding:0}   /* piel-2.css da relleno a todas las secciones */
/* 22-10: el póster se ve desde el primer instante; la sala 3D, encima, solo cuando va fluida (.en-marcha, portada.js).
   Sin ella no se ven ni «Pausa» ni los puntos de la pista: en el móvil, «Pausa» tapaba «Recreación 3D de la línea». */
.pelicula-poster,.pelicula-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pelicula iframe{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.pelicula.en-marcha iframe{opacity:1;visibility:visible;transition:opacity .8s ease}
.pelicula:not(.en-marcha) :is(.pelicula-boton,.pelicula-pista){visibility:hidden}
@media (prefers-reduced-motion:reduce){.pelicula iframe,.pelicula.en-marcha iframe{transition:none}}

/* ── Familias (21-10): la rejilla de apple.com/es debajo de la película (variante A «Calco de Apple», elegida por David) ──
   Medidas de apple.com/es a 1440 (prototipos/portada-como-apple/_material/material.md): 12 px de margen y de separación,
   tarjetas de 580 px de alto con esquinas rectas, texto a 53 px del borde, título 40/44, frase 21/25 y píldora de 36.
   La fila de tres (SMD · THT · Inspección) sale de las mismas reglas; la tarjeta ancha (Software e Industria 4.0) lleva las
   del bloque grande de Apple: 692 de alto, título 56/60, frase 28/32 y píldora de 44. Textos, fotos, letra y colores, de Bwit.
   La máquina se ve siempre entera: cada foto va con object-fit:contain dentro de su hueco, que deja aire a los lados y abajo.
   21-10 noche (David): sin «Pedir oferta»; toda la tarjeta es el enlace a su apartado y se nota al pasar el ratón. */
.p-familias{--f-gris:#F0F4F7;--f-crema:#FBF6E7;--hueco:12px;
  --t-alto:580px;--t-arriba:53px;--t-tit:40px;--t-tit-li:44px;--t-frase:21px;--t-frase-li:25px;--t-tit-frase:3px;--t-frase-bot:12px;
  --t-foto-arriba:36px;--t-foto-abajo:30px;--t-foto-lado:clamp(16px,4%,40px);
  display:grid;gap:var(--hueco);background:#fff}
html[data-piel=b] main>.p-familias{padding:var(--hueco)}   /* gana al main>section de estilo.css */
.p-fila{display:grid;gap:var(--hueco)}
.p-fila.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-fila.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-fam{position:relative;display:flex;flex-direction:column;height:var(--t-alto);overflow:hidden;text-align:center;background:var(--f-gris)}
.p-fam.blanco{background:#fff;box-shadow:inset 0 0 0 1px var(--b-filete)}
.p-fam.crema{background:var(--f-crema)}
.p-fam.ancha{--t-alto:692px;--t-arriba:56px;--t-tit:56px;--t-tit-li:60px;--t-frase:28px;--t-frase-li:32px;--t-tit-frase:6px;--t-frase-bot:17px;--t-foto-arriba:45px}
.p-fam-texto{flex:none;padding:var(--t-arriba) 24px 0}
.p-fam h2{margin:0;font-size:var(--t-tit);line-height:var(--t-tit-li);font-weight:600;letter-spacing:-.012em;color:var(--tinta);text-wrap:balance}
.p-fam-texto p{max-width:30em;margin:var(--t-tit-frase) auto 0;font-size:var(--t-frase);line-height:var(--t-frase-li);font-weight:400;letter-spacing:-.003em;color:var(--tinta);text-wrap:balance}
/* Toda la tarjeta es un enlace: el <a> del título se estira por encima de la tarjeta entera. El de la IA, en Inspección,
   queda por encima del estirado para que se pueda pinchar aparte. Con el teclado, el foco marca la tarjeta entera. */
.p-fam-enlace{color:inherit;text-decoration:none;outline:none}
.p-fam-enlace::after{content:"";position:absolute;inset:0;z-index:1}
.p-fam:has(.p-fam-enlace:focus-visible){outline:3px solid var(--azul);outline-offset:-3px}
.p-fam-ia{position:relative;z-index:2;color:var(--azul);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.p-fam-ia:hover{text-decoration-thickness:2px}
.p-fam-ia:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}
/* «Más información»: ya no es un botón aparte, solo dice que la tarjeta se abre */
.p-fam-mas{display:inline-flex;align-items:center;justify-content:center;height:36px;margin-top:var(--t-frase-bot);padding:0 15px;border-radius:980px;
  background:var(--azul);color:#fff;font-size:14px;line-height:18px;font-weight:400;letter-spacing:-.012em;white-space:nowrap}
.p-fam.ancha .p-fam-mas{height:44px;padding:0 21px;font-size:17px;line-height:20px}
/* 27-10 (David): las tarjetas de familia no reaccionan al pasar el ratón (ni sombra, ni zoom de la máquina, ni píldora); siguen siendo un enlace entero */
/* La foto: en el hueco que queda bajo la píldora, centrada y apoyada abajo; --ancho es cuánto ocupa a lo ancho como mucho */
.p-fam-foto{position:relative;flex:1 1 auto;min-height:0;margin:var(--t-foto-arriba) var(--t-foto-lado) var(--t-foto-abajo)}
.p-fam-foto>img{position:absolute;left:50%;bottom:0;width:var(--ancho,80%);height:100%;transform:translateX(-50%);transform-origin:50% 100%;
  object-fit:contain;object-position:50% 100%}
.p-fam.smd{--ancho:88%}.p-fam.tht{--ancho:72%}.p-fam.insp{--ancho:80%}.p-fam.coat{--ancho:56%}.p-fam.cons{--ancho:86%}.p-fam.i40{--ancho:90%}
.p-fam.smd .p-fam-foto{margin-bottom:12px}   /* el render de la RS-2 ya trae debajo su suelo, que se funde con la tarjeta */
/* «Recreación 3D», en texto, en el aire que queda bajo la foto */
.p-fam-nota{position:absolute;left:0;right:0;bottom:8px;line-height:16px}

/* 735–1068 px: dos columnas de 490 de alto; la fila de tres pasa a 2 + 1, con Inspección a todo el ancho */
@media (max-width:1068px){
  .p-familias{--t-alto:490px;--t-arriba:44px;--t-tit:32px;--t-tit-li:36px;--t-frase:19px;--t-frase-li:23px;--t-tit-frase:4px;--t-foto-arriba:30px;--t-foto-abajo:28px}
  .p-fam.ancha{--t-alto:650px;--t-arriba:48px;--t-tit:48px;--t-tit-li:52px;--t-frase:24px;--t-frase-li:28px;--t-tit-frase:6px;--t-frase-bot:15px;--t-foto-arriba:36px}
  .p-fila.tres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-fila.tres>.insp{grid-column:1/-1}
}
/* Móvil (≤ 734 px): una columna a sangre, 500 de alto; la tarjeta ancha, igual que las demás */
@media (max-width:734px){
  .p-familias,.p-fam.ancha{--t-alto:500px;--t-arriba:39px;--t-tit:32px;--t-tit-li:36px;--t-frase:19px;--t-frase-li:23px;--t-tit-frase:4px;--t-frase-bot:11px;--t-foto-arriba:30px;--t-foto-abajo:28px;--t-foto-lado:20px}
  html[data-piel=b] main>.p-familias{padding:var(--hueco) 0}
  .p-fila.tres,.p-fila.dos{grid-template-columns:1fr}
  .p-fila.tres>.insp{grid-column:auto}
  .p-fam-texto{padding-left:20px;padding-right:20px}
  .p-fam h2{letter-spacing:-.006em}
  .p-fam.blanco{box-shadow:inset 0 1px 0 var(--b-filete),inset 0 -1px 0 var(--b-filete)}
  .p-fam.ancha .p-fam-mas{height:36px;padding:0 15px;font-size:14px;line-height:18px}
  .p-fam.smd{--ancho:100%}.p-fam.tht{--ancho:80%}.p-fam.insp{--ancho:84%}.p-fam.coat{--ancho:70%}.p-fam.cons{--ancho:100%}.p-fam.i40{--ancho:100%}
}

/* Avisos de la portada que se tienen que leer (auditoría del 21-10, punto 7): «Recreación 3D…» iba en --gris2 (#8391A2, 2,9 a 3,2 a 1).
   Con --gris (#5E6E81) y 13 px da 4,5 a 5,2 a 1 sobre todos los fondos de la portada (blanco, #F5F7FA, #F0F4F7, #E8F0F8 y #FBF6E7).
   Solo en la portada: el resto de páginas lo lleva piel-b.css. */
.b-sim,.p-fam-nota{color:var(--gris);font-size:13px}