/* =========================================================
   MeshoTech - estilos del sitio publico
   Paleta: blanco base / rojo de acento / negro tinta
   ========================================================= */

:root{
  --blanco:#ffffff;
  --papel:#f4f6f8;
  --papel-2:#eaeef2;
  --linea:#dde3e9;
  --tinta:#101418;
  --tinta-2:#1c2229;
  --grafito:#5b6570;
  --rojo:#62c902; /*e10600*/
  --rojo-osc:#62c902;/*a80400*/
  --rojo-tenue:rgba(225,6,0,.08);

  --display:'Space Grotesk',system-ui,sans-serif;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ancho:1180px;
  --r:4px;
  --sombra:0 1px 2px rgba(16,20,24,.04),0 8px 24px rgba(16,20,24,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--blanco);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}

/* --- Etiqueta monoespaciada con corchete rojo --- */
.rotulo{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grafito);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;
}
.rotulo::before{content:'';width:14px;height:9px;border:1px solid var(--rojo);border-right:0}

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:.95rem 1.5rem;border-radius:var(--r);border:1px solid transparent;
  transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--rojo{background:var(--rojo);color:#fff}
.btn--rojo:hover{background:var(--rojo-osc)}
.btn--negro{background:var(--tinta);color:#fff}
.btn--negro:hover{background:var(--rojo)}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--linea:hover{border-color:var(--tinta);background:var(--papel)}
.btn--claro{background:#fff;color:var(--tinta)}
.btn--claro:hover{background:var(--rojo);color:#fff}
.btn--bloque{width:100%}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* =============== Barra superior =============== */
.barra{background:var(--tinta);color:#c7ced6;font-family:var(--mono);font-size:.73rem;letter-spacing:.04em}
.barra .contenedor{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.barra a{color:#fff;text-decoration:none}
.barra a:hover{color:var(--rojo)}
.barra__estado{display:inline-flex;align-items:center;gap:.5rem}
.punto{width:7px;height:7px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 3px var(--rojo-tenue)}

/* =============== Navegacion =============== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:70px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.logo__marca{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;line-height:1}
.logo__marca span{color:var(--rojo)}
.logo__sub{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grafito);margin-top:3px}
.logo__icono{width:34px;height:34px;flex:none}
.menu{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem .85rem;border-radius:var(--r);color:var(--grafito);display:block;
}
.menu a:hover{color:var(--tinta);background:var(--papel)}
.menu a.activo{color:var(--tinta)}
.menu a.activo::after{content:'';display:block;height:2px;background:var(--rojo);margin-top:5px}
.nav__acciones{display:flex;align-items:center;gap:.6rem}
.nav__toggle{display:none;background:none;border:1px solid var(--linea);border-radius:var(--r);padding:.5rem .6rem;cursor:pointer}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--tinta);margin:4px 0}

/* =============== Marco de plano tecnico (elemento firma) =============== */
.plano{position:relative;padding:18px;background:
  linear-gradient(var(--linea) 1px,transparent 1px) 0 0/100% 28px,
  linear-gradient(90deg,var(--linea) 1px,transparent 1px) 0 0/28px 100%,var(--papel);
  border:1px solid var(--linea);border-radius:var(--r)}
.plano::before,.plano::after{
  content:'';position:absolute;width:16px;height:16px;border:2px solid var(--rojo);pointer-events:none}
.plano::before{top:7px;left:7px;border-right:0;border-bottom:0}
.plano::after{bottom:7px;right:7px;border-left:0;border-top:0}
.plano__lienzo{position:relative;background:#fff;border:1px solid var(--linea);overflow:hidden}
.plano__lienzo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.plano__tira{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:1rem;
  background:rgba(16,20,24,.88);color:#fff;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.55rem .8rem;
}
.plano__tira b{color:var(--rojo);font-weight:600}
.plano__cota{
  position:absolute;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--grafito);
  text-transform:uppercase;background:var(--papel);padding:0 .4rem;
}
.plano__cota--sup{top:-8px;left:34px}
.plano__cota--der{bottom:-8px;right:34px}

/* =============== Hero =============== */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);background:
  radial-gradient(circle at 82% 12%,var(--rojo-tenue),transparent 45%),var(--blanco)}
.hero .contenedor{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero h1{margin-bottom:1rem}
.hero h1 em{font-style:normal;color:var(--rojo)}
.hero__texto{color:var(--grafito);font-size:1.05rem;max-width:52ch}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 2rem}
.hero__datos{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--linea)}
.hero__dato{flex:1 1 130px;padding:1rem 1.2rem 0 0}
.hero__dato b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1}
.hero__dato span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}

/* Cinta roja con "flujo" animado */
.cinta{height:4px;background:var(--tinta);position:relative;overflow:hidden}
.cinta::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--rojo) 0 40px,transparent 40px 100px);
  animation:flujo 6s linear infinite;
}
@keyframes flujo{to{transform:translateX(100px)}}
@media (prefers-reduced-motion:reduce){.cinta::after{animation:none}}

