/* Envirpro — sitio de servicios y equipos para tratamiento de agua.
   Layout: encabezado con dos marcas, portada con datos clave, secciones en bloques
   alternados blanco / gris claro, fichas de equipo con foto a la izquierda.
   TRANSICIÓN DE MARCA: para pasar a TRICA Servicios basta con cambiar estas variables
   y los dos logos del encabezado. */
:root{
  --marca:#77BB2A;          /* verde Envirpro (botones, detalles) */
  --marca-osc:#4E8A16;      /* verde para texto sobre blanco (mejor contraste) */
  --marca2:#E37118;         /* naranja Envirpro (segundo acento) */
  --aliado:#000066;         /* azul marino TRICA Servicios */
  --texto:#24292E;
  --texto-suave:#59626B;
  --fondo:#FFFFFF;
  --fondo-alt:#F2F5F3;      /* gris con un toque verde */
  --linea:#D9DFDB;
  --fuente-titulos:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fuente-texto:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radio:8px;
  --ancho:1180px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--fuente-texto);font-size:17px;line-height:1.6;color:var(--texto);background:var(--fondo)}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca-osc)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--marca2);outline-offset:2px}
h1,h2,h3{font-family:var(--fuente-titulos);line-height:1.2;text-wrap:balance;color:var(--texto)}
h1{font-size:clamp(26px,3.4vw,38px);font-weight:700}
h2{font-size:clamp(24px,2.6vw,32px);font-weight:700}
h3{font-size:20px;font-weight:600}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-inline:24px}
.etiqueta{font-family:var(--fuente-titulos);color:var(--marca-osc);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.suave{color:var(--texto-suave)}

/* Encabezado */
.encabezado{background:var(--fondo);border-bottom:1px solid var(--linea);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.encabezado .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding-block:12px;flex-wrap:wrap}
.marcas{display:flex;align-items:center;gap:18px;text-decoration:none}
.marcas .logo-env{height:72px;width:auto}
.marcas .sep{width:1px;height:56px;background:var(--linea)}
.alianza{display:flex;flex-direction:column;gap:3px}
.alianza small{font-size:12px;color:var(--texto-suave);letter-spacing:.02em}
.alianza img{height:30px;width:auto}
.menu{display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap;font-family:var(--fuente-titulos);font-size:15px;font-weight:500}
.menu a{color:var(--texto);text-decoration:none;padding-block:6px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--marca-osc)}
.menu a[aria-current="page"]{border-bottom-color:var(--marca)}
.btn{display:inline-block;background:var(--marca);color:#fff;font-family:var(--fuente-titulos);font-weight:600;font-size:15px;padding:11px 20px;border-radius:6px;text-decoration:none;border:2px solid var(--marca);cursor:pointer}
.btn:hover{background:var(--marca-osc);border-color:var(--marca-osc)}
.btn-borde{background:transparent;color:var(--texto);border-color:var(--texto)}
.btn-borde:hover{background:var(--texto);color:#fff;border-color:var(--texto)}
.menu .btn{color:#fff;padding:9px 18px;border-bottom:2px solid var(--marca)}

/* Portada */
.portada{background:linear-gradient(135deg,var(--fondo) 0%,var(--fondo-alt) 100%);padding-block:56px}
.portada .envoltura{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.portada .texto{display:flex;flex-direction:column;gap:16px;min-width:0}
.portada p.intro{font-size:18px;color:var(--texto-suave);max-width:58ch}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dato{background:var(--fondo);border:1px solid var(--linea);border-top:3px solid var(--marca);border-radius:var(--radio);padding:18px}
.dato:nth-child(2),.dato:nth-child(3){border-top-color:var(--marca2)}
.dato b{display:block;font-family:var(--fuente-titulos);font-size:24px;line-height:1.2;margin-bottom:4px}
.dato span{font-size:14px;color:var(--texto-suave);line-height:1.4;display:block}

/* Secciones */
.seccion{padding-block:64px}
.seccion.alt{background:var(--fondo-alt)}
.seccion-cab{display:flex;flex-direction:column;gap:10px;max-width:720px;margin-bottom:32px}
.cab-pagina{background:var(--fondo-alt);padding-block:44px;border-bottom:1px solid var(--linea)}
.cab-pagina .envoltura{display:flex;flex-direction:column;gap:10px}
.cab-pagina p{max-width:70ch;color:var(--texto-suave);font-size:18px}

/* Tarjetas de línea de negocio */
.lineas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.linea{display:flex;flex-direction:column;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;text-decoration:none;color:inherit}
.linea:hover{border-color:var(--marca)}
.linea img{aspect-ratio:4/3;object-fit:cover;width:100%}
.linea div{padding:18px;display:flex;flex-direction:column;gap:6px}
.linea p{font-size:15px;color:var(--texto-suave);line-height:1.5}
.linea .ver{font-family:var(--fuente-titulos);font-size:14px;font-weight:600;color:var(--marca-osc);margin-top:4px}

/* Proceso de trabajo */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:paso}
.pasos li{counter-increment:paso;display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:3px solid var(--linea)}
.pasos li::before{content:"Paso " counter(paso);font-family:var(--fuente-titulos);font-size:13px;font-weight:600;color:var(--marca2);letter-spacing:.05em;text-transform:uppercase}
.pasos p{font-size:15px;color:var(--texto-suave)}

/* Fichas (servicios, equipos, productos) */
.fichas{display:flex;flex-direction:column;gap:28px}
.ficha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:24px;scroll-margin-top:120px}
.ficha .foto{border-radius:6px;overflow:hidden;background:var(--fondo-alt)}
.ficha .foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ficha .foto.contener img{object-fit:contain;background:#fff}
.ficha .cuerpo{display:flex;flex-direction:column;gap:12px;min-width:0}
.ficha ul{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ficha li::marker{color:var(--marca)}
.ficha .nota{font-size:14px;color:var(--texto-suave)}
.marcas-txt{font-size:14px;color:var(--texto-suave)}
.marcas-txt b{color:var(--texto);font-weight:600}

/* Lista enunciativa "también manejamos" */
.tambien{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.tambien div{background:var(--fondo);padding:20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tambien h3{font-size:17px}
.tambien p{font-size:15px;color:var(--texto-suave)}

/* Productos propios */
.productos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.producto{display:flex;flex-direction:column;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.producto img{aspect-ratio:1/1;object-fit:contain;background:#fff;padding:12px;width:100%}
.producto div{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--linea);flex:1}
.producto .tipo{font-size:13px;font-weight:600;color:var(--marca2);text-transform:uppercase;letter-spacing:.05em;font-family:var(--fuente-titulos)}
.producto p{font-size:15px;color:var(--texto-suave)}
.producto a{margin-top:auto;font-family:var(--fuente-titulos);font-weight:600;font-size:14px}

/* Franja de llamada a la acción */
.cta{background:var(--texto);color:#fff;padding-block:48px}
.cta .envoltura{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{color:#fff}
.cta p{color:#C9D1CC;max-width:60ch}
.cta .btn-borde{color:#fff;border-color:#fff}
.cta .btn-borde:hover{background:#fff;color:var(--texto)}

/* Contacto */
.contacto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.formulario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:28px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.completo{grid-column:1/-1}
.campo label{font-family:var(--fuente-titulos);font-size:14px;font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--linea);border-radius:6px;background:var(--fondo);color:var(--texto);width:100%}
.campo textarea{min-height:130px;resize:vertical}
.formulario .btn{justify-self:start}
.aviso{grid-column:1/-1;font-size:15px;padding:12px 14px;border-radius:6px;background:var(--fondo-alt);border-left:4px solid var(--marca)}
.datos-contacto{display:flex;flex-direction:column;gap:20px}
.datos-contacto div{display:flex;flex-direction:column;gap:2px}
.datos-contacto dt,.datos-contacto .t{font-family:var(--fuente-titulos);font-size:13px;font-weight:600;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.05em}
.datos-contacto .v{font-size:18px;font-variant-numeric:tabular-nums}
.oculto{position:absolute;left:-9999px}

/* Pie */
.pie{background:var(--fondo-alt);border-top:1px solid var(--linea);padding-block:44px 28px;font-size:15px}
.pie .columnas{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.pie h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave);margin-bottom:10px}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.pie a{color:var(--texto);text-decoration:none}
.pie a:hover{color:var(--marca-osc)}
.pie .logos{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pie .logos img.e{height:56px;width:auto}
.pie .logos img.t{height:26px;width:auto}
.pie .legal{margin-top:32px;padding-top:18px;border-top:1px solid var(--linea);font-size:14px;color:var(--texto-suave)}

/* Botón flotante de WhatsApp */
.whatsapp{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;background:#1FA855;color:#fff;font-family:var(--fuente-titulos);font-weight:600;font-size:15px;padding:12px 18px;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.whatsapp:hover{background:#168A44}
.whatsapp svg{width:22px;height:22px;fill:currentColor}

@media (max-width:980px){
  .lineas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .productos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie .columnas{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .portada .envoltura,.contacto{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr;gap:18px;padding:18px}
  .tambien{grid-template-columns:1fr}
  .encabezado{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  .envoltura{padding-inline:16px}
  .marcas{gap:12px}
  .marcas .logo-env{height:52px}
  .marcas .sep{height:42px}
  .alianza img{height:22px}
  .menu{gap:4px 16px;font-size:14px}
  .portada,.seccion{padding-block:40px}
  .lineas,.pasos,.productos,.pie .columnas{grid-template-columns:1fr}
  .datos{gap:10px}
  .dato{padding:14px}
  .dato b{font-size:19px}
  .formulario{grid-template-columns:1fr;padding:20px}
  .whatsapp span{display:none}
  .whatsapp{padding:14px}
}

/* Submenú de Equipos */
.desplegable{position:relative;display:flex;align-items:center}
.submenu{display:none;position:absolute;top:100%;left:-14px;z-index:40;min-width:270px;flex-direction:column;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:8px;box-shadow:0 8px 24px rgba(36,41,46,.12)}
.submenu a{padding:9px 12px;border-bottom:0;border-radius:6px;font-size:15px}
.submenu a:hover{background:var(--fondo-alt)}
.desplegable:hover .submenu,.desplegable:focus-within .submenu{display:flex}

/* Páginas de equipo */
.lineas-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cab-equipo .envoltura{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.cab-texto{display:flex;flex-direction:column;gap:12px;min-width:0}
.cab-foto{border-radius:var(--radio);overflow:hidden;background:#fff;border:1px solid var(--linea)}
.cab-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.logo-producto{height:48px;width:auto;align-self:flex-start}
.migas{font-size:14px;color:var(--texto-suave)}
.migas a{color:var(--marca-osc)}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:24px}
.dos-col ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.dos-col li::marker{color:var(--marca)}
.dos-col>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:var(--fondo);border:1px solid var(--linea);border-radius:999px;padding:7px 16px;font-size:15px}
.seccion.alt .chips li{background:var(--fondo)}
.garantia{display:flex;flex-direction:column;gap:4px;background:var(--fondo);border:1px solid var(--linea);border-left:4px solid var(--marca2);border-radius:6px;padding:16px 18px}
.garantia b{font-family:var(--fuente-titulos);font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--marca2)}
.tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--fondo)}
.tabla-modelos{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;font-variant-numeric:tabular-nums}
.tabla-modelos th,.tabla-modelos td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla-modelos thead th{background:var(--texto);color:#fff;font-family:var(--fuente-titulos);font-weight:600}
.tabla-modelos tbody th{font-weight:600;color:var(--texto-suave)}
.tabla-modelos tbody tr:last-child th,.tabla-modelos tbody tr:last-child td{border-bottom:0}
.pasos-inst{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin-bottom:24px}
.pasos-inst li{counter-increment:p;display:flex;flex-direction:column;gap:4px;padding-left:46px;position:relative;min-width:0}
.pasos-inst li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--marca);color:#fff;font-family:var(--fuente-titulos);font-weight:700;display:grid;place-items:center}
.pasos-inst h3{font-size:17px}
.pasos-inst p{font-size:15px;color:var(--texto-suave)}
.diagrama{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:12px;max-width:760px;margin-bottom:24px}
.diagrama img{width:100%;height:auto}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.galeria figure{display:flex;flex-direction:column;gap:6px}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--linea);background:#fff}
.galeria figcaption{font-size:14px;color:var(--texto-suave)}
@media (max-width:980px){.lineas-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .submenu{display:none!important}
  .cab-equipo .envoltura,.dos-col,.pasos-inst{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.lineas-3,.galeria{grid-template-columns:1fr}.logo-producto{height:38px}}

/* Fotos completas dentro de su recuadro (sin recortar) */
.linea img,.cab-foto img,.galeria img,.ficha .foto img{object-fit:contain;background:#fff;padding:6px}
.linea img{border-bottom:1px solid var(--linea)}

/* Fila de fotos debajo de la descripción de cada opción */
.caracteristicas ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;max-width:80ch}
.caracteristicas li::marker{color:var(--marca)}
.fila-fotos{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;margin-block:24px}
.fila-fotos figure{display:flex;flex-direction:column;gap:6px;min-width:0}
.fila-fotos img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:6px;border:1px solid var(--linea);border-radius:6px}
.fila-fotos figcaption{font-size:14px;color:var(--texto-suave)}
.seccion .acciones+.tabla-envoltura{margin-top:20px}
@media (max-width:820px){.fila-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Encabezado de tablas de modelos en verde */
.tabla-modelos thead th{background:var(--marca);color:#fff}

/* Diagrama + video en "Cómo funciona" */
.proceso-media{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin-bottom:24px}
.proceso-media .diagrama{margin-bottom:0;max-width:none}
.proceso-media .video{display:flex;flex-direction:column;gap:6px}
.proceso-media video{display:block;height:440px;width:auto;aspect-ratio:9/16;object-fit:cover;max-width:100%;border-radius:var(--radio);background:#000;border:1px solid var(--linea)}
.proceso-media figcaption{font-size:14px;color:var(--texto-suave)}
@media (max-width:820px){.proceso-media{grid-template-columns:1fr}.proceso-media video{height:auto;width:100%;max-width:360px}}

/* Párrafos de texto en páginas de equipo */
.texto-largo{max-width:75ch;font-size:17px;margin-bottom:12px}
.seccion .lista-normas{margin-block:8px 16px}
.seccion>.envoltura>ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;margin-block:8px 16px}
.seccion>.envoltura>ul li::marker{color:var(--marca)}

/* Carrusel de fotos (PTAR) */
.carrusel{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.carrusel-marco{position:relative;border:1px solid var(--linea);border-radius:var(--radio);background:#1f2427;overflow:hidden}
.carrusel-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-pista:focus-visible{box-shadow:inset 0 0 0 3px var(--marca2)}
.slide{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;height:540px;position:relative}
.slide img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 70px 14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:15px}
.flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--texto);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);display:grid;place-items:center;padding-bottom:4px}
.flecha:hover{background:var(--marca);color:#fff}
.flecha.anterior{left:12px}.flecha.siguiente{right:12px}
.contador{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.miniaturas{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.miniatura{flex:0 0 84px;height:64px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#fff;opacity:.6}
.miniatura img{width:100%;height:100%;object-fit:cover}
.miniatura.activa,.miniatura:hover{opacity:1;border-color:var(--marca)}
@media (max-width:560px){.slide{height:380px}.flecha{width:38px;height:38px;font-size:24px}.miniatura{flex-basis:64px;height:50px}}