/* ==========================================================================
   Manantial de Vida — Tienda (catálogo informativo)
   Sistema visual: misma paleta de marca (verde / naranja del logo), afinada
   para mejor contraste y una sensación más cuidada/"natural" en vez del
   verde Bootstrap plano de antes.
   ========================================================================== */

:root{
  /* Marca */
  --verde:        #1CA84B;
  --verde-osc:    #0E6B2E;
  --verde-suave:  #EAF7EF;
  --verde-linea:  #CFEAD9;
  --naranja:      #F0800A;
  --naranja-osc:  #C96A08;
  --naranja-suave:#FDEEDC;

  /* Azul de marca (tomado del propio logo, el texto "Manantial de Vida"),
     usado para el menú y el pie de página en vez del verde plano de antes. */
  --azul-marca:      #2C3E50;
  --azul-marca-osc:  #1E2C3A;
  --azul-marca-claro:#3E5872;
  --azul-suave:      #EAF0F5;

  /* Neutros cálidos (en vez de gris puro, para que combine con el verde/crema) */
  --papel:        #FFFFFF;
  --crema:        #FBF8F2;
  --tinta:        #262A22;
  --tinta-suave:  #6B7264;
  --borde:        #E9E4D6;

  /* Utilidades */
  --radio-lg:     20px;
  --radio-md:     14px;
  --radio-sm:     10px;
  --sombra-sm:    0 2px 10px rgba(20,50,30,.07);
  --sombra-md:    0 10px 28px -10px rgba(20,50,30,.20);
  --sombra-lg:    0 24px 48px -20px rgba(20,50,30,.28);
}

*{ box-sizing:border-box; }

body{
  background:var(--crema);
  color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ color:var(--tinta); font-weight:800; letter-spacing:-.01em; }
a{ color:var(--verde-osc); text-decoration:none; }
a:hover{ color:var(--naranja-osc); }
::selection{ background:var(--verde-suave); color:var(--verde-osc); }

.text-muted{ color:var(--tinta-suave) !important; }

/* ---------- Botones ---------- */
.btn{ border-radius:var(--radio-sm); font-weight:600; padding-block:.55rem; }
.btn-verde,
.btn-outline-success{
  background:var(--verde); border-color:var(--verde); color:#fff;
  box-shadow:0 2px 8px rgba(28,168,75,.28);
}
.btn-verde:hover,
.btn-outline-success:hover{
  background:var(--verde-osc); border-color:var(--verde-osc); color:#fff;
  box-shadow:0 4px 14px rgba(14,107,46,.35);
}
.btn-outline-success{ background:transparent; color:var(--verde-osc); box-shadow:none; }
.btn-outline-success:hover{ box-shadow:none; }
.btn:disabled{ box-shadow:none; opacity:.55; }

/* Botones de "Contactar/Escríbenos por WhatsApp": mismo naranja que el
   botón principal del encabezado, para que resalten como la acción
   destacada de la página en vez de mezclarse con el resto en verde. */
.btn-whatsapp{
  background:var(--naranja); border-color:var(--naranja); color:#fff;
  box-shadow:0 2px 8px rgba(240,128,10,.28);
}
.btn-whatsapp:hover{
  background:var(--naranja-osc); border-color:var(--naranja-osc); color:#fff;
  box-shadow:0 4px 14px rgba(201,106,8,.35);
}

/* ---------- Encabezado ---------- */
.tienda-header{
  background:var(--papel);
  box-shadow:0 1px 0 var(--borde);
  position:sticky; top:0; z-index:1030;
}
.tienda-header .brand{ display:inline-flex; align-items:center; text-decoration:none; }
.tienda-header .brand img{ height:46px; width:auto; }
/* Escopado a ".tienda-header-fila" (la fila superior clara, logo|buscador|
   cuenta) y NO a todo ".tienda-header": ".tienda-header" también envuelve a
   ".tienda-nav" (el menú, con fondo azul marino oscuro), y si esta regla
   aplicara ahí también forzaría el texto ".text-white" del botón móvil
   "☰ Categorías" a tinta oscura -- ilegible sobre fondo oscuro. */
