/* ============================================================
   ASM Steel Metal — Tlalnepantla
   Paleta tomada del logo: cobre #A67743 / café #74522D / carbón #333
   ============================================================ */

:root{
  /* marca */
  --cobre:        #A67743;
  --cobre-claro:  #C9945A;
  --cobre-suave:  #E0B98C;
  --cobre-barra:  #77512C;
  --cafe:         #74522D;
  --cafe-oscuro:  #5B4128;
  --carbon:       #333333;

  /* neutros cálidos */
  --negro:        #121110;
  --negro-2:      #1A1816;
  --negro-3:      #23201D;
  --linea:        #322D28;
  --claro:        #F4F1ED;
  --claro-2:      #E8E3DC;
  --texto:        #EDE9E4;
  --texto-2:      #A8A099;
  --texto-osc:    #2B2724;
  --texto-osc-2:  #6B625B;

  --radio:        14px;
  --ancho:        1180px;
  --transicion:   .35s cubic-bezier(.2,.7,.3,1);

  --titulo: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cobre); color:#fff; padding:.7rem 1.2rem;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- tipografía ---------- */
h1,h2,h3,h4{
  font-family:var(--titulo);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.5rem, 5.6vw, 4.6rem); }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); }
h3{ font-size:1.35rem; letter-spacing:0; }
h4{ font-size:1rem; letter-spacing:.06em; }
p{ margin:0 0 1rem; }
em{ font-style:normal; color:var(--cobre-claro); }

.sobretitulo{
  font-family:var(--cuerpo);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cobre);
  margin:0 0 1rem;
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--cuerpo); font-size:.9rem; font-weight:600;
  letter-spacing:.03em;
  padding:.85rem 1.6rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--transicion);
  white-space:nowrap;
}
.btn--cobre{ background:var(--cobre); color:#1B1510; }
.btn--cobre:hover{ background:var(--cobre-claro); transform:translateY(-2px); }
.btn--fantasma{ border-color:rgba(237,233,228,.34); color:var(--texto); }
.btn--fantasma:hover{ border-color:var(--cobre); color:var(--cobre-claro); background:rgba(166,119,67,.09); }
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, var(--cobre-claro), var(--cobre-suave));
  transform:translateX(-101%); transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.btn--cobre:hover::before{ transform:none; }
.btn--cobre:hover{ color:#1B1510; }
.btn--grande{ padding:1.05rem 2.1rem; font-size:.98rem; }
.btn--bloque{ width:100%; }

/* ---------- barra de progreso de lectura ---------- */
.progreso{
  position:fixed; top:0; left:0; z-index:120;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--cafe), var(--cobre), var(--cobre-suave));
  box-shadow:0 0 12px rgba(166,119,67,.55);
  transition:width .12s linear;
}

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0;
  transition:var(--transicion);
}
.cabecera::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,17,16,.92), rgba(18,17,16,0));
  opacity:1; transition:var(--transicion);
}
.cabecera.fijo{
  padding:.6rem 0;
  background:rgba(18,17,16,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.cabecera.fijo::before{ opacity:0; }

.cabecera__fila{
  position:relative;
  display:flex; align-items:center; gap:2rem;
}
.marca{ display:flex; align-items:center; gap:.85rem; }
.marca img{ height:42px; width:auto; transition:var(--transicion); }
.cabecera.fijo .marca img{ height:34px; }
.marca__texto{
  font-family:var(--cuerpo); font-size:.62rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cobre);
  padding-left:.85rem; border-left:1px solid var(--linea);
  line-height:1.5;
  max-width:5.5em;
}

.nav{ display:flex; align-items:center; gap:1.7rem; margin-left:auto; }
.nav a{
  font-size:.86rem; font-weight:500; letter-spacing:.04em;
  color:var(--texto-2); position:relative; padding:.3rem 0;
  transition:var(--transicion);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--cobre); transition:var(--transicion);
}
.nav a:hover{ color:var(--texto); }
.nav a:hover::after{ width:100%; }
.nav a.activo{ color:var(--texto); }
.nav a.activo::after{ width:100%; background:var(--cobre-claro); }
.nav__tel{ color:var(--cobre-claro) !important; font-weight:600 !important; }