/* =============== Secciones =============== */
.seccion{padding:clamp(3rem,6vw,4.5rem) 0}
.seccion--papel{background:var(--papel)}
.seccion__cabecera{max-width:60ch;margin-bottom:2.2rem}
.seccion__cabecera p{color:var(--grafito);margin:0}

/* Beneficios */
.beneficios{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--linea);border-radius:var(--r);background:#fff;overflow:hidden}
.beneficio{padding:1.6rem;border-right:1px solid var(--linea)}
.beneficio:last-child{border-right:0}
.beneficio svg{width:26px;height:26px;stroke:var(--rojo);fill:none;stroke-width:1.6;margin-bottom:.9rem}
.beneficio h3{font-size:1rem;margin-bottom:.35rem}
.beneficio p{font-size:.9rem;color:var(--grafito);margin:0}

/* =============== Tarjetas de producto =============== */
.grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.grilla--3{grid-template-columns:repeat(3,1fr)}
.tarjeta{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  text-decoration:none;overflow:hidden;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tarjeta::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;z-index:2}
.tarjeta:hover{border-color:#c8d0d8;box-shadow:var(--sombra);transform:translateY(-3px)}
.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta__img{position:relative;background:var(--papel);border-bottom:1px solid var(--linea)}
.tarjeta__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tarjeta__sku{
  position:absolute;top:.6rem;left:.6rem;background:rgba(16,20,24,.9);color:#fff;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;padding:.25rem .5rem;border-radius:2px;
}
.tarjeta__cuerpo{padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;flex:1}
.tarjeta__cat{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);margin-bottom:.5rem}
.tarjeta h3{font-size:1.05rem;margin-bottom:.4rem}
.tarjeta__resumen{font-size:.88rem;color:var(--grafito);margin:0 0 1rem;flex:1}
.tarjeta__pie{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;border-top:1px solid var(--linea);padding-top:.9rem}
.precio{font-family:var(--mono);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.precio small{display:block;font-size:.68rem;color:var(--grafito);letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.precio del{font-size:.8rem;color:var(--grafito);font-weight:400;margin-left:.4rem}
.verficha{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo);white-space:nowrap}

/* Estado de stock */
.estado{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito)}
.estado::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--grafito)}
.estado.ok::before{background:#12a150}
.estado.bajo::before{background:#e8a400}
.estado.agotado::before{background:var(--grafito)}
.estado.tibio::before{background:var(--rojo)}

/* =============== Proceso (secuencia real) =============== */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:paso}
.paso{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.4rem;position:relative}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-family:var(--mono);font-size:.72rem;color:var(--rojo);letter-spacing:.1em;display:block;margin-bottom:.8rem;
}
.paso h3{font-size:1rem}
.paso p{font-size:.88rem;color:var(--grafito);margin:0}

/* =============== Banda CTA =============== */
.banda{background:var(--tinta);color:#fff;padding:clamp(2.5rem,5vw,3.5rem) 0}
.banda .contenedor{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.banda h2{margin-bottom:.4rem}
.banda p{color:#a8b2bd;margin:0;max-width:52ch}
.banda__acciones{display:flex;gap:.7rem;flex-wrap:wrap}

/* =============== Ficha de producto =============== */
.ficha{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.galeria__principal{margin-bottom:.75rem}
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.6rem}
.miniatura{padding:0;border:1px solid var(--linea);background:#fff;border-radius:2px;cursor:pointer;overflow:hidden}
.miniatura img{aspect-ratio:4/3;object-fit:cover;width:100%}
.miniatura[aria-current="true"]{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo)}
.ficha__precio{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:.5rem 0 1.2rem}
.ficha__precio .precio{font-size:2rem}
.ficha__acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
.specs{width:100%;border-collapse:collapse;font-size:.9rem;border:1px solid var(--linea);border-radius:var(--r)}
.specs th,.specs td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--linea)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grafito);font-weight:500;width:45%;background:var(--papel)}
.lista-incluye{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.lista-incluye li{position:relative;padding-left:1.5rem;font-size:.93rem}
.lista-incluye li::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;border:2px solid var(--rojo);border-radius:1px}
.video{position:relative;aspect-ratio:16/9;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.migas{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--grafito);padding:1.2rem 0 0}
.migas a{text-decoration:none}
.migas a:hover{color:var(--rojo)}