.tienda-header-fila .text-white{ color:var(--tinta) !important; font-weight:600; }
.tienda-header-fila a.text-white:hover{ color:var(--verde-osc) !important; }

/* Fila superior del encabezado: logo | buscador | cuenta, en 3 columnas.
   El buscador vive en la columna central (1fr) y se centra dentro de ella
   con ancho máximo propio, así queda realmente centrado sin importar cuánto
   midan el logo o el bloque de la derecha (a diferencia de un flex simple,
   donde el buscador solo "empuja" hacia la derecha en vez de centrarse). */
.tienda-header-fila{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem 1.5rem;
  padding-top:1rem;
  padding-bottom:1rem;
}
.tienda-header-acc{ justify-self:end; }

.buscador-tienda{ position:relative; width:100%; max-width:520px; justify-self:center; margin:0; }
.buscador-tienda i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--tinta-suave); pointer-events:none;
}
.buscador-tienda input[type="search"]{
  width:100%;
  border:1.5px solid var(--borde); border-radius:999px;
  padding:.6rem 1rem .6rem 2.6rem; background:var(--crema);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.buscador-tienda input[type="search"]:focus{
  border-color:var(--verde); background:#fff;
  box-shadow:0 0 0 .2rem rgba(28,168,75,.15);
}

@media (max-width:767.98px){
  .tienda-header-fila{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand acc"
      "buscar buscar";
    row-gap:.75rem;
  }
  .tienda-header-fila .brand{ grid-area:brand; }
  .tienda-header-acc{ grid-area:acc; }
  .buscador-tienda{ grid-area:buscar; max-width:none; justify-self:stretch; }
}

.sucursal-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--verde-suave); color:var(--verde-osc) !important;
  border-radius:999px; padding:.35rem .85rem; font-size:.85rem; font-weight:600;
  border:1px solid var(--verde-linea);
}
.sucursal-pill:hover{ background:var(--verde-linea); }

.tienda-nav{
  background:linear-gradient(90deg,var(--azul-marca-osc),var(--azul-marca));
}
.tienda-nav .navbar-toggler{ border:0; padding:.3rem .5rem; }
.tienda-nav .navbar-toggler:focus{ box-shadow:none; }
.tienda-nav a{
  color:rgba(255,255,255,.9); text-decoration:none; white-space:nowrap;
  padding:.7rem .2rem; margin-right:1.5rem; font-size:.9rem; font-weight:600;
  border-bottom:2px solid transparent; transition:border-color .15s, color .15s;
}
.tienda-nav a:last-child{ margin-right:0; }
.tienda-nav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.55); }
.tienda-nav a.activo{ color:#fff; border-bottom-color:var(--naranja); }
.tienda-nav a > .bi:first-child{ margin-right:.4rem; }
.tienda-nav a span > .bi:first-child{ margin-right:.4rem; }

/* En celular/tablet (menos de 768px) el menú de categorías es un
   desplegable vertical con botón "☰ Categorías", en vez de la barra
   horizontal que en pantallas angostas cortaba los nombres a la mitad y
   dejaba categorías (como "Contáctanos") completamente fuera de la
   pantalla sin ningún aviso de que se podía deslizar. */
@media (max-width:767.98px){
  .tienda-nav .navbar-collapse{
    background:var(--azul-marca-osc); border-radius:0 0 .5rem .5rem; padding:.25rem 0 .5rem;
    flex-direction:column; align-items:stretch;
  }
  .tienda-nav a{
    display:block; width:100%; white-space:normal; margin-right:0; padding:.65rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .tienda-nav a:last-child{ border-bottom:0; }
  .tienda-nav a.activo{ border-bottom:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); }
}
/* En pantallas medianas/grandes, la barra horizontal de siempre, sin botón
   hamburguesa. Antes, cuando las categorías + "Servicios para tu bienestar"
   no cabían todas en una sola línea (pantallas de ancho normal, zoom por
   encima del 100%, o simplemente una ventana no maximizada), este
   contenedor las recortaba con "overflow-x:auto" en vez de mostrarlas: al
   no haber ninguna barra de scroll visible (se ocultaba a propósito para
   que se viera prolijo) ni ninguna otra pista de que había más opciones,
   esas categorías quedaban invisibles para el usuario -- incluido
   "Contáctanos" y el propio "Servicios para tu bienestar", que por ser los
   últimos elementos eran los primeros en desaparecer.
   En vez de scroll horizontal, ahora las categorías simplemente pasan a una
   segunda línea si no caben en una sola: todas quedan siempre visibles sin
   necesidad de que el usuario sepa que puede deslizar el dedo o el mouse
   hacia la derecha. */
@media (min-width:768px){
  .tienda-nav .container{ display:flex; align-items:center; flex-wrap:wrap; row-gap:.15rem; }
  .tienda-nav .navbar-collapse{ display:flex !important; flex-wrap:wrap; row-gap:.15rem; }
}

/* ---------- Submenú "Servicios para tu bienestar" ---------- */
.servicios-dropdown .dropdown-toggle::after{ vertical-align:.1em; }
.servicios-dropdown .dropdown-menu{ border:0; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15); border-radius:.6rem; }
/* El .dropdown-menu, aunque flota visualmente como un popup aparte, sigue
   siendo un <a> dentro de .tienda-nav en el DOM -- sin esto, heredaba el
   texto blanco pensado para la barra verde, quedando blanco sobre blanco
   (invisible) dentro del popup con fondo blanco de Bootstrap. */