.hamburguesa{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:10px;
  background:none; border:0; cursor:pointer;
}
.hamburguesa span{
  display:block; height:2px; background:var(--texto); margin:5px 0;
  transition:var(--transicion); border-radius:2px;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   PORTADA
   ============================================================ */
.portada{
  position:relative;
  min-height:94svh;
  display:flex; align-items:center;
  padding:9rem 0 6rem;
  overflow:hidden;
  isolation:isolate;
}
.portada__medio{ position:absolute; inset:0; z-index:-2; background:var(--negro); }
.portada__medio video{
  width:100%; height:100%; object-fit:cover;
  opacity:.42; filter:saturate(.75) contrast(1.06);
}
/* Trama hexagonal + degradado: se ve mientras no haya video, y lo acompaña cuando lo haya */
.portada__trama{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 620px at 22% 18%, rgba(166,119,67,.30), transparent 62%),
    radial-gradient(900px 520px at 88% 82%, rgba(119,81,44,.26), transparent 60%),
    linear-gradient(to top, var(--negro) 4%, rgba(18,17,16,.72) 45%, rgba(18,17,16,.55) 100%);
}
/* malla hexagonal con deriva lenta */
.portada__trama::after{
  content:""; position:absolute; inset:-10% -10% -10% -10%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23A67743' stroke-opacity='.15' stroke-width='1'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='%23A67743' stroke-opacity='.15' stroke-width='1'/%3E%3C/svg%3E") repeat;
  background-size:56px 96px;
  animation:deriva 46s linear infinite;
  mask-image:radial-gradient(120% 90% at 30% 30%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 30%, #000 25%, transparent 78%);
}
@keyframes deriva{ to{ background-position:56px 96px; } }

.portada__texto{ position:relative; max-width:820px; }
.portada__bajada{
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--texto-2);
  max-width:56ch;
  margin-top:1.6rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }

.portada__scroll{
  position:absolute; left:50%; bottom:2.2rem; translate:-50% 0;
  width:24px; height:38px; border:1px solid rgba(237,233,228,.35); border-radius:14px;
}
.portada__scroll span{
  position:absolute; left:50%; top:8px; translate:-50% 0;
  width:3px; height:7px; border-radius:2px; background:var(--cobre);
  animation:baja 1.9s infinite;
}
@keyframes baja{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }

/* ============================================================
   CIFRAS
   ============================================================ */
