/* =========================================================
   VALCON SOLUTIONS — hoja de estilos única
   Paleta cálida de cocina: humo, crema, salsa y aceite.
   ========================================================= */

/* ---------- Tipografías autoalojadas (sin peticiones a terceros) ---------- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/instrument-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --humo:#14100c;
  --carbon:#1d1712;
  --carbon-2:#292118;
  --crema:#f9efdf;
  --crema-70:rgba(249,239,223,.72);
  --crema-45:rgba(249,239,223,.45);
  --salsa:#c8471e;
  --salsa-osc:#a4361a;
  --aceite:#e8a33c;
  --claro:#fdfaf5;
  --claro-alt:#f5ece0;
  --tinta:#231c15;
  --tinta-suave:#5f5548;
  --linea:#e6dbc9;
  --radio:18px;
  --radio-s:12px;
  --sombra:0 18px 50px rgba(20,16,12,.10);
  --sombra-fuerte:0 24px 60px rgba(0,0,0,.45);
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1220px;
}

*{box-sizing:border-box}
*,*::before,*::after{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--claro);color:var(--tinta);font-family:var(--ui);
  font-size:clamp(1rem,.98rem + .1vw,1.05rem);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.018em;text-wrap:balance;line-height:1.05}
::selection{background:var(--aceite);color:var(--humo)}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.seccion{padding-block:clamp(60px,8vw,116px);position:relative}
.oscura{background:var(--humo);color:var(--crema)}
.oscura h2,.oscura h3,.oscura h4{color:var(--crema)}
.clara-alt{background:var(--claro-alt)}
/* (Se retiró content-visibility para que cualquier rastreador o IA lea todo el texto) */

.salto{position:absolute;left:-9999px;top:0;background:var(--crema);color:var(--humo);padding:12px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:600}
.salto:focus{left:0}

/* ---------- Cabeceras de sección ---------- */
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--salsa-osc);margin-bottom:14px}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.oscura .kicker{color:var(--aceite)}
.titulo{font-size:clamp(1.9rem,4.1vw,3.35rem)}
.entrada{margin-top:18px;color:var(--tinta-suave);max-width:62ch;font-size:1.05rem}
.oscura .entrada{color:var(--crema-70)}
.cabecera{max-width:780px;margin-bottom:clamp(30px,5vw,54px)}
.cabecera.centro{margin-inline:auto;text-align:center}
.cabecera.centro .kicker{justify-content:center}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font-family:var(--ui);font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn svg{width:20px;height:20px;flex:none}
.btn-primario{background:var(--salsa);color:#fff;box-shadow:0 12px 28px rgba(200,71,30,.32)}
.btn-primario:hover{background:var(--salsa-osc);transform:translateY(-2px)}
.btn-fantasma{border:1px solid rgba(249,239,223,.32);color:var(--crema)}
.btn-fantasma:hover{border-color:var(--crema);background:rgba(249,239,223,.08)}
.btn-oscuro{border:1px solid var(--linea);color:var(--tinta);background:#fff}
.btn-oscuro:hover{border-color:var(--tinta);transform:translateY(-2px)}
.btn-wa{background:#1faa53;color:#fff}
.btn-wa:hover{background:#178f44;transform:translateY(-2px)}
.enlace{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--salsa-osc);
  border-bottom:2px solid rgba(164,54,26,.25);padding-bottom:2px;transition:border-color .16s ease,gap .16s ease}
.enlace:hover{border-color:var(--salsa-osc);gap:12px}
.oscura .enlace{color:var(--aceite);border-color:rgba(232,163,60,.3)}
.oscura .enlace:hover{border-color:var(--aceite)}
:focus-visible{outline:2px solid var(--aceite);outline-offset:3px;border-radius:4px}

/* ---------- Encabezado flotante ---------- */
.encabezado{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:clamp(10px,1.6vw,18px);transition:padding-top .25s ease}
.barra{display:flex;align-items:center;gap:18px;justify-content:space-between;
  background:rgba(20,16,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(249,239,223,.12);border-radius:999px;padding:10px 12px 10px 20px;
  transition:background-color .25s ease,box-shadow .25s ease,padding .25s ease}
.encabezado.compacto{padding-top:8px}
.encabezado.compacto .barra{background:rgba(20,16,12,.94);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{height:clamp(38px,4vw,46px);width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.nav{display:flex;align-items:center;gap:clamp(6px,1.4vw,10px);margin-left:auto}
.nav a{color:var(--crema);text-decoration:none;font-size:.94rem;font-weight:500;padding:10px 12px;border-radius:999px;
  min-height:44px;display:inline-flex;align-items:center;transition:background-color .16s ease,color .16s ease}
.nav a:hover{background:rgba(249,239,223,.1)}
.nav a.activo{color:var(--aceite)}
.acciones-barra{display:flex;align-items:center;gap:10px;flex:none}
.tel-pill{display:inline-flex;align-items:center;gap:8px;color:var(--crema);text-decoration:none;font-weight:600;font-size:.92rem;
  border:1px solid rgba(249,239,223,.28);border-radius:999px;padding:10px 16px;min-height:44px;white-space:nowrap;transition:border-color .16s ease,background-color .16s ease}
.tel-pill:hover{border-color:var(--aceite);color:var(--aceite)}
.tel-pill svg{width:16px;height:16px;flex:none}
.barra .btn{min-height:44px;padding:0 18px;font-size:.92rem;box-shadow:none}
.hamburguesa{display:none;background:rgba(249,239,223,.08);border:1px solid rgba(249,239,223,.16);border-radius:50%;
  color:var(--crema);width:44px;height:44px;place-items:center;cursor:pointer;flex:none}
.hamburguesa svg{width:22px;height:22px}

@media (max-width:1080px){ .barra .btn-wa{display:none} }
@media (max-width:960px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);height:100dvh;background:var(--carbon);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:104px 26px 32px;margin:0;
    transform:translateX(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:-16px 0 40px rgba(0,0,0,.45);overflow-y:auto}
  .nav.abierto{transform:none}
  .nav a{font-size:1.05rem;padding:16px 8px;border-radius:0;border-bottom:1px solid rgba(249,239,223,.1)}
  .nav .btn-wa{display:inline-flex;margin-top:22px;width:100%}
  .hamburguesa{display:grid}
  .tel-pill span{display:none}
  .velo{position:fixed;inset:0;background:rgba(10,8,6,.6);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:90}
  .velo.visible{opacity:1;pointer-events:auto}
}
@media (max-width:560px){
  .barra{padding:8px 8px 8px 14px}
  .tel-pill{padding:10px 12px}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:620px;max-height:1000px;overflow:hidden;isolation:isolate;background:var(--humo)}
/* Encuadre de partida sobre las charolas: así, aunque el recorrido no haya
   arrancado todavía, la primera vista ya es de comida y no del comedor vacío. */
.escena{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}
.escena img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 68%}
@media (max-width:700px){ .escena img{object-position:62% 82%} }
/* El vapor va ENCIMA del degradado (si no, el velo oscuro lo borra),
   pero se desvanece abajo para no estorbar el titular. */
.vapor{position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 84%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 84%)}
.luz{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(20,16,12,.62) 0%, rgba(20,16,12,0) 24%),
    radial-gradient(120% 90% at 78% 30%, rgba(232,163,60,.12), transparent 60%),
    linear-gradient(to top, rgba(20,16,12,.96) 0%, rgba(20,16,12,.6) 40%, rgba(20,16,12,.06) 72%),
    linear-gradient(to right, rgba(20,16,12,.62) 0%, rgba(20,16,12,0) 58%);
}
.hero-contenido{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:clamp(40px,7vh,86px)}
.hero-caja{max-width:880px}
.sello{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:var(--crema-70);margin-bottom:20px;
  border:1px solid rgba(249,239,223,.18);border-radius:999px;padding:8px 16px;backdrop-filter:blur(6px)}
.sello i{width:8px;height:8px;border-radius:50%;background:var(--aceite);box-shadow:0 0 12px var(--aceite);flex:none}
.hero h1{font-variation-settings:"opsz" 144,"SOFT" 100;font-size:clamp(2.5rem,5.6vw,4.9rem);line-height:.98;color:var(--crema);
  max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}
/* Hero limpio: solo el titular y los botones, para que se vea la comida */
.hero .sello,.hero .sub,.hero .sub-movil{display:none}
.acciones{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* Sello de la Red en el hero: pastilla blanca para que el logo (que trae fondo
   blanco) se lea sobre la foto oscura en vez de verse como un recorte. */
.sello-red{display:inline-flex;align-items:center;background:#fff;border-radius:16px;
  padding:9px 18px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .2s ease,box-shadow .2s ease}
.sello-red:hover,.sello-red:focus-visible{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.45)}
.sello-red img{height:clamp(54px,6vw,74px);width:auto;display:block}
/* En celular el sello toma el mismo ancho que el botón y centra el logo:
   así deja de verse pegado a la izquierda y las letras se leen mejor. */
@media (max-width:700px){
  .sello-red{width:100%;justify-content:center;padding:13px 18px}
  /* Se mide por ancho (no por alto) para que llene la pastilla y el
     texto del logo quede legible sin dejar tanto blanco a los lados. */
  .sello-red img{width:min(205px,64%);height:auto}
}
.baja{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;color:var(--crema-45);
  display:grid;place-items:center;width:44px;height:44px;text-decoration:none}
.baja svg{width:22px;height:22px;animation:flota 2.4s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
@media (max-width:700px){
  .hero{min-height:600px}
  /* Menos velo: la comida se ve; el texto se sostiene con su propio degradado al pie */
  .luz{background:linear-gradient(to top, rgba(20,16,12,.94) 0%, rgba(20,16,12,.72) 30%, rgba(20,16,12,.18) 55%, rgba(20,16,12,0) 78%)}
  .baja{display:none}
  .acciones .btn{width:100%}
  .hero h1{font-size:clamp(2.3rem,9vw,3.1rem);max-width:14ch}
  .acciones{margin-top:22px;gap:10px}
}
@media (prefers-reduced-motion:reduce){ .vapor{display:none} .baja svg{animation:none} }

/* ---------- Barra de confianza ---------- */
.confianza{background:var(--carbon);color:var(--crema);padding-block:clamp(28px,4vw,44px);border-bottom:1px solid rgba(249,239,223,.08)}
.confianza ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,3vw,34px)}
.confianza li{display:flex;gap:13px;align-items:flex-start}
.confianza svg{width:26px;height:26px;color:var(--aceite);flex:none;margin-top:2px}
.confianza b{display:block;font-family:var(--ui);font-weight:600;font-size:.98rem;color:var(--crema)}
.confianza span{font-size:.88rem;color:var(--crema-45);line-height:1.45}

/* ---------- Servicios (tarjetas con foto) ---------- */
.rejilla-servicios{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:clamp(14px,1.6vw,20px)}
.tarjeta{position:relative;border-radius:var(--radio);overflow:hidden;background:var(--carbon);text-decoration:none;color:var(--crema);
  display:block;aspect-ratio:4/3.35;box-shadow:var(--sombra);isolation:isolate}
.tarjeta img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tarjeta::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(15,11,8,.94) 12%,rgba(15,11,8,.66) 45%,rgba(15,11,8,.12) 78%)}
.tarjeta:hover img.foto,.tarjeta:focus-visible img.foto{transform:scale(1.07)}
.tarjeta .cuerpo{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(18px,2.2vw,24px)}
.tarjeta .cuerpo h3{margin:0}
.tarjeta .cuerpo h3 img{height:clamp(38px,4.2vw,50px);width:auto;max-width:78%;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.tarjeta p{margin-top:12px;color:var(--crema-70);font-size:.94rem;line-height:1.45}
.tarjeta .ver{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:var(--aceite);
  transition:gap .16s ease}
.tarjeta:hover .ver{gap:12px}
.pie-servicios{margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}

/* ---------- Equipo ---------- */
.equipo{background:var(--humo);color:var(--crema);overflow:hidden}
.equipo .contenedor{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.equipo-fotos{position:relative}
.equipo-fotos .principal{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-fuerte);border:1px solid rgba(249,239,223,.1)}
.equipo-fotos .secundaria{position:absolute;right:-6%;bottom:-13%;width:52%;border-radius:var(--radio-s);overflow:hidden;
  border:4px solid var(--humo);box-shadow:var(--sombra-fuerte)}
.equipo-fotos img{width:100%;height:auto;object-fit:cover}
.lista-marcas{list-style:none;margin-top:30px;display:grid;gap:16px}
.lista-marcas li{display:flex;gap:13px;align-items:flex-start;color:var(--crema-70);font-size:.98rem}
.lista-marcas svg{width:22px;height:22px;color:var(--aceite);flex:none;margin-top:3px}
.lista-marcas b{color:var(--crema);font-weight:600}
@media (max-width:900px){
  .equipo .contenedor{grid-template-columns:1fr;gap:clamp(56px,10vw,80px)}
  .equipo-fotos .secundaria{width:46%;right:0;bottom:-10%}
}

/* ---------- Proceso ---------- */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,26px);counter-reset:p}
.pasos li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(22px,2.4vw,30px);position:relative}
.pasos li::before{counter-increment:p;content:"0" counter(p);font-family:var(--display);font-size:2.4rem;line-height:1;
  color:var(--aceite);display:block;margin-bottom:14px}
.pasos h3{font-family:var(--ui);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.pasos p{color:var(--tinta-suave);font-size:.94rem;line-height:1.5}

/* ---------- Franja de foto a sangre ---------- */
.franja-foto{position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;
  min-height:clamp(340px,48vh,480px);padding-block:clamp(48px,7vw,80px);overflow:hidden;background:var(--humo)}
.franja-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.franja-foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(15,11,8,.82),rgba(15,11,8,.72)),radial-gradient(60% 60% at 50% 50%,rgba(232,163,60,.12),transparent 70%)}
.franja-foto .contenedor{position:relative}
.franja-foto p.frase{font-family:var(--display);font-weight:600;color:var(--crema);
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.15;max-width:22ch;margin-inline:auto;text-wrap:balance}
.franja-foto p.apoyo{margin-top:20px;color:var(--crema-70);max-width:56ch;margin-inline:auto}

/* ---------- Distintivos ---------- */
.distintivos{background:var(--carbon);color:var(--crema);
  background-image:radial-gradient(80% 60% at 20% 0%,rgba(232,163,60,.10),transparent 60%)}
.rejilla-distintivos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(18px,2.4vw,30px)}
.distintivo{background:rgba(249,239,223,.045);border:1px solid rgba(249,239,223,.1);border-radius:var(--radio);
  padding:clamp(24px,2.6vw,32px);text-align:center;transition:border-color .2s ease,transform .2s ease}