.servicios-dropdown .dropdown-item{
  color:#212529 !important; white-space:normal; margin-right:0; padding:.5rem 1rem;
  border-bottom:0; font-weight:500; font-size:.9rem;
}
.servicios-dropdown .dropdown-item:active,
.servicios-dropdown .dropdown-item:hover{ background:var(--verde-suave); color:var(--verde-osc) !important; }

@media (max-width:767.98px){
  .tienda-nav a[data-bs-toggle="collapse"] .bi-chevron-down{ transition:transform .2s; }
  .tienda-nav a[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down{ transform:rotate(180deg); }
  .tienda-nav #serviciosSubmenu{ background:rgba(0,0,0,.12); }
  .tienda-nav #serviciosSubmenu a{ border-bottom:1px solid rgba(255,255,255,.08); }
}

.cart-badge{ position:absolute; top:-8px; right:-10px; background:var(--naranja); color:#fff; border-radius:50%; font-size:.7rem; padding:1px 6px; }

/* ---------- Ventana emergente de promociones ---------- */
.promo-modal-content{ border:0; border-radius:1rem; overflow:hidden; }
.promo-modal-img{ width:100%; max-height:360px; object-fit:cover; display:block; }
.promo-modal-cerrar{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  background:rgba(0,0,0,.5); border:0; border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; line-height:1; padding:0;
}
.promo-modal-cerrar:hover{ background:rgba(0,0,0,.7); }

/* ---------- Slider de la página de inicio ---------- */
.slider-inicio{ border-radius:1rem; overflow:hidden; }
.slider-inicio .carousel-item img{ width:100%; height:380px; object-fit:cover; }
.slider-inicio .carousel-caption{
  background:rgba(0,0,0,.4); border-radius:.75rem; bottom:2rem;
  left:10%; right:10%; padding:1rem 1.5rem;
}
.slider-inicio .carousel-caption h3,
.slider-inicio .carousel-caption p{ color:#fff; }
@media (max-width:576px){
  .slider-inicio .carousel-item img{ height:200px; }
  .slider-inicio .carousel-caption{ padding:.5rem 1rem; bottom:.75rem; left:5%; right:5%; }
  .slider-inicio .carousel-caption h3{ font-size:1.1rem; }
  .slider-inicio .carousel-caption p{ font-size:.8rem; margin-bottom:0; }
  /* En celular ya se puede deslizar con el dedo (data-bs-touch); las flechas
     de anterior/siguiente y los puntos indicadores se ocultan para que no
     se crucen con el texto de la leyenda cuando el subtítulo ocupa dos líneas. */
  .slider-inicio .carousel-control-prev,
  .slider-inicio .carousel-control-next,
  .slider-inicio .carousel-indicators{ display:none; }
}

/* ---------- Migas de pan ---------- */
.migas{ font-size:.85rem; color:var(--tinta-suave); margin-bottom:1.25rem; }
.migas a{ color:var(--tinta-suave); }
.migas a:hover{ color:var(--verde-osc); }
.migas .sep{ margin:0 .4rem; opacity:.6; }

/* ---------- Hero ---------- */
.hero-tienda{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--verde-osc),var(--verde) 70%);
  border-radius:var(--radio-lg);
  padding:2.75rem 2.25rem;
  color:#fff;
  box-shadow:var(--sombra-md);
}
.hero-tienda::before,
.hero-tienda::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.hero-tienda::before{ width:280px; height:280px; right:-90px; top:-110px; }
.hero-tienda::after{ width:180px; height:180px; right:120px; bottom:-100px; background:rgba(240,128,10,.22); }
.hero-tienda h2{ color:#fff; font-size:2rem; position:relative; }
.hero-tienda p{ color:rgba(255,255,255,.92); position:relative; max-width:46ch; }
.hero-tienda .bi{ font-size:1.6rem; opacity:.9; }

.categoria-atras{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; color:var(--verde-osc); margin-bottom:1rem;
}
.categoria-atras:hover{ color:var(--naranja-osc); }

/* ---------- Paginación de productos ---------- */
.pagination-tienda .page-link{
  color:var(--verde-osc);
  border-color:var(--borde);
  min-width:2.6rem;
  text-align:center;
  font-weight:600;
}
.pagination-tienda .page-link:hover{
  color:var(--verde-osc);
  background:var(--verde-suave);
  border-color:var(--verde-linea);
}
.pagination-tienda .page-link:focus{
  box-shadow:0 0 0 .2rem var(--verde-linea);
}
.pagination-tienda .page-item.active .page-link{
  background:var(--verde);
  border-color:var(--verde);
  color:#fff;
}
.pagination-tienda .page-item.disabled .page-link{
  color:var(--tinta-suave);
  background:var(--papel);
  border-color:var(--borde);
}

/* ---------- Franja de confianza (debajo del hero) ---------- */
.confianza-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem; margin:1.75rem 0 2.25rem;
}
.confianza-item{
  display:flex; align-items:center; gap:.75rem;
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio-md);
  padding:.9rem 1.1rem; box-shadow:var(--sombra-sm);
}
.confianza-item .bi{
  font-size:1.35rem; color:var(--verde-osc); flex-shrink:0;
  width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center;
  background:var(--verde-suave); border-radius:50%;
}
.confianza-item span{ font-weight:600; font-size:.88rem; color:var(--tinta); line-height:1.3; }

