/* ==========================================================================
   VIZCACHA SAMI — Carpintería artesanal
   Hoja de estilos principal
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --hierro-profundo:#1A1512;
  --hierro-suave:#332821;
  --madera:#6E4527;
  --madera-2:#59371F;
  --madera-clara:#D8A868;
  --bronce:#7A5230;
  --bronce-oscuro:#5C3D22;
  --brasa:#E8A23C;
  --brasa-glow:rgba(232,162,60,.4);
  --lino:#F3ECDD;
  --lino-2:#E8DAC0;
  --tinta:#241C15;
  --tinta-suave:#6B5A48;
  --linea:#DCCBA8;
  --blanco:#FBF7EE;

  --f-display:'Bitter', serif;
  --f-body:'Work Sans', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  --radio:2px;
  --contenedor:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;font-weight:700;letter-spacing:-0.01em;}
p{margin:0;line-height:1.6;}
button{font-family:inherit;cursor:pointer;}
.contenedor{max-width:var(--contenedor);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bronce-oscuro);
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--bronce-oscuro);}
.seccion{padding:120px 0;}
@media(max-width:900px){.seccion{padding:80px 0;}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

.boton{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radio);
  transition:all .25s ease;
  white-space:nowrap;
}
.boton-primario{background:var(--bronce);color:var(--blanco);}
.boton-primario:hover{background:var(--bronce-oscuro);transform:translateY(-2px);box-shadow:0 10px 22px -8px var(--brasa-glow);}
.boton-secundario{border-color:currentColor;}
.boton-secundario:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);}
.boton-oscuro{border-color:var(--tinta);color:var(--tinta);}
.boton-oscuro:hover{background:var(--tinta);color:var(--blanco);transform:translateY(-2px);}

/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(26,21,18,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  max-width:var(--contenedor);margin:0 auto;
}
.logo{
  font-family:var(--f-display);
  font-weight:700;
  color:var(--blanco);
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;
}
.logo-img{
  height:clamp(32px,4.2vw,42px);
  width:auto;
  max-width:none;
  flex-shrink:0;
  display:block;
}
.logo span{font-family:var(--f-mono);font-size:11px;color:var(--madera-clara);letter-spacing:.1em;white-space:nowrap;}
@media(max-width:400px){
  .logo span{display:none;} /* a la par del ícono, el rótulo ya no entra en pantallas muy angostas */
}
.nav{flex-wrap:nowrap;gap:14px;}
.nav-links{display:flex;gap:17px;flex-shrink:1;min-width:0;}
.nav-links a{
  position:relative;
  display:inline-block;
  padding:6px 1px;
  font-size:13px;color:rgba(251,247,238,.78);
  transition:color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0;height:2px;
  background:var(--madera-clara);
  transition:width .3s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{color:var(--blanco);transform:translateY(-1px);}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{width:100%;}
@media(max-width:1080px){
  .nav-links a::after{display:none;}
  .nav-links a:hover{transform:none;}
}
.nav-logo-link{display:inline-flex;align-items:center;height:100%;padding:6px 1px;}
.nav-links .nav-logo-link::after{content:none;}
.nav-logo-link img{height:22px;width:auto;display:block;opacity:.92;transition:opacity .25s ease,transform .25s ease;}
.nav-logo-link:hover img,
.nav-logo-link:focus-visible img{opacity:1;transform:translateY(-1px);}
@media(max-width:1080px){
  .nav-logo-link{padding:12px 0;}
  .nav-logo-link img{height:26px;}
}
.nav-cta{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.nav-cta .boton-primario{padding:12px 20px;font-size:12px;}
.nav-toggle{display:none;background:none;border:none;padding:6px;flex-shrink:0;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--blanco);margin:5px 0;transition:transform .25s ease, opacity .25s ease;}
.nav-toggle.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.abierto span:nth-child(2){opacity:0;}
.nav-toggle.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:1080px){
  .nav-links{
    /* position:absolute (no fixed) anclado al header, que sí es fixed:
       así el desplegable siempre queda pegado al header real, sea cual
       sea su alto exacto (evita que tape o se despegue del logo en
       pantallas angostas donde el nombre del taller ocupa más lugar). */
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 60px);overflow-y:auto;
    background:var(--hierro-profundo);
    flex-direction:column;gap:0;
    padding:8px 32px 20px;
    transform:translateY(-8px);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links.abierto{opacity:1;pointer-events:auto;transform:translateY(0);}
  .nav-links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;}
  .nav-toggle{display:block;}
}
@media(max-width:400px){
  .nav-cta .boton-primario{padding:11px 14px;font-size:11px;}
}
@media(max-width:370px){
  .nav-cta .boton-primario{display:none;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:var(--hierro-profundo);
  color:var(--blanco);
  padding:190px 0 100px;
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center;
  position:relative;z-index:2;
}
.hero h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.08;
  color:var(--blanco);
}
.hero h1 em{font-style:italic;color:var(--madera-clara);}
.hero p.lead{
  margin-top:26px;max-width:480px;
  font-size:18px;color:rgba(251,247,238,.78);
}
.hero-cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
.hero-stats{
  display:flex;gap:36px;margin-top:64px;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:28px;
}
.hero-stats div{font-family:var(--f-mono);}
.hero-stats strong{display:block;font-family:var(--f-display);font-size:26px;font-weight:700;color:var(--blanco);}
.hero-stats span{font-size:11.5px;color:rgba(251,247,238,.6);text-transform:uppercase;letter-spacing:.06em;}

