/* ============================================================
   ROLUM · css/componentes.css — piezas reutilizables
   Nav, botones, fichas, franja, fotos, footer, WhatsApp.
   Cada componente vive aquí una sola vez; las páginas solo
   los colocan. Nada de estilos en el HTML.
   ============================================================ */

/* ---- Header · logo y hamburguesa ---------------------------
   El menú vive siempre en el cajón; los enlaces en línea son el
   respaldo sin JS. Sobre el hero (body.con-hero) la barra carga
   transparente y gana el fondo Acero al hacer scroll (.solida). */
.top{
  position:sticky; top:0; z-index:40;
  background: var(--rol-acero);
  border-bottom:1px solid var(--rol-hierro);
}
/* Solo con JS: sin script no hay quien la vuelva sólida al bajar */
.js .con-hero .top{
  position:fixed; left:0; right:0;
  background:transparent;
  border-bottom-color:transparent;
  transition:background-color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.js .con-hero .top.solida{
  background:var(--rol-acero);
  border-bottom-color:var(--rol-hierro);
}
.top .wrap{
  display:flex; align-items:stretch; justify-content:space-between;
  gap:var(--s5); min-height:64px;
}
.top .marca{
  display:flex; align-items:center; gap:var(--s3);
  padding-block:var(--s3);
}
.top .marca img{ height:30px; width:auto }
.top nav{ display:flex; align-items:stretch; gap:var(--s5) }
.top nav a{
  display:flex; align-items:center;
  font-family:var(--f-display); font-weight:600; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--rol-zinc);
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.top nav a:hover{ color:var(--rol-cal); text-decoration:none }
.top nav a[aria-current="page"]{
  color:var(--rol-chispa);
  border-bottom-color:var(--rol-fragua);
}
.top nav a:focus-visible{ outline-offset:-2px; outline-color:var(--rol-chispa) }

/* Con JS: hamburguesa siempre. En escritorio el cajón es un
   panel anclado a la derecha con folios mono; en teléfono va a
   todo lo ancho. */
.js .menu-btn{ display:grid }
.js .top nav{
  display:none;
  position:absolute; right:var(--s5); left:auto; top:calc(100% + 8px);
  width:min(340px, calc(100vw - 2 * var(--s5)));
  flex-direction:column; gap:0;
  background:var(--rol-acero);
  border:1px solid var(--rol-hierro);
  clip-path:var(--chaflan);
  counter-reset:navi;
  padding-block:var(--s2);
}
.js .top nav.abierta{ display:flex; animation:cajon 220ms var(--ease-out) }
@keyframes cajon{
  from{ opacity:0; transform:translateY(-8px) }
  to{ opacity:1; transform:none }
}
.js .top nav a{
  display:flex; align-items:baseline; gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:2px solid transparent;
  color:var(--rol-cal);
  font-size:.9375rem;
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.js .top nav a::before{
  counter-increment:navi;
  content:"0" counter(navi);
  font-family:var(--f-mono); font-weight:500; font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--rol-zinc);
}
.js .top nav a:hover{ background:var(--rol-forja); color:var(--rol-chispa) }
.js .top nav a:hover::before{ color:var(--rol-chispa) }
.js .top nav a[aria-current="page"]{
  box-shadow:inset 3px 0 0 var(--rol-fragua);
  color:var(--rol-chispa);
}
.js .top nav a[aria-current="page"]::before{ color:var(--rol-fragua) }
@media (max-width:600px){
  .js .top nav{
    right:0; left:0; top:100%;
    width:auto;
    border-inline:0; border-top:0;
    clip-path:none;
    padding-block:0;
  }
  .js .top nav a{ border-top:1px solid var(--rol-hierro) }
}

/* Sin caja: solo las tres barras Cal — nada de fondo sobre fondo */
.menu-btn{
  display:none;
  width:44px; height:44px; align-self:center;
  background:transparent;
  border:0; cursor:pointer;
  place-items:center; align-content:center;
  gap:5px; padding:0;
}
.menu-btn span{
  display:block; width:20px; height:2px;
  background:var(--rol-cal);
  transition:transform var(--dur) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out);
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
.menu-btn:focus-visible{
  outline:2px solid var(--rol-chispa);
  outline-offset:2px;
}

/* ---- Botones · Fragua actúa, contorno revisa, gris sale ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:700;
  font-size:var(--t-boton); letter-spacing:.09em; text-transform:uppercase;
  padding:14px 22px;
  border:1px solid transparent; background:transparent;
  color:inherit; cursor:pointer; text-decoration:none;
  clip-path:var(--chaflan-sm);
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
a.btn:hover{ text-decoration:none }
.btn--primario{ background:var(--senal); color:var(--sobre-senal) }
.btn--primario:hover{ background:var(--senal-hover) }
.btn--primario:active{ background:var(--rol-oxido); color:var(--rol-cal) }
.btn--contorno{ border-color:var(--senal); color:var(--acento) }
.btn--contorno:hover{ background:rgba(232,91,18,.10) }
.btn--quieto{ border-color:var(--regla-control); color:var(--tenue) }
.btn--quieto:hover{ border-color:var(--tenue); color:var(--tinta) }
.btn--lg{ padding:17px 26px; font-size:.875rem }
/* Foco dentro del recorte: el outline se pierde en el chaflán */
.btn:focus-visible, .wa:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--rol-forja), inset 0 0 0 4px var(--rol-cal);
}
.cta-fila{ display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center }