.confianza{
  background:var(--negro-2);
  border-block:1px solid var(--linea);
  padding:2.6rem 0;
}
.confianza__rejilla{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.dato{ display:flex; flex-direction:column; gap:.15rem; }
.dato b{
  font-family:var(--titulo); font-size:2.5rem; font-weight:600;
  color:var(--cobre-claro); line-height:1;
}
.dato span{ font-size:.86rem; color:var(--texto-2); }

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{ padding:6.5rem 0; }
.seccion--oscura{ background:var(--negro-2); }
.seccion--clara{ background:var(--claro); color:var(--texto-osc); }
.seccion--clara h2{ color:var(--texto-osc); }
.seccion--clara .seccion__intro{ color:var(--texto-osc-2); }

.seccion__cabeza{ max-width:760px; margin-bottom:3.2rem; }
.seccion__cabeza--centrada{ margin-inline:auto; text-align:center; }
.seccion__intro{ color:var(--texto-2); font-size:1.05rem; max-width:60ch; }
.seccion__cabeza--centrada .seccion__intro{ margin-inline:auto; }

/* buscador */
.buscador{ margin-top:1.8rem; max-width:460px; }
.buscador input{
  width:100%; padding:.9rem 1.2rem;
  background:var(--negro-3); color:var(--texto);
  border:1px solid var(--linea); border-radius:999px;
  font-family:var(--cuerpo); font-size:.94rem;
  transition:var(--transicion);
}
.buscador input:focus{ outline:none; border-color:var(--cobre); background:#282420; }
.buscador input::placeholder{ color:#7A716A; }
.buscador__aviso{ font-size:.83rem; color:var(--cobre-claro); margin:.6rem 0 0; min-height:1.2em; }

/* ---------- tarjetas de catálogo ---------- */
.rejilla-cat{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(285px, 1fr));
}
.tarjeta{
  position:relative;
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:1.5rem 1.5rem 1.7rem;
  transition:var(--transicion);
  overflow:hidden;
}
.tarjeta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(166,119,67,.16), transparent 62%);
  opacity:0; transition:opacity .45s ease;
}
.tarjeta:hover::before{ opacity:1; }
.tarjeta::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,var(--cobre),var(--cafe));
  transform:scaleX(0); transform-origin:left; transition:var(--transicion);
}
.tarjeta:hover{ border-color:#4A4035; transform:translateY(-4px); background:var(--negro-3); }
.tarjeta:hover::after{ transform:scaleX(1); }
.tarjeta.oculta{ display:none; }

.tarjeta__img{
  height:150px; display:grid; place-items:center; margin-bottom:1.1rem;
  perspective:760px;
}
.tarjeta__img img{
  max-height:100%; width:auto;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.tarjeta:hover .tarjeta__img img{ filter:drop-shadow(0 16px 22px rgba(0,0,0,.45)); }
.inclinable.activo img{ transition:transform .08s linear; }

.tarjeta h3{ margin-bottom:.4rem; }
.tarjeta p{ font-size:.92rem; color:var(--texto-2); margin-bottom:1rem; }

.grados{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; padding:0; margin:0; }
.grados li{
  font-size:.74rem; font-weight:500; letter-spacing:.03em;
  padding:.2rem .55rem; border-radius:4px;
  background:rgba(166,119,67,.14); color:var(--cobre-suave);
  border:1px solid rgba(166,119,67,.22);
}

.tarjeta--destacada{ border-color:rgba(166,119,67,.45); }
.sello{
  position:absolute; top:1rem; right:1rem;
  font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--cobre); color:#1B1510;
  padding:.25rem .55rem; border-radius:4px;
}

/* ---------- formatos ---------- */
.rejilla-fmt{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
}
.rejilla-fmt figure{
  margin:0; padding:1.2rem .8rem 1rem; text-align:center;
  background:#fff; border:1px solid var(--claro-2); border-radius:var(--radio);
  transition:var(--transicion);
  perspective:800px;
}
.rejilla-fmt img{ transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.rejilla-fmt .inclinable.activo img{ transition:transform .08s linear; }
.rejilla-fmt figure:hover{ border-color:var(--cobre); transform:translateY(-4px); box-shadow:0 14px 30px rgba(91,65,40,.12); }
.rejilla-fmt img{ margin-inline:auto; filter:drop-shadow(0 8px 14px rgba(43,39,36,.18)); }
.rejilla-fmt figcaption{
  font-family:var(--titulo); font-size:1.05rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; color:var(--texto-osc);
  margin-top:.4rem;
}

/* ---------- servicios ---------- */
.rejilla-2{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; align-items:start; }
.servicios{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; }
.servicios li{ border-top:1px solid var(--linea); padding-top:1.1rem; }
.servicios h3{ font-size:1.1rem; margin-bottom:.3rem; }
.servicios p{ font-size:.9rem; color:var(--texto-2); margin:0; }

/* ---------- pilares ---------- */
.rejilla-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; }
.pilar{
  background:var(--negro-3); border:1px solid var(--linea);
  border-radius:var(--radio); padding:2rem 1.7rem;
}
.pilar__num{
  font-family:var(--titulo); font-size:2.6rem; font-weight:700;
  color:rgba(166,119,67,.32); line-height:1; display:block; margin-bottom:.7rem;
}
.pilar p{ color:var(--texto-2); font-size:.95rem; margin:0; }

/* ---------- reseñas ---------- */
.resenas__cabeza{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2rem; max-width:none;
}
.resenas__cabeza > div:first-child{ max-width:34rem; }

.resumen{
  background:#fff; border:1px solid var(--claro-2); border-radius:var(--radio);
  padding:1.5rem 1.8rem; min-width:250px;
  box-shadow:0 14px 34px rgba(91,65,40,.09);
}
.resumen__nota{ display:flex; align-items:center; gap:.8rem; }
.resumen__nota b{
  font-family:var(--titulo); font-size:3.4rem; font-weight:700;
  line-height:.9; color:var(--texto-osc);
}
.resumen__conteo{ font-size:.88rem; font-weight:600; color:var(--texto-osc-2); margin:.6rem 0 .95rem; }
.resumen__google{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.84rem; font-weight:600; color:var(--cobre-barra);
  padding-top:.8rem; border-top:1px solid var(--claro-2); width:100%;
  transition:var(--transicion);
}
.resumen__google:hover{ color:var(--cobre); gap:.7rem; }

/* estrellas */
.estrellas{ display:flex; gap:2px; }
.estrellas span{
  width:16px; height:16px; background:#E8A33D;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.estrellas span.media{
  background:linear-gradient(90deg,#E8A33D 50%, #D8D2C8 50%);
}
.estrellas span.vacia{ background:#D8D2C8; }

/* carrusel */
.carrusel{ position:relative; margin-top:2.6rem; }
.carrusel__pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2.4rem) / 3);
  gap:1.2rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.4rem .3rem 1.4rem;
  scrollbar-width:none;
}
.carrusel__pista::-webkit-scrollbar{ display:none; }
.carrusel__pista:focus-visible{ outline:2px solid var(--cobre); outline-offset:4px; border-radius:var(--radio); }

