/* ASDAGI · capa puente WordPress / Astra / Elementor → maquetas.
   El diseño vive en asd-<vista>.css (copia exacta de la maqueta); aquí solo se neutraliza lo que
   añaden WordPress, Astra y Elementor alrededor del markup. */

body.asd{margin:0;background:#fff;overflow-x:clip}
.asd #page,.asd .site-content,.asd .ast-container{max-width:none;padding:0;margin:0;display:block}

/* Barra de administración: la cabecera sticky baja con ella */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}

/* Secciones ASDAGI dentro de Elementor: el contenedor no añade relleno ni hueco */
.asd .e-con.asd-sec{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--gap:0px;--row-gap:0px;--column-gap:0px;padding:0;gap:0}
.asd .e-con.asd-sec>.elementor-widget{width:100%;margin:0}
.asd [class*="elementor-widget-asd-"]{--widgets-spacing:0px;margin-block-end:0}

/* Elementor carga los fondos de los contenedores 4.º+ al hacer scroll: aquí no hace falta */
.asd .e-con.e-parent:not(.e-lazyloaded){background-image:none}

/* Astra pinta enlaces y botones con sus colores globales: el diseño es el de la maqueta */
.asd a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.asd .btn:focus-visible,.asd .chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* El editor de Elementor muestra todo lo que en el front aparece al hacer scroll */
.elementor-editor-active .rv{opacity:1!important;transform:none!important}

