/* =============================================================================
   HIERROS ALMELA · styles.css — composición de la página y movimiento (Fase 4)
   Los tokens y componentes están en design-system.css; aquí solo va cómo se
   ordenan en esta página y cómo se «monta» al hacer scroll.

   MOVIMIENTO («montaje»):
   · Las vigas se extienden desde su apoyo (izquierda).
   · Las fotos de producto bajan colgadas de su viga: primero la viga, luego la
     foto, que se asienta.
   · Las cotas se trazan desde el centro y cierran con sus topes.
   · Los ejes de los pasos se replantean uno a uno, con su línea.
   · La portada asienta la foto al cargar y la desplaza un poco al hacer scroll
     (solo donde el navegador lo hace sin JavaScript).
   · La barra de progreso de la cabecera es una viga que crece con el scroll.
   Solo se activa con la clase .mov en <html>, que se pone si hay
   IntersectionObserver y la persona no pidió menos movimiento. Sin ella, todo
   está visible desde el principio.
   ============================================================================= */


/* CABECERA ---------------------------------------------------------------------- */

.cabecera { transition: box-shadow var(--dur-2) var(--ease); }
.cabecera.is-movida { box-shadow: 0 10px 28px -20px rgb(25 27 26 / 0.55); }

.cabecera__menu .icono-cerrar { display: none; }
.cabecera__menu[aria-expanded="true"] .icono-abrir { display: none; }
.cabecera__menu[aria-expanded="true"] .icono-cerrar { display: block; }

/* Progreso de lectura: una viga fina que crece con el scroll */
.progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.menu-movil { border-top: 1px solid var(--pared); background: var(--crema); max-height: calc(100svh - 4.5rem); overflow-y: auto; }
.menu-movil .contenedor { display: grid; padding-block: var(--e-3) var(--e-6); }
.menu-movil a:not(.boton) {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--pared);
  font: 700 var(--t-2) / 1.2 var(--f-titulo);
  color: var(--verde-hondo);
  text-decoration: none;
}
.menu-movil .boton { margin-top: var(--e-5); }
@media (min-width: 60.01em) { .menu-movil { display: none !important; } }


/* PORTADA ----------------------------------------------------------------------- */

.portada__datos { --marca: var(--etiqueta); color: var(--etiqueta); gap: var(--e-2) var(--e-5); margin-top: var(--e-2); }
.portada .entrada strong { color: var(--papel); font-weight: 600; }

/* «Ferralla en Murcia · Ceutí», dentro del H1 (19/10/2026). Decisión del usuario para
   conservar el 1.º puesto de la web antigua en «ferralla murcia». Es la única excepción
   a la regla del rótulo («nunca como etiqueta encima de un titular»): aquí no adorna,
   dice dónde está y lo que busca la gente. Mismo dibujo que .rotulo, en el gris claro
   de la portada para que no compita con el amarillo de los datos de abajo. */
.portada__lugar {
  display: block;
  margin-bottom: var(--e-4);
  font-family: var(--f-texto);
  font-size: var(--t-rotulo);
  font-stretch: 75%;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--texto-2);
}


/* PRODUCTOS --------------------------------------------------------------------- */

.fichas { grid-template-columns: 1fr; }
@media (min-width: 45em) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ficha__texto { display: grid; gap: var(--e-3); align-content: start; }
.ficha__texto > p { margin: 0; color: var(--texto-2); }
.ficha__texto > .ficha__entrada { color: var(--texto); font-weight: 600; }
.ficha .datos { margin-top: var(--e-2); }

.ficha--destacada .ficha__texto { gap: var(--e-4); }
.ficha--destacada .ficha__texto > p { color: var(--texto-2); }
.ficha--destacada .ficha__texto > .ficha__entrada { color: var(--papel); }

/* Hueco de una foto que el cliente aún no ha mandado: marco vacío del mismo
   tamaño, con la cruz con la que los planos marcan un hueco. No se pone otra
   foto en su lugar. Se cambia por {{foto:…}} en cuanto llegue la real. */