.hero-plano{position:relative;aspect-ratio:1/1;}
.hero-plano svg{width:100%;height:100%;}

/* Boceto del taller — cobra vida solo desde que carga la página (no
   hace falta pasar el mouse): el trazado de la pieza "se dibuja" en
   bucle, los remaches respiran de a uno y la escuadra oscila
   suavemente, como si el plano de obra estuviera siempre vivo. */
.hero-plano .plano-trazado path{
  animation:planoTrazo 3.2s linear infinite;
}
@keyframes planoTrazo{
  to{stroke-dashoffset:-160;}
}
.hero-plano .plano-remache{
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:planoRemache 2.6s ease-in-out infinite;
}
.hero-plano .plano-remache:nth-child(2){animation-delay:.2s;}
.hero-plano .plano-remache:nth-child(3){animation-delay:.4s;}
.hero-plano .plano-remache:nth-child(4){animation-delay:.6s;}
@keyframes planoRemache{
  0%,100%{transform:scale(1);opacity:.75;}
  50%{transform:scale(1.85);opacity:1;}
}
.hero-plano .plano-escuadra{
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:planoEscuadra 5s ease-in-out infinite;
}
@keyframes planoEscuadra{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-14deg);}
}
@media(prefers-reduced-motion:reduce){
  .hero-plano .plano-trazado path,
  .hero-plano .plano-remache,
  .hero-plano .plano-escuadra{animation:none;}
}

.hero-bg-lineas{position:absolute;inset:0;opacity:.3;z-index:1;pointer-events:none;}

@media(max-width:900px){
  .hero{padding:150px 0 70px;}
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-plano{max-width:320px;margin:0 auto;}
  .hero-stats{gap:24px;flex-wrap:wrap;}
}

/* ============ FRANJA DE CONFIANZA ============ */
.franja{
  background:var(--lino);
  border-bottom:1px solid var(--linea);
  padding:26px 0;
}
.franja .contenedor{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;color:var(--tinta-suave);text-transform:uppercase;
}

/* ============ SERVICIOS ============ */
.servicios-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);
  margin-top:56px;
}
.servicio-card{
  background:var(--blanco);
  padding:38px 30px;
  min-height:220px;
  display:flex;flex-direction:column;gap:18px;
  transition:background .25s;
}
.servicio-card:hover{background:var(--lino);}
.servicio-card .icono{width:34px;height:34px;color:var(--madera);transition:transform .3s ease;}
.servicio-card:hover .icono{transform:translateY(-3px) scale(1.08);}
.servicio-card h3{font-size:19px;}
.servicio-card p{font-size:14.5px;color:var(--tinta-suave);}
@media(max-width:900px){.servicios-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.servicios-grid{grid-template-columns:1fr;}}