.resena{
  scroll-snap-align:start;
  margin:0; background:#fff; border:1px solid var(--claro-2);
  border-radius:var(--radio); padding:1.7rem 1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:var(--transicion);
}
.resena:hover{ border-color:var(--cobre); box-shadow:0 16px 34px rgba(91,65,40,.13); transform:translateY(-3px); }
.resena p{
  margin:0; font-size:1.02rem; line-height:1.6; color:var(--texto-osc); flex:1;
}
/* reseñas de pocas palabras: se muestran en grande, como frase suelta */
.resena--corta p{
  font-size:1.3rem; line-height:1.38; font-weight:500;
  letter-spacing:-.012em; display:flex; align-items:center;
}
.resena footer{
  display:flex; align-items:center; gap:.75rem;
  padding-top:1rem; border-top:1px solid var(--claro-2);
}
.resena__ini{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--cobre),var(--cafe));
  color:#fff; font-family:var(--titulo); font-size:1.15rem; font-weight:700;
}
.resena__ini img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.resena__quien{
  display:flex; flex-direction:column; font-size:.88rem; font-weight:600; color:var(--texto-osc);
  line-height:1.35;
}
.resena__quien i{ font-style:normal; font-size:.78rem; font-weight:400; color:var(--texto-osc-2); }
.resena__guia{
  font-style:normal; font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--cobre-barra); background:rgba(166,119,67,.12);
  border-radius:3px; padding:.1rem .34rem; margin-top:.18rem;
  align-self:flex-start;
}

.carrusel__flecha{
  position:absolute; top:calc(50% - .7rem); z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--texto-osc);
  border:1px solid var(--claro-2); cursor:pointer;
  box-shadow:0 8px 22px rgba(43,39,36,.14);
  transition:var(--transicion);
}
.carrusel__flecha--izq{ left:-14px; }
.carrusel__flecha--der{ right:-14px; }
.carrusel__flecha:hover{ background:var(--cobre); color:#fff; border-color:var(--cobre); transform:scale(1.08); }
.carrusel__flecha[disabled]{ opacity:0; pointer-events:none; transform:scale(.85); }

.carrusel__puntos{ display:flex; justify-content:center; gap:.5rem; margin-top:.4rem; }
.carrusel__puntos button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:#CFC7BA; cursor:pointer; transition:var(--transicion);
}
.carrusel__puntos button.activo{ background:var(--cobre); width:26px; border-radius:99px; }

.nota{ text-align:center; font-size:.78rem; color:var(--texto-osc-2); margin-top:1.6rem; opacity:.8; }

@media (max-width: 980px){
  .carrusel__pista{ grid-auto-columns:calc((100% - 1.2rem) / 2); }
  .carrusel__flecha--izq{ left:-8px; }
  .carrusel__flecha--der{ right:-8px; }
}
@media (max-width: 680px){
  .carrusel__pista{ grid-auto-columns:88%; }
  .carrusel__flecha{ display:none; }
  .resenas__cabeza{ display:block; }
  .resumen{ margin-top:1.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .carrusel__pista{ scroll-behavior:auto; }
}

/* ---------- contacto ---------- */
.seccion--contacto{ background:var(--negro-2); border-top:1px solid var(--linea); }
.datos{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.2rem; }
.datos li{ display:grid; gap:.15rem; }
.datos__eti{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-2);
}
.datos a{ color:var(--cobre-claro); transition:var(--transicion); }
.datos a:hover{ color:var(--cobre-suave); text-decoration:underline; }