/* ---------- Encabezado de sección ---------- */
.kicker{
  display:block; color:var(--naranja-osc); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.seccion-titulo{ margin-bottom:1.1rem; }
.seccion-titulo .kicker{ margin-bottom:.2rem; }
.seccion-titulo h4{ margin-bottom:0; }

/* ---------- Categorías: acceso rápido ---------- */
.categorias-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.9rem; margin-bottom:2.25rem;
}
.categoria-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem;
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio-md);
  padding:1.1rem .6rem; box-shadow:var(--sombra-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.categoria-card:hover{
  transform:translateY(-3px); box-shadow:var(--sombra-md);
  border-color:var(--verde-linea); background:var(--verde-suave);
}
.categoria-card .bi{
  font-size:1.5rem; color:var(--verde-osc);
  width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
  background:var(--verde-suave); border-radius:50%;
}
.categoria-card:hover .bi{ background:#fff; }
.categoria-card span{ font-weight:700; font-size:.82rem; color:var(--tinta); line-height:1.25; }

/* ---------- Tarjetas de producto ---------- */
.producto-card{
  position:relative;
  border:1px solid var(--borde); border-radius:var(--radio-md); overflow:hidden;
  box-shadow:var(--sombra-sm); background:var(--papel);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.producto-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-md);
  border-color:var(--verde-linea);
}
.producto-img-wrap{ display:block; position:relative; overflow:hidden; background:var(--verde-suave); aspect-ratio:1/1; }
.producto-img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.producto-card:hover .producto-img{ transform:scale(1.06); }
.producto-card .card-body{ padding:1rem 1.1rem 1.1rem; }
.producto-cat-chip{
  position:absolute; top:.6rem; left:.6rem; z-index:1;
  background:rgba(255,255,255,.92); color:var(--verde-osc);
  border-radius:999px; padding:.25rem .7rem; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; box-shadow:0 2px 6px rgba(20,50,30,.15);
}
.producto-nombre{
  display:block; color:var(--tinta); font-weight:700; font-size:.96rem; line-height:1.35;
  min-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  margin-bottom:.65rem;
}
.producto-nombre:hover{ color:var(--verde-osc); }
.producto-card .btn{ font-size:.85rem; padding-block:.5rem; }

.precio{ color:var(--naranja-osc); font-weight:700; font-size:1.15rem; }
.badge-stock-bajo{ background:var(--naranja); }

/* ---------- Ficha de producto ---------- */
.producto-galeria{
  border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-md);
  background:var(--verde-suave); aspect-ratio:1/1;
}
.producto-galeria img{ width:100%; height:100%; object-fit:cover; }
.producto-codigo{
  display:inline-block; background:var(--crema); border:1px solid var(--borde);
  border-radius:999px; padding:.25rem .75rem; font-size:.82rem; color:var(--tinta-suave);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.producto-categoria-badge{
  display:inline-block; background:var(--naranja-suave); color:var(--naranja-osc);
  border-radius:999px; padding:.25rem .8rem; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; margin-bottom:.6rem;
}
.producto-descripcion-box{
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio-md);
  padding:1.25rem 1.4rem; margin-top:1rem;
}