/* ============ PROCESO / SOLUCIONES INTEGRALES ============ */
.integrales{background:var(--hierro-suave);color:var(--blanco);position:relative;overflow:hidden;}
.integrales .eyebrow{color:var(--madera-clara);}
.integrales .eyebrow::before{background:var(--madera-clara);}
.integrales-top{max-width:640px;}
.integrales-top h2{font-size:clamp(28px,3.4vw,42px);color:var(--blanco);}
.integrales-top p{margin-top:20px;color:rgba(251,247,238,.75);font-size:16.5px;}
.proceso-linea{
  display:flex;justify-content:space-between;
  margin-top:72px;position:relative;
}
.proceso-linea::before{
  content:"";position:absolute;top:11px;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px);
}
.etapa{position:relative;flex:1;padding-right:24px;}
.etapa:last-child{padding-right:0;}
.etapa-punto{width:23px;height:23px;border-radius:50%;border:1px solid var(--madera-clara);background:var(--hierro-suave);position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.etapa-punto span{width:7px;height:7px;border-radius:50%;background:var(--madera-clara);}
.etapa h4{font-family:var(--f-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:22px;color:var(--madera-clara);}
.etapa p{margin-top:8px;font-size:14.5px;color:rgba(251,247,238,.72);max-width:220px;}
@media(max-width:900px){
  .proceso-linea{flex-direction:column;gap:30px;}
  .proceso-linea::before{display:none;}
  .etapa{padding-right:0;}
}

/* ============ TRABAJOS / PIEZAS REALIZADAS ============
   Carrusel infinito ultra premium: la fila de piezas (duplicada en JS
   para que el loop no tenga costura) se desliza sola en un recorrido
   suave y constante, y se detiene apenas el mouse pasa por encima
   para poder mirar tranquilo. Cada foto ocupa toda la tarjeta (sin
   recuadro ni pedestal alrededor que le reste protagonismo): altura
   fija, ancho libre según la proporción real de cada foto, así una
   pieza horizontal ocupa una tarjeta ancha y una vertical una angosta
   — ninguna queda "perdida" dentro de un marco más grande que la
   imagen. El título y la categoría se dibujan encima de la foto, en
   una franja con degradé, no en un panel aparte. */
.trabajos-seccion{overflow:hidden;}
.trabajos-carrusel{
  margin-top:56px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.trabajos-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:4px 0 4px 32px;
  animation-name:trabajosScroll;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  /* arranca pausado a propósito: si el loop empieza antes de que todas
     las fotos terminen de cargar, el ancho del track cambia a mitad de
     recorrido y el -50% del keyframe deja de coincidir con el punto
     exacto donde empieza la copia duplicada — eso es lo que se ve como
     un salto/reinicio brusco. js/render-trabajos.js agrega la clase
     "listo" recién cuando confirma que cargaron todas. */
  animation-play-state:paused;
}
.trabajos-track.listo{animation-play-state:running;}
.trabajos-carrusel:hover .trabajos-track,
.trabajos-carrusel:focus-within .trabajos-track{animation-play-state:paused;}
@keyframes trabajosScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.trabajo{
  position:relative;
  flex:0 0 auto;height:360px;
  overflow:hidden;
  background:var(--hierro-suave);
  transition:transform .4s ease, box-shadow .4s ease;
}
.trabajo:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 46px rgba(26,21,18,.28);
  z-index:2;
}
.trabajo img{
  height:100%;width:auto;
  display:block;
  object-fit:cover;
  transition:transform .6s ease;
}
.trabajo:hover img{transform:scale(1.05);}
.trabajo-info{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 18px 18px;
  background:linear-gradient(0deg,rgba(20,16,13,.92) 0%,rgba(20,16,13,.55) 55%,transparent 100%);
}
.trabajo-info .eyebrow{margin-bottom:6px;color:var(--madera-clara);}
.trabajo-info .eyebrow::before{background:var(--madera-clara);}
.trabajo-info h4{font-size:15.5px;line-height:1.3;color:var(--blanco);}
.trabajos-vacia{
  margin-top:56px;padding:48px 24px;text-align:center;
  border:1px dashed var(--linea);color:var(--tinta-suave);
  font-family:var(--f-mono);font-size:13.5px;
}
@media(max-width:560px){
  .trabajos-track{gap:10px;padding-left:20px;}
  .trabajo{height:260px;}
}
@media(prefers-reduced-motion:reduce){
  .trabajos-track{animation:none;}
  .trabajos-carrusel{overflow-x:auto;}
}

/* ============ COMO TRABAJAMOS ============ */
.pasos{margin-top:60px;border-top:1px solid var(--linea);}
.paso{
  display:grid;grid-template-columns:90px 1fr 1.3fr;gap:32px;
  padding:38px 0;border-bottom:1px solid var(--linea);
  align-items:start;
}
.paso-num{font-family:var(--f-mono);font-size:14px;color:var(--bronce-oscuro);}
.paso h3{font-size:22px;}
.paso p{color:var(--tinta-suave);font-size:15px;margin-top:10px;max-width:480px;}
@media(max-width:760px){
  .paso{grid-template-columns:50px 1fr;}
  .paso h3{grid-column:2;}
  .paso p{grid-column:2;}
}

/* ============ CONTACTO ============ */
.contacto{background:var(--hierro-profundo);color:var(--blanco);}
.contacto .eyebrow{color:var(--madera-clara);}
.contacto .eyebrow::before{background:var(--madera-clara);}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
.contacto h2{font-size:clamp(28px,3.4vw,40px);color:var(--blanco);}
.contacto-texto p{margin-top:18px;color:rgba(251,247,238,.72);font-size:16px;max-width:420px;}

.form{display:flex;flex-direction:column;gap:16px;}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form label{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(251,247,238,.6);display:block;margin-bottom:8px;}
.form input,.form select,.form textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--blanco);font-family:var(--f-body);font-size:15px;padding:10px 2px;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(251,247,238,.35);}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--madera-clara);}
.form select option{color:#000;}
.form textarea{resize:vertical;min-height:70px;}
.form .boton{margin-top:12px;align-self:flex-start;}
@media(max-width:900px){.contacto-grid{grid-template-columns:1fr;gap:40px;}.form-fila{grid-template-columns:1fr;}}

/* ============ FOOTER ============ */
footer{background:var(--hierro-profundo);border-top:1px solid rgba(255,255,255,.1);padding:36px 0;}
.footer-fila{display:flex;justify-content:center;align-items:center;text-align:center;color:rgba(251,247,238,.55);font-size:13px;}
.footer-copy{margin:0;line-height:1.9;}
.footer-copy a{color:rgba(251,247,238,.75);transition:color .2s ease;}
.footer-copy a:hover{color:var(--madera-clara);}
.footer-bootcode{display:inline-flex;align-items:center;gap:2px;}
.footer-mascota{
  display:inline-block;
  width:18px;height:18px;
  vertical-align:middle;
  object-fit:contain;
  margin:0 2px;
}

/* ============ BOTON VOLVER ARRIBA (flotante) ============ */
.volver-arriba{
  position:fixed;right:22px;bottom:22px;z-index:300;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hierro-profundo);color:var(--madera-clara);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 24px -10px rgba(26,21,18,.5);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .25s ease, color .25s ease;
}
.volver-arriba svg{width:19px;height:19px;}
.volver-arriba.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.volver-arriba:hover{background:var(--madera-clara);color:var(--hierro-profundo);}
@media(max-width:560px){
  .volver-arriba{right:16px;bottom:16px;width:42px;height:42px;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--bronce);outline-offset:2px;
}

