/* ==========================================================================
   Pro Fast SRL - Alquiler de plataformas elevadoras en Cordoba

   Tipografia heredada de la web anterior (kit de Elementor):
     Titulos    Poppins 700, uppercase
     Antetitulo Arimo 600, uppercase
     Cuerpo     Roboto 400 / botones Roboto 500
   Paleta: el azul del logo, #00215C. Es el unico azul del sistema;
   #001541 es solo su version mas oscura para fondos.
   ========================================================================== */

:root{
  --navy:#00215C;
  --navy-900:#001541;
  --steel:#AFB7D0;
  --white:#fff;
  --ink:#1b2333;
  --muted:#5b6478;
  --line:#e4e8f2;

  --font-title:"Poppins",system-ui,sans-serif;
  --font-eyebrow:"Arimo",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;

  --header-h:88px;
  --wrap:1200px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* Fondo del sitio: un unico tono parejo con el patron encima.
     #f4f7fb queda entre el blanco puro y el gris que usabamos antes, que
     era el problema: sobre blanco el patron gritaba y sobre el gris
     desaparecia. Con un solo tono se lee igual en todo el sitio. */
  /* Degradado oficial de Instagram, de abajo-izquierda a arriba-derecha. */
  --grad-ig:linear-gradient(45deg,#F58529,#FEDA77 25%,#DD2A7B 55%,#8134AF 80%,#515BD4);

  --bg-tono:#f4f7fb;
  --bg-textura:url("../img/patron.svg");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  line-height:1.6;

  /* La textura queda fija y el contenido pasa por encima. El color va
     aparte para que si la imagen no carga el fondo siga siendo blanco. */
  background-color:var(--bg-tono);
  background-image:var(--bg-textura);
  background-size:340px 250px;   /* tamano fijo: el mosaico no se estira */
  background-repeat:repeat;
  background-attachment:fixed;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{
  font-family:var(--font-title);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   HEADER - transparente sobre el hero, solido al scrollear
   ========================================================================== */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .32s var(--ease-out),
             border-color .32s var(--ease-out),
             box-shadow .32s var(--ease-out),
             height .32s var(--ease-out);
}
.site-header .wrap{display:flex;align-items:center;gap:2rem}

.site-header--solid,
.site-header.is-stuck{
  height:72px;
  background:rgb(255 255 255 / .96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 28px -18px rgb(0 33 92 / .5);
}

/* La ranura conserva el hueco cuando el JS saca el logo del flujo. */
.brand-slot{width:215px;aspect-ratio:1642/270;flex:0 0 auto}
.brand{display:block;width:100%;height:100%}

/* El SVG usa fill="currentColor": el color se hereda y por eso puede
   transicionar. Blanco sobre el hero oscuro, azul de marca sobre blanco. */
.brand__svg{
  width:100%;height:100%;overflow:visible;
  color:var(--white);
  transition:color .32s var(--ease-out);
}
.site-header--solid .brand__svg{color:var(--navy)}
.site-header.is-stuck .brand__svg{color:var(--navy)}

/* ==========================================================================
   NAVEGACION
   ========================================================================== */

.nav{margin-left:auto;display:flex;align-items:center;gap:2rem}

/* Boton hamburguesa: solo existe en pantallas chicas. Es un <button> real,
   no un div con onclick, asi que responde a Enter y Espacio y lo anuncia
   un lector de pantalla sin que haya que explicarselo. */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;height:44px;            /* area tactil minima recomendada */
  padding:10px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.nav-toggle__barra{
  display:block;height:2px;width:100%;
  background:var(--white);border-radius:2px;
  transition:transform .3s var(--ease-out),opacity .2s var(--ease-out);
  transform-origin:center;
}
.site-header--solid .nav-toggle__barra,
.site-header.is-stuck .nav-toggle__barra{background:var(--navy)}

/* Abierto: las barras arman una X. La del medio se desvanece y las otras
   dos rotan hasta cruzarse. */
.nav-toggle[aria-expanded="true"] .nav-toggle__barra{background:var(--navy)}
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.nav a{
  font-family:var(--font-body);font-weight:500;font-size:.95rem;
  color:rgb(255 255 255 / .9);
  transition:color .2s;
}
.nav a:hover,.nav a:focus-visible{color:var(--steel)}
.site-header--solid .nav a{color:var(--ink)}
.site-header.is-stuck .nav a{color:var(--ink)}
.site-header--solid .nav a:hover{color:var(--navy)}
.site-header.is-stuck .nav a:hover{color:var(--navy)}

/* Los botones van en Poppins, la tipografia de titulos, y en caja normal.
   En Roboto 500 y mayusculas se veian apretados y toscos: las mayusculas
   a 15px necesitan un tracking que compite con el peso, y Roboto a ese
   tamano pierde definicion. Poppins 600 tiene la caja mas geometrica y
   aguanta el tamano chico sin ensancharse. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-title);font-weight:600;font-size:.96rem;line-height:1;
  padding:.95rem 1.7rem;border-radius:4px;
  border:1px solid transparent;cursor:pointer;
  letter-spacing:0;
  transition:background .3s var(--ease-out),color .3s var(--ease-out),
              border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
/* Iconos: heredan el color del boton via currentColor, asi no hay que
   versionarlos por variante. El de la tijera sale del propio logo. */
.btn__ico{
  width:1.15em;height:1.15em;flex:0 0 auto;
  fill:currentColor;
  transition:transform .42s var(--ease-out);
}
.btn__ico--tijera{width:.95em;height:1.3em}
/* La flecha no crece en hover como los otros iconos: se desplaza, que es
   lo que corresponde a un CTA de navegacion. */
.btn__ico--flecha{width:1.05em;height:1.05em;fill:none}
/* Iconos de maquina en los botones de ficha: salen del isotipo del logo.
   Son verticales, asi que van mas altos que anchos. */
.btn__ico--maq{width:1.05em;height:1.35em}
.btn:hover .btn__ico--flecha,
.maq-card:hover .btn__ico--flecha{transform:translateX(3px)}

/* El icono crece al pasar el mouse. focus-visible tambien, para que quien
   navega con teclado reciba la misma senal. */
.btn:hover .btn__ico,
.btn:focus-visible .btn__ico{transform:scale(1.25)}

.btn--solid,
.nav a.btn--solid{background:var(--white);color:var(--navy);font-weight:700}
/* Sin desplazamiento en hover: solo color, igual que el fantasma de al
   lado. Que un boton salte y el otro no rompia la simetria del par. */
.btn--solid:hover{background:#e6ecf7;color:var(--navy-900)}
/* Sobre el header blanco el CTA se invierte al azul de marca. */
.site-header--solid .nav a.btn--solid{background:var(--navy);color:var(--white)}
.site-header.is-stuck .nav a.btn--solid{background:var(--navy);color:var(--white)}
.site-header--solid .nav a.btn--solid:hover{background:var(--navy-900)}
.site-header.is-stuck .nav a.btn--solid:hover{background:var(--navy-900)}
.btn--ghost,
.nav a.btn--ghost{border-color:rgb(255 255 255 / .45);color:var(--white)}
.btn--ghost:hover{background:rgb(255 255 255 / .12)}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:min(82svh,720px);
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 4rem) 0 4.5rem;
  background:var(--navy-900);
  overflow:hidden;
}
/* --------------------------------------------------------------------------
   Slider del hero: crossfade puro. Las 3 imagenes estan apiladas y solo
   cambia la opacidad - no hay desplazamiento ni giro.

   Sin JS: son 3 animaciones CSS con el mismo ciclo y distinto delay.
   Ciclo total 21s = 3 x 7s, con ~1.4s de fundido entre una y otra.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   MOSAICO DEL HERO
   Tres fotos en paneles, no una imagen montada en un editor. Armado en CSS
   cada panel se recorta solo segun el ancho de pantalla, se puede servir en
   dos resoluciones y se reemplaza una foto sin rehacer las otras.

   La separacion entre paneles la hace el `gap` sobre el fondo azul, asi que
   las lineas divisorias son del color de marca y no un borde pintado.
   -------------------------------------------------------------------------- */
.hero__mosaico{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  background:var(--navy-900);
}
.hero__panel{overflow:hidden}
.hero__panel img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  /* Escala muy leve y desfasada: da profundidad sin que se lea como
     animacion. Se detiene con prefers-reduced-motion. */
  animation:heroZoom 26s ease-in-out infinite alternate;
}
.hero__panel:nth-child(2) img{animation-delay:-9s}
.hero__panel:nth-child(3) img{animation-delay:-18s}
/* Crossfade: solo se usa en celular (ver el bloque responsive). */
@keyframes heroFade{
  0%     {opacity:0}
  7.14%  {opacity:1}
  33.33% {opacity:1}
  40.47% {opacity:0}
  100%   {opacity:0}
}
@keyframes heroZoom{
  from{transform:scale(1)}
  to  {transform:scale(1.07)}
}

/* Doble velo: uno plano que asienta el color de marca, y un degradado
   lateral que abre contraste para el texto sin apagar las maquinas. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:rgb(0 21 65 / .58);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgb(0 21 65 / .95) 0%,
    rgb(0 21 65 / .82) 38%,
    rgb(0 21 65 / .35) 72%,
    rgb(0 21 65 / .15) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero__inner{max-width:54rem}

.hero__eyebrow{
  font-family:var(--font-eyebrow);
  font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel);
  margin:0 0 1.25rem;
  display:flex;align-items:center;gap:.75rem;
}
.hero__eyebrow b{
  background:var(--white);color:var(--navy);
  padding:.3rem .7rem;border-radius:3px;font-weight:700;
  font-size:.85rem;letter-spacing:.06em;
}

.hero h1{
  font-size:clamp(2rem,4.6vw,3.4rem);
  color:var(--white);
  margin:0 0 1.35rem;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--white)}
/* Segunda linea del H1: mismo titulo para Google, jerarquia distinta para
   quien lee. En el mismo cuerpo y en mayuscula, el H1 se comia tres
   renglones y empujaba el CTA fuera de la primera pantalla. */
.hero__h1sub{
  display:block;
  margin-top:.5rem;
  font-size:.42em;
  font-weight:600;
  letter-spacing:.03em;
  color:rgb(255 255 255 / .74);
}

.hero__lead{
  font-size:clamp(1rem,1.45vw,1.15rem);
  color:rgb(255 255 255 / .82);
  max-width:42rem;
  margin:0 0 2.25rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3.25rem}

.hero__stats{
  display:flex;flex-wrap:wrap;gap:2.75rem;
  padding-top:1.85rem;
  border-top:1px solid rgb(255 255 255 / .18);
}
.hero__stats b{
  display:block;
  font-family:var(--font-title);font-weight:700;
  font-size:1.8rem;line-height:1.1;color:var(--white);
}
.hero__stats span{
  font-size:.85rem;color:var(--steel);
  text-transform:uppercase;letter-spacing:.05em;
}

/* ==========================================================================
   INTRO - trazado del logo
   Overlay blanco con una COPIA del logo al centro que se dibuja trazo por
   trazo. El logo real del header no se mueve: cuando el overlay se
   desvanece, ya esta ahi. El hero se pinta debajo desde el frame 1, asi
   que el LCP no paga la intro.
   ========================================================================== */

.intro{
  place-items:center;
  /* Red de seguridad: si el JS muere a mitad, el overlay se va igual. */
  animation:intro-failsafe 0s linear 2.6s forwards;
}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* La copia vive dentro del overlay solo mientras dura la intro. */
.intro__logo{
  width:min(64vw,620px);
  aspect-ratio:1642/270;
  color:var(--navy);
  overflow:visible;
}

/* --------------------------------------------------------------------------
   TRAZADO
   Se recorre el contorno de cada path con stroke-dashoffset y despues entra
   el relleno mientras el trazo se apaga. --len y --d los calcula el JS con
   getTotalLength() y la posicion X real de cada path.

   El grosor va en unidades de usuario (no non-scaling-stroke) para que
   escale con el logo: ~1.3px en el header a 215px, ~3.8px en la intro a
   620px. Con grosor fijo en pixeles el trazo se volvia imperceptible en el
   tamano grande, que es justo donde tiene que lucirse.
   -------------------------------------------------------------------------- */
.intro__logo path,
.brand__svg.is-drawing path{
  stroke:currentColor;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--len,400);
  animation:
    pfDraw var(--draw,380ms) ease-in-out var(--d,0ms) backwards,
    pfFill var(--fill,180ms) ease-out calc(var(--d,0ms) + var(--draw,380ms) - 70ms) both;
}
@keyframes pfDraw{
  from{stroke-dashoffset:var(--len,400)}
  to  {stroke-dashoffset:0}
}
@keyframes pfFill{
  from{fill-opacity:0;stroke-opacity:1}
  to  {fill-opacity:1;stroke-opacity:0}
}