/* Checkout en pasos: «Pagar» solo en el paso 3; el botón de continuar solo en el 2 */
.checkout:not(.en-pago) #place_order{display:none}
.checkout.en-pago #btn-sig{display:none}
.fld input.mal,.fld select.mal,.fld textarea.mal{border-color:#D9482B;box-shadow:0 0 0 4px #FFE4DE}
.asd .woocommerce-error,.asd .woocommerce-message,.asd .woocommerce-info{list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:12px;background:#FFE4DE;color:#082F5C;font-size:15px}
.asd .woocommerce-message,.asd .woocommerce-info{background:var(--turq-s)}
.asd .woocommerce-error li+li{margin-top:6px}
.asd .pago-caja{margin-top:18px}
.asd .blockUI.blockOverlay{border-radius:var(--rl)}

/* Ficha: sin sellos hasta tener el certificado, el respaldo ocupa todo el ancho */
.respaldo.sin-sellos{grid-template-columns:1fr}

/* El botón de WhatsApp lleva .ico (clase de los íconos duotono, 64 × 64 en bloque): se centra como botón */
.btn.ico{display:inline-flex;width:auto;height:auto}

/* Astra le pone a todo <button> un relleno de 12px × 24px que la maqueta no espera: los botones redondos
   (flechas de pasos y carruseles, hamburguesa, miniaturas) salían ovalados y con el ícono corrido.
   Especificidad (0,0,3): gana a «button» de Astra y pierde ante cualquier regla con clase de la maqueta. */
html body button{padding:0}
/* Sin ese relleno, la fila flex del carrusel aplastaba las flechas: los botones redondos no se encogen */
.car__nav button,.pasos__ctl button,.burger{flex:none}

/* Texto sobre fondos azules: blanco pleno, sin el blanco translúcido de la maqueta que se leía gris
   (los acentos celeste/mostaza se quedan). La cita de «Nuestra promesa» heredaba el gris #334155 de Astra para <blockquote>,
   y en catálogo la paleta v7 vuelve azul a --coral, así que el chip activo quedaba con texto azul marino sobre azul. */
.promesa blockquote,.promesa .mono,
.bid .lede,.par .a,.biz .lede,.sol small,.sol__img.falta,
.cta .lede,.cta .dato,
.cierre-compra p,.cierre-compra .precio span,
.ubi .mono,.ubi .lede,.ubi .datos li,.canal.wa small,
.feat p,.feat .post__meta,.calc__r .mono,.calc__r ul,
.folio span,.folio small,.kok .nped span,.tarj .fld label,
.pie,.pie a,.pie__band,.pie__legal,
.chip[aria-pressed="true"],.comp-pick .chip[aria-pressed="true"]{color:#fff}

/* Títulos sin el subrayado tipo marcador de la maqueta (franja celeste bajo la segunda línea); el color de acento se queda */
.hero h1 .h1b,.encab h1 em,:is(h1,h2,h3,h4) .mark{background:none}

/* «Deja atrás los bidones» y «¿Buscas agua purificada para tu negocio?»: la capa v7 las dejó en radio 0 (pensadas como banda a todo
   lo ancho), pero aquí viven dentro del contenedor y se veían como cajas de esquinas rectas. Mismo radio que el resto de cajas */
.bid,.biz{border-radius:var(--rl)}

/* Logos del carrusel de empresas (Inicio): la maqueta da a la tarjeta 96px de alto pero también max-height:54px con 16px de relleno,
   así que al logo le quedaban ~22px. Tarjeta de 96px real, columna más ancha y menos relleno: el logo llega a ~72px de alto */
.logos .car__track{grid-auto-columns:200px}
.logos .car__track img{max-height:none;height:96px;padding:12px 18px}

/* Artículo: el cuerpo (#cuerpo) no tiene margen inferior y el bloque de cierre de Elementor viene sin margen superior,
   así que sin «Más guías» de por medio el final del artículo quedaba pegado a «¿Tienes dudas?». Si hay «Más guías», ese hueco ya lo pone ella */
#cuerpo{padding-bottom:clamp(40px,5vw,72px)}
#cuerpo+#mas-guias{padding-top:0}

/* Cabecera móvil: carrito y menú pegados al borde derecho (la maqueta les quita el margin-left:auto bajo 960px) */
.hd__acts{margin-left:auto}

/* Nosotros · Dónde llegamos: en el lugar del mapa, una imagen (o su espacio reservado mientras no llega) */
.cob-img{padding:0;overflow:hidden;aspect-ratio:1/1;margin:0}
.cob-img img{width:100%;height:100%;object-fit:cover;display:block}
.cob-img.vacia{font-family:var(--m);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);text-align:center;padding:24px}
@media (max-width:960px){.cob-img{aspect-ratio:4/3}.cob-img.vacia:empty{display:none}}

/* Inicio · marketplaces con logos: rótulo arriba y los cinco logos en una fila (al lado del rótulo no caben) */
.market--logos{display:block}
.market--logos .mkt{margin-top:18px;width:100%;justify-content:space-between}
/* los que no tienen logo van en texto, en una segunda fila alineada con las columnas de logos */
.market--logos .mkt:has(.mkt-txt){display:grid;grid-template-columns:repeat(5,auto);align-items:center;gap:22px 34px}
.market--logos .mkt-txt{font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--ink2)}
@media (max-width:960px){
  .market--logos .mkt:has(.mkt-txt){grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:22px 20px}
  .market--logos .mkt img{max-width:100%;height:auto!important}
  .market--logos .mkt-txt{font-size:19px}
}

/* Ficha · etapa sin foto del cartucho (equipos cuyos cartuchos no vinieron sueltos): sin el círculo vacío */
.etapa.sin-foto{grid-template-columns:56px 1fr}
@media (max-width:820px){.etapa.sin-foto{grid-template-columns:44px 1fr}}

/* Inicio · foto con puntos: en móvil también con sus etiquetas (la maqueta las ocultaba bajo 640px).
   Se conserva la proporción de la foto para que los puntos, en % de la foto completa, caigan en su sitio */
@media (max-width:640px){
  .shot__img{container-type:inline-size}
  .shot__img img{aspect-ratio:1400/820}
  .mk{gap:6px}
  .mk i{width:12px;height:12px;border-width:2px;box-shadow:0 0 0 4px rgba(255,255,255,.45)}
  /* cada etiqueta cabe entre su punto (--x, en %) y el borde de la foto; si no cabe, pasa a dos líneas */
  .mk span{display:block;font-size:11px;line-height:1.25;padding:4px 8px;border-radius:10px;white-space:normal;width:max-content;max-width:calc((100 - var(--x, 50)) * 1cqw - 26px)}
  .mk.r span{max-width:calc(var(--x, 50) * 1cqw - 26px)}
}