/* ==========================================================================
   MODULO: NUESTRO TALLER / CONTACTO (footer)
   Tarjeta con el logo del negocio (responsivo) + iconos de contacto.
   Se completa 100% desde js/site-config.js — puede haber un solo canal.
   ========================================================================== */
.negocio-box{
  border:1px solid rgba(255,255,255,.15);
  background:rgba(251,247,238,.04);
  padding:30px;
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;
  justify-content:space-between;
  margin-top:40px;
}
.negocio-logo-wrap{
  display:flex;align-items:center;gap:16px;flex:1 1 220px;min-width:180px;
}
.negocio-logo-wrap img{
  max-width:100%;
  width:auto;
  height:auto;
  max-height:64px;
  object-fit:contain;
}
.negocio-logo-wrap .negocio-nombre{
  font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--blanco);
}
.negocio-redes{display:flex;flex-wrap:wrap;gap:10px;}
.negocio-redes a{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  color:var(--madera-clara);
  transition:all .2s ease;
  flex-shrink:0;
}
.negocio-redes a svg{width:19px;height:19px;}
.negocio-redes a:hover{background:var(--madera-clara);color:var(--hierro-profundo);border-color:var(--madera-clara);transform:translateY(-2px) scale(1.08);}
@media(max-width:560px){
  .negocio-box{padding:22px;gap:20px;}
  .negocio-redes a{width:38px;height:38px;}
}