/* Terminado el trazado el overlay se desvanece, y abajo ya esta el logo
   del header que nunca se movio. */
body[data-intro="done"] .intro{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease-out),visibility .34s var(--ease-out);
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */



/* ==========================================================================
   RESPONSIVE
   ========================================================================== */



/* ==========================================================================
   MAQUINAS - tarjetas, fichas y paginas de modelo
   ========================================================================== */

.seccion{padding:5.5rem 0}
.seccion--gris{background:transparent}

.seccion__intro{text-align:center;max-width:46rem;margin:0 auto 3.5rem}
.seccion__eyebrow{
  font-family:var(--font-eyebrow);font-weight:600;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--navy);
  margin:0 0 .6rem;
}
.seccion__intro h2{font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--navy)}
.seccion__intro p{color:var(--muted);margin:.9rem 0 0}

/* Grilla de maquinas ------------------------------------------------------ */
.grid-maq{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

/* Tarjeta de maquina.
   El criterio es tecnico, no decorativo: la foto sobre un fondo apenas
   tenido para que el amarillo del equipo levante, los dos datos que
   definen la maquina como especificacion (no como pastilla), y un boton
   solido que cierra la tarjeta. */
.maq-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .25s var(--ease-out),
             box-shadow .25s var(--ease-out),
             transform .25s var(--ease-out);
}
.maq-card:hover{
  transform:translateY(-3px);
  border-color:#c9d3e8;
  box-shadow:0 22px 46px -28px rgb(0 33 92 / .55);
}

