/* sanitariosmoviles.uy con el diseño de pintor.uy: resto del sitio (23/10/2026, "terminá el diseño de toda la web").
   Va al final, después de cabecera, hero, ventajas y servicios. Solo diseño: no cambia textos, títulos, enlaces ni schema.
   Sistema de pintor.uy con la paleta del logo: gris oscuro #2B2F36 (#1C1F24), celeste #14A8E6 (#0888C0), gris claro #F5F5F5.
   Bandas a todo el ancho con fondos alternos blanco/gris; tarjetas blancas con sombra recta sin desenfoque; cierre oscuro con sombra celeste. */
:root{
  --p-pri:#2B2F36;--p-pri-2:#1C1F24;--p-acento:#14A8E6;--p-acento-2:#0888C0;--p-gris:#F5F5F5;
  --p-texto:#181818;--p-texto-2:#545454;--p-borde:#E0E0E0;--p-sombra:#DADADA;
}

/* ===== Bandas: fondos alternos blanco / gris neutro según el orden de las secciones (sin tintes de color) ===== */
#main-content > section:nth-of-type(even){background:#fff !important}
#main-content > section:nth-of-type(odd){background:var(--p-gris) !important}
#main-content > section.hero{background:#1B1B1B !important}
.migas{background:#fff !important}

/* ===== Tarjetas: blancas, borde gris, radio 16, sombra recta sin desenfoque; al pasar el mouse la sombra pasa a gris oscuro ===== */
.dif-item,.secciones__card,.review-card,.respuesta__inner,.relacionados__col,.zonas-home__grupo{
  background:#fff !important;border:1px solid var(--p-borde) !important;border-radius:16px !important;
  box-shadow:5px 5px 0 var(--p-sombra) !important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.dif-item:hover,.secciones__card:hover,.review-card:hover{transform:translate(-3px,-3px) !important;box-shadow:8px 8px 0 var(--p-pri) !important;border-color:var(--p-pri) !important}
.dif-item::after,.secciones__card::after{display:none !important}
.dif-item__icon{background:var(--p-gris) !important}
.respuesta__inner{border-top:0 !important;box-shadow:6px 6px 0 var(--p-acento) !important}

/* ===== Preguntas frecuentes: tarjetas con sombra recta; la abierta con sombra celeste ===== */
.faq__item{border:1px solid var(--p-borde) !important;border-radius:12px !important;box-shadow:4px 4px 0 var(--p-sombra) !important}
.faq__item[open]{border-color:var(--p-pri) !important;box-shadow:5px 5px 0 var(--p-acento) !important}
.faq__icon{color:var(--p-acento-2) !important}

/* ===== Pasos: círculos blancos con borde gris oscuro y línea celeste clara ===== */
.pasos__icon{background:#fff !important;border-color:var(--p-pri) !important}
.pasos__item:not(:last-child)::after{background:#BFE3F5 !important}

/* ===== Zonas: chips suaves sin borde ===== */
.zonas-home__chip{border:0 !important;background:#fff !important;box-shadow:0 0 0 1px var(--p-borde) inset}
#main-content > section:nth-of-type(even) .zonas-home__chip{background:var(--p-gris) !important;box-shadow:none}
.zonas-home__chip:hover{background:var(--p-pri) !important;color:#fff !important}

/* ===== Quiénes somos: foto con sombra recta ===== */
.quienes-somos__img{border-radius:16px !important;box-shadow:8px 8px 0 var(--p-acento) !important}

/* ===== Encabezado de las páginas internas: la foto del hero con el mismo velo negro ===== */
.page-intro,#main-content > section.page-intro,#main-content > section.e404{position:relative;background:#1B1B1B url("../images/hero/sanmov-hero-ancha.webp") right 72% / cover no-repeat !important}
.page-intro::before,.e404::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,20,20,.72) 0%,rgba(20,20,20,.52) 45%,rgba(20,20,20,.3) 100%);pointer-events:none}
.page-intro > *,.e404 > *{position:relative}
.page-intro__title,.page-intro__desc,.page-intro__eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 16px rgba(0,0,0,.45)}
@media (max-width:600px){#main-content > section.page-intro,#main-content > section.e404{background-image:url("../images/hero/sanmov-hero-celular-720.webp") !important;background-position:center bottom !important}}

/* ===== Cierre (contacto de la home y las landings): banda gris oscuro, texto claro y formulario blanco con sombra celeste ===== */
#main-content > section.contacto-home{background:var(--p-pri) !important;color:#E4E4E4}
.contacto-home .contacto-home__title{color:#fff !important}
.contacto-home .contacto-home__title::after{background:var(--p-acento) !important}
.contacto-home .contacto-home__lead,.contacto-home .contacto-home__datos,.contacto-home .contacto-home__datos a{color:#E4E4E4 !important}
.contacto-home .contacto-home__datos i{color:var(--p-acento) !important}
.contacto-home .contacto-home__form{border:0 !important;border-radius:16px !important;box-shadow:8px 8px 0 var(--p-acento) !important;color:var(--p-texto)}
.contacto-home .contacto-home__submit{background:var(--p-pri) !important;border-color:var(--p-pri) !important}

/* ===== Cierre de las páginas internas (cta-bottom): tarjeta gris oscuro con sombra celeste ===== */
.cta-bottom .cta-bottom__inner{background:var(--p-pri) !important;color:#E4E4E4;border:0 !important;border-radius:16px !important;box-shadow:8px 8px 0 var(--p-acento) !important;padding:clamp(24px,4vw,44px) !important}
.cta-bottom .cta-bottom__title,.cta-bottom .cta-bottom__title span{color:#fff !important}
.cta-bottom .cta-bottom__desc,.cta-bottom .cta-bottom__trust,.cta-bottom .cta-bottom__panel,.cta-bottom .cta-bottom__panel a,.cta-bottom .cta-bottom__phone{color:#E4E4E4 !important}
.cta-bottom .cta-bottom__panel{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.14) !important;border-radius:12px !important}
.cta-bottom .cta-bottom__phone{border:2px solid #fff !important;border-radius:8px !important;background:transparent !important}

/* ===== Botones de WhatsApp y teléfono con los íconos de Font Awesome (en lugar de Remix), también el flotante ===== */
.ri-whatsapp-line::before,.ri-phone-line::before{content:"" !important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;background:currentColor;
  -webkit-mask:url("../images/iconos-chicos/whatsapp-fa.svg") center / contain no-repeat;mask:url("../images/iconos-chicos/whatsapp-fa.svg") center / contain no-repeat}
.ri-phone-line::before{-webkit-mask-image:url("../images/iconos-chicos/telefono-fa.svg");mask-image:url("../images/iconos-chicos/telefono-fa.svg")}

/* ===== Tablas: encabezado gris oscuro, borde con radio ===== */
.secciones__tabla th{background:var(--p-pri) !important}
.secciones__tabla-wrap{border-radius:12px !important;box-shadow:4px 4px 0 var(--p-sombra)}

/* ===== Notas: gris con borde celeste ===== */
.secciones__nota{background:var(--p-gris) !important;border-left-color:var(--p-acento) !important}

@media (prefers-reduced-motion:reduce){.dif-item,.secciones__card,.review-card{transition:none}.dif-item:hover,.secciones__card:hover,.review-card:hover{transform:none !important}}

/* ===== Botón de cada tarjeta de precios: WhatsApp celeste con letra blanca (".secciones a" lo dejaba gris sobre gris) ===== */
.secciones a.precios__card-cta,.precios__card-cta{background:var(--p-acento) !important;color:#fff !important;border-radius:8px !important;font-family:var(--cab-f-titulos) !important;text-transform:uppercase;letter-spacing:.04em;text-decoration:none !important;padding:.7em 1.2em !important}
.secciones a.precios__card-cta:hover,.precios__card-cta:hover{background:var(--p-acento-2) !important;color:#fff !important}

/* ===== Cierre interno: el bloque de texto sin caja clara (va sobre el gris oscuro) y el panel con títulos blancos ===== */
.cta-bottom .cta-bottom__content{background:transparent !important;border:0 !important;padding-left:0 !important;padding-right:0 !important}
.cta-bottom .cta-bottom__trust li,.cta-bottom .cta-bottom__trust span{color:#E4E4E4 !important}
.cta-bottom .cta-bottom__panel-item strong{color:#fff !important}
.cta-bottom .cta-bottom__panel-item span{color:#C9CED6 !important}
.cta-bottom .cta-bottom__panel-item{border-color:rgba(255,255,255,.14) !important}

/* ===== Botones .btn--whatsapp (cierres, contacto, artículos): celeste con letra blanca como el resto; el flotante sigue verde ===== */
.btn.btn--whatsapp,a.btn--whatsapp{background:var(--p-acento) !important;border-color:var(--p-acento) !important;color:#fff !important;border-radius:8px !important;box-shadow:none !important}
.btn.btn--whatsapp:hover,a.btn--whatsapp:hover{background:var(--p-acento-2) !important;border-color:var(--p-acento-2) !important;color:#fff !important}

/* ===== 404: encabezado con la foto del hero (el header va transparente encima, como en la home) ===== */
#main-content > section.e404{padding-top:calc(var(--alto-header) + 48px) !important}
.e404 .e404__code{color:var(--p-acento) !important;font-family:var(--cab-f-titulos) !important}
.e404 .e404__title{font-family:var(--cab-f-titulos) !important}
.e404 .e404__code,.e404 .e404__title,.e404 .e404__lead{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 16px rgba(0,0,0,.45)}
.e404 .e404__btn{background:var(--p-acento) !important;color:#fff !important;border-radius:8px !important;font-family:var(--cab-f-titulos) !important;text-transform:uppercase;letter-spacing:.04em;box-shadow:none !important}
.e404 .e404__btn:hover{background:var(--p-acento-2) !important}

/* ======================================================================================================
   PASE 2 (23/10/2026, "faltan secciones todavía"): las secciones que seguían con el diseño anterior, al modelo de pintor.uy
   ====================================================================================================== */

/* ===== Títulos de las secciones de texto: sin el ícono al costado, en bloque y con la rayita celeste abajo (como pintor) ===== */
.secciones__h2,.cta-bottom__title{display:block !important}
.secciones__h2 > img.secciones__icono,.cta-bottom__title > img.secciones__icono{display:none !important}
.secciones__h2::after{content:"" !important;display:block !important;width:44px !important;height:4px !important;border-radius:2px;background:var(--p-acento) !important;margin:14px 0 0 !important;position:static !important}
.secciones__h3{display:block !important}
.secciones__h3 > img{display:none !important}

/* ===== Pasos ("Cómo alquilar"): lista vertical como "Cómo trabajamos" de pintor.uy: ícono en círculo gris y una línea que los une ===== */
.pasos .pasos__header{text-align:left !important;margin-left:0 !important;max-width:760px}
.pasos .pasos__list{display:grid !important;grid-template-columns:1fr !important;gap:0 !important;max-width:760px;margin:28px 0 0 !important;padding:0 !important}
.pasos .pasos__item{position:relative;display:grid !important;grid-template-columns:64px 1fr;column-gap:20px;align-items:start;text-align:left !important;padding:0 0 26px !important;margin:0 !important}
.pasos .pasos__item:last-child{padding-bottom:0 !important}
.pasos .pasos__item::after{content:"" !important;position:absolute !important;left:31px !important;top:66px !important;bottom:4px !important;right:auto !important;width:2px !important;height:auto !important;background:#C6C6C6 !important;transform:none !important}
.pasos .pasos__item:last-child::after{display:none !important}
.pasos .pasos__icon{width:64px !important;height:64px !important;margin:0 !important;border-radius:50% !important;background:var(--p-gris) !important;border:0 !important;outline:0 !important;box-shadow:none !important;display:grid !important;place-items:center}
#main-content > section.pasos:nth-of-type(odd) .pasos__icon{background:#fff !important}
.pasos .pasos__icon img{width:40px !important;height:40px !important;object-fit:contain}
.pasos .pasos__content{padding-top:8px}
.pasos .pasos__step-title{margin:0 0 6px !important;font-size:var(--cab-fs-h3) !important;color:var(--p-pri) !important;text-align:left !important}
.pasos .pasos__desc{margin:0 !important;max-width:none !important;text-align:left !important;color:var(--p-texto-2) !important}
.pasos .pasos__cta{justify-content:flex-start !important;text-align:left !important;margin-top:28px !important}

/* ===== Preguntas frecuentes como pintor.uy: tarjetas con sombra recta; + celeste en círculo que gira a × y pasa a gris oscuro ===== */
.faq .faq__header{text-align:left !important;margin-left:0 !important}
.faq .faq__item{margin:0 0 14px !important;border:1px solid var(--p-borde) !important;border-radius:16px !important;background:#fff !important;box-shadow:5px 5px 0 var(--p-sombra) !important;transition:border-color .2s ease,box-shadow .2s ease}
.faq .faq__item:hover{border-color:var(--p-pri) !important}
.faq .faq__item[open]{border-color:var(--p-pri) !important;box-shadow:6px 6px 0 var(--p-pri) !important}
.faq .faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px !important;cursor:pointer;list-style:none}
.faq .faq__item summary::-webkit-details-marker{display:none}
.faq .faq__q{font-family:var(--cab-f-titulos) !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.02em !important;font-size:1.125rem !important;line-height:1.25 !important;color:var(--p-pri) !important}
.faq .faq__icon{flex:0 0 auto;display:grid !important;place-items:center;width:34px !important;height:34px !important;border-radius:50% !important;background:var(--p-acento) !important;color:#fff !important;font-size:1.25rem !important;transition:transform .25s ease,background-color .2s ease}
.faq .faq__item[open] .faq__icon{transform:rotate(45deg);background:var(--p-pri) !important}
.faq .faq__a{margin:0 22px !important;padding:16px 0 20px !important;border-top:1px dashed #D5D5D5}
.faq .faq__a p{color:var(--p-texto-2) !important;line-height:1.65}
@media (max-width:639px){.faq .faq__item summary{padding:16px !important}.faq .faq__q{font-size:1rem !important}.faq .faq__a{margin:0 16px !important}.faq .faq__icon{width:30px !important;height:30px !important}}
/* Escritorio: el título a la izquierda (fijo al bajar) y las preguntas a la derecha */
@media (min-width:1000px){
  .faq > .container{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:64px;align-items:start}
  .faq .faq__header{grid-column:1;grid-row:1 / span 3;position:sticky;top:calc(var(--alto-header) + 24px);margin-bottom:0 !important}
  .faq .faq__list{grid-column:2;max-width:none !important;margin:0 !important}
  .faq .faq__cta{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.faq .faq__item,.faq .faq__icon{transition:none}}
/* Texto corrido de las secciones a un ancho cómodo de lectura (como pintor.uy); tablas y grillas de tarjetas siguen a todo el ancho */
.secciones__inner > p,.secciones__inner > ul,.secciones__inner > ol,.zona-texto__inner > p,.secciones__bloque > p,.secciones__bloque > ul{max-width:52rem}

/* ===== Enlaces relacionados: dos tarjetas con sombra recta; título Oswald con rayita y los enlaces como chips con flecha ===== */
.relacionados .relacionados__inner{display:grid !important;grid-template-columns:1fr;gap:18px}
@media (min-width:860px){.relacionados .relacionados__inner{grid-template-columns:2fr 1fr}}
.relacionados .relacionados__col{padding:24px 24px 22px !important;margin:0 !important}
.relacionados .relacionados__title{position:relative;margin:0 0 16px !important;padding-bottom:10px;font-family:var(--cab-f-titulos) !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;font-size:1.25rem !important;color:var(--p-pri) !important}
.relacionados .relacionados__title::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--p-acento)}
.relacionados .relacionados__list{display:flex !important;flex-wrap:wrap;gap:8px;margin:0 !important;padding:0 !important;list-style:none}
.relacionados .relacionados__list li{margin:0 !important;padding:0 !important}
.relacionados .relacionados__list li::before{display:none !important}
.relacionados .relacionados__list a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:var(--p-gris);color:var(--p-pri) !important;font-weight:600;font-size:var(--cab-fs-sm);text-decoration:none !important;transition:background-color .2s,color .2s}
.relacionados .relacionados__list a::after{content:"\2192";color:var(--p-acento-2)}
.relacionados .relacionados__list a:hover{background:var(--p-pri);color:#fff !important}
.relacionados .relacionados__list a:hover::after{color:#fff}
.contacto-home .contacto-home__datos li,.contacto-home .contacto-home__datos span,.contacto-home .contacto-home__datos p{color:#E4E4E4 !important}