/* ---- Franja de seguridad · 6:1 Forja/Fragua ---------------- */
.franja{ height:10px; display:flex; overflow:hidden }
.franja i{ display:block; height:100% }
.franja i:nth-child(odd){ background:var(--rol-forja); flex:6 }
.franja i:nth-child(even){ background:var(--rol-fragua); flex:1 }

/* ---- Enlace "ir" ------------------------------------------ */
.ir{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-display); font-weight:700; font-size:.875rem;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--acento);
}
/* la flecha es del sprite, no un glifo del tipo de letra */
.flecha{ transition:transform var(--dur-fast) var(--ease-out) }
.flecha--atras{ transform:scaleX(-1) }
a:hover .flecha{ transform:translateX(4px) }
a:hover .flecha--atras{ transform:scaleX(-1) translateX(4px) }

/* ---- Puerta · card de decisión con foto --------------------
   Canto chaflán de firma (como el botón de WhatsApp): borde de
   1px por capas porque el clip se come cualquier border en las
   esquinas. Foto a sangre arriba, cuerpo debajo; al pasar el
   cursor el marco se enciende en Fragua y la foto acerca el
   encuadre. */
.puerta{
  display:block; height:100%;
  clip-path:var(--chaflan);
  background:var(--regla);
  padding:1px;
  text-decoration:none; color:inherit;
  transition:background-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
a.puerta:hover{ text-decoration:none; background:var(--rol-fragua); transform:translateY(-4px) }
.puerta__marco{
  clip-path:var(--chaflan);
  background:var(--superficie);
  height:100%;
  display:flex; flex-direction:column;
}
.puerta__foto{
  overflow:hidden; aspect-ratio:16/10;
  background:var(--hundido);
}
.puerta__foto img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9);
  transition:transform .8s var(--ease-out);
}
a.puerta:hover .puerta__foto img{ transform:scale(1.05) }
.puerta__cuerpo{
  padding:var(--s5) var(--s5) var(--s5);
  flex:1;
  display:flex; flex-direction:column; gap:var(--s3);
}
.puerta .folio{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-chico);
  color:var(--acento); letter-spacing:.08em;
}
.puerta h3{ font-size:1.625rem }
.puerta p{ color:var(--tenue); font-size:1rem; flex:1 }