.maq-card__fig{
  margin:0;padding:2rem 1.5rem;
  background:linear-gradient(170deg,#fbfcfe,#eef2f9);
  border-bottom:1px solid var(--line);
  display:grid;place-items:center;min-height:230px;
  overflow:hidden;
}
.maq-card__fig img{
  width:auto;max-height:186px;object-fit:contain;
  transition:transform .35s var(--ease-out);
}
.maq-card:hover .maq-card__fig img{transform:scale(1.05)}

.maq-card__body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}

.maq-card__tipo b{color:var(--navy);font-weight:700}
.maq-card__tipo{
  margin:0 0 .5rem;
  font-family:var(--font-eyebrow);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
}
.maq-card h3{
  font-size:1.08rem;line-height:1.25;color:var(--navy);
  margin:0 0 1.15rem;letter-spacing:.005em;
}

/* Los dos datos que definen la maquina, como ficha tecnica. */
.maq-card__specs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1rem;margin:0 0 1.4rem;padding-top:1.1rem;
  border-top:1px solid var(--line);
}
/* Las etiquetas tienen largo distinto ("altura de trabajo" ocupa dos
   lineas, "capacidad" una), asi que el valor se ancla abajo y quedan
   alineados entre si. */
.maq-card__specs > div{display:flex;flex-direction:column;height:100%}

.maq-card__specs dt{
  font-size:.66rem;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:.2rem;
}
.maq-card__specs dd{
  margin:auto 0 0;   /* ancla el valor abajo: alinea entre celdas */
  font-family:var(--font-title);font-weight:700;
  font-size:1.15rem;line-height:1.1;color:var(--navy);
}

/* Boton que ocupa el ancho de la tarjeta y la cierra. */
.btn--bloque{width:100%;margin-top:auto}
.maq-card .btn--bloque{
  background:var(--navy);color:var(--white);
  font-size:.9rem;padding-block:.85rem;
}
.maq-card:hover .btn--bloque{background:var(--navy-900)}

/* Cabecera de la pagina de modelo ----------------------------------------- */
.mq-head{padding:2rem 0 3.5rem}
.mq-head__grid{display:grid;gap:3rem;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center}
.mq-head__fig{
  margin:0;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:2rem;display:grid;place-items:center;
}

/* Variante con foto en obra. La imagen LLENA la caja en vez de flotar
   dentro: sin relleno, sin fondo blanco y con la proporcion de la foto,
   porque si no el grid la estira al alto de la columna de al lado y la
   recorta en vertical. */
.mq-head__fig--foto{
  padding:0;
  background:var(--line);
  overflow:hidden;
  aspect-ratio:1/1;
  align-self:center;
}
.mq-head__fig--foto img{
  width:100%;height:100%;max-height:none;
  object-fit:cover;
}
.mq-head h1{font-size:clamp(1.55rem,3.4vw,2.5rem);color:var(--navy);margin:0 0 1rem}
.mq-head__resumen{font-size:1.08rem;color:var(--muted);margin:0 0 1.75rem;max-width:38rem}

.mq-destacados{
  display:flex;flex-wrap:wrap;gap:2.25rem;
  margin:0 0 2rem;padding:1.35rem 0;
  border-block:1px solid var(--line);
}
.mq-destacados b{
  display:block;font-family:var(--font-title);font-weight:700;
  font-size:1.55rem;color:var(--navy);line-height:1.1;
}
.mq-destacados span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.mq-acciones{display:flex;flex-wrap:wrap;gap:.8rem}
.btn--navy{background:var(--navy);color:var(--white);font-weight:700}
.btn--navy:hover{background:var(--navy-900)}
.btn--linea{border-color:var(--navy);color:var(--navy)}
.btn--linea:hover{background:var(--navy);color:var(--white)}

/* Migas ------------------------------------------------------------------- */
/* Las migas son lo primero del <main>, asi que tienen que compensar ellas
   la altura del header fijo. */
.migas{
  padding-top:calc(var(--header-h) + 1.1rem);
  padding-bottom:.2rem;
  font-size:.85rem;color:var(--muted);
}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.migas li::after{content:"›";margin-left:.45rem;color:var(--steel)}
.migas li:last-child::after{content:""}
.migas a:hover{color:var(--navy);text-decoration:underline}
.migas [aria-current]{color:var(--navy);font-weight:500}

/* Tabla de especificaciones ----------------------------------------------- */
.mq-cuerpo{display:grid;gap:3.5rem;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
.mq-cuerpo h2{font-size:1.4rem;color:var(--navy);margin:0 0 1.25rem}

.tabla-specs{width:100%;border-collapse:collapse;font-size:.94rem}
.tabla-specs th,.tabla-specs td{
  text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);
}
.tabla-specs th{font-weight:500;color:var(--muted);width:55%}
.tabla-specs td{font-weight:600;color:var(--ink)}
.tabla-specs tr:nth-child(even){background:#f6f8fc}

.usos{list-style:none;margin:0 0 2rem;padding:0}
.usos li{
  position:relative;padding-left:1.6rem;margin-bottom:.8rem;color:var(--muted);
}
.usos li::before{
  content:"";position:absolute;left:0;top:.55rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--navy);
}


/* ==========================================================================
   CONTACTO
   ========================================================================== */