.formulario{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:var(--negro-3); border:1px solid var(--linea);
  border-radius:var(--radio); padding:2rem;
}
.campo{ grid-column:1 / -1; display:grid; gap:.4rem; }
.campo--mitad{ grid-column:auto; }
.campo label{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2); }
.campo input, .campo textarea{
  width:100%; padding:.8rem 1rem;
  background:var(--negro-2); color:var(--texto);
  border:1px solid var(--linea); border-radius:9px;
  font-family:var(--cuerpo); font-size:.94rem;
  transition:var(--transicion); resize:vertical;
}
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--cobre); }
.campo input.mal, .campo textarea.mal{ border-color:#C0553E; }
.formulario .btn{ grid-column:1 / -1; }
.formulario__aviso{ grid-column:1 / -1; margin:0; font-size:.86rem; min-height:1.2em; color:var(--cobre-claro); }

/* ============================================================
   PIE
   ============================================================ */
.pie{ background:var(--negro); border-top:1px solid var(--linea); padding:4rem 0 1.6rem; }
.pie__fila{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; }
.pie__logo{ height:82px; width:auto; margin-bottom:1.2rem; }
.pie p{ font-size:.88rem; color:var(--texto-2); }
.pie h4{ color:var(--texto); margin-bottom:.9rem; }
.pie nav{ display:flex; flex-direction:column; gap:.45rem; }
.pie nav a{ font-size:.88rem; color:var(--texto-2); transition:var(--transicion); }
.pie nav a:hover{ color:var(--cobre-claro); }
.pie a{ color:var(--cobre-claro); }
.pie__legal{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--linea);
}
.pie__legal p{ font-size:.79rem; color:#6E655E; margin:0; }

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:90;
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
}
.wa__burbuja{
  position:relative;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 0 rgba(37,211,102,.55);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  animation:wa-vibra 7s ease-in-out infinite;
}
.wa__burbuja svg{ position:relative; z-index:2; }

/* ondas que salen de la burbuja */
.wa__burbuja::before,
.wa__burbuja::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366;
  animation:wa-onda 2.8s cubic-bezier(.2,.6,.4,1) infinite;
}
.wa__burbuja::after{ animation-delay:1.4s; }

@keyframes wa-onda{
  0%   { transform:scale(1);   opacity:.55; }
  70%  { opacity:0; }
  100% { transform:scale(2.1); opacity:0; }
}

/* vibración corta cada siete segundos */
@keyframes wa-vibra{
  0%, 84%, 100% { transform:rotate(0deg) scale(1); }
  85%  { transform:rotate(-13deg) scale(1.05); }
  87%  { transform:rotate(11deg)  scale(1.05); }
  89%  { transform:rotate(-9deg)  scale(1.04); }
  91%  { transform:rotate(7deg)   scale(1.03); }
  93%  { transform:rotate(-4deg)  scale(1.02); }
  95%  { transform:rotate(3deg)   scale(1.01); }
}

