/* Layout: página de producto «Puertas de entrada de PVC» (/puertas-pvc). v2 del 28/10 (Robert: «más bonita, como si fuesen
     las puertas, con movimiento: esta página la verá gente»). La portada de las landings con su formulario; después, las
     puertas en grande, pasando de lado al bajar; el dibujo de la puerta con lo que lleva de serie; colores y manillas en
     muestras; las cifras del catálogo; las series, cómo se pide y las preguntas. Los datos son los mismos de la v1: catálogo
     Oxyon 2026 (capítulo 3) y catálogo y web del proveedor (puertas de exterior). Lo que no dicen, a info@. */







  /* la foto de la cabecera: la puerta queda en el centro, entre el texto y el formulario */
  .lp-hero.con-fondo .hero-fondo img { object-position: 40% 60%; }
  .grupo-t { font-family: var(--f-disp); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }

  /* 1 · las puertas, en grande. Sin JS, en el móvil o con movimiento reducido: una tira que se desliza con el dedo.
     Con JS en pantalla ancha (.mueve): la sección se queda fija y la tira pasa de lado mientras se baja. */
  .pue-gal { background: var(--negro); color: var(--blanco); }
  .pue-gal .pin { padding-block: 88px 64px; overflow: hidden; }
  .pue-gal.mueve .pin { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); min-height: 600px; padding-block: 40px 32px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .pue-gal .cab-gal { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
  .pue-gal .ceja { color: var(--gris); }
  .pue-gal .h2 { color: var(--blanco); margin: 12px 0 12px; }
  .pue-gal .entrada { color: var(--gris); margin: 0; }
  .pue-gal .contador { font-family: var(--f-disp); font-size: 15px; color: var(--gris); white-space: nowrap; margin: 0; display: none; }
  .pue-gal.mueve .contador { display: block; }
  .pue-gal .contador b { color: var(--blanco); font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-right: 4px; }
  .pista { list-style: none; margin: 32px 0 0; padding: 0 max(16px, var(--lado-d)) 0 max(16px, var(--lado)); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, var(--lado)) max(16px, var(--lado-d)); scrollbar-width: none; }
  .pista::-webkit-scrollbar { display: none; }
  .pue-gal.mueve .pista { overflow: visible; will-change: transform; }
  .pista li { flex: 0 0 auto; width: clamp(220px, 62vw, 300px); scroll-snap-align: start; margin: 0; }
  .pue-gal.mueve .pista li { width: clamp(240px, calc((100vh - var(--cab) - 360px) * .75), 420px); }
  .pista figure { margin: 0; }
  .pista .foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tinta); }
  .pista img { position: absolute; top: 0; left: -6%; width: 112%; height: 100%; object-fit: cover; transform: translate3d(var(--px, 0%), 0, 0); }
  .pista figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 15px; line-height: 1.35; color: var(--blanco); }
  .pista figcaption span { font-family: var(--f-disp); font-size: 13px; color: var(--gris); }
  .pue-gal .fuente { color: var(--gris); margin-top: 22px; }

  /* 2 · la puerta de verdad, con sus puntos: los cuatro de la lista, sobre una foto de producto (Robert, 29/10: el
     dibujo «se nota que es una puerta falsa»). Pasar por cada punto de la lista marca el suyo en la foto */
  .puerta-foto { position: relative; margin: 0; justify-self: center; width: min(100%, 460px); aspect-ratio: 840 / 1200; overflow: hidden; background: var(--tinta); }
  .puerta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .puerta-foto .punto { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--blanco); border: 2px solid var(--blanco); font-family: var(--f-disp); font-weight: 700; font-size: 15px; box-shadow: 0 6px 18px rgba(14, 17, 22, .35); transition: transform .35s var(--ease), opacity .35s var(--ease); }
  .puerta-foto[data-activo] .punto { opacity: .35; }
  .puerta-foto[data-activo="cierre"] [data-p="cierre"], .puerta-foto[data-activo="bisagra"] [data-p="bisagra"],
  .puerta-foto[data-activo="vidrio"] [data-p="vidrio"], .puerta-foto[data-activo="manilla"] [data-p="manilla"] { opacity: 1; transform: scale(1.18); }
  .anima .puerta-foto .punto { opacity: 0; transform: scale(.6); }
  .anima .puerta-foto.en-marcha .punto { opacity: 1; transform: none; }
  .anima .puerta-foto.en-marcha .punto:nth-of-type(2) { transition-delay: .15s; }
  .anima .puerta-foto.en-marcha .punto:nth-of-type(3) { transition-delay: .3s; }
  .anima .puerta-foto.en-marcha .punto:nth-of-type(4) { transition-delay: .45s; }
  .pue-seg { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  @media (max-width: 819px) { .pue-seg { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
  .partes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
  .partes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; background: var(--blanco); border-left: 3px solid transparent; transition: border-color .3s var(--ease); }
  .partes li:hover { border-left-color: var(--azul); }
  .partes .n { width: 30px; height: 30px; border-radius: 50%; background: var(--azul); color: var(--blanco); display: grid; place-items: center; font-family: var(--f-disp); font-weight: 700; font-size: 14px; }
  .partes b { display: block; font-size: 17px; }
  .partes p { margin: 4px 0 0; color: var(--azul-2); font-size: 15px; }
  .elige { margin-top: 56px; }
  .chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .chips li { margin: 0; padding: 10px 16px; border: 1px solid var(--greige); background: var(--blanco); border-radius: 999px; font-size: 15px; }

  /* 3 · acabados: colores y manillas en texto (sin muestras dibujadas), y el vidrio y el panel con sus fotos */
  .acab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 40px; }
  @media (max-width: 819px) { .acab { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
  .acab p { color: var(--azul-2); margin: 10px 0 0; }
  .detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
  @media (max-width: 819px) { .detalles { grid-template-columns: minmax(0, 1fr); } }
  .detalle { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; background: var(--fondo); }
  .detalle img { width: 112px; height: 112px; object-fit: cover; display: block; }
  .detalle h3 { margin: 0; font-family: var(--f-disp); font-size: 20px; }
  .detalle p { margin: 6px 0 0; color: var(--azul-2); font-size: 15px; }
  .enlace-pie { margin-top: 28px; }

  /* 4 · las cifras del catálogo, en grande */
  .pue-datos { background: var(--azul); color: var(--blanco); }
  .pue-datos .ceja, .pue-datos .entrada { color: var(--blanco); opacity: .85; }
  .pue-datos .h2 { color: var(--blanco); }
  .cifras { margin: 44px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
  @media (max-width: 1023px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cifras > div { padding: 26px 22px 6px 0; }
  .cifras dt { font-size: 14px; opacity: .85; }
  .cifras dd { margin: 10px 0 0; font-size: 15px; }
  .cifras dd b { display: block; font-family: var(--f-disp); font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
  .cifras dd b.largo { font-size: clamp(26px, 2.5vw, 38px); white-space: nowrap; padding-top: clamp(4px, .9vw, 12px); }
  .consulta { margin-top: 40px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .35); max-width: 900px; }
  .consulta p { margin: 0; }
  .consulta a, .pue-datos .fuente { color: var(--blanco); }
  .pue-datos .fuente { opacity: .8; }

  /* 5 · series */
  .serie-num { display: block; font-family: var(--f-disp); font-size: clamp(56px, 7vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: .9; color: var(--azul); margin-bottom: 14px; }
  @media (prefers-reduced-motion: reduce) { .partes li { transition: none; } }
  /* el formulario del hero como pieza (sale de la plantilla de presupuesto): perfiles con cabecera de fondo, 21/10 */
  .lp-hero-rej.con-form { align-items: start; padding-top: 20px; }
  .hero-form form.solicitud { border: 1px solid var(--greige); box-shadow: 0 30px 60px -42px rgba(14, 17, 22, .4); }
  .hero-form .acuse { border: 1px solid var(--greige); }
  details.mas { border-top: 1px solid var(--greige); padding-top: 12px; }
  details.mas summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--azul); }
  details.mas summary small { font-weight: 400; color: var(--gris-2); }
  details.mas .mas-campos { display: grid; gap: 14px; margin-top: 14px; }
  .acuse { display: grid; gap: 12px; align-content: start; padding: 28px; background: var(--blanco); color: var(--tinta); }
  .acuse .acuse-t { font-family: var(--f-disp); font-size: 28px; margin: 0; }
  .acuse p { margin: 0; color: var(--azul-2); }
  .fila-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  form.solicitud label { align-content: start; }
  @media (max-width: 819px) { .fila-dos { grid-template-columns: minmax(0, 1fr); } }
  form.solicitud label .ayuda-campo { font-size: 12px; font-weight: 400; color: var(--gris-2); line-height: 1.4; }
  .ayuda-perfil { display: block; margin-top: 6px; font-size: 12px; color: var(--gris-2); }
  .bajo-boton { font-size: 13px; color: var(--gris-2); margin: 0; }
  .error-campo { color: var(--tinta); font-size: 14px; font-weight: 700; border-left: 3px solid var(--tinta); padding-left: 10px; }