/* ==========================================================================
   ALIADOS DE CONFIANZA
   Red de negocios recomendados (se arma 100% desde js/site-aliados.js).
   Sección con paleta oscura a propósito, para que resalte del resto del
   sitio (mayormente claro) y porque varios logos de la red tienen
   detalles blancos que se pierden sobre fondo claro. Cards verticales
   con logo arriba, nombre y una o dos filas de íconos de contacto
   (cada aliado puede tener uno o varios canales). A los costados de
   cada card hay un pequeño rombo que, al pasar el mouse, gira despacio
   y sin parar en vez de necesitar un clic — el detalle "vivo" de la
   sección.
   ========================================================================== */
.aliados-seccion{
  background:linear-gradient(180deg,var(--hierro-profundo),var(--hierro-suave));
  color:var(--blanco);
  position:relative;
}
.aliados-header{max-width:640px;}
.aliados-logo-top{height:38px;width:auto;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.92;}
.aliados-seccion .eyebrow{color:var(--madera-clara);}
.aliados-seccion .eyebrow::before{background:var(--madera-clara);}
.aliados-seccion h2{color:var(--blanco);}
.aliados-sub{margin-top:16px;color:rgba(251,247,238,.72);font-size:16px;max-width:520px;}

.aliados-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:20px;margin-top:56px;
}
.aliado-card{
  position:relative;
  border:1px solid rgba(251,247,238,.14);
  background:rgba(251,247,238,.045);
  padding:30px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
  will-change:transform;
}
.aliado-card:hover{
  border-color:var(--madera-clara);
  background:rgba(251,247,238,.08);
  transform:translateY(-5px);
  box-shadow:0 18px 36px -14px rgba(0,0,0,.5);
}
/* rombos laterales — invisibles por defecto, aparecen y empiezan a
   girar recién cuando el mouse pasa por encima */
.aliado-card::before,
.aliado-card::after{
  content:"";
  position:absolute;top:50%;
  width:9px;height:9px;
  border:1px solid var(--madera-clara);
  transform:translateY(-50%) rotate(45deg);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.aliado-card::before{left:-5px;}
.aliado-card::after{right:-5px;}
.aliado-card:hover::before,
.aliado-card:hover::after{
  opacity:1;
  animation:aliadoGiro 5.5s linear infinite;
}
@keyframes aliadoGiro{
  from{transform:translateY(-50%) rotate(45deg);}
  to{transform:translateY(-50%) rotate(405deg);}
}
.aliado-logo{
  width:100%;height:56px;
  display:flex;align-items:center;justify-content:center;
}
.aliado-logo img{
  max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  opacity:.92;
  transition:opacity .3s ease, transform .35s ease;
}
.aliado-card:hover .aliado-logo img{opacity:1;transform:scale(1.05);}
.aliado-logo .aliado-nombre-fallback{
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--blanco);
}
.aliado-nombre{
  font-family:var(--f-body);font-weight:500;font-size:13.5px;color:rgba(251,247,238,.85);
}
.aliado-iconos-wrap{display:flex;flex-direction:column;gap:8px;align-items:center;}
.aliado-iconos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.aliado-icon{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(251,247,238,.25);color:var(--madera-clara);
  transition:all .22s ease;
}
.aliado-icon svg{width:14px;height:14px;}
.aliado-icon:hover{
  background:var(--madera-clara);color:var(--hierro-profundo);border-color:var(--madera-clara);
  transform:translateY(-2px) scale(1.08);
}
/* Card automática "¿Querés sumar tu negocio?" — mismo look, con un + grande */
.aliado-sumarte{
  justify-content:center;
  cursor:pointer;
}
.aliado-sumarte-plus{
  font-family:var(--f-display);font-size:34px;line-height:1;color:var(--madera-clara);
}
.aliado-sumarte p{font-size:13.5px;color:rgba(251,247,238,.78);}
@media(max-width:560px){
  .aliados-grid{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:14px;}
  .aliado-card{padding:22px 14px;}
}
@media(prefers-reduced-motion:reduce){
  .aliado-card:hover::before,.aliado-card:hover::after{animation:none;}
}