/* etiqueta que aparece al pasar el cursor */
.wa__etiqueta{
  background:var(--negro-3); color:var(--texto);
  border:1px solid var(--linea);
  padding:.6rem 1rem; border-radius:999px;
  font-size:.86rem; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0; transform:translateX(14px) scale(.94);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.wa:hover .wa__etiqueta,
.wa:focus-visible .wa__etiqueta{ opacity:1; transform:none; }

.wa:hover .wa__burbuja,
.wa:focus-visible .wa__burbuja{
  transform:scale(1.09) translateY(-2px);
  animation-play-state:paused;
  box-shadow:0 14px 32px rgba(0,0,0,.5), 0 0 0 10px rgba(37,211,102,.14);
}
.wa:active .wa__burbuja{ transform:scale(.96); }

@media (max-width: 780px){
  .wa{ right:1rem; bottom:1rem; }
  .wa__etiqueta{ display:none; }
  .wa__burbuja{ width:54px; height:54px; }
}

/* ---------- animación de entrada ---------- */
.revelar{
  opacity:0; transform:translateY(38px) scale(.985);
  transition:opacity .85s ease, transform .85s cubic-bezier(.16,.84,.34,1);
}
.revelar.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .revelar{ opacity:1; transform:none; transition:none; }
  .portada__scroll span{ animation:none; }
  .portada__trama::after{ animation:none; }
  .btn::before{ transition:none; }
  .wa__burbuja{ animation:none; }
  .wa__burbuja::before, .wa__burbuja::after{ animation:none; opacity:0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .rejilla-2{ grid-template-columns:1fr; gap:2.5rem; }
  .servicios{ grid-template-columns:1fr 1fr; }
  .pie__fila{ grid-template-columns:1fr 1fr; }
  .confianza__rejilla{ grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
}

@media (max-width: 780px){
  .hamburguesa{ display:block; }
  .marca img{ height:34px; }
  .marca__texto{ display:none; }
  .cabecera__cta{ display:none; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw, 320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.4rem;
    padding:2rem;
    background:var(--negro-2); border-left:1px solid var(--linea);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.3,1);
    margin-left:0;
  }
  .nav.abierto{ transform:none; }
  .nav a{ font-size:1.15rem; }
  body.menu-abierto{ overflow:hidden; }

  .seccion{ padding:4.5rem 0; }
  .portada{ padding:7.5rem 0 5rem; }
  .servicios{ grid-template-columns:1fr; }
  .formulario{ grid-template-columns:1fr; padding:1.5rem; }
  .campo--mitad{ grid-column:1 / -1; }
  .pie__fila{ grid-template-columns:1fr; }
  .portada__scroll{ display:none; }
}

@media (max-width: 460px){
  .confianza__rejilla{ grid-template-columns:1fr; }
  .dato{ flex-direction:row; align-items:baseline; gap:.7rem; }
  .dato b{ font-size:1.9rem; }
  .portada__acciones .btn{ width:100%; }
}

/* ============================================================
   SECCIÓN DE CATÁLOGO
   ============================================================ */
.catalogo{
  position:relative; padding:6rem 0; overflow:hidden;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(166,119,67,.20), transparent 62%),
    radial-gradient(700px 460px at 92% 88%, rgba(119,81,44,.18), transparent 60%),
    var(--negro-2);
  border-block:1px solid var(--linea);
}
.catalogo::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23A67743' stroke-opacity='.11' stroke-width='1'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='%23A67743' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E") repeat;
  background-size:56px 96px;
  mask-image:linear-gradient(105deg,#000 8%,transparent 62%);
  -webkit-mask-image:linear-gradient(105deg,#000 8%,transparent 62%);
}
.catalogo__fila{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:4rem; align-items:center;
}
.catalogo__lista{
  list-style:none; padding:0; margin:1.8rem 0 0;
  display:grid; gap:.75rem;
}
.catalogo__lista li{
  position:relative; padding-left:1.7rem;
  font-size:.94rem; color:var(--texto-2);
}
.catalogo__lista li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:11px; height:11px;
  background:var(--cobre);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.catalogo__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:2.4rem;
}
.catalogo__peso{ font-size:.82rem; color:var(--texto-2); letter-spacing:.03em; }

.catalogo__portada{
  position:relative; display:block; justify-self:center;
  max-width:400px; width:100%;
  border-radius:10px; overflow:hidden;
  box-shadow:0 34px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(166,119,67,.55), 0 0 44px rgba(166,119,67,.16);
  transform:perspective(1400px) rotateY(-9deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .6s ease;
}
.catalogo__portada::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 42%);
  pointer-events:none;
}
.catalogo__portada:hover{
  transform:perspective(1400px) rotateY(-3deg) rotateX(0deg) translateY(-8px);
  box-shadow:0 42px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(166,119,67,.5);
}
.catalogo__cinta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.9rem 1.1rem;
  background:linear-gradient(to top, rgba(18,17,16,.94), transparent);
  color:var(--cobre-suave);
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  text-align:center;
}