/* ---- Ficha · línea de catálogo -----------------------------
   Misma placa troquelada que las puertas del home: chaflán con
   borde de 1px por capas. El icono es la identidad de la línea
   y vive en la esquina, como troquel.
   Variante `.ficha--foto`: la línea que SÍ tiene obra fotografiada
   la enseña a sangre arriba (3/2), como la puerta del home. El
   icono no se va — sigue siendo el troquel de la línea. Se aplica
   por página completa, nunca a medias: si el grupo no tiene fotos
   (Productos, Otros servicios) todas sus fichas van sin foto y no
   se anuncia el faltante. */
.ficha{
  clip-path:var(--chaflan);
  background:var(--regla);
  padding:1px;
  transition:background-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.ficha:hover{ background:var(--rol-grafito); transform:translateY(-3px) }
/* la ficha es enlace a su página de línea: hereda color y no subraya */
a.ficha{ display:block; text-decoration:none; color:inherit }
a.ficha:hover{ text-decoration:none; background:var(--rol-fragua) }
.ficha__marco{
  clip-path:var(--chaflan);
  background:var(--superficie);
  padding:var(--s6) var(--s5) var(--s5);
  height:100%;
  display:flex; flex-direction:column; gap:var(--s3);
}
/* con foto el marco no pauta: pautan la foto y el cuerpo */
.ficha--foto .ficha__marco{ padding:0; gap:0 }
.ficha__foto{
  overflow:hidden; aspect-ratio:3/2;
  background:var(--hundido);
}
.ficha__foto img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92) }
.ficha__cuerpo{
  padding:var(--s5) var(--s5) var(--s5);
  flex:1;
  display:flex; flex-direction:column; gap:var(--s3);
}
.ficha__alto{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4);
}
.ficha .folio{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-dato);
  font-variant-numeric:tabular-nums;
  color:var(--acento); letter-spacing:.08em;
}
.ficha .ico--lg{ color:var(--tinta) }
.ficha h3{ font-size:1.375rem; text-wrap:balance }
/* el párrafo empuja: la liga queda al pie aunque las fichas midan distinto */
.ficha p{ color:var(--tenue); font-size:1rem; max-width:60ch; flex:1 }
.ficha .ir{ margin-top:var(--s2) }

/* ---- Tarjeta de canal · el bloque Forja de contacto -------- */
.canal{
  clip-path:var(--chaflan);
  background:var(--rol-hierro);
  padding:1px;
}
.canal__marco{
  clip-path:var(--chaflan);
  background:var(--cepillado), var(--rol-forja);
  color:var(--rol-cal);
  padding:var(--s7) var(--s6) var(--s6);
  display:flex; flex-direction:column; gap:var(--s4);
}
.canal .antetitulo{ color:var(--rol-chispa) }
.canal__numero{
  font-family:var(--f-mono); font-weight:500;
  font-size:clamp(1.5rem, 3.2vw, 2.25rem);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--rol-cal); text-decoration:none;
  display:inline-block;
}
.canal__numero:hover{ color:var(--rol-chispa); text-decoration:none }
.canal p{ color:var(--rol-zinc); max-width:40ch }
.canal .btn--primario{ align-self:flex-start }
.canal__pie{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  border-top:1px solid var(--rol-hierro);
  padding-top:var(--s4); margin-top:var(--s2);
  font-size:var(--t-chico); color:var(--rol-zinc);
}
.canal__pie b{
  font-family:var(--f-display); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--rol-zinc);
  margin-right:var(--s2);
}
.canal__pie span{ color:var(--rol-cal) }

/* ---- Figura · foto con esquina de lona --------------------- */
.figura{ clip-path:var(--chaflan); background:var(--hundido); position:relative }
.figura img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92) }
.figura figcaption{
  font-family:var(--f-mono); font-size:var(--t-chico);
  color:var(--tenue); padding:var(--s3) var(--s4);
}