/* ==========================================================================
   GALERIA COMPLETA
   Grilla uniforme (mismo tamaño de tarjeta siempre, sea la foto vertical
   u horizontal — equidad armoniosa) que se arma 100% desde
   js/site-galeria.js, con filtros por categoría y lightbox para ampliar
   cada foto limpia, sin nada dibujado encima. Cada tarjeta queda
   "encapsulada" dentro de un marco tipo canvas — cuatro escuadras en
   las esquinas siempre visibles — y el nombre de la categoría se dibuja
   como una placa sobre la foto solo al pasar el mouse (al hacer clic,
   el lightbox muestra la foto totalmente limpia).
   ========================================================================== */
.galeria-filtros{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:40px;
}
.galeria-filtro{
  font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  padding:9px 16px;border:1px solid var(--linea);background:var(--blanco);color:var(--tinta-suave);
  border-radius:999px;transition:all .2s ease;
}
.galeria-filtro:hover{border-color:var(--madera);color:var(--madera);}
.galeria-filtro.activo{background:var(--tinta);color:var(--blanco);border-color:var(--tinta);}

.galeria-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:18px;margin-top:28px;
}
.galeria-item{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:var(--lino-2);cursor:zoom-in;
  border:1px solid var(--linea);
}
.galeria-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.galeria-item:hover img{transform:scale(1.08);}
/* escuadras de esquina — el detalle "canvas/flyer", siempre visibles y
   sutiles, se acentúan apenas al pasar el mouse */
.galeria-item::before{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(251,247,238,.55);
  pointer-events:none;
  transition:border-color .3s ease, inset .3s ease;
}
.galeria-item:hover::before{inset:10px;border-color:var(--madera-clara);}
.galeria-item-cat{
  position:absolute;left:10px;bottom:10px;
  padding:8px 14px;
  background:var(--tinta);
  color:var(--blanco);font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.galeria-item:hover .galeria-item-cat{opacity:1;transform:translateY(0);}
.galeria-vacia{
  margin-top:28px;padding:48px 24px;text-align:center;
  border:1px dashed var(--linea);color:var(--tinta-suave);
  font-family:var(--f-mono);font-size:13.5px;
}
@media(max-width:560px){
  .galeria-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:10px;}
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed;inset:0;z-index:500;
  background:rgba(23,19,16,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  padding:60px 20px;
}
.lightbox.abierto{opacity:1;pointer-events:auto;}
.lightbox-figura{max-width:min(90vw,900px);max-height:80vh;margin:0;display:flex;flex-direction:column;gap:12px;}
.lightbox-figura img{max-width:100%;max-height:74vh;width:auto;height:auto;margin:0 auto;display:block;object-fit:contain;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.lightbox-figura figcaption{color:var(--blanco);font-family:var(--f-mono);font-size:12.5px;text-align:center;letter-spacing:.03em;}
.lightbox-cerrar{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(251,247,238,.08);color:var(--blanco);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.lightbox-cerrar svg{width:18px;height:18px;}
.lightbox-cerrar:hover{background:var(--brasa);color:var(--hierro-profundo);border-color:var(--brasa);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(251,247,238,.08);color:var(--blanco);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.lightbox-nav svg{width:20px;height:20px;}
.lightbox-nav:hover{background:var(--brasa);color:var(--hierro-profundo);border-color:var(--brasa);}
.lightbox-prev{left:14px;}
.lightbox-next{right:14px;}
@media(max-width:640px){
  .lightbox{padding:70px 12px;}
  .lightbox-nav{width:38px;height:38px;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}