@media (max-width: 980px){
  .catalogo__fila{ grid-template-columns:1fr; gap:2.8rem; }
  .catalogo__portada{ order:-1; transform:none; max-width:320px; }
  .catalogo__portada:hover{ transform:translateY(-6px); }
}
@media (max-width: 460px){
  .catalogo__acciones .btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .catalogo__portada{ transform:none; transition:none; }
}

/* ============================================================
   BOTÓN DE CATÁLOGO EN EL MENÚ
   ============================================================ */
.nav__catalogo{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem;
  border:1px solid var(--cobre);
  border-radius:999px;
  color:var(--cobre-suave) !important;
  font-size:.86rem; font-weight:600; letter-spacing:.03em;
  background:rgba(166,119,67,.08);
  transition:var(--transicion);
}
.nav__catalogo::after{ display:none; }          /* sin el subrayado del resto del menú */
.nav__catalogo svg{ flex:none; transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.nav__catalogo i{
  font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.12em;
  padding:.13rem .38rem; border-radius:4px;
  background:var(--cobre); color:#1B1510;
}

/* destello que recorre el botón cada pocos segundos */
.nav__catalogo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 35%, rgba(224,185,140,.32) 50%, transparent 65%);
  transform:translateX(-110%);
  animation:destello 6.5s ease-in-out infinite;
}
@keyframes destello{
  0%, 62% { transform:translateX(-110%); }
  78%     { transform:translateX(110%); }
  100%    { transform:translateX(110%); }
}

.nav__catalogo:hover{
  background:var(--cobre); border-color:var(--cobre);
  color:#1B1510 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(166,119,67,.32);
}
.nav__catalogo:hover svg{ transform:translateY(2px); }
.nav__catalogo:hover i{ background:#1B1510; color:var(--cobre-suave); }

@media (max-width: 780px){
  .nav__catalogo{
    width:100%; justify-content:center; margin-top:.6rem;
    padding:.85rem 1.1rem; font-size:1rem;
  }
  .nav__catalogo i{ font-size:.66rem; }
}
@media (prefers-reduced-motion: reduce){
  .nav__catalogo::before{ animation:none; }
}

/* ============================================================
   MAPA DE UBICACIÓN
   ============================================================ */
.mapa{ margin-top:4rem; }
.mapa__marco{
  position:relative;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--negro-3);
}
.mapa__marco::after{           /* funde el mapa con el fondo oscuro del sitio */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(166,119,67,.18),
             inset 0 26px 44px -26px rgba(18,17,16,.9),
             inset 0 -26px 44px -26px rgba(18,17,16,.9);
}
.mapa__marco iframe{
  display:block; width:100%; height:380px; border:0;
  filter:grayscale(.4) contrast(1.04) brightness(.95);
}
.mapa__pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; margin-top:1.4rem;
}
.mapa__pie p{ margin:0; font-size:.92rem; color:var(--texto-2); line-height:1.55; }
.mapa__pie .sobretitulo{ margin-bottom:.35rem; }

@media (max-width: 780px){
  .mapa{ margin-top:2.8rem; }
  .mapa__marco iframe{ height:300px; }
  .mapa__pie .btn{ width:100%; }
}

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */
.pista-ficha{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:1.1rem 0 0; font-size:.84rem; color:var(--texto-2);
}
.pista-ficha svg{ color:var(--cobre); flex:none; }

/* el chip de grado se vuelve botón */
.grados li{ display:contents; }
button.grado{
  font-family:var(--cuerpo);
  font-size:.74rem; font-weight:500; letter-spacing:.03em;
  padding:.25rem .6rem; border-radius:4px;
  background:rgba(166,119,67,.14); color:var(--cobre-suave);
  border:1px solid rgba(166,119,67,.22);
  cursor:pointer; transition:var(--transicion);
}
button.grado:hover{
  background:var(--cobre); color:#1B1510; border-color:var(--cobre);
  transform:translateY(-1px);
}
button.grado:focus-visible{ outline:2px solid var(--cobre-claro); outline-offset:2px; }