.foto--pendiente {
  --fondo-hueco:
    linear-gradient(to top right, transparent calc(50% - 0.6px), var(--pared) calc(50% - 0.6px), var(--pared) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--pared) calc(50% - 0.6px), var(--pared) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    var(--papel);
  display: grid;
  place-items: center;
  background: var(--fondo-hueco);
  outline: 1px solid var(--pared);
  outline-offset: -1px;
}
.foto__pendiente { padding: 0.4rem 0.75rem; background: var(--papel); border: 1px solid var(--pared); color: var(--texto-2); }


/* VENTAJAS ---------------------------------------------------------------------- */

.ventaja h3 { margin-bottom: var(--e-3); }


/* REFERENCIAS ------------------------------------------------------------------- */

.valoracion { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); margin: 0; color: var(--texto-2); }
.valoracion__nota { font: 800 var(--t-2) / 1 var(--f-titulo); color: var(--titulo); }
.valoracion__estrellas, .cita__estrellas { color: var(--verde); letter-spacing: 0.08em; }
.cita__estrellas { justify-self: start; font-size: 1.05rem; line-height: 1; }
.citas {
  display: grid;
  gap: var(--e-7) var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}


/* DUDAS ------------------------------------------------------------------------- */

.dudas { display: grid; gap: var(--e-6); }
@media (min-width: 56em) {
  .dudas { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--e-8); align-items: start; }
  .dudas__cabeza { position: sticky; top: 7rem; margin-bottom: 0; }
}


/* CONTACTO ----------------------------------------------------------------------
   Izquierda: datos sobre el acero en verde hondo. Derecha: el formulario de
   siempre (mismos campos y funcionamiento), sobre crema. */

.contacto { display: grid; grid-template-columns: 1fr; }
@media (min-width: 60em) { .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.contacto__datos {
  --texto: var(--papel);
  --texto-2: #CFD7D0;
  --titulo: var(--papel);
  --marca: var(--papel);
  --foco: var(--etiqueta);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--seccion) var(--margen);
  background: var(--verde-hondo);
  color: var(--texto);
}
.contacto__fondo { position: absolute; inset: 0; z-index: -2; background: var(--color-foto); }
.contacto__fondo picture,
.contacto__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--punto, 50% 50%); }
.contacto__datos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgb(27 49 41 / 0.84) 0%, rgb(27 49 41 / 0.95) 60%);
}
.contacto__datos-in { display: grid; gap: var(--e-5); max-width: 34rem; }
@media (min-width: 60em) { .contacto__datos-in { margin-left: auto; margin-right: var(--e-6); } }
.contacto__datos .viga { --viga-alma: var(--crema); --viga-alas: var(--pared); }
.contacto__datos a:not(.boton) { color: var(--papel); }
.contacto__datos .telefono { color: var(--papel); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.contacto__datos .boton { justify-self: start; }

.contacto__lista { display: grid; gap: var(--e-4); margin: var(--e-2) 0 var(--e-3); }
.contacto__lista div { display: grid; gap: var(--e-1); }
.contacto__lista dt { color: var(--etiqueta); }
.contacto__lista dd { margin: 0; font-size: 1.0625rem; }
a[href^="mailto:"] { overflow-wrap: anywhere; }   /* el correo es largo: que no desborde en móvil */

.contacto__formulario { padding: var(--seccion) var(--margen); display: grid; align-content: center; }
.formulario { display: grid; gap: var(--e-5); max-width: 36rem; width: 100%; }
@media (min-width: 36em) {
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario__ancho { grid-column: 1 / -1; }
}
@media (min-width: 60em) { .formulario { margin-right: auto; margin-left: var(--e-6); } }
.formulario__estado { min-height: 1.6em; margin: 0; font-weight: 600; color: var(--verde); }
.formulario__estado:empty { min-height: 0; }
.formulario__estado.is-error { color: var(--aviso); }
.formulario__privacidad { max-width: 36rem; width: 100%; margin: var(--e-5) 0 0; font-size: var(--t-peq); color: var(--texto-2); }
@media (min-width: 60em) { .formulario__privacidad { margin-right: auto; margin-left: var(--e-6); } }


/* PIE ----------------------------------------------------------------------------- */

.pie__marca-bloque { display: grid; gap: var(--e-5); align-content: start; }
.pie__marca-bloque p { margin: 0; max-width: 30ch; color: var(--texto-2); font-size: var(--t-peq); }


/* LLAMAR FLOTANTE (encima del lanzador del chat; sustituye a WhatsApp) -------- */

.llamar-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
  z-index: var(--z-chat);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1.5px solid var(--pared);
  border-radius: var(--r-3);
  background: var(--papel);
  color: var(--verde);
  box-shadow: var(--sombra-flotante);
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.llamar-flotante:hover { background: var(--crema); }
.llamar-flotante:active { transform: translateY(1px); }
.llamar-flotante svg { width: 1.45rem; height: 1.45rem; }
body.chat-abierto .llamar-flotante { display: none; }


/* CHAT (comportamiento de la página) ------------------------------------------- */

.chat-panel .chat-alternativa { margin-top: var(--e-1); }
.burbuja--asistente p + p { margin-top: 0.5em; }


/* =============================================================================
   MOVIMIENTO — solo con html.mov
   ============================================================================= */

/* Subir: titulares, textos, citas, preguntas */
html.mov [data-mov="subir"],
html.mov [data-mov="inicio"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms var(--ease) var(--retardo, 0ms),
              transform 550ms var(--ease) var(--retardo, 0ms);
}
html.mov [data-mov="subir"].is-visto,
html.mov [data-mov="inicio"].is-visto { opacity: 1; transform: none; }

/* Viga: se extiende desde su apoyo */
html.mov [data-mov="viga"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease) var(--retardo, 0ms);
}
html.mov [data-mov="viga"].is-visto { transform: scaleX(1); }