.contacto__grid{
  display:grid;gap:2.5rem;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}

.contacto__datos{display:flex;flex-direction:column;gap:.85rem}
.dato{
  display:block;padding:1.15rem 1.35rem;
  background:var(--white);
  border:1px solid var(--line);border-radius:8px;
  transition:border-color .25s var(--ease-out),transform .25s var(--ease-out);
}
a.dato:hover{border-color:var(--navy);transform:translateX(3px)}
.dato__k{
  display:block;font-family:var(--font-eyebrow);font-weight:600;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:.3rem;
}
.dato__v{
  display:block;font-family:var(--font-title);font-weight:600;
  font-size:1.12rem;color:var(--navy);
}
.dato__v--chico{font-family:var(--font-body);font-weight:400;font-size:.95rem;line-height:1.5;color:var(--ink)}
.dato--wa{border-left:3px solid var(--navy)}
/* Los dos telefonos en una linea. Cada uno es su propio tel:, asi que
   desde el celular se marca el que se toca. */
.dato__sep{color:var(--line);margin-inline:.45rem;font-weight:400}
.dato__v a:hover{text-decoration:underline}
.dato--estatico{cursor:default}

/* Formulario ------------------------------------------------------------- */
.form{
  background:var(--white);
  border:1px solid var(--line);border-radius:10px;
  padding:2rem;
}
.form__fila{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr}
.campo{margin:0 0 1.25rem}
.form__fila .campo{margin-bottom:0}
.campo label{
  display:block;margin-bottom:.4rem;
  font-size:.88rem;font-weight:500;color:var(--ink);
}
.campo abbr{color:var(--navy);text-decoration:none}
.campo input,.campo select,.campo textarea{
  width:100%;
  font-family:var(--font-body);font-size:.98rem;color:var(--ink);
  padding:.75rem .9rem;
  background:#fbfcfe;
  border:1px solid var(--line);border-radius:6px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s;
}
.campo textarea{resize:vertical;min-height:7rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;background:var(--white);
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgb(0 33 92 / .12);
}
.campo__ayuda{display:block;margin-top:.35rem;font-size:.82rem;color:var(--muted)}

/* Honeypot: fuera de pantalla, no display:none. Algunos bots ignoran los
   campos ocultos con display:none, pero completan los que estan en el DOM
   y son enfocables. */
.campo--trampa{
  position:absolute;left:-9999px;
  width:1px;height:1px;overflow:hidden;
}

.dato__link{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.7rem;font-size:.86rem;font-weight:500;color:var(--navy);
}
.dato__link:hover{text-decoration:underline}
.dato__link .btn__ico{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:2.2}

/* Mapa ------------------------------------------------------------------- */
.mapa{
  margin-top:2.5rem;
  border:1px solid var(--line);border-radius:10px;
  overflow:hidden;
  /* La altura la fija el contenedor: sin esto el iframe entra con los
     150px por defecto y el mapa queda como una franja. */
  aspect-ratio:16/6;
  background:#eef2f9;
}
.mapa iframe{width:100%;height:100%;border:0;display:block}


.form button{margin-top:.35rem}
.form__nota{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}

.gracias{padding-top:calc(var(--header-h) + 5rem);min-height:60svh}
.gracias .seccion__intro h1{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--navy)}
.gracias__acciones{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ==========================================================================
   PIE
   ========================================================================== */

.pie{background:var(--navy-900);color:rgb(255 255 255 / .68);padding:4rem 0 1.75rem;font-size:.92rem}
.pie__grid{
  display:grid;gap:2.5rem;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  margin-bottom:2.25rem;
}
.pie__logo{display:block;width:180px;margin-bottom:1.15rem}
.pie__logo .brand__svg{color:var(--white);width:100%;height:auto}
.pie__marca p{margin:0;max-width:24rem;line-height:1.65}
.pie h3{
  font-family:var(--font-eyebrow);font-weight:600;
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--white);margin:0 0 1rem;
}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.55rem;line-height:1.45}
.pie a{transition:color .2s}
.pie a:hover{color:var(--white);text-decoration:underline}
.pie__dir{color:rgb(255 255 255 / .5);margin-top:.9rem}

/* Instagram ------------------------------------------------------------ */
/* El degradado de la marca va en el borde y en el icono, no de fondo: un
   bloque saturado al lado del logo se comeria la jerarquia del pie. Al
   pasar el mouse si se rellena. */