/* ---------- contenedor ---------- */
.ficha{ position:fixed; inset:0; z-index:200; }
.ficha[hidden]{ display:none; }
.ficha__fondo{
  position:absolute; inset:0;
  background:rgba(8,7,6,.72); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s ease;
}
.ficha.abierta .ficha__fondo{ opacity:1; }

.ficha__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(100%, 620px);
  background:var(--negro-2);
  border-left:1px solid var(--linea);
  box-shadow:-30px 0 70px rgba(0,0,0,.55);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .48s cubic-bezier(.22,.8,.28,1);
  padding:3.4rem 2.6rem 3rem;
}
.ficha.abierta .ficha__panel{ transform:none; }
.ficha__panel:focus{ outline:none; }

.ficha__cerrar{
  position:sticky; top:0; float:right; margin:-2rem -1.4rem 0 0;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--negro-3); color:var(--texto);
  border:1px solid var(--linea); transition:var(--transicion); z-index:3;
}
.ficha__cerrar:hover{ background:var(--cobre); color:#1B1510; border-color:var(--cobre); }

/* ---------- contenido ---------- */
.ficha__fam{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobre); margin:0 0 .5rem;
}
.ficha__cuerpo h3{
  font-size:clamp(2rem,4.4vw,2.7rem); line-height:1; margin:0 0 1rem;
  color:var(--texto);
}
.ficha__resumen{ font-size:1rem; line-height:1.68; color:var(--texto-2); margin:0; }

.ficha__bloque{ margin-top:2.2rem; }
.ficha__eti{
  font-size:.7rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cobre); margin:0 0 .85rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--linea);
}

.ficha__lista{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.ficha__lista li{
  position:relative; padding-left:1.5rem;
  font-size:.93rem; line-height:1.55; color:var(--texto-2);
}
.ficha__lista li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; background:var(--cobre);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.ficha__tabla{ width:100%; border-collapse:collapse; }
.ficha__tabla th, .ficha__tabla td{
  text-align:left; padding:.6rem .2rem;
  border-bottom:1px solid rgba(50,45,40,.75);
  font-size:.9rem;
}
.ficha__tabla th{
  width:42%; color:var(--texto); font-weight:600;
  font-family:var(--titulo); font-size:1.05rem; letter-spacing:.02em;
}
.ficha__tabla td{ color:var(--texto-2); font-variant-numeric:tabular-nums; }
.ficha__tabla tr:last-child th, .ficha__tabla tr:last-child td{ border-bottom:0; }

.ficha__chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ficha__chips span{
  font-size:.8rem; padding:.34rem .7rem; border-radius:5px;
  background:var(--negro-3); color:var(--texto-2); border:1px solid var(--linea);
}

.ficha__nota{
  margin-top:2rem; border-left:3px solid var(--cobre);
  background:rgba(166,119,67,.09); border-radius:0 7px 7px 0;
  padding:1rem 1.2rem;
}
.ficha__nota p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--texto); }
.ficha__nota b{
  display:block; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--cobre); margin-bottom:.35rem;
}

.ficha__aviso{
  margin-top:1.6rem; font-size:.78rem; line-height:1.6; color:#7C736A;
  padding-top:1.1rem; border-top:1px solid var(--linea);
}

.ficha__cta{
  position:sticky; bottom:-3rem; margin:2.4rem -2.6rem -3rem;
  padding:1.3rem 2.6rem 1.6rem;
  background:linear-gradient(to top, var(--negro-2) 62%, rgba(26,24,22,0));
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.ficha__cta .btn{ flex:1 1 auto; }
.ficha__cta .btn--fantasma{
  background:var(--negro-3); border-color:#4A4238; color:var(--texto);
}
.ficha__cta .btn--fantasma:hover{ border-color:var(--cobre); color:var(--cobre-claro); }

@media (max-width: 620px){
  .ficha__panel{ padding:3rem 1.4rem 2.4rem; width:100%; border-left:0; }
  .ficha__cerrar{ margin-right:-.4rem; }
  .ficha__cta{ margin-left:-1.4rem; margin-right:-1.4rem; padding-inline:1.4rem; }
  .ficha__tabla th{ width:46%; font-size:.98rem; }
}
@media (prefers-reduced-motion: reduce){
  .ficha__panel{ transition:none; }
  .ficha__fondo{ transition:none; }
}