/* Foto colgada: la viga se extiende, la foto baja y se asienta */
html.mov [data-mov="colgar"]::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms var(--ease) var(--retardo, 0ms);
}
html.mov [data-mov="colgar"] { background: transparent; }   /* el color de espera baja con la foto */
html.mov [data-mov="colgar"] > picture {
  background: var(--color-foto, var(--pared));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 550ms var(--ease) calc(var(--retardo, 0ms) + 80ms);
}
html.mov [data-mov="colgar"] img {
  transform: scale(1.06) translateY(-2%);
  transition: transform 800ms var(--ease) calc(var(--retardo, 0ms) + 80ms);
}
/* Con dos fotos (.foto--doble), la segunda baja un poco después */
html.mov [data-mov="colgar"] > picture + picture { transition-delay: calc(var(--retardo, 0ms) + 200ms); }
html.mov [data-mov="colgar"] > picture + picture img { transition-delay: calc(var(--retardo, 0ms) + 200ms); }
html.mov [data-mov="colgar"].is-visto::before { transform: scaleX(1); }
html.mov [data-mov="colgar"].is-visto > picture { clip-path: inset(0 0 0 0); }
html.mov [data-mov="colgar"].is-visto img { transform: none; }
html.mov .foto--pendiente[data-mov] { background: var(--fondo-hueco); }   /* el hueco no tiene foto que baje: se ve desde el principio */