/* ---------- Sucursal (selector de tienda) ---------- */
.sucursal-card{
  border:1.5px solid var(--borde) !important; border-radius:var(--radio-md) !important;
  transition:border-color .15s, box-shadow .15s, transform .15s;
  color:var(--tinta) !important; background:var(--papel); cursor:pointer;
}
.sucursal-card:hover{
  border-color:var(--verde) !important; box-shadow:var(--sombra-sm); transform:translateY(-2px);
  background:var(--papel) !important; color:var(--tinta) !important;
}
.sucursal-card .bi-shop{ color:var(--verde-osc); }

/* ---------- Tarjetas genéricas (login/registro/cuenta) ---------- */
.card{ border:1px solid var(--borde); border-radius:var(--radio-md); box-shadow:var(--sombra-sm); }
.form-control,.form-select{
  border-radius:var(--radio-sm); border-color:var(--borde); padding-block:.55rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--verde); box-shadow:0 0 0 .2rem rgba(28,168,75,.15);
}
.form-label{ font-weight:600; font-size:.88rem; color:var(--tinta-suave); }

.table{ --bs-table-bg:transparent; }
.table thead th{ color:var(--tinta-suave); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; border-bottom-width:1px; }

/* ---------- Pie de página ---------- */
.tienda-footer{
  background:var(--azul-marca-osc); color:rgba(255,255,255,.85); margin-top:4rem;
}
.tienda-footer a{ color:rgba(255,255,255,.85); }
.tienda-footer a:hover{ color:#fff; }
.tienda-footer h6{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1rem; }
.tienda-footer .footer-brand img{ height:40px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.tienda-footer hr{ border-color:rgba(255,255,255,.15); }
.tienda-footer .small{ color:rgba(255,255,255,.65); }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.5rem; }
.footer-redes{ display:flex; gap:.6rem; flex-wrap:wrap; }
.footer-redes a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.12); font-size:1rem;
  transition:background-color .15s ease, color .15s ease;
}
.footer-redes a:hover{ background:var(--naranja); color:#fff; }

@media (max-width:767px){
  .hero-tienda{ padding:2rem 1.25rem; }
  .hero-tienda h2{ font-size:1.5rem; }
}

/* Variante compacta del hero, para encabezar páginas de servicios/contacto
   con el mismo lenguaje visual (degradado verde) que la portada, en vez del
   simple ícono + texto centrado de antes. */
.hero-tienda.hero-compacta{
  padding:1.75rem 2rem; text-align:center; margin-bottom:2rem;
  /* Azul marino en vez del degradado verde heredado de ".hero-tienda": estos
     recuadros encabezan páginas "secundarias" (Conócenos, Contáctanos,
     Sanación Integral), así que llevan el mismo azul de marca que ya usan el
     menú y el pie de página, dejando el verde reservado para el hero
     principal de la portada. */
  background:linear-gradient(120deg,var(--azul-marca-osc),var(--azul-marca-claro) 70%);
}
.hero-tienda.hero-compacta h3{ color:#fff; font-size:1.5rem; margin:.5rem 0 .35rem; position:relative; }
.hero-tienda.hero-compacta p{ margin:0 auto; color:rgba(255,255,255,.92); position:relative; }
.hero-tienda.hero-compacta .bi{ font-size:1.8rem; }

/* ---------- Productos relacionados (ficha de producto) ---------- */
.relacionados{ margin-top:3rem; }

/* ---------- Franja de alianza (logo a un lado, texto al otro) ---------- */
.kuyay-alianza{ overflow:hidden; }
.kuyay-alianza .col-md-5{ background:var(--verde-suave); }

/* ---------- Tarjetas de servicio (Sanación Integral) ---------- */
.servicio-card{ overflow:hidden; }
.servicio-img-wrap{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--verde-suave);
}
.servicio-img-wrap .servicio-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.servicio-img-placeholder{
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px dashed var(--verde-linea);
}
.servicio-img-placeholder i{ font-size:2.8rem; color:var(--verde-linea); }

/* ---------- Franja "por qué elegirnos" en el pie de página ---------- */
.footer-porque{ list-style:none; padding:0; margin:0; }
.footer-porque li{ display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.65rem; font-size:.88rem; color:rgba(255,255,255,.85); }
.footer-porque .bi{ color:var(--naranja); margin-top:.15rem; flex-shrink:0; }

/* ---------- Loader de pantalla completa para envíos que demoran (ej. el
   formulario de Contáctanos, que espera a que se envíe el correo) — se
   activa solo en los formularios marcados con la clase "js-loader-form"
   (ver tienda.js), no en todos los formularios de la tienda. ---------- */
#appLoader{
  position:fixed; inset:0; z-index:1090; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:1rem;
  background:rgba(255,255,255,.85); backdrop-filter:blur(2px);
}
#appLoader.show{ display:flex; }
#appLoader .loader-ring{
  position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center;
}
#appLoader .loader-ring::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:5px solid var(--verde-linea); border-top-color:var(--verde);
  animation:appLoaderSpin 0.9s linear infinite;
}
#appLoader .loader-ring img{ width:56px; height:56px; object-fit:contain; border-radius:50%; background:#fff; }
#appLoader .loader-texto{ color:var(--verde-osc); font-weight:600; font-size:.95rem; }
@keyframes appLoaderSpin{ to{ transform:rotate(360deg); } }