/* ---- Ficha de datos --------------------------------------- */
.dato-fila{
  display:grid; grid-template-columns:130px 1fr; gap:var(--s4);
  padding-block:var(--s4);
  border-bottom:1px solid var(--regla);
  align-items:baseline;
}
.dato-fila:first-of-type{ border-top:1px solid var(--regla) }
.dato-fila .eti{
  font-family:var(--f-display); font-weight:600; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tenue);
}
.dato-fila a, .dato-fila .dato{ color:var(--acento) }

/* ---- Pager · entre grupos del catálogo --------------------- */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--regla); border:1px solid var(--regla);
}
.pager a{
  background:var(--campo);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s2);
  text-decoration:none; color:inherit;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.pager a:hover{ background:var(--superficie); text-decoration:none }
.pager .antetitulo--tenue{ letter-spacing:.14em }
.pager b{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--f-display); font-weight:700; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:-.01em;
}
.pager a:only-child{ grid-column:1 / -1 }
.pager .sig{ text-align:right; align-items:flex-end }

/* ---- Footer · bloque Forja --------------------------------- */
.pie{
  border-top:1px solid var(--rol-hierro);
  padding-block:var(--s8) calc(var(--s7) + 64px);
  font-size:var(--t-chico);
}
.pie .wrap{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7);
  align-items:start;
}
.pie img{ height:28px; width:auto }
.pie .lema{ margin-top:var(--s4); color:var(--rol-zinc); max-width:34ch }
.pie h2{ font-size:.6875rem; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.17em; color:var(--rol-zinc); margin-bottom:var(--s4) }
.pie ul{ list-style:none; display:flex; flex-direction:column; gap:var(--s2) }
.pie ul a{ color:var(--rol-cal); font-size:.9375rem }
.pie ul a:hover{ color:var(--rol-chispa) }
.pie .dato{ color:var(--rol-chispa) }
.pie .legal{
  grid-column:1 / -1;
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  border-top:1px solid var(--rol-hierro);
  padding-top:var(--s5); margin-top:var(--s4);
  color:var(--rol-zinc);
}

/* ---- WhatsApp flotante ------------------------------------- */
.wa{
  position:fixed; right:var(--s5); bottom:var(--s5); z-index:50;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--rol-fragua); color:var(--rol-forja);
  clip-path:var(--chaflan-sm);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.wa:hover{ background:var(--rol-chispa) }
.wa svg{ width:28px; height:28px; fill:currentColor }
/* Dos rellenos Fragua nunca comparten viewport: el flotante se
   esconde mientras un botón primario esté a la vista (sitio.js). */
.js .wa{
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.js .wa.visible{ opacity:1; pointer-events:auto; transform:none }

/* ---- Responsivo de componentes ------------------------------ */
@media (max-width:900px){
  .pie .wrap{ grid-template-columns:1fr 1fr }
}
@media (max-width:720px){
  .cta-fila{ flex-direction:column; align-items:stretch; gap:var(--s3) }
  .cta-fila .btn{ width:100%; padding-block:var(--s4) }
  /* El icono es la identidad de la línea: no se esconde en el
     teléfono, baja de 30 a 22px. */
  .ficha .ico--lg{ width:22px; height:22px; stroke-width:1.5 }
  .wa{ width:48px; height:48px; right:var(--s4); bottom:var(--s4) }
  .wa svg{ width:24px; height:24px }
  .pie{ padding-block:var(--s7) calc(var(--s6) + 56px) }
  .pie .wrap{ grid-template-columns:1fr; gap:var(--s6) }
}
@media (max-width:560px){
  .top .marca img{ height:24px }
  .dato-fila{ grid-template-columns:1fr; gap:var(--s1) }
  .pager{ grid-template-columns:1fr }
  .pager a:only-child{ grid-column:auto }
  .pager .sig{ text-align:left; align-items:flex-start }
}