/* Cota: las líneas salen del centro y se cierran con sus topes */
html.mov [data-mov="cota"] {
  border-inline-color: transparent;
  transition: border-color 200ms linear calc(var(--retardo, 0ms) + 400ms);
}
html.mov [data-mov="cota"]::before,
html.mov [data-mov="cota"]::after {
  transform: scaleX(0);
  transition: transform 500ms var(--ease) calc(var(--retardo, 0ms) + 60ms);
}
html.mov [data-mov="cota"]::before { transform-origin: right center; }
html.mov [data-mov="cota"]::after  { transform-origin: left center; }
html.mov [data-mov="cota"] .cota__valor {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 350ms var(--ease) var(--retardo, 0ms),
              transform 450ms var(--ease) var(--retardo, 0ms);
}
html.mov [data-mov="cota"].is-visto { border-inline-color: currentColor; }
html.mov [data-mov="cota"].is-visto::before,
html.mov [data-mov="cota"].is-visto::after { transform: scaleX(1); }
html.mov [data-mov="cota"].is-visto .cota__valor { opacity: 1; transform: none; }

/* Ejes: se replantean de uno en uno, con su línea de trazo y punto */
.paso:nth-child(1) { --i: 0; }
.paso:nth-child(2) { --i: 1; }
.paso:nth-child(3) { --i: 2; }
.paso:nth-child(4) { --i: 3; }
html.mov [data-mov="ejes"] .paso__eje {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 300ms var(--ease) calc(var(--i) * 140ms),
              transform 400ms var(--ease) calc(var(--i) * 140ms);
}
html.mov [data-mov="ejes"] .paso::before {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 500ms var(--ease) calc(var(--i) * 140ms + 100ms);
}
html.mov [data-mov="ejes"] .paso > :not(.paso__eje) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--ease) calc(var(--i) * 140ms + 80ms),
              transform 500ms var(--ease) calc(var(--i) * 140ms + 80ms);
}
@media (min-width: 56em) {
  html.mov [data-mov="ejes"] .paso::before { transform: scaleX(0); transform-origin: left center; }
}
html.mov [data-mov="ejes"].is-visto .paso__eje,
html.mov [data-mov="ejes"].is-visto .paso > :not(.paso__eje) { opacity: 1; transform: none; }
html.mov [data-mov="ejes"].is-visto .paso::before { transform: none; }

/* Portada: la foto se asienta al cargar */
html.mov .portada__foto picture {
  transform: scale(1.05);
  transition: transform 1200ms var(--ease);
}
html.mov.inicio-listo .portada__foto picture { transform: none; }

/* Scroll: desfase leve de la foto de portada y viga de progreso.
   Solo donde el navegador anima con el scroll sin JavaScript. */
@supports (animation-timeline: scroll()) {
  html.mov .portada__foto img {
    animation: portada-desfase linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  html.mov .progreso {
    animation: progreso linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes portada-desfase { to { transform: translateY(14%); } }
@keyframes progreso { to { transform: scaleX(1); } }

/* Scroll suave entre secciones */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Impresión: todo visible */
@media print {
  html.mov [data-mov], html.mov [data-mov] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cabecera, .chat-lanzador, .chat-panel, .llamar-flotante { display: none !important; }
}


/* PÁGINAS LEGALES (aviso legal, privacidad, cookies) ---------------------------- */

.legal { max-width: 48rem; padding-block: var(--e-8) var(--seccion); }
.legal h1 { font-size: var(--t-1); }
.legal .viga { margin-top: var(--e-4); }
.legal h2 { font-size: var(--t-2); margin: var(--e-7) 0 var(--e-3); }
.legal p, .legal li, .legal dd { color: var(--texto-2); max-width: 68ch; }
.legal ul { display: grid; gap: var(--e-2); padding-left: 1.2rem; }
.legal__fecha { margin: var(--e-4) 0 var(--e-6); color: var(--texto-2); }
.legal__datos { display: grid; gap: var(--e-3); margin: 0 0 var(--e-5); }
.legal__datos div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--e-4); }
.legal__datos dt { font-weight: 600; color: var(--texto); }
.legal__datos dd { margin: 0; }
@media (max-width: 36em) { .legal__datos div { grid-template-columns: 1fr; gap: 0; } }
.pie--corto .pie__legal { margin-top: 0; padding-top: 0; border-top: 0; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }