/* Multiclean S.A. — sitio 2026.
   Colores y logo son los de siempre (verde-azulado #34c4aa, el mismo que
   usaba el sitio en WordPress: --theme-palette-color-1 del tema Blocksy).
   El negro/naranja (#0A0A0A / #FF8C1A) es SOLO de la línea de campanas y
   residuos de grasa (gastronomía) — no se usa en el resto del sitio. */

:root{
  --primario:#34c4aa;
  --primario-texto:#1B6B5A;     /* el mismo verde-azulado, oscurecido: es el
                                   que usa texto y links sobre blanco, porque
                                   #34c4aa solo no llega a 4.5:1 */
  --primario-suave:#E4F5F1;
  --negro:#0A0A0A;
  --negro-panel:#151515;
  --negro-borde:#2A2A2A;
  --sobre-negro:#F4F4F4;
  --sobre-negro-2:#C9C9C9;
  --naranja:#FF8C1A;              /* solo dentro de .camp (campanas) */
  --naranja-sobre:#140D04;
  --blanco:#FFFFFF;
  --hueso:#FAF8F5;
  --gris-pie:#F7F7F7;             /* el gris del footer original */
  --texto:#1C1C1A;
  --texto-2:#55534E;
  --linea:#E5E1D8;
  --r:10px;
  --maxw:1180px;
  --gutter:clamp(18px,4.5vw,40px);
  --sombra:0 2px 8px rgba(10,10,10,.06), 0 20px 45px rgba(10,10,10,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--blanco); color:var(--texto);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:"Sen","Inter",sans-serif; margin:0; font-weight:700;
  line-height:1.12; text-wrap:balance; color:var(--negro)}
p{margin:0}
a{color:var(--primario-texto)}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--primario); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
.saltar{position:absolute; left:-9999px; top:0; background:var(--negro); color:var(--blanco);
  padding:14px 22px; z-index:300; font-weight:600; text-decoration:none}
.saltar:focus{left:0}

.contenedor{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.seccion{padding-block:clamp(48px,7vw,88px)}
.seccion-hueso{background:var(--hueso)}
.volanta{display:inline-flex; align-items:center; gap:9px; font:600 12.5px/1 "Inter",sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primario-texto); margin-bottom:14px}
.volanta::before{content:""; width:26px; height:2px; background:currentColor}
.cab{max-width:62ch; margin-bottom:clamp(28px,4vw,46px)}
.cab h2{font-size:clamp(28px,4.4vw,44px)}
.cab p{color:var(--texto-2); font-size:18px; margin-top:16px; max-width:56ch}
.centrado{text-align:center; margin-inline:auto}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:13px 26px; border-radius:100px; font:700 15.5px/1 "Inter",sans-serif;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primario{background:var(--primario); color:var(--negro); border-color:var(--primario)}
.btn-primario:hover{background:#43D4B9; transform:translateY(-2px); box-shadow:0 10px 22px rgba(52,196,170,.32)}
.btn-naranja{background:var(--naranja); color:var(--naranja-sobre); border-color:var(--naranja)}
.btn-naranja:hover{background:#FFA044; transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,140,26,.32)}
.btn-negro{background:var(--negro); color:var(--blanco); border-color:var(--negro)}
.btn-negro:hover{background:#242424; transform:translateY(-2px)}
.btn-hueco{background:transparent; color:var(--negro); border-color:var(--linea)}
.btn-hueco:hover{border-color:var(--negro); transform:translateY(-2px)}
.fila-btn{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}

/* ---------- header ---------- */
.barra{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
.barra-in{max-width:var(--maxw); margin:0 auto; padding:10px var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px}
.logo{display:flex; align-items:center; gap:10px; line-height:0; text-decoration:none; justify-self:start}
.logo img{height:56px; width:auto}
.logo b{font:800 18px/1 "Sen",sans-serif; color:var(--texto); letter-spacing:-.01em}
.nav-desktop{display:flex; gap:2px; justify-self:center}
.nav-desktop a{color:var(--texto); text-decoration:none; font-weight:600; font-size:15px;
  padding:11px 14px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{background:var(--primario-suave); color:var(--primario-texto)}
.barra-acciones{display:flex; align-items:center; gap:18px; justify-self:end}
.barra .btn{min-height:44px; padding:10px 20px; font-size:14.5px}
.btn-menu{display:none; background:none; border:2px solid var(--linea); border-radius:8px;
  width:44px; height:44px; padding:0; cursor:pointer}
.btn-menu span, .btn-menu::before, .btn-menu::after{content:""; display:block; height:2px;
  background:var(--negro); margin:6px 9px; transition:transform .2s, opacity .2s}
.menu-mobile{display:none; flex-direction:column; padding:8px var(--gutter) 18px; border-top:1px solid var(--linea)}
.menu-mobile a{color:var(--texto); text-decoration:none; font-weight:600; padding:13px 4px;
  border-bottom:1px solid var(--linea); min-height:44px; display:flex; align-items:center}
.menu-mobile a:last-child{border-bottom:none}
@media (max-width:860px){
  .nav-desktop, .barra-acciones .btn{display:none}
  .btn-menu{display:block}
  .barra.abierta .menu-mobile{display:flex}
}

/* ---------- hero ---------- */
.hero{position:relative; color:var(--blanco); overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.70), rgba(10,10,10,.48) 45%, rgba(10,10,10,.80))}
.hero-in{position:relative; z-index:2; padding-block:clamp(64px,12vw,120px) clamp(48px,8vw,84px)}
.hero h1{font-size:clamp(33px,5.6vw,58px); color:var(--blanco)}
.hero .volanta{color:var(--primario)}
.hero p.bajada{color:#EDEBE6; font-size:clamp(17px,2vw,20px); max-width:52ch; margin-top:18px}
.hero .fila-btn .btn-hueco{color:var(--blanco); border-color:rgba(255,255,255,.55)}
.hero .fila-btn .btn-hueco:hover{border-color:var(--blanco)}
.hero-datos{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,40px); margin-top:clamp(36px,5vw,54px)}
.hero-datos b{display:block; font:700 clamp(24px,3vw,32px)/1 "Sen",sans-serif; color:var(--primario)}
.hero-datos span{display:block; font-size:14px; color:#D8D5CE; margin-top:5px}

/* ---------- tope de página interior (sin foto) ---------- */
.tope{background:var(--hueso); border-bottom:1px solid var(--linea)}
.tope-in{padding-block:clamp(36px,6vw,56px) clamp(28px,4vw,40px)}
.tope h1{font-size:clamp(28px,4.4vw,42px)}
.tope .volanta{color:var(--primario-texto)}
.tope p.bajada{color:var(--texto-2); max-width:62ch; margin-top:14px; font-size:17px}

/* ---------- franja de clientes (marquee, a color) ---------- */
.clientes{border-block:1px solid var(--linea); background:var(--blanco); overflow:hidden}
.clientes-in{padding-block:28px}
.clientes p.rotulo{font-size:14px; font-weight:700; color:var(--texto); text-align:center; margin-bottom:4px}
.clientes p.bajada-chica{font-size:14px; color:var(--texto-2); text-align:center; margin-bottom:20px}
.marquee{width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-pista{display:flex; align-items:center; gap:clamp(36px,5vw,64px); width:max-content;
  animation:desfile 28s linear infinite}
.marquee:hover .marquee-pista{animation-play-state:paused}
.marquee-pista img{height:58px; width:auto; max-width:160px; object-fit:contain; flex:none}
@keyframes desfile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .marquee-pista{animation:none; flex-wrap:wrap; justify-content:center}
  .marquee-pista img:nth-child(n+9){display:none}
}

/* ---------- tarjetas de servicio: grilla institucional con bordes
   compartidos, como el catálogo original ---------- */
.grilla-servicios{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:8px; border-top:1px solid var(--linea); border-left:1px solid var(--linea)}
.grilla-servicios--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.grilla-servicios--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.servicio{background:var(--blanco); border-right:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:clamp(28px,3vw,36px) 24px; text-align:center; display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:inherit; transition:background-color .15s ease}
.servicio:hover, .servicio:focus-visible{background:var(--primario-suave)}
.servicio:hover .servicio-icono, .servicio:focus-visible .servicio-icono{color:var(--primario-texto)}
.servicio h3{font-size:18px}
.servicio p{color:var(--texto-2); font-size:15px; margin-top:10px; line-height:1.55; max-width:30ch}
.servicio-icono{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  color:var(--negro); margin-bottom:16px; transition:color .15s ease}
.servicio-icono svg{width:36px; height:36px}

/* ---------- franja de números (misma grilla institucional) ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--linea); border-left:1px solid var(--linea)}
.stats div{border-right:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:28px 16px; text-align:center}
.stats b{display:block; font:700 clamp(26px,3vw,34px)/1 "Sen",sans-serif; color:var(--primario-texto)}
.stats span{display:block; font-size:13.5px; color:var(--texto-2); margin-top:8px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- cómo trabajamos ---------- */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; margin-top:8px}
.paso b.n{display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; background:var(--negro); color:var(--primario); font:700 17px/1 "Sen",sans-serif; margin-bottom:16px}
.paso h3{font-size:18px}
.paso p{color:var(--texto-2); margin-top:8px; font-size:15.5px}

/* ---------- galería de trabajo (sin huecos: 1 ancha + 3 en fila) ---------- */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
.galeria figure{margin:0; overflow:hidden; border-radius:var(--r); position:relative}
.galeria img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.galeria a:hover img, .galeria a:focus-visible img{transform:scale(1.05)}
.galeria .g-grande{grid-column:1 / -1}
.galeria .g-grande img{aspect-ratio:21/9}
.galeria figure:not(.g-grande) img{aspect-ratio:4/3}
@media (max-width:720px){
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .g-grande{grid-column:1 / -1}
  .galeria .g-grande img{aspect-ratio:16/9}
}

/* ---------- testimonio ---------- */
.testimonio{background:var(--hueso); border:1px solid var(--linea); border-radius:10px;
  padding:clamp(32px,5vw,56px); text-align:center}
.testimonio svg{color:var(--primario-texto)}
.testimonio blockquote{margin:20px auto 0; max-width:60ch; font:600 clamp(19px,2.4vw,24px)/1.5 "Sen",sans-serif; color:var(--negro)}
.testimonio cite{display:block; margin-top:18px; font-style:normal; color:var(--texto-2); font-size:14.5px}

/* ---------- FAQ (nativo, sin JS) ---------- */
.faq{max-width:76ch; margin-top:8px}
.faq details{border-bottom:1px solid var(--linea); padding-block:16px}
.faq summary{cursor:pointer; font:700 16.5px/1.4 "Sen",sans-serif; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; color:var(--primario-texto); flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--texto-2); margin-top:12px; font-size:15.5px; max-width:66ch}

/* ---------- bloque campanas: única parte del sitio en negro/naranja ---------- */
.camp{background:var(--negro); color:var(--sobre-negro); border-radius:10px; padding:clamp(30px,5vw,52px); scroll-margin-top:90px}
.camp .volanta{color:var(--naranja)}
.camp h2{color:var(--blanco); font-size:clamp(25px,3.4vw,34px)}
.camp h2 span{color:var(--naranja)}
.camp p.lead{color:var(--sobre-negro-2); max-width:56ch; margin-top:14px}
.camp-lista{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:22px;
  padding:20px 22px; background:var(--negro-panel); border:1px solid var(--negro-borde); border-radius:10px}
.camp-lista li{font-size:14.5px; color:var(--sobre-negro); display:flex; gap:8px}
.camp-lista li::before{content:"✓"; color:var(--naranja); flex:none}
@media (max-width:560px){.camp-lista{grid-template-columns:1fr}}
.camp .fila-btn .btn-hueco{color:var(--blanco); border-color:rgba(255,255,255,.55)}
.camp .fila-btn .btn-hueco:hover{border-color:var(--blanco)}

/* ---------- formularios ---------- */
form.form{max-width:640px; margin-top:8px}
.campo{margin-bottom:18px}
.campo label{display:block; font-weight:700; font-size:14.5px; margin-bottom:7px}
.campo input, .campo textarea, .campo select{width:100%; font:inherit; padding:13px 15px;
  border:2px solid var(--linea); border-radius:8px; background:var(--blanco); color:var(--texto)}
.campo input:focus, .campo textarea:focus, .campo select:focus{border-color:var(--primario); outline:none}
.campo textarea{resize:vertical; min-height:110px}
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:560px){.dos-col{grid-template-columns:1fr}}
.resultado{margin-top:14px; font-weight:600; min-height:1.4em}
.resultado.ok{color:#1B7A3D}
.resultado.error{color:#B4231C}
.aviso-form{color:var(--texto-2); font-size:13.5px; margin-top:14px; line-height:1.5}

/* ---------- footer (gris claro, como el sitio original) ---------- */
footer{background:var(--gris-pie); color:var(--texto-2); border-top:1px solid var(--linea)}
.pie{padding-block:clamp(44px,6vw,64px) 26px}
.pie-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px}
.pie-grid img{height:56px; margin-bottom:14px}
.pie-grid p{font-size:14.5px; line-height:1.6; max-width:34ch}
.pie h4{color:var(--texto); font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px}
.pie-grid a{color:var(--texto-2); text-decoration:none; display:block; padding-block:6px; font-size:15px}
.pie-grid a:hover{color:var(--primario-texto)}
.pie-base{border-top:1px solid var(--linea); margin-top:34px; padding-top:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13.5px; color:#8A8781}
@media (max-width:760px){.pie-grid{grid-template-columns:1fr; gap:28px}}

/* ---------- WhatsApp flotante ---------- */
.wa-flota{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:150; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .15s ease}
.wa-flota:hover{transform:scale(1.08)}

@media print{ .wa-flota, .barra{display:none} }