.red{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:1.4rem;padding:.55rem 1rem .55rem .8rem;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-title);font-weight:600;font-size:.88rem;
  color:rgb(255 255 255 / .82);
  background:
    linear-gradient(var(--navy-900),var(--navy-900)) padding-box,
    var(--grad-ig) border-box;
  transition:color .25s var(--ease-out),transform .25s var(--ease-out);
}
.red svg{width:19px;height:19px;flex:0 0 auto}
.red--ig svg{color:#E1306C}
.red:hover{
  color:var(--white);
  transform:translateY(-2px);
  background:var(--grad-ig) padding-box,var(--grad-ig) border-box;
}
.red--ig:hover svg{color:var(--white)}

/* Banda de zonas: 22 enlaces en linea, no una lista vertical. Asi entran
   todas sin estirar el pie, y cada pagina del sitio enlaza a cada landing,
   que es lo que hace que Google las rastree y las lea como un conjunto. */
.pie__zonas{
  border-top:1px solid rgb(255 255 255 / .13);
  padding-top:1.75rem;margin-bottom:1.75rem;
}
.pie__chips{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin-top:.9rem;
}
.pie__chips a{
  font-size:.84rem;line-height:1;
  padding:.42rem .75rem;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:999px;
  color:rgb(255 255 255 / .62);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s;
}
.pie__chips a:hover{
  color:var(--white);
  border-color:rgb(255 255 255 / .45);
  background:rgb(255 255 255 / .07);
  text-decoration:none;
}

.pie__legal{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  justify-content:space-between;align-items:center;
  border-top:1px solid rgb(255 255 255 / .13);
  padding-top:1.65rem;
  font-size:.85rem;color:rgb(255 255 255 / .5);
}
.pie__legal p{margin:0}
.pie__creditos a{color:rgb(255 255 255 / .8);font-weight:500}
.pie__creditos a:hover{color:var(--white)}





/* ==========================================================================
   POR QUE ELEGIRNOS
   En la web anterior era un acordeon: el contenido estaba escondido tras
   clics, no se podia escanear y Google lo lee peor. Aca va todo visible,
   numerado, con el diferencial en el titulo y la prueba en el cuerpo.
   ========================================================================== */

.razones{background:var(--navy-900);color:rgb(255 255 255 / .78)}
.razones .seccion__intro h2{color:var(--white)}
.razones .seccion__eyebrow{color:var(--steel)}
.razones .seccion__intro p{color:rgb(255 255 255 / .7)}

/* Cabecera + composicion de fotos, lado a lado. */
.razones__top{
  display:grid;gap:3.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;
  margin-bottom:4rem;
}
.razones__top .seccion__intro{text-align:left;margin:0;max-width:none}

/* Prueba social + CTA en el espacio que quedaba muerto bajo el titulo.
   La accion sube a la parte alta de la seccion, donde el interes esta
   fresco, en vez de vivir solo al final. */
.aval{
  margin-top:2.5rem;padding-left:1.5rem;
  border-left:3px solid var(--steel);
}
.aval__frase{
  margin:0 0 2.25rem;font-size:1.02rem;line-height:1.6;
  color:rgb(255 255 255 / .82);max-width:32rem;
}
.aval__frase b{color:var(--white);font-weight:600}

/* --------------------------------------------------------------------------
   COMPOSICION DE FOTOS
   Rearmada con las dos fotos por separado sobre un lienzo proporcional, en
   vez del PNG plano que traia el fondo blanco quemado y los hexagonos
   incrustados. Asi se apoya sobre cualquier fondo, las sombras son reales
   y los hexagonos son SVG nitido en color de marca.
   Las medidas son porcentajes del lienzo original de 650x594.
   -------------------------------------------------------------------------- */
/* Par de fotos de "Por que elegirnos". Tratamiento distinto al panal de
   Nosotros a proposito: dos composiciones de hexagonos en la misma pagina
   competirian entre si. */
.obra{position:relative;aspect-ratio:5/6;width:100%;max-width:30rem}
.obra img{
  position:absolute;border-radius:10px;object-fit:cover;
  box-shadow:0 22px 45px -22px rgb(0 21 65 / .75);
  transition:transform .5s var(--ease-out);
}
.obra__a{width:76%;height:78%;right:0;top:0}
.obra__b{width:58%;height:52%;left:0;bottom:0;border:5px solid var(--navy-900)}
.obra:hover .obra__a{transform:translate(5px,-5px)}
.obra:hover .obra__b{transform:translate(-5px,5px)}

.razones__grid{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Cada razon es una pieza con cuerpo propio: degradado sutil, borde y una
   barra de acento que se despliega al pasar el mouse. Antes eran cajas
   planas separadas por una linea de 1px y se leian como una tabla. */
.razon{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;   /* para poder anclar los tildes al pie */
  padding:2.5rem 1.9rem 2rem;
  border-radius:8px;
  border:1px solid rgb(255 255 255 / .12);
  background:linear-gradient(160deg,rgb(255 255 255 / .07),rgb(255 255 255 / .015));
  transition:border-color .35s var(--ease-out),
             background .35s var(--ease-out),
             transform .35s var(--ease-out);
}
.razon:hover{
  border-color:rgb(143 163 204 / .5);
  background:linear-gradient(160deg,rgb(255 255 255 / .11),rgb(255 255 255 / .03));
  transform:translateY(-4px);
}
/* Barra superior de acento: nace en 0 y se abre en hover. */
.razon::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--steel),rgb(143 163 204 / 0));
  transition:width .45s var(--ease-out);
}
.razon:hover::before{width:100%}

/* El numero deja de ser una etiqueta y pasa a ser marca de agua: grande,
   arriba a la derecha, detras del texto. */
.razon__n{
  position:absolute;top:.4rem;right:1rem;
  font-family:var(--font-title);font-weight:700;font-size:3.6rem;
  line-height:1;color:rgb(255 255 255 / .07);
  letter-spacing:-.03em;pointer-events:none;
  transition:color .35s var(--ease-out);
}
.razon:hover .razon__n{color:rgb(143 163 204 / .22)}
.razon h3{
  position:relative;
  font-size:1.08rem;line-height:1.34;color:var(--white);
  margin:0 0 .85rem;padding-right:2.5rem;
}
.razon p{margin:0 0 1.4rem;font-size:.95rem;line-height:1.65}
/* margin-top:auto empuja los tildes abajo, asi la linea divisoria queda a
   la misma altura en las cuatro tarjetas aunque los parrafos midan distinto. */
.razon ul{
  list-style:none;margin:auto 0 0;padding:1rem 0 0;font-size:.9rem;
  border-top:1px solid rgb(255 255 255 / .1);
}
.razon li{
  position:relative;padding-left:1.35rem;margin-bottom:.5rem;
  color:rgb(255 255 255 / .62);
}
.razon li::before{
  content:"";position:absolute;left:0;top:.42rem;
  width:.72rem;height:.42rem;
  border-left:2px solid var(--steel);
  border-bottom:2px solid var(--steel);
  transform:rotate(-45deg);
}

/* --------------------------------------------------------------------------
   MURO DE CLIENTES
   Los logos van en silueta blanca. Los originales traen el fondo blanco
   quemado, asi que sobre azul habrian sido 38 cuadrados blancos; en
   monocromo ademas dejan de competir entre si por color y el muro se lee
   como un bloque unico.
   -------------------------------------------------------------------------- */
.clientes{
  margin-top:4rem;padding-top:3rem;
  border-top:1px solid rgb(255 255 255 / .13);
}
.clientes__label{
  margin:0 0 2.25rem;text-align:center;
  font-family:var(--font-eyebrow);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--steel);
}
/* --------------------------------------------------------------------------
   MARQUESINA
   La cinta lleva la lista DOS veces y se desplaza hasta -50%: al llegar,
   la segunda copia esta exactamente donde arrancaba la primera, asi que
   el reinicio no se ve. Por eso el bucle no necesita JS.
   -------------------------------------------------------------------------- */