/* =============== Contacto =============== */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.campo{margin-bottom:1rem}
.campo label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grafito);margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.8rem .9rem;border:1px solid var(--linea);border-radius:var(--r);
  font-family:var(--texto);font-size:.95rem;background:#fff;color:var(--tinta);
}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo-tenue)}
.datos-contacto{list-style:none;padding:0;margin:0 0 1.5rem;border-top:1px solid var(--linea)}
.datos-contacto li{padding:1rem 0;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.datos-contacto span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.datos-contacto a,.datos-contacto b{text-decoration:none;font-weight:600}
.datos-contacto a:hover{color:var(--rojo)}
.aviso{border:1px solid var(--linea);border-left:3px solid var(--rojo);background:var(--papel);padding:1rem 1.2rem;border-radius:var(--r);margin-bottom:1.5rem;font-size:.92rem}
.aviso--ok{border-left-color:#12a150}

/* =============== Pie tipo rotulo de plano =============== */
.pie{background:var(--tinta);color:#98a3ae;font-size:.9rem}
.pie a{text-decoration:none;color:#dfe4ea}
.pie a:hover{color:var(--rojo)}
.pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem}
.pie h4{color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.92rem}
.pie__marca{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;margin-bottom:.5rem}
.pie__marca span{color:var(--rojo)}
.pie__legal{border-top:1px solid #262c34;padding:1rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.wa-flotante{
  position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:var(--rojo);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(225,6,0,.35);
  text-decoration:none;transition:transform .2s ease;
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:26px;height:26px;fill:#fff}

/* =========================================================
   SERVICIOS
   ========================================================= */
.seccion--tinta{background:var(--tinta);color:#fff}
.seccion--tinta .seccion__cabecera p{color:#a8b2bd}
.seccion__cabecera--claro h2{color:#fff}

.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.serv{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease,border-color .3s ease;
}
.serv:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}

/* La figura: imagen recortada, con un velo que se aclara al pasar por encima
   y el numero de orden encima, como en una lamina de taller. */
.serv__figura{position:relative;background:#0b0e11;overflow:hidden;aspect-ratio:16/7}
.serv__figura img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .35s ease}
.serv:hover .serv__figura img{transform:scale(1.06);opacity:.8}
.serv__figura::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,20,24,0) 35%,rgba(16,20,24,.92) 100%);
}
.serv__n{
  position:absolute;left:1.1rem;bottom:.7rem;z-index:2;
  font-family:var(--display);font-size:2.4rem;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5);
  transition:-webkit-text-stroke-color .3s ease,color .3s ease;
}
.serv:hover .serv__n{color:var(--rojo);-webkit-text-stroke-color:var(--rojo)}

.serv__cuerpo{display:flex;flex-direction:column;flex:1;padding:1.4rem}
.serv__cat{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.serv h3{font-size:1.25rem;margin:.4rem 0 .5rem}
.serv p{font-size:.92rem;color:#b6bfc9;margin:0 0 1rem}
.serv__lista{list-style:none;margin:0 0 1.2rem;padding:0;font-size:.85rem;color:#b6bfc9;flex:1}
.serv__lista li{padding-left:1.2rem;position:relative;margin-bottom:.3rem}
.serv__lista li::before{
  content:'';position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--rojo);transform:scale(.7);transition:transform .25s ease;
}
.serv:hover .serv__lista li::before{transform:scale(1)}
.serv__pie{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.serv__precio{font-family:var(--display);font-weight:700;font-size:1.05rem}
.serv .verficha{color:var(--rojo);transform:translateX(0);transition:transform .25s ease}
.serv:hover .verficha{transform:translateX(4px)}

/* En fondo claro se invierten los colores. */
.servicios--claro .serv{background:#fff;border-color:var(--linea);color:var(--tinta)}
.servicios--claro .serv:hover{border-color:#c8d0d8;box-shadow:var(--sombra)}
.servicios--claro .serv p,.servicios--claro .serv__lista{color:var(--grafito)}
.servicios--claro .serv__pie{border-top-color:var(--linea)}
.servicios--claro .serv__figura{background:var(--papel)}
.servicios--claro .serv__figura img{opacity:1}
.servicios--claro .serv__figura::after{background:linear-gradient(180deg,rgba(16,20,24,0) 45%,rgba(16,20,24,.55) 100%)}

/* Bloque de confianza: la promesa de calidad al lado del aviso practico. */
.calidad{display:grid;grid-template-columns:1fr 1.15fr;gap:1.5rem;align-items:center;margin-top:2.5rem}
.calidad__texto h3{font-size:1.35rem;margin:.45rem 0 .4rem}
.calidad__texto p{margin:0;color:var(--grafito)}
.calidad .recomendacion{margin-top:0}

/* Aviso destacado: la recomendacion para llegar a tiempo. */
.recomendacion{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--rojo-tenue);border:1px solid rgba(225,6,0,.22);border-left:3px solid var(--rojo);
  border-radius:var(--r);padding:1.1rem 1.3rem;margin-top:2rem;
}
.recomendacion svg{width:22px;height:22px;stroke:var(--rojo);fill:none;stroke-width:1.8;flex:0 0 auto;margin-top:2px}
.recomendacion b{display:block;font-family:var(--display);margin-bottom:.2rem}
.recomendacion p{margin:0;font-size:.92rem;color:var(--grafito)}

.estado.servicio{background:rgba(16,20,24,.06);color:var(--tinta)}

/* =========================================================
   ANIMACIONES

   Todo lo que se mueve nace de un estado visible: si el JavaScript no corre,
   el contenido igual se ve. Y quien pide menos movimiento en su sistema no ve
   ninguna de estas animaciones.
   ========================================================= */

/* Aparecer al llegar con el scroll. La clase la pone app.js; sin JS, `revelar`
   sola no oculta nada. */
.js .revelar{opacity:0;transform:translateY(18px)}
.js .revelar.visible{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.js .revelar:nth-child(2).visible{transition-delay:.07s}
.js .revelar:nth-child(3).visible{transition-delay:.14s}
.js .revelar:nth-child(4).visible{transition-delay:.21s}
.js .revelar:nth-child(5).visible{transition-delay:.28s}

/* Entrada de la portada, sin esperar al scroll. */
@keyframes surgir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero h1{animation:surgir .7s .05s both cubic-bezier(.2,.7,.3,1)}
.js .hero__texto{animation:surgir .7s .16s both cubic-bezier(.2,.7,.3,1)}
.js .hero__acciones{animation:surgir .7s .26s both cubic-bezier(.2,.7,.3,1)}
.js .hero__datos{animation:surgir .7s .36s both cubic-bezier(.2,.7,.3,1)}
.js .plano{animation:surgir .8s .2s both cubic-bezier(.2,.7,.3,1)}

/* El punto verde de la barra superior respira. */
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(46,182,102,.5)}50%{box-shadow:0 0 0 6px rgba(46,182,102,0)}}
.barra__estado .punto{animation:latir 2.4s ease-in-out infinite}

/* La barra de navegacion se compacta al bajar. */
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav.compacta{box-shadow:0 6px 20px rgba(16,20,24,.08);background:rgba(255,255,255,.97)}
.nav.compacta .contenedor{min-height:58px}
.nav .contenedor{transition:min-height .25s ease}

/* El boton flotante de WhatsApp llama la atencion una vez, al entrar. */
@keyframes saludo{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.12)}88%{transform:scale(.97)}}
.wa-flotante{animation:saludo 4.5s 1.5s ease-in-out 2}

/* Subrayado que crece en los enlaces del menu. */
.menu a{position:relative}
.menu a::before{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--rojo);
  transform:scaleX(0);transform-origin:right;transition:transform .25s ease;
}
.menu a:hover::before{transform:scaleX(1);transform-origin:left}

/* La imagen de la portada se agranda apenas al pasar por encima. */
.plano__lienzo img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.plano:hover .plano__lienzo img{transform:scale(1.03)}

/* Los botones acompanan el clic. */
.btn:active{transform:translateY(1px)}

/* Nada de esto corre para quien configuro su sistema para ver menos movimiento. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revelar,.js .revelar.visible{opacity:1;transform:none;transition:none}
  .js .hero h1,.js .hero__texto,.js .hero__acciones,.js .hero__datos,.js .plano{animation:none}
  .barra__estado .punto,.wa-flotante{animation:none}
  .serv,.tarjeta,.plano__lienzo img{transition:none}
  .serv:hover,.tarjeta:hover{transform:none}
}

/* =============== Responsive =============== */
@media (max-width:1000px){
  .grilla,.beneficios,.pasos{grid-template-columns:repeat(2,1fr)}
  .calidad{grid-template-columns:1fr}
  .servicios{grid-template-columns:1fr}
  .beneficio:nth-child(2n){border-right:0}
  .beneficio{border-bottom:1px solid var(--linea)}
  .hero .contenedor,.ficha,.contacto{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__toggle{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--linea);
    flex-direction:column;align-items:stretch;padding:.5rem;gap:0;display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:.85rem 1rem}
  .menu a.activo::after{display:none}
  .menu a.activo{color:var(--rojo)}
  .nav__acciones .btn{display:none}
  .grilla,.grilla--3,.beneficios,.pasos{grid-template-columns:1fr}
  .beneficio{border-right:0}
  .pie__grid{grid-template-columns:1fr;gap:2rem}
  .barra__estado{display:none}
}