.distintivo:hover{border-color:rgba(232,163,60,.5);transform:translateY(-4px)}
.distintivo img{height:118px;width:118px;margin:0 auto 20px;object-fit:contain;
  background:#fff;border-radius:20px;padding:12px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.distintivo h3{font-family:var(--ui);font-weight:700;font-size:1.02rem;margin-bottom:8px}
.distintivo p{color:var(--crema-70);font-size:.92rem;line-height:1.5}

/* ---------- Cobertura ---------- */
.cobertura .contenedor{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,5vw,70px);align-items:center}
.mapa{border-radius:var(--radio);overflow:hidden;background:#fff;border:1px solid var(--linea);padding:clamp(10px,2vw,24px)}
.oficinas{list-style:none;display:grid;gap:14px;margin-top:28px}
.oficinas li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);padding:18px 20px;
  display:flex;align-items:center;gap:16px;transition:border-color .18s ease,transform .18s ease}
.oficinas li:hover{border-color:var(--aceite);transform:translateX(4px)}
.oficinas .ico{width:42px;height:42px;border-radius:12px;background:var(--claro-alt);display:grid;place-items:center;color:var(--salsa-osc);flex:none}
.oficinas .ico svg{width:20px;height:20px}
.oficinas b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-suave);font-weight:700}
.oficinas a{font-family:var(--display);font-size:1.22rem;text-decoration:none;color:var(--tinta);font-weight:600}
.oficinas a:hover{color:var(--salsa-osc)}
/* Tira a todo lo ancho bajo el mapa y los teléfonos: logo grande a la
   izquierda y el texto a su lado, para que la sección quede equilibrada. */
.red-nacional{grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,52px);
  padding:clamp(20px,2.4vw,30px) clamp(22px,3vw,40px);
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s)}
.red-nacional img{width:clamp(220px,26vw,320px);height:auto;display:block;flex:none}
.red-nacional p{margin:0;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.55;color:var(--tinta-suave);max-width:40ch}
.red-nacional strong{color:var(--tinta)}
@media (max-width:640px){
  .red-nacional{flex-direction:column;text-align:center;gap:18px}
  .red-nacional img{width:min(280px,82%)}
}
@media (max-width:880px){ .cobertura .contenedor{grid-template-columns:1fr} }