.clientes__viewport{
  overflow:hidden;
  /* Difumina los extremos para que los logos no aparezcan y desaparezcan
     de golpe contra el borde. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.clientes__track{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:.6rem;
  width:max-content;
  animation:desfile 78s linear infinite;
}
@keyframes desfile{to{transform:translateX(-50%)}}

/* Se frena con el mouse encima y tambien con foco de teclado, para que
   quien tabula pueda leer los nombres sin perseguir la cinta. */
.clientes__viewport:hover .clientes__track,
.clientes__viewport:focus-within .clientes__track{animation-play-state:paused}

.cliente{
  flex:0 0 auto;
  width:132px;height:76px;
  display:grid;place-items:center;
}
/* Todos en silueta blanca, sin excepcion. La uniformidad es lo que hace que
   38 marcas se lean como un bloque de confianza y no como un collage. Se
   probo revelar el color en hover sobre una pastilla blanca y se descarto:
   en celular no hay hover -o sea que la mitad de la gente nunca lo veria- y
   la pastilla abria un hueco blanco en medio de la cinta. */
.cliente img{
  width:100%;height:52px;object-fit:contain;
  padding-inline:.7rem;
  opacity:.78;
  transition:opacity .3s var(--ease-out);
}
.cliente:hover img{opacity:1}

.razones__cierre{
  margin-top:3rem;text-align:center;
}
.razones__cierre p{
  max-width:44rem;margin:0 auto 1.75rem;
  font-size:1.05rem;color:rgb(255 255 255 / .8);
}
.razones__cierre .btn--solid{background:var(--white);color:var(--navy)}
.razones__cierre .btn--solid:hover{background:#e6ecf7;color:var(--navy-900)}


/* ==========================================================================
   NOSOTROS
   Va sobre fondo claro a proposito. El bloque azul de "Por que elegirnos"
   funciona porque es el unico invertido del medio: si esta seccion tambien
   fuera oscura, con el pie azul quedaria toda la mitad inferior en un
   mismo bloque pesado y ese enfasis se perderia. Se unen por lenguaje
   -los hexagonos-, no por color.
   ========================================================================== */

.nosotros__grid{
  display:grid;gap:4rem;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
}
.nosotros .seccion__intro{text-align:left;margin:0 0 1.6rem;max-width:none}
.nosotros__texto p{color:var(--muted);margin:0 0 1.15rem;font-size:1.02rem}
.nosotros__texto p:last-of-type{margin-bottom:1.9rem}
.nosotros__texto b{color:var(--navy);font-weight:600}

/* --------------------------------------------------------------------------
   PANAL
   Hexagonos de tapa plana, la misma orientacion que los de "Por que
   elegirnos". En un panal de tapa plana las columnas se separan 3/4 del
   ancho y se desfasan media altura: de ahi salen los porcentajes.
   Lienzo 145x100 -> hexagono de 40% de ancho y 50% de alto.
   -------------------------------------------------------------------------- */
/* Composicion de "Nosotros": la imagen original del sitio anterior. El
   panal de hexagonos sueltos que habiamos armado quedaba mas disperso. */
.panal{margin:0;width:100%}
.panal img{width:100%;height:auto;display:block}

/* ==========================================================================
   RESPONSIVE
   Va todo al final a proposito. Las media queries NO agregan especificidad:
   si una queda antes de la regla que quiere pisar, la de abajo gana y la
   media query no hace nada. Esa fue la causa de que "Por que elegirnos"
   siguiera en 4 columnas en celular.
   ========================================================================== */

@media (max-width:1080px){
  .obra-grid{grid-template-columns:repeat(4,1fr)}
  .razones__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .razones__top{grid-template-columns:1fr;gap:2.5rem}
  .compo{max-width:34rem;margin-inline:auto}
}

@media (max-width:980px){
  .pie__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  /* iOS ignora background-attachment:fixed y en moviles el repintado
     cuesta caro: la textura acompania el scroll. */
  body{background-attachment:scroll;background-size:250px 184px}

  :root{--header-h:70px}
  /* El panel se despliega desde el header. Se anima con transform y
     opacity -no con height- para que no dispare recalculos de layout. */
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.25rem 1.5rem;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -24px rgb(0 33 92 / .6);
    transform:translateY(-12px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s var(--ease-out),opacity .28s var(--ease-out),
               visibility .28s var(--ease-out);
    max-height:calc(100svh - var(--header-h));
    overflow-y:auto;
  }
  .nav a{
    color:var(--ink);
    padding:.95rem .25rem;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .nav a:last-of-type{border-bottom:0}
  .nav .btn{margin-top:1rem;width:100%}

  body[data-nav="abierto"] .nav{
    transform:translateY(0);
    opacity:1;visibility:visible;pointer-events:auto;
  }
  /* Con el panel abierto el header va solido: si no, sobre el hero oscuro
     las barras del boton quedan blancas sobre panel blanco. */
  body[data-nav="abierto"] .site-header{
    background:rgb(255 255 255 / .98);
    border-bottom-color:var(--line);
  }
  body[data-nav="abierto"] .brand__svg{color:var(--navy)}
  body[data-nav="abierto"]{overflow:hidden}
  .brand-slot{width:170px}
  .hero__stats{gap:1.5rem 2rem}
  .hero__stats b{font-size:1.4rem}
  .hero::after{
    background:linear-gradient(180deg,rgb(0 21 65 / .9),rgb(0 21 65 / .75));
  }
  /* Tres paneles en 412px darian 130px cada uno: irreconocibles. En
     celular queda solo el central, a pantalla completa. */
  /* En celular NO hay mosaico: los tres paneles se apilan en la misma
     celda y vuelven al crossfade de siempre. Cambian las fotos, no el
     comportamiento. Tres paneles de 130px no se entenderian. */
  .hero__mosaico{grid-template-columns:1fr;gap:0}
  .hero__panel{grid-area:1/1}
  .hero__panel img{
    opacity:0;
    animation:heroFade 21s linear infinite;
  }
  /* Delays desfasados para que el fundido de salida de una coincida con
     el de entrada de la siguiente, y la primera este visible en t=0. */
  .hero__panel:nth-child(1) img{animation-delay:-1.5s}
  .hero__panel:nth-child(2) img{animation-delay:5.5s}
  .hero__panel:nth-child(3) img{animation-delay:12.5s}
}

@media (max-width:860px){
  .zona-cuerpo{grid-template-columns:1fr;gap:2.25rem}.mapa{aspect-ratio:4/3}
  .contacto__grid{grid-template-columns:1fr}
  .form__fila{grid-template-columns:1fr;gap:0}
  .form__fila .campo{margin-bottom:1.25rem}
  .form{padding:1.5rem}
  .pie__grid{grid-template-columns:1fr;gap:2rem}
  /* Instagram ------------------------------------------------------------ */
/* El degradado de la marca va en el borde y en el icono, no de fondo: un
   bloque saturado al lado del logo se comeria la jerarquia del pie. Al
   pasar el mouse si se rellena. */
.red{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:1.4rem;padding:.55rem 1rem .55rem .8rem;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-title);font-weight:600;font-size:.88rem;
  color:rgb(255 255 255 / .82);
  background:
    linear-gradient(var(--navy-900),var(--navy-900)) padding-box,
    var(--grad-ig) border-box;
  transition:color .25s var(--ease-out),transform .25s var(--ease-out);
}
.red svg{width:19px;height:19px;flex:0 0 auto}
.red--ig svg{color:#E1306C}
.red:hover{
  color:var(--white);
  transform:translateY(-2px);
  background:var(--grad-ig) padding-box,var(--grad-ig) border-box;
}
.red--ig:hover svg{color:var(--white)}

/* Banda de zonas: 22 enlaces en linea, no una lista vertical. Asi entran
   todas sin estirar el pie, y cada pagina del sitio enlaza a cada landing,
   que es lo que hace que Google las rastree y las lea como un conjunto. */
.pie__zonas{
  border-top:1px solid rgb(255 255 255 / .13);
  padding-top:1.75rem;margin-bottom:1.75rem;
}
.pie__chips{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin-top:.9rem;
}
.pie__chips a{
  font-size:.84rem;line-height:1;
  padding:.42rem .75rem;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:999px;
  color:rgb(255 255 255 / .62);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s;
}
.pie__chips a:hover{
  color:var(--white);
  border-color:rgb(255 255 255 / .45);
  background:rgb(255 255 255 / .07);
  text-decoration:none;
}

.pie__legal{justify-content:flex-start}
  .razones__top{grid-template-columns:1fr;gap:2.5rem}
  .razones__grid{grid-template-columns:1fr}
  .mq-head__grid,.mq-cuerpo{grid-template-columns:1fr}
  .mq-destacados{gap:1.5rem}
  .seccion{padding:4rem 0}

  .nosotros__grid{grid-template-columns:1fr;gap:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Sin movimiento automatico: la cinta queda quieta y se recorre a mano. */
  .clientes__track{animation:none}
  .clientes__viewport{overflow-x:auto}
  .intro{display:none !important}
  .brand__svg path{opacity:1 !important;animation:none !important;stroke:none !important}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* Sin rotacion de slides: queda fija la primera. */
  .hero__bg{animation:none !important;opacity:0 !important}
  .hero__bg:nth-of-type(1){opacity:1 !important}
}


/* ==========================================================================
   LANDINGS POR ZONA
   ========================================================================== */

.zona-head{padding:1.5rem 0 3rem}
.zona-head h1{font-size:clamp(1.6rem,3.6vw,2.6rem);color:var(--navy);margin:.5rem 0 1.1rem}
.zona-head__intro{font-size:1.08rem;color:var(--ink);max-width:44rem;margin:0 0 .9rem}
.zona-head__perfil{color:var(--muted);max-width:44rem;margin:0 0 1.9rem}

.zona-cuerpo{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.zona-cuerpo h2{font-size:1.35rem;color:var(--navy);margin:0 0 1.15rem}
.zona-cuerpo p{color:var(--muted);margin:0 0 1rem}
.zona-nota{font-size:.94rem}

/* Indice de zonas: ordenadas por distancia, que es el dato que la gente
   busca cuando entra a ver si llegan hasta donde esta. */
.zona-grid{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.zona-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;
  background:var(--white);
  border:1px solid var(--line);border-radius:8px;
  transition:border-color .22s var(--ease-out),transform .22s var(--ease-out);
}
.zona-item:hover{border-color:var(--navy);transform:translateX(3px)}
.zona-item__n{font-family:var(--font-title);font-weight:600;color:var(--navy)}
.zona-item__km{font-size:.85rem;color:var(--muted);white-space:nowrap}

/* ==========================================================================
   EN OBRA - prueba social
   Fotos verticales sacadas con celular. La grilla las recorta a cuadrado
   con el encuadre corrido hacia arriba: en una foto de trabajo en altura
   lo que importa esta arriba, no en el piso.
   ========================================================================== */

/* Seis columnas: con 33 fotos, una grilla de 4 se convierte en una lista
   larguisima. A 6 se lee como un muro, que es lo que tiene que ser. */
.obra-grid{
  display:grid;gap:.6rem;
  grid-template-columns:repeat(6,1fr);
}
.obra-foto{
  margin:0;overflow:hidden;border-radius:8px;
  background:#e8edf6;
  aspect-ratio:1;
}
.obra-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out);
}
.obra-foto a{display:block;width:100%;height:100%;cursor:zoom-in}
.obra-foto:hover img{transform:scale(1.06)}
.obra-foto a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ==========================================================================
   VISOR DE GALERIA
   Propio, sin libreria: son ~120 lineas de JS contra los ~40 KB que pesa
   cualquier lightbox de paquete por funciones que aca no se usan.
   ========================================================================== */

.sin-scroll{overflow:hidden}

.visor{
  position:fixed;inset:0;z-index:1000;
  /* dvh sigue el alto visible: en celular la barra del navegador aparece
     y desaparece, y 100vh no la contempla, asi que los controles de abajo
     quedaban tapados. Los navegadores viejos usan el inset:0 de arriba. */
  height:100dvh;
  display:grid;
  /* minmax(0,1fr) en filas y columnas es lo que hace que la foto entre
     entera. Sin filas declaradas la fila se dimensiona segun el contenido
     y crece mas que la pantalla, asi que el max-height:100% de la imagen
     se calculaba contra una fila mas alta que el viewport y la recortaba. */
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  gap:clamp(.5rem,2vw,1.5rem);
  /* Abajo va mas aire: ahi vive el contador. */
  padding:clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(3rem,7vw,4.5rem);
  background:rgb(0 12 36 / .93);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.visor[hidden]{display:none}

.visor__marco{
  margin:0;grid-column:2;grid-row:1;
  position:relative;            /* referencia para la foto */
  width:100%;height:100%;
  min-height:0;min-width:0;     /* deja que la celda se encoja de verdad */
}
/* La caja ocupa el marco completo y object-fit:contain encaja la foto
   adentro respetando su proporcion. Se llego aca porque max-height:100%
   con height:auto no limitaba la altura -la imagen se renderizaba a su
   tamano natural, 900x1200, dentro de un marco de 684 de alto-. Con la
   caja de medida definida el recorte no depende de como resuelva el
   navegador el porcentaje.
   Sin sombra a proposito: aplicaria al rectangulo de la caja, no al borde
   visible de la foto, y se veria flotando en el aire. */
/* La foto va posicionada, no en el flujo. Con height:100% no alcanzaba:
   en un item de grilla el porcentaje puede quedar indefinido durante el
   layout y la imagen se renderizaba a su tamano natural -900x1200 dentro
   de un marco de 684 de alto-. Con inset:0 la medida sale del marco ya
   resuelto, y object-fit:contain la encaja respetando su proporcion. */
.visor__marco img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  transition:opacity .2s var(--ease-out);
}
/* Mientras carga la siguiente, la anterior se atenua en vez de saltar. */
.visor.is-cargando .visor__marco img{opacity:.35}

/* z-index sobre el marco: los dos estan posicionados, y como el marco va
   despues en el DOM se dibujaba encima del boton "anterior". En celular,
   donde las flechas se superponen a la foto, eso lo volvia intocable. */
.visor__nav,
.visor__cerrar,
.visor__contador{z-index:2}

.visor__nav{
  width:clamp(44px,6vw,58px);height:clamp(44px,6vw,58px);
  display:grid;place-items:center;
  border:1px solid rgb(255 255 255 / .25);
  border-radius:50%;
  background:rgb(255 255 255 / .08);
  color:#fff;cursor:pointer;
  transition:background .25s var(--ease-out),border-color .25s var(--ease-out);
}
.visor__nav svg{width:24px;height:24px}
.visor__nav:hover,.visor__nav:focus-visible{
  background:rgb(255 255 255 / .18);border-color:rgb(255 255 255 / .5);
}
.visor__nav--prev{grid-column:1;grid-row:1;align-self:center}
.visor__nav--next{grid-column:3;grid-row:1;align-self:center}

.visor__cerrar{
  position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgb(255 255 255 / .1);
  color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
  transition:background .25s var(--ease-out);
}
.visor__cerrar:hover,.visor__cerrar:focus-visible{background:rgb(255 255 255 / .22)}

.visor__contador{
  position:absolute;left:50%;bottom:clamp(.6rem,2.5vw,1.6rem);
  transform:translateX(-50%);
  margin:0;
  font-family:var(--font-title);font-weight:600;font-size:.9rem;
  color:rgb(255 255 255 / .8);
  background:rgb(0 0 0 / .35);
  padding:.35rem .9rem;border-radius:999px;
}

/* En celular las flechas van abajo, sobre la foto: a los costados no
   entrarian y le comerian ancho a la imagen. */
@media (max-width:700px){
  /* Mismo esquema que en escritorio -flechas a los costados- pero
     superpuestas sobre la foto en vez de ocupar columna propia: a este
     ancho robarian 100px que la imagen necesita. Antes iban abajo y en un
     celular real la barra del navegador las tapaba. */
  .visor{
    grid-template-columns:minmax(0,1fr);
    padding:2.5rem .5rem calc(3.5rem + env(safe-area-inset-bottom,0px));
  }
  .visor__marco{grid-column:1}
  .visor__nav{
    position:absolute;top:50%;
    transform:translateY(-50%);
    background:rgb(0 0 0 / .45);
    border-color:rgb(255 255 255 / .35);
  }
  .visor__nav--prev{left:.5rem}
  .visor__nav--next{right:.5rem}
  .visor__contador{bottom:calc(1.1rem + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   BOTON FLOTANTE DE WHATSAPP
   Aparece pasada la primera pantalla -arriba ya esta el CTA del hero- y se
   esconde al llegar al pie, donde el contacto ya esta a la vista.
   ========================================================================== */

.flota{
  position:fixed;z-index:800;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  margin-bottom:env(safe-area-inset-bottom,0);   /* barra de gestos del iPhone */
  display:flex;align-items:flex-end;gap:.7rem;

  /* El contenedor mide mas de 300px de ancho aunque el globo este oculto.
     Sin esto, pasar el mouse por esa zona vacia abria el globo desde lejos:
     el hover tiene que ser del boton, no de la caja que lo contiene. */
  pointer-events:none;

  opacity:0;visibility:hidden;
  transform:translateY(16px) scale(.92);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),
             visibility .35s var(--ease-out);
}
body[data-flota="visible"] .flota{opacity:1;visibility:visible;transform:none}

.flota__btn,
.flota__globo{pointer-events:auto}

/* Boton ---------------------------------------------------------------- */
/* En reposo: redondo y verde apagado -el verde oscuro de WhatsApp, no el
   fosforescente-. Al pasar el mouse morfea a azul de marca y a squircle.
   El cambio de forma es lo que lo distingue: no hay otro boton flotante
   que cambie de silueta. */
.flota__btn{
  position:relative;flex:0 0 auto;
  width:60px;height:60px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#17A47C 10%,#0E7A5F);
  color:var(--white);
  box-shadow:0 14px 30px -10px rgb(14 122 95 / .7),
             0 3px 10px -3px rgb(0 0 0 / .28);
  transition:transform .38s var(--ease-out),
             border-radius .38s var(--ease-out),
             background .38s var(--ease-out),
             box-shadow .38s var(--ease-out);
}
.flota__btn .btn__ico{width:30px;height:30px;transition:none}

.flota__btn:hover,.flota__btn:focus-visible{
  transform:translateY(-3px);
  border-radius:18px;
  background:linear-gradient(145deg,var(--navy) 15%,var(--navy-900));
  box-shadow:0 20px 38px -10px rgb(0 33 92 / .85),
             0 3px 10px -3px rgb(0 0 0 / .35);
}

/* Globo ---------------------------------------------------------------- */
.flota__globo{
  position:relative;margin:0 0 5px;
  max-width:15.5rem;padding:.9rem 2.1rem .9rem 1.1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px 14px 3px 14px;
  box-shadow:0 16px 34px -16px rgb(0 33 92 / .55);
  font-size:.88rem;line-height:1.45;color:var(--muted);
  opacity:0;visibility:hidden;
  transform:translateY(6px) scale(.96);
  transform-origin:100% 100%;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),
             visibility .28s var(--ease-out);
}
.flota__globo b{display:block;color:var(--navy);font-weight:600;margin-bottom:.15rem}

/* El globo se abre por el hover REAL del boton -no del contenedor- y sigue
   abierto mientras el mouse esta sobre el, para poder cerrarlo con la X. */
body[data-globo="abierto"] .flota__globo,
.flota:has(.flota__btn:hover) .flota__globo,
.flota:has(.flota__btn:focus-visible) .flota__globo,
.flota__globo:hover{opacity:1;visibility:visible;transform:none}

.flota__cerrar{
  position:absolute;top:5px;right:7px;
  width:26px;height:26px;
  border:0;background:none;cursor:pointer;
  font-size:1.15rem;line-height:1;color:var(--steel);border-radius:50%;
}
.flota__cerrar:hover{color:var(--navy);background:#eef2f9}

@media (max-width:700px){
  .obra-grid{grid-template-columns:repeat(3,1fr);gap:.45rem}
  .flota__btn{width:56px;height:56px}
  .flota__globo{max-width:12.5rem;font-size:.84rem}
}