/* ---------- Clientes ---------- */
.grupo-clientes+.grupo-clientes{margin-top:clamp(30px,4vw,48px)}
.grupo-clientes h3{font-family:var(--ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tinta-suave);font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.grupo-clientes h3::after{content:"";flex:1;height:1px;background:var(--linea)}
.rejilla-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
/* Flex (no grid) + overflow: así los logos altos se ajustan dentro del recuadro
   en vez de desbordarse y encimarse con los de junto. */
.logo-cliente{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);height:96px;padding:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,box-shadow .2s ease}
.logo-cliente:hover{border-color:var(--aceite);box-shadow:var(--sombra)}
/* Medida fija (96 de alto - 32 de relleno = 64) en vez de porcentajes: el
   navegador no tiene margen para interpretarlo mal. object-fit encaja el logo
   dentro de esa caja sin deformarlo ni salirse. */
.logo-cliente img{width:100%;height:64px;max-width:100%;max-height:64px;object-fit:contain;object-position:center;
  filter:grayscale(1);opacity:.72;transition:filter .25s ease,opacity .25s ease}
.logo-cliente:hover img{filter:none;opacity:1}

/* ---------- Galería (carrusel horizontal continuo) ---------- */
.galeria{background:var(--humo)}
.carrusel-galeria{overflow:hidden;width:100%}
.mosaico{display:flex;gap:14px;width:max-content;animation:despl-galeria 60s linear infinite;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
/* Solo pausa donde hay ratón de verdad: en pantallas táctiles el "hover" se
   queda pegado al tocar y la fila se detendría para siempre. */
@media (hover:hover){ .carrusel-galeria:hover .mosaico{animation-play-state:paused} }
.mosaico button{flex:0 0 auto;height:230px;margin:0;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--radio-s);overflow:hidden;position:relative;line-height:0}
.mosaico img{height:100%;width:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.mosaico button::after{content:"";position:absolute;inset:0;background:rgba(20,16,12,.25);opacity:0;transition:opacity .3s ease}
.mosaico button:hover img,.mosaico button:focus-visible img{transform:scale(1.05)}
.mosaico button:hover::after{opacity:1}
@keyframes despl-galeria{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Carruseles en celular ----------
   En escritorio el envoltorio no hace nada: las rejillas se ven igual.
   Debajo de 700px cada rejilla se vuelve una fila que corre sola. */
@media (max-width:700px){
  .carrusel-movil{overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
            mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
  /* will-change + translateZ fijan la capa de dibujo: sin esto el navegador
     la rehace al vuelo y los logos parpadean o se quedan en blanco. */
  .carrusel-movil > *{display:flex;width:max-content;gap:14px;
    animation:despl-galeria var(--vel,52s) linear infinite;
    will-change:transform;transform:translateZ(0);backface-visibility:hidden}
  .carrusel-movil > * > *{flex:0 0 auto}
  .carrusel-movil img{backface-visibility:hidden}

  .carrusel-movil .tarjeta{width:80vw;max-width:300px}
  .carrusel-movil .pasos{--vel:46s;counter-reset:none}
  .carrusel-movil .pasos li{width:78vw;max-width:290px}
  .carrusel-movil .pasos li::before{counter-increment:none;content:attr(data-num)}
  .carrusel-movil .rejilla-distintivos{--vel:42s}
  .carrusel-movil .distintivo{width:62vw;max-width:230px}
  .carrusel-movil .rejilla-logos{--vel:38s}
  .carrusel-movil .logo-cliente{width:40vw;max-width:150px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .carrusel-movil{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .carrusel-movil > *{animation:none}
}
@media (max-width:900px){ .mosaico button{height:190px} }
@media (max-width:540px){ .mosaico button{height:150px} }

.visor{position:fixed;inset:0;background:rgba(10,8,6,.94);display:none;align-items:center;justify-content:center;z-index:300;padding:clamp(16px,4vw,48px)}
.visor.abierto{display:flex}
.visor img{max-width:min(94vw,1200px);max-height:86vh;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.visor button{position:absolute;background:rgba(249,239,223,.12);border:0;color:var(--crema);cursor:pointer;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;transition:background-color .18s ease}
.visor button:hover{background:rgba(249,239,223,.26)}
.visor button svg{width:24px;height:24px}
.v-cerrar{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.v-prev{left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.v-next{right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}

/* ---------- Preguntas frecuentes ---------- */
.faq{display:grid;gap:12px;max-width:900px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);overflow:hidden;transition:border-color .2s ease}
.faq details[open]{border-color:var(--aceite)}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;font-weight:600;position:relative;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--salsa-osc);border-bottom:2px solid var(--salsa-osc);transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .respuesta{padding:0 22px 22px;color:var(--tinta-suave);font-size:.98rem}

/* ---------- Contacto ---------- */
.contacto{position:relative;isolation:isolate;color:var(--crema);background:
    linear-gradient(100deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,.68) 45%,rgba(20,16,12,.9) 75%),
    url(../img/instalaciones.webp) center 35%/cover no-repeat}
.contacto .contenedor{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,70px);align-items:start}
.datos{display:grid;gap:22px;margin-top:30px}
.dato{display:flex;gap:16px;align-items:flex-start}
.dato .ico{width:46px;height:46px;border-radius:13px;background:rgba(232,163,60,.14);display:grid;place-items:center;color:var(--aceite);flex:none}
.dato .ico svg{width:21px;height:21px}
.dato h3{font-family:var(--ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--crema-45);font-weight:700;margin-bottom:6px}
.dato a,.dato p{color:var(--crema);text-decoration:none;display:block;font-size:1.02rem}
.dato a:hover{color:var(--aceite)}
.formulario{background:var(--claro);color:var(--tinta);border-radius:var(--radio);padding:clamp(24px,3vw,40px);box-shadow:var(--sombra-fuerte)}
.formulario h2,.oscura .formulario h2{font-size:clamp(1.4rem,2.2vw,1.8rem);color:var(--tinta)}
.formulario > p{color:var(--tinta-suave);margin:10px 0 24px;font-size:.96rem}
.campos{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.campo{display:grid;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:.84rem;font-weight:600}
.campo input,.campo textarea{width:100%;padding:13px 15px;border:1px solid var(--linea);border-radius:var(--radio-s);
  font-family:var(--ui);font-size:.98rem;background:#fff;color:var(--tinta);transition:border-color .18s ease}
.campo input:focus,.campo textarea:focus{border-color:var(--aceite);outline:none;box-shadow:0 0 0 3px rgba(232,163,60,.22)}
.campo textarea{resize:vertical;min-height:112px}
.formulario .btn{width:100%;margin-top:20px}
.nota{font-size:.82rem;color:var(--tinta-suave);margin-top:12px;text-align:center}
@media (max-width:880px){ .contacto .contenedor{grid-template-columns:1fr} }
@media (max-width:560px){ .campos{grid-template-columns:1fr} }

/* ---------- Pie ---------- */
.pie{background:#0f0c09;color:var(--crema-45);padding-block:clamp(44px,6vw,68px) 28px}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.pie img.logo-pie{height:56px;width:auto;margin-bottom:18px}
.pie p{font-size:.92rem;line-height:1.6;max-width:38ch}
.pie h4{font-family:var(--ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--crema);font-weight:700;margin-bottom:16px}
.pie ul{list-style:none;display:grid;gap:10px}
.pie a{color:var(--crema-45);text-decoration:none;font-size:.93rem;transition:color .16s ease}
.pie a:hover{color:var(--aceite)}
.pie-abajo{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid rgba(249,239,223,.1);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.84rem}
@media (max-width:760px){ .pie-rejilla{grid-template-columns:1fr 1fr} .pie-rejilla > :first-child{grid-column:1/-1} }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:80;width:58px;height:58px;border-radius:50%;
  background:#1faa53;display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35);text-decoration:none;
  transition:transform .18s ease,background-color .18s ease}
.wa-flotante:hover{background:#178f44;transform:scale(1.06)}
.wa-flotante svg{width:29px;height:29px}

/* ---------- Aparición al hacer scroll ----------
   Solo se oculta si hay JavaScript: sin JS (o para un rastreador)
   el contenido siempre es visible. */
.js .revela{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .revela.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revela{opacity:1;transform:none;transition:none}
  .tarjeta img.foto,.mosaico img{transition:none}
  .mosaico{animation:none}
  .carrusel-galeria{overflow-x:auto}
}