@import url('variables.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Para que un enlace ancla (ej. #sucursal-santa-ana) no quede tapado bajo el header fijo */
#sucursales, [id^="sucursal-"], #servicios-emergencia, #servicios-prevision, #cuentas-corrientes, #guias { scroll-margin-top: 120px; }

/* Las animaciones AOS (fade-left/right) desplazan tarjetas fuera de pantalla
   al cargar y en móvil generaban scroll horizontal; clip lo recorta sin crear
   un contenedor de scroll (no rompe elementos fijos). */
html, body { overflow-x: clip; }

body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--color-texto);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Todo lo interactivo comparte la misma sensación al pasar el mouse */
a, button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

/* ===== Utilidades reutilizables (evitan repetir estilos en línea) ===== */
.texto-suave { color: var(--color-texto-suave); }
.texto-centro { text-align: center; }
.sin-padding { padding: 0; }
.ancho-completo { width: 100%; }

.contacto-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.parrafo-intro {
  max-width: 760px;
  color: var(--color-texto-suave);
  margin-top: 12px;
}

.eslogan-empresa {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--marca-primario);
  margin-top: 8px;
}

.enlace-destacado {
  color: var(--jardin-verde);
  font-weight: 600;
}

/* Cuadrícula de accesos (tarjetas angostas, ej. "¿Qué necesitas ahora?") */
/* Flex en vez de grid a propósito: si la última fila queda incompleta
   (ej. 5 tarjetas de planes en filas de 4), se centra sola en vez de
   quedar pegada a la izquierda con espacio vacío al lado. */
.grid-accesos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.grid-accesos > * {
  flex: 1 1 220px;
  max-width: 275px;
}

/* Variante para tarjetas con texto más largo (Nuestros valores) */
.valores-grid > * {
  flex: 0 1 360px;
  max-width: none;
}

/* Cuadrícula de dos columnas (Misión/Visión, formulario + info de contacto) */
.grid-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Tarjeta blanca genérica (contenedores de contenido con sombra) */
.tarjeta-blanca {
  background: var(--color-blanco);
  padding: 32px;
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
}

/* Lista de "qué incluye" (planes de servicio) — check verde en vez del
   bullet por defecto del navegador, que se ve raro con el reset a cero. */
.lista-incluye {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-incluye li {
  position: relative;
  padding-left: 24px;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

.lista-incluye li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--marca-primario);
  font-weight: 700;
}

.lista-incluye li strong { color: var(--color-texto); }

/* Tarjetas de nivel de plan (Servicios de Previsión, planes de Capillas
   Joyas) — mismo espíritu de las tarjetas comparativas de precios de las
   apps SaaS (encabezado marcado, chip de progresión, check en círculo,
   nivel superior destacado con borde y etiqueta), pero con la paleta de
   marca del sitio en vez de colores ajenos a Funeraria Jardín. */
.tarjeta-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--marca-primario-rgb), .14);
  /* Altura de respaldo antes de que corra el JS (o si está deshabilitado):
     evita un salto brusco de tamaño mientras carga la página. El calce
     exacto entre tarjetas de un mismo grupo — incluyendo la que quede
     sola en su propia fila al envolver — lo hace igualarAlturaTarjetasPlan()
     en main.js, recalculado en cada resize porque la altura natural de
     cada tarjeta cambia según cuánto texto le quepa por línea. Un valor
     fijo en CSS no puede cubrir eso para todos los anchos de pantalla. */
  min-height: 500px;
}

/* Cuando la tarjeta es además .swiper-slide (dentro de un slider), Swiper
   trae su propia regla ".swiper-slide { display:block }" que, al tener la
   misma especificidad que ".tarjeta-plan" de arriba, gana por cargarse
   después (swiper-bundle.min.css se enlaza tras main.css) — eso rompe el
   flex-column y el botón deja de quedar pegado al fondo de la tarjeta.
   Esta regla de dos clases tiene más especificidad y gana siempre, sin
   depender del orden de carga. */
.swiper-slide.tarjeta-plan {
  display: flex;
  flex-direction: column;
}

.tarjeta-plan h3 {
  font-size: 1.3rem;
  color: var(--marca-primario);
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(var(--marca-primario-rgb), .14);
}

.tarjeta-plan .subtitulo-plan {
  margin-top: 8px;
  color: var(--color-texto-suave);
  font-size: .92rem;
  font-style: italic;
}

/* Encabezado de categoría dentro de una tarjeta de plan (ej. "Cobertura
   básica", "Servicios avanzados") — agrupa los ítems por tipo en vez de
   una sola lista plana. También cumple la función del antiguo divisor
   "incluye todo lo anterior": ese dato ahora vive como el primer ítem
   con check de la categoría incluida (ej. "Todo lo del Plan Estándar"). */
.tarjeta-plan .categoria-plan {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--marca-primario-rgb), .2);
  color: var(--color-texto-suave);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tarjeta-plan .lista-incluye {
  gap: 12px;
}

.tarjeta-plan .lista-incluye li {
  padding-left: 30px;
  line-height: 1.45;
}

.tarjeta-plan .lista-incluye li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  top: 0;
  border-radius: 50%;
  background: rgba(var(--marca-primario-rgb), .15);
  color: var(--marca-primario);
  font-size: .7rem;
  font-weight: 700;
}

/* Lista de lo que NO incluye ese nivel — mismo patrón que las tarjetas de
   precios de apps SaaS (ítem tachado/apagado con ✕), para que un plan
   superior no se sienta "vacío" solo por tener pocos ítems propios: se ve
   claro qué falta y en qué plan sí viene. Tono neutro (marrón de marca),
   no rojo de alerta — el sitio evita colores que se sientan negativos. */
.tarjeta-plan .lista-no-incluye {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tarjeta-plan .lista-no-incluye li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
  color: var(--color-texto-suave);
  opacity: .7;
  font-size: .95rem;
}

.tarjeta-plan .lista-no-incluye li::before {
  content: '✕';
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--jardin-marron-rgb), .12);
  color: var(--color-texto-suave);
  font-size: .65rem;
  font-weight: 700;
}

.tarjeta-plan .etiqueta-sin-acceso {
  display: block;
  font-size: .78rem;
  font-style: italic;
}

.tarjeta-plan .telefono {
  /* margin (espacio FUERA del botón), no padding — el padding es el propio
     de .telefono (10px 18px) y debe quedar parejo alrededor del texto para
     que no se vea descentrado dentro de la píldora. */
  margin-top: 20px;
  text-align: center;
}

/* Botón secundario "Ver ataúd" (abre la foto en lightbox), va sobre "Cotizar" */
.tarjeta-plan .boton-ataud {
  background: transparent;
  color: var(--marca-primario);
  border: 2px solid var(--marca-primario);
}

.tarjeta-plan .boton-ataud:hover {
  background: var(--marca-primario);
  color: var(--color-blanco);
}

.tarjeta-plan .boton-ataud + .telefono { margin-top: 10px; }

/* Último grupo antes del botón: empuja el botón al fondo de la tarjeta
   (mismo mecanismo que antes tenía la lista incluida con flex:1, ahora
   aplicado al último bloque de contenido sin importar si es la lista de
   incluidos o la de no incluidos). */
.tarjeta-plan .lista-incluye:last-of-type,
.tarjeta-plan .lista-no-incluye:last-of-type {
  flex: 1;
}

/* Etiqueta superior de una tarjeta destacada (nivel más completo, plan
   recomendado, o ambos a la vez) — un elemento real en vez de contenido
   generado por CSS, para poder variar el texto por tarjeta. */
.tarjeta-plan .etiqueta-plan {
  position: absolute;
  /* Al bajar el line-height la píldora quedó más baja de alto, y con el
     -13px original quedaba flotando muy arriba del borde de la tarjeta
     en vez de verse "clavada" ahí. Se sube (número menos negativo). */
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  /* Tope de seguridad: se achica sola (ancho automático) si el texto es
     corto, pero nunca se sale de la tarjeta aunque el texto sea largo —
     antes, sin este tope, "Más completo · Recomendado" quedaba casi tan
     ancho como toda la tarjeta y se veía apretado/como si se saliera. */
  max-width: calc(100% - 28px);
  background: var(--marca-primario);
  color: var(--color-blanco);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  /* Sin esto, el line-height heredado del body (1.6) deja una caja de
     línea mucho más alta que el propio texto, y el texto queda pegado
     abajo con un montón de aire arriba dentro de la píldora — se ve
     descentrado/mal aunque el padding sea parejo arriba y abajo. */
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nivel más completo / recomendado de la progresión — borde y sombra
   destacados con el acento de marca en vez de un color ajeno al sitio. */
.tarjeta-plan-completo {
  border: 2px solid var(--marca-primario);
  box-shadow: 0 10px 28px rgba(var(--marca-primario-rgb), .18);
  position: relative;
}

/* Plan recomendado — para destacar una tarjeta puntual dentro de la
   progresión sin ser necesariamente el nivel más completo. Elevación
   sutil + borde del verde de marca, sin salirse de la paleta del sitio.
   (Sin uso actual en el sitio — disponible para marcar otra tarjeta como
   recomendada más adelante, junto con .etiqueta-plan para el texto.) */
.tarjeta-plan-recomendada {
  border: 2px solid var(--marca-primario);
  box-shadow: 0 16px 34px rgba(var(--marca-primario-rgb), .22);
  position: relative;
}

/* La elevación va en una regla aparte, con más especificidad que la de AOS
   ([data-aos^=zoom][data-aos^=zoom].aos-animate, que repite el atributo
   a propósito para ganar empates) — si no, en cuanto termina la animación
   de entrada, AOS pisa el transform y la tarjeta pierde el translateY.
   La clase repetida aquí hace lo mismo: sube la especificidad sin afectar
   el resultado (el navegador la trata como una sola clase). */
.tarjeta-plan.tarjeta-plan-recomendada.tarjeta-plan-recomendada.aos-animate {
  transform: translateY(-8px);
}

.tarjeta-plan.tarjeta-plan-recomendada.tarjeta-plan-recomendada.aos-animate:hover {
  transform: translateY(-14px) scale(1.015);
}

/* Slider (Swiper) de las tarjetas de plan en /servicios/ — mismo criterio
   que el slider de "Te ofrecemos los siguientes servicios" del home,
   pero con flechas/paginación en tono claro porque esta página tiene
   fondo crema, no verde oscuro. */
.planes-slider {
  padding: 16px 4px 50px;
}

.planes-slider .tarjeta-plan {
  width: 275px;
}

.planes-slider .swiper-button-prev,
.planes-slider .swiper-button-next {
  width: 44px;
  height: 44px;
  background: var(--color-blanco);
  border: 1px solid rgba(var(--marca-primario-rgb), .3);
  border-radius: 50%;
  color: var(--marca-primario);
  box-shadow: var(--sombra-suave);
  top: 45%;
}

.planes-slider .swiper-button-prev:hover,
.planes-slider .swiper-button-next:hover {
  background: var(--marca-primario);
  color: var(--color-blanco);
}

.planes-slider .swiper-button-prev::after,
.planes-slider .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.planes-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(var(--marca-primario-rgb), .3);
  opacity: 1;
  transition: background var(--transicion-rapida);
}

.planes-slider .swiper-pagination-bullet-active {
  background: var(--marca-primario);
}

@media (max-width: 640px) {
  .planes-slider .swiper-button-prev,
  .planes-slider .swiper-button-next {
    display: none;
  }
}

/* Tarjetas de Misión / Visión */
.tarjeta-mision-vision {
  color: var(--color-blanco);
  padding: 32px;
  border-radius: var(--radio-borde);
}

.tarjeta-mision-vision h3 { color: var(--color-blanco); }
.tarjeta-mision-vision p { margin-top: 12px; }

.tarjeta-mision { background: var(--jardin-verde); }
.tarjeta-vision { background: var(--jardin-marron); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-blanco);
  box-shadow: var(--sombra-suave);
}

.emergency-banner {
  background: var(--marca-oscuro);
  color: var(--color-blanco);
  padding: 8px 20px;
  font-size: 0.9rem;
}

.emergency-banner a { font-weight: 600; }

/* El fondo verde (.emergency-banner) queda de borde a borde como antes;
   solo el contenido de texto adentro se centra a 1200px y se reparte a
   los extremos. */
.emergency-banner-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

/* El eslogan solo entra si hay espacio de sobra — en pantallas angostas
   la franja es muy chica para dos frases y se ve apretado. */
.emergency-banner-eslogan {
  font-style: italic;
  opacity: 0.9;
}

@media (max-width: 700px) {
  .emergency-banner-interior { justify-content: center; }
  .emergency-banner-eslogan { display: none; }
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-nav .logo {
  display: inline-block;
  opacity: 0;
  animation: logoEntrada 0.7s ease 0.15s forwards;
}

.main-nav .logo img {
  height: 44px;
  transition: transform 0.25s ease;
}

.main-nav .logo:hover img { transform: scale(1.05); }

@keyframes logoEntrada {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.main-nav > ul {
  display: flex;
  gap: 24px;
  list-style: none;
}

.main-nav ul li a {
  position: relative;
  padding-bottom: 4px;
}

.main-nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--jardin-verde);
  transition: width var(--transicion-rapida);
}

.main-nav ul li a:hover::after { width: 100%; }

/* Submenú desplegable (ej. "Sucursales") */
.main-nav ul li.tiene-submenu {
  position: relative;
}

.main-nav ul li.tiene-submenu > a::before {
  content: '▾';
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75em;
}

.main-nav .submenu {
  display: block;
  gap: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-blanco);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  list-style: none;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida), visibility var(--transicion-rapida);
  z-index: 150;
}

.main-nav li.tiene-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .submenu li { width: 100%; }

.main-nav .submenu a {
  display: block;
  padding: 10px 18px;
  white-space: nowrap;
  color: var(--color-texto);
}

.main-nav .submenu a:hover { background: rgba(var(--jardin-verde-rgb), 0.08); }
.main-nav .submenu a::after { display: none; }

.main-nav .submenu-nota {
  padding: 4px 18px 2px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jardin-verde);
}

.main-nav .submenu-vacio {
  padding: 2px 18px 8px;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  font-style: italic;
  border-bottom: 1px solid rgba(var(--jardin-verde-rgb), 0.12);
  margin-bottom: 4px;
}

/* Botón de acción (CTA) — usado en el header, el hero y otras secciones */
.telefono {
  background: var(--marca-primario);
  color: var(--color-blanco);
  padding: 10px 18px;
  border-radius: var(--radio-borde);
  font-weight: 600;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  transition: background var(--transicion-rapida), transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.telefono.cta-bloque {
  display: inline-block;
  margin-top: 16px;
}

.telefono:hover {
  background: var(--marca-oscuro);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(var(--marca-oscuro-rgb), 0.25);
}

.nav-toggle { display: none; }

/* ===== Botón flotante WhatsApp ===== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-whatsapp);
  color: white;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-suave);
  z-index: 200;
  transition: transform var(--transicion-rapida);
}

.whatsapp-float:hover { transform: scale(1.08); }

/* Botón flotante de pagos: píldora con texto, apilada encima del círculo de WhatsApp
   (alineada a su borde derecho; 58px de alto del círculo + 16px de separación). */
.pago-float {
  position: fixed;
  bottom: 98px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  background: var(--color-blanco);
  color: var(--jardin-verde);
  border: 2px solid var(--jardin-verde);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--sombra-suave);
  z-index: 200;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), transform var(--transicion-rapida);
}

.pago-float:hover {
  background: var(--jardin-verde);
  color: var(--color-blanco);
  transform: translateY(-3px);
}

/* ===== Precargador ===== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--jardin-marfil);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#preloader.oculto { opacity: 0; visibility: hidden; }

.preloader-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.preloader-logo {
  width: 140px;
  animation: preloader-respirar 1.8s ease-in-out infinite;
}

@keyframes preloader-respirar {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

.preloader-barra {
  width: 160px;
  height: 3px;
  background: rgba(var(--marca-oscuro-rgb), 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.preloader-barra-interna {
  width: 35%;
  height: 100%;
  background: var(--marca-primario);
  border-radius: 999px;
  animation: preloader-cargar 1.3s ease-in-out infinite;
}

@keyframes preloader-cargar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(385%); }
}

/* ===== Botón volver arriba ===== */
#volverArriba {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--jardin-verde-oscuro);
  color: var(--color-blanco);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transicion-suave), transform var(--transicion-suave), visibility var(--transicion-suave);
}

#volverArriba.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#volverArriba:hover { background: var(--jardin-verde); }
#volverArriba.visible:hover { transform: translateY(-4px) scale(1.08); }

/* ===== Secciones con animación al scroll (via AOS) ===== */
.seccion { padding: 60px 20px; max-width: 1200px; margin: 0 auto; }

/* ===== Tarjetas con efecto hover (accesos rápidos, servicios, etc.) ===== */
.tarjeta-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-hover:hover {
  transform: translateY(-9px) scale(1.015);
  box-shadow: 0 18px 36px rgba(var(--jardin-verde-oscuro-rgb), 0.22);
}

/* ===== Tarjetas seleccionables (accesos rápidos tipo "¿Qué necesitas ahora?") ===== */
.tarjeta-acceso {
  position: relative;
  overflow: hidden;
  background: var(--color-blanco);
  padding: 24px;
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
}

.tarjeta-acceso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--jardin-verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.tarjeta-acceso:hover::before { transform: scaleX(1); }

.tarjeta-acceso h3 {
  transition: color 0.25s ease;
}

.tarjeta-acceso:hover h3 { color: var(--jardin-verde); }

.tarjeta-acceso h3::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tarjeta-acceso:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Entrada suave del contenido al terminar de cargar ===== */
main {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

main.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Hero ===== */
.hero-slider {
  height: 80vh;
  min-height: 520px;
  max-height: 760px;
}

.hero-slider .swiper-slide {
  display: flex;
  align-items: center;
}

/* Fondo de cada slide: el degradado vive aquí una sola vez;
   cada slide solo define --imagen-hero con su propia foto. */
.hero-fondo {
  background-image: linear-gradient(rgba(var(--jardin-verde-oscuro-rgb), .55), rgba(var(--jardin-verde-oscuro-rgb), .55)), var(--imagen-hero, none);
  background-size: cover;
  background-position: center;
  background-color: var(--jardin-verde-oscuro);
}

/* El slide de Capillas Joyas dentro del hero del home lleva su propio
   acento (teal) en vez del verde de Funeraria Jardín, para diferenciarlo
   como marca hermana sin depender de la clase body.marca-capillas-joyas
   (que solo aplica en su propia página). */
.hero-fondo-capillas-joyas {
  background-image: linear-gradient(rgba(var(--capillas-joyas-oscuro-rgb), .55), rgba(var(--capillas-joyas-oscuro-rgb), .55)), var(--imagen-hero, none);
  background-color: var(--capillas-joyas-oscuro);
}

.hero-fondo-capillas-joyas .telefono { background: var(--capillas-joyas-primario); }
.hero-fondo-capillas-joyas .telefono:hover { background: var(--capillas-joyas-oscuro); }

/* Foto de fachada actualizada (sept. 2026): toma de esquina con bastante
   cielo y cableado arriba. Con el punto de anclaje muy bajo (55%) el
   rótulo colgante de "Funeraria Jardín" quedaba justo al borde del
   recorte, casi cortado y difícil de leer — se sube un poco para darle
   aire arriba y que el rótulo se lea bien, sin perder de vista la
   fachada (columna, puertas, ventanas) abajo. */
.hero-fondo-chalchuapa { background-position: center 45%; }

/* Foto de fachada actualizada (sept. 2026): tiene bastante cielo y cableado
   arriba, con la fachada y el rótulo "Funeraria Jardín" en la mitad
   inferior — se baja el punto de anclaje para mostrar más fachada y
   menos cielo. */
.hero-fondo-metapan { background-position: center 62%; }

.hero-slider h1,
.hero-slider h2,
.hero-slider p {
  color: var(--color-blanco);
}

/* Solo el primer slide lleva <h1> (una sola h1 por página, mejor para SEO);
   los demás usan <h2> con el mismo tamaño para que se vean iguales. */
.hero-slider h1,
.hero-slider .hero-titulo { font-size: 2rem; }

@media (max-width: 768px) {
  .hero-slider {
    height: 60vh;
    min-height: 420px;
  }
}

/* Flechas de navegación del carrusel */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  background: rgba(var(--jardin-marfil-rgb), 0.15);
  border: 1px solid rgba(var(--jardin-marfil-rgb), 0.6);
  border-radius: 50%;
  color: var(--color-blanco);
  transition: background var(--transicion-rapida);
}

.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
  background: rgba(var(--jardin-marfil-rgb), 0.3);
  transform: scale(1.1);
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

/* Paginación en guiones, como Parque Jardín Las Flores */
.hero-slider .swiper-pagination-bullet {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--jardin-marfil-rgb), 0.6);
  opacity: 1;
  transition: background var(--transicion-rapida);
}

.hero-slider .swiper-pagination-bullet-active {
  background: var(--jardin-arena);
}

/* ===== Sección con fondo fijo + tarjetas ===== */
.servicios-fijo {
  background-image: linear-gradient(rgba(var(--jardin-verde-oscuro-rgb), .78), rgba(var(--jardin-verde-oscuro-rgb), .78)), url('/assets/img/servicios-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: var(--jardin-verde-oscuro);
  padding: 70px 20px;
}

.servicios-fijo h2 { color: var(--color-blanco); }

/* Excepción: si el h2 está dentro de una tarjeta blanca (como el
   encabezado de "Servicios de Previsión" en /servicios/), tiene que
   quedar oscuro — si no, queda blanco sobre blanco e ilegible. */
.servicios-fijo .tarjeta-blanca h2 { color: var(--jardin-verde-oscuro); }

/* Flex en vez de grid a propósito: si la última fila queda incompleta
   (ej. 6 tarjetas en filas de 4), se centra sola en vez de quedar pegada
   a la izquierda con espacio vacío al lado. */
.servicios-fijo .servicios-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.servicios-fijo .servicio-cuadro {
  flex: 1 1 220px;
  max-width: 275px;
  background: rgba(var(--jardin-marfil-rgb), 0.95);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}

/* Foto arriba de cada tarjeta — mismo truco de --imagen-item que el resto
   del sitio (galeria-item, sucursal-foto). Si aún no hay foto real para
   ese servicio, cae en el color de respaldo, sin verse roto. */
.servicios-fijo .servicio-foto {
  height: 170px;
  background-image: var(--imagen-item, none);
  background-size: cover;
  background-position: center;
  background-color: var(--jardin-verde);
}

/* Variante para imágenes que son un ícono/ilustración redonda (no una foto
   apaisada): se muestra completa y centrada sobre blanco, en vez de recortada. */
.servicios-fijo .servicio-foto-icono {
  background-color: var(--color-blanco);
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  padding: 12px;
}

.servicios-fijo .servicio-texto { padding: 20px 24px 24px; }

.servicios-fijo .servicio-cuadro h3 { color: var(--jardin-verde-oscuro); }

.servicios-fijo .servicio-cuadro p {
  color: var(--color-texto-suave);
  margin-top: 8px;
  font-size: 0.95rem;
}

/* background-attachment:fixed no es confiable en iOS Safari */
@media (max-width: 768px) {
  .servicios-fijo { background-attachment: scroll; }
}

/* ===== Cifras animadas ===== */
.cifras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
  margin-top: 24px;
}

.cifra-numero {
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  color: var(--jardin-verde);
  line-height: 1;
}

.cifra-etiqueta {
  margin-top: 8px;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ===== Formulario de contacto ===== */
.form-grupo {
  display: block;
  margin-bottom: 16px;
}

.form-grupo:last-of-type { margin-bottom: 20px; }

.form-etiqueta {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(var(--jardin-verde-oscuro-rgb), .2);
  border-radius: var(--radio-borde);
  font-family: var(--fuente-texto);
  background: var(--color-blanco);
}

textarea.form-control { resize: vertical; }

.campo-oculto {
  position: absolute;
  left: -9999px;
}

.mensaje-resultado {
  padding: 12px 16px;
  border-radius: var(--radio-borde);
  margin-bottom: 20px;
}

.mensaje-exito {
  background: rgba(var(--jardin-verde-rgb), .15);
  color: var(--jardin-verde-oscuro);
}

.mensaje-error {
  background: rgba(var(--jardin-marron-rgb), .15);
  color: var(--jardin-marron);
}

.telefono-whatsapp { background: var(--color-whatsapp); }
.telefono-whatsapp:hover { background: var(--color-whatsapp-oscuro); }

/* ===== Galería con filtros + lightbox ===== */
.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 32px;
}

.galeria-filtros button {
  border: 1px solid var(--jardin-verde);
  background: transparent;
  color: var(--jardin-verde-oscuro);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.galeria-filtros button:hover {
  background: rgba(var(--jardin-verde-rgb), 0.12);
  transform: translateY(-2px);
}

.galeria-filtros button.activo {
  background: var(--jardin-verde);
  color: var(--color-blanco);
}

/* Selector de sucursal para el mapa interactivo del home — mismo lenguaje
   visual que .galeria-filtros (píldoras con estado activo). */
.mapa-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mapa-selector-boton {
  border: 1px solid var(--jardin-verde);
  background: transparent;
  color: var(--jardin-verde-oscuro);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), transform var(--transicion-rapida);
}

.mapa-selector-boton:hover {
  background: rgba(var(--jardin-verde-rgb), 0.12);
  transform: translateY(-2px);
}

.mapa-selector-boton.activo {
  background: var(--jardin-verde);
  color: var(--color-blanco);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.galeria-item {
  position: relative;
  display: block;
  border-radius: var(--radio-borde);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-image: linear-gradient(rgba(var(--jardin-verde-oscuro-rgb), .35), rgba(var(--jardin-verde-oscuro-rgb), .55)), var(--imagen-item, none);
  background-size: cover;
  background-position: center;
  background-color: var(--jardin-verde-oscuro);
  transition: transform var(--transicion-suave);
}

.galeria-item:hover { transform: scale(1.03); }

.galeria-item .galeria-etiqueta {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--color-blanco);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(var(--jardin-verde-oscuro-rgb), 0.35);
}

.galeria-item[hidden] { display: none; }

/* En la página propia de Capillas Joyas, el respaldo de las miniaturas sin
   foto real todavía usa el teal de la marca en vez del verde de Funeraria
   Jardín (en /galeria/ general se deja el verde porque ahí se mezclan
   categorías de las dos marcas). */
body.marca-capillas-joyas .galeria-item {
  background-image: linear-gradient(rgba(var(--marca-oscuro-rgb), .35), rgba(var(--marca-oscuro-rgb), .55)), var(--imagen-item, none);
  background-color: var(--marca-oscuro);
}

/* ===== Tarjetas de sucursales ===== */
.sucursales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.sucursal-card {
  background: var(--color-blanco);
  border-radius: var(--radio-borde);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sucursal-foto {
  display: block;
  height: 160px;
  flex-shrink: 0;
  background-image: var(--imagen-item, none);
  background-size: cover;
  background-position: center;
  background-color: var(--jardin-verde);
  cursor: pointer;
}

.enlace-sucursal { transition: color var(--transicion-rapida); }
.enlace-sucursal:hover { color: var(--jardin-verde); }

.sucursal-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.sucursal-telefonos a {
  display: block;
  color: var(--marca-primario);
  font-weight: 600;
}

/* Capillas Joyas usa su propio color (#669a9a) incluso dentro de la
   cuadrícula de sucursales del home y del listado /sucursales/, donde
   el resto de tarjetas sí llevan el verde de Funeraria Jardín. */
#sucursal-capillas-joyas.sucursal-foto,
#sucursal-capillas-joyas .sucursal-foto {
  background-color: var(--capillas-joyas-primario);
}

#sucursal-capillas-joyas .enlace-sucursal:hover,
#sucursal-capillas-joyas .sucursal-telefonos a,
#sucursal-capillas-joyas .enlace-destacado,
#sucursal-capillas-joyas h3,
#sucursal-capillas-joyas .texto-suave {
  color: var(--capillas-joyas-primario);
}

#sucursal-capillas-joyas .telefono { background: var(--capillas-joyas-primario); }
#sucursal-capillas-joyas .telefono:hover {
  background: var(--capillas-joyas-oscuro);
  box-shadow: 0 10px 20px rgba(var(--capillas-joyas-oscuro-rgb), 0.25);
}

.sucursal-acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.whatsapp-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-mini:hover {
  background: var(--color-whatsapp-oscuro);
  transform: scale(1.08);
}

/* Mismo botón circular que .whatsapp-mini, para los enlaces de Facebook
   e Instagram en las tarjetas de contacto de cada sucursal. */
.facebook-mini,
.instagram-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.facebook-mini { background: var(--color-facebook); }
.facebook-mini:hover { background: var(--color-facebook-oscuro); transform: scale(1.08); }

.instagram-mini { background: var(--color-instagram); }
.instagram-mini:hover { background: var(--color-instagram-oscuro); transform: scale(1.08); }

/* ===== Mapa embebido ===== */
.mapa-embed {
  margin-top: 24px;
  border-radius: var(--radio-borde);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

/* Cuando el mapa es una columna dentro de una cuadrícula (ej. junto a la
   tarjeta de contacto de una sucursal), el espacio ya lo da el gap del grid */
.grid-dos-columnas .mapa-embed { margin-top: 0; }

.mapa-embed iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

.mapa-embed.mapa-pendiente {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(var(--marca-oscuro-rgb), 0.08);
  color: var(--color-texto-suave);
  font-style: italic;
}

/* ===== Apartado Capillas Joyas ===== */
.capillas-joyas-destacado {
  background: var(--color-blanco);
  border: 1px solid rgba(var(--capillas-joyas-primario-rgb), 0.2);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
}

/* Misma idea, para el encabezado de las páginas de sucursales */
.sucursal-destacado {
  background: var(--color-blanco);
  border: 1px solid rgba(var(--jardin-verde-rgb), 0.2);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.sucursal-destacado img {
  max-width: 220px;
  width: 100%;
  flex-shrink: 0;
}

.sucursal-destacado-texto { flex: 1 1 320px; }

.sucursal-destacado .logo-registrado {
  flex: 0 1 220px;
  max-width: 220px;
}

.sucursal-destacado .logo-registrado img { display: block; }

/* Símbolo ® sobrepuesto en la esquina superior derecha del logo (el PNG no se modifica) */
.logo-registrado {
  position: relative;
  display: inline-block;
}

.logo-registrado::after {
  content: '®';
  position: absolute;
  top: 2px;
  right: -8px;
  font-family: var(--fuente-texto);
  font-size: .8rem;
  line-height: 1;
  color: var(--jardin-verde);
}

/* ® pequeño en superíndice junto al eslogan */
.marca-registrada {
  font-size: .6em;
  font-style: normal;
  margin-left: 1px;
}

/* Recuadro genérico "con profundidad" (borde + sombra), para encabezados
   de página o sección que no llevan logo — mismo lenguaje visual que
   .sucursal-destacado y .capillas-joyas-destacado */
.pagina-destacada {
  background: var(--color-blanco);
  border: 1px solid rgba(var(--jardin-verde-rgb), 0.2);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: 40px;
}

/* Variante de .pagina-destacada con una foto a la par del texto (ej. "Quiénes somos") */
.pagina-destacada-con-foto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.pagina-destacada-foto {
  flex: 1 1 320px;
  min-height: 320px;
  align-self: stretch;
  border-radius: var(--radio-borde);
  background-image: var(--imagen-item, none);
  background-size: cover;
  background-position: center;
  background-color: var(--jardin-verde);
}

.pagina-destacada-texto { flex: 1 1 380px; }

/* ===== Cuentas corrientes (texto + canales de contacto) ===== */
.cuentas-corrientes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cuentas-texto { flex: 1 1 340px; }

.cuentas-invitacion {
  margin-top: 16px;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  color: var(--jardin-verde);
}

.cuentas-canales { flex: 0 1 460px; }

.cuentas-canales-titulo {
  font-size: 1.1rem;
  color: var(--jardin-verde);
  margin-bottom: 14px;
}

.cuentas-opciones-titulo {
  margin-top: 20px;
  font-weight: 700;
  color: var(--jardin-verde);
}

.cuentas-texto .lista-incluye { margin-top: 10px; }

.cuentas-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.canal-boton {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  color: var(--color-blanco);
  font-weight: 700;
  line-height: 1.3;
  transition: transform var(--transicion-suave), filter var(--transicion-suave);
}

.canal-boton:hover {
  transform: translateY(-2px);
  filter: brightness(.94);
}

.canal-boton-telefono { background: var(--jardin-verde); }
.canal-boton-whatsapp { background: var(--color-whatsapp-oscuro); }

.capillas-joyas-destacado img {
  max-width: 280px;
  width: 100%;
}

.capillas-joyas-destacado .capillas-joyas-texto {
  flex: 1 1 320px;
}

.boton-logo-capillas-joyas {
  display: inline-block;
  transition: opacity .2s ease;
}

.boton-logo-capillas-joyas:hover {
  opacity: .8;
}

.boton-logo-capillas-joyas img {
  max-width: 170px;
  width: 100%;
}

.capillas-joyas-destacado .telefono {
  background: var(--capillas-joyas-primario);
}

.capillas-joyas-destacado .telefono:hover {
  background: var(--capillas-joyas-oscuro);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-texto);
  color: var(--color-blanco);
  padding: 40px 20px 20px;
  margin-top: 60px;
}

/* Los h4 del footer heredan la regla global "h1,h2,h3,h4" (--color-texto),
   que es el mismo color que el fondo del footer, y quedan invisibles.
   Se fuerzan a blanco explícitamente. */
.site-footer h4 { color: var(--color-blanco); }

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 24px;
}

.site-footer a {
  opacity: 0.85;
  display: inline-block;
}

.site-footer a:hover {
  opacity: 1;
  color: var(--jardin-arena);
  transform: translateX(3px);
}

.site-footer .footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
  border-top: 1px solid rgba(var(--color-blanco-rgb), 0.15);
  padding-top: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .main-nav > ul {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    overflow-y: auto;
    background: var(--color-blanco);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 24px;
    transition: right var(--transicion-suave);
  }

  .main-nav > ul.abierto { right: 0; }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
  }

  /* En móvil no hay hover: el submenú queda siempre expandido, como una sub-lista */
  .main-nav .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(var(--jardin-verde-rgb), 0.06);
    border-radius: var(--radio-borde);
    margin-top: 8px;
    padding: 4px 0;
  }

  .main-nav ul li.tiene-submenu > a::before {
    content: '';
  }

  /* Objetivos táctiles de al menos 44px */
  .mapa-selector-boton {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ===== Utilidades de espaciado (al final a propósito, para que puedan
   sobreescribir el margen por defecto de clases como .parrafo-intro) ===== */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }

/* =====================================================================
   SECCIÓN: GUÍAS Y ACOMPAÑAMIENTO (home) — bloque "gj-" autocontenido.
   Reutiliza las variables de marca del sitio (--jardin-*, --fuente-*,
   --radio-borde, --sombra-suave) en vez de los valores sueltos originales,
   para que siga la misma paleta si la marca cambia más adelante.
   ===================================================================== */
.gj{--gj-verde:var(--jardin-verde);--gj-verde-osc:var(--jardin-verde-oscuro);--gj-cafe:var(--jardin-marron);--gj-crema:var(--jardin-marfil);--gj-blanco:var(--color-blanco);--gj-linea:rgba(var(--jardin-verde-rgb),.15);
  font-family:var(--fuente-texto);color:var(--gj-cafe);padding:64px 20px;background:var(--gj-crema)}
.gj *{box-sizing:border-box}
.gj-wrap{max-width:1200px;margin:0 auto}
.gj h2,.gj h3,.gj h4{font-family:var(--fuente-titulos);color:var(--gj-verde);margin:0;font-weight:700}
.gj-head{text-align:center;max-width:720px;margin:0 auto 32px;background:var(--gj-blanco);border:1px solid rgba(var(--jardin-verde-rgb),0.2);border-radius:var(--radio-borde);box-shadow:var(--sombra-suave);padding:40px}
.gj-eyebrow{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gj-verde);margin-bottom:10px}
.gj-title{font-size:clamp(24px,3vw,32px);line-height:1.3}
.gj-lead{font-size:16px;line-height:1.7;margin:14px 0 0}

/* Pestañas */
.gj-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto 28px;background:var(--gj-blanco);padding:6px;border-radius:12px;width:max-content;max-width:100%;box-shadow:var(--sombra-suave)}
.gj-tab{border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--gj-verde);padding:12px 22px;border-radius:10px;cursor:pointer;transition:var(--transicion-rapida)}
.gj-tab:hover{background:var(--gj-crema)}
.gj-tab.is-active{background:var(--gj-verde);color:#fff}
.gj-panel[hidden]{display:none}

/* Botones */
.gj-btn{display:inline-block;border:2px solid var(--gj-verde);background:var(--gj-verde);color:#fff!important;font:inherit;font-size:15px;font-weight:700;padding:10px 18px;border-radius:var(--radio-borde);cursor:pointer;text-decoration:none;text-align:center;transition:var(--transicion-rapida)}
.gj-btn:hover{background:var(--gj-verde-osc);border-color:var(--gj-verde-osc)}
.gj-btn-outline{background:transparent;color:var(--gj-verde)!important}
.gj-btn-outline:hover{background:var(--gj-verde);color:#fff!important}
.gj-link{color:var(--gj-verde);font-weight:700}

/* Checklist */
.gj-intro-card{display:flex;gap:24px;justify-content:space-between;align-items:center;background:var(--gj-blanco);border-radius:var(--radio-borde);padding:24px 28px;margin-bottom:20px}
.gj-intro-card h3{font-size:20px;margin-bottom:6px}
.gj-intro-card p{margin:0;line-height:1.6}
.gj-progress{min-width:220px}
.gj-progress-bar{height:8px;background:var(--gj-crema);border-radius:99px;overflow:hidden;margin-bottom:6px}
.gj-progress-bar span{display:block;height:100%;width:0;background:var(--gj-verde);transition:width .3s}
.gj-checklist-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.gj-steps-nav{position:sticky;top:130px;background:var(--gj-blanco);border-radius:var(--radio-borde);padding:16px;display:flex;flex-direction:column;gap:4px}
.gj-steps-nav>a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--gj-cafe);text-decoration:none;font-size:15px}
.gj-steps-nav>a:hover{background:var(--gj-crema);color:var(--gj-verde)}
.gj-steps-nav>a b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gj-crema);color:var(--gj-verde);font-size:13px;flex:none}
.gj-nav-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gj-linea)}
.gj-stage{background:var(--gj-blanco);border-radius:var(--radio-borde);padding:24px 28px;margin-bottom:16px;scroll-margin-top:130px}
.gj-stage h4{font-size:19px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gj-stage h4 span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gj-verde);color:#fff;font-size:15px;font-family:var(--fuente-texto)}
.gj-stage-note{margin:-4px 0 12px;line-height:1.6;font-size:15px}
.gj-item{border-top:1px solid var(--gj-linea)}
.gj-item summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 4px;cursor:pointer;color:var(--gj-verde);font-size:16px}
.gj-item summary::-webkit-details-marker{display:none}
.gj-item summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--gj-verde);transition:transform .2s}
.gj-item[open] summary::after{transform:rotate(45deg)}
.gj-item input[type=checkbox]{appearance:none;width:22px;height:22px;flex:none;border:2px solid var(--gj-verde);border-radius:6px;cursor:pointer;display:grid;place-items:center;margin:0}
.gj-item input[type=checkbox]:checked{background:var(--gj-verde)}
.gj-item input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.gj-item.is-done strong{text-decoration:line-through;opacity:.6}
.gj-body{padding:0 4px 16px 38px;line-height:1.7;font-size:15px}
.gj-body p{margin:0 0 10px}
.gj-body ul{margin:0 0 10px;padding-left:18px}
.gj-care{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.gj-care p{margin:0;flex:1 1 320px;line-height:1.7}
.gj-disclaimer{font-size:13px;opacity:.85;margin:4px 0 0;text-align:center}

/* Tarjetas de duelo */
.gj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gj-card{background:var(--gj-blanco);border-radius:var(--radio-borde);padding:28px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,box-shadow .2s}
.gj-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(var(--jardin-verde-rgb),.15)}
.gj-card{position:relative}
.gj-card>.gj-tag,.gj-card>h3,.gj-card>p,.gj-card>.gj-btn{position:relative;z-index:1}
.gj-card>h3,.gj-card>p{padding-right:124px}
.gj-ilustracion{position:absolute;top:0;right:0;width:190px;height:auto;opacity:.6;pointer-events:none}
@media (max-width:600px){.gj-ilustracion{width:130px;opacity:.5}.gj-card>h3{padding-right:70px}.gj-card>p{padding-right:0}}
.gj-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--gj-crema);color:var(--gj-verde);padding:4px 10px;border-radius:99px;margin-bottom:14px}
.gj-card h3{font-size:19px;line-height:1.35;margin-bottom:10px}
.gj-card p{margin:0 0 20px;line-height:1.6;flex:1}
.gj-cta{margin-top:24px;background:var(--gj-verde);border-radius:var(--radio-borde);padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.gj-cta h3{color:#fff;font-size:22px;margin-bottom:6px}
.gj-cta p{color:#eef0ea;margin:0}
.gj-cta .gj-btn{background:#fff;color:var(--gj-verde)!important;border-color:#fff}

/* Modal */
.gj-modal{margin:auto;border:0;border-radius:14px;padding:0;max-width:640px;width:calc(100% - 32px);max-height:85vh;color:var(--gj-cafe);font-family:var(--fuente-texto)}
.gj-modal::backdrop{background:rgba(40,45,36,.55)}
.gj-modal-body{padding:36px 32px 32px;line-height:1.75;font-size:16px}
.gj-modal-body h3{font-size:22px;margin-bottom:14px;padding-right:30px}
.gj-modal-body h4{font-size:17px;margin:18px 0 6px}
.gj-modal-body ul{padding-left:20px}
.gj-alert{background:var(--gj-crema);border-left:4px solid var(--gj-verde);padding:12px 14px;border-radius:6px}
.gj-close{position:absolute;top:12px;right:14px;border:0;background:var(--gj-crema);color:var(--gj-verde);width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer;line-height:1}

@media (max-width:960px){.gj-grid{grid-template-columns:repeat(2,1fr)}.gj-checklist-layout{grid-template-columns:1fr}.gj-steps-nav{position:static;flex-direction:row;flex-wrap:wrap}.gj-steps-nav>a{flex:1 1 45%}.gj-nav-actions{flex-direction:row;width:100%}.gj-nav-actions>*{flex:1}}
@media (max-width:600px){.gj{padding:48px 16px}.gj-grid{grid-template-columns:1fr}.gj-intro-card{flex-direction:column;align-items:stretch;padding:20px}.gj-stage{padding:20px 16px}.gj-body{padding-left:4px}.gj-tab{padding:10px 14px;font-size:14px}.gj-steps-nav>a{flex:1 1 100%}}

/* Impresión: solo la lista de pasos */
@media print{
  body *{visibility:hidden}
  #gj-panel-tramites,#gj-panel-tramites *{visibility:visible}
  #gj-panel-tramites{position:absolute;left:0;top:0;width:100%}
  .gj-steps-nav,.gj-progress,.gj-care .gj-btn{display:none!important}
  .gj-checklist-layout{display:block}
  .gj-item .gj-body{display:block!important}
  .gj-stage{break-inside:avoid;padding:10px 0}
}

/* =====================================================================
   MÓVIL: textos centrados (pantallas de hasta 768px).
   Se centra todo el contenido; quedan alineados a la izquierda solo lo que
   se lee peor centrado: listas con check, formularios y las guías largas
   (pasos y lecturas de "Guías y acompañamiento").
   ===================================================================== */
@media (max-width: 768px) {
  main, .site-footer { text-align: center; }

  /* Héroe */
  .hero-slider .swiper-slide > .seccion { width: 100%; }

  /* Menú lateral */
  .main-nav > ul { align-items: center; text-align: center; }

  /* Encabezados de página/sucursal y bloques con foto: centrar sus hijos */
  .sucursal-destacado,
  .capillas-joyas-destacado,
  .pagina-destacada-con-foto,
  .cuentas-corrientes,
  .gj-cta,
  .gj-care { justify-content: center; text-align: center; }

  /* Botones y filtros que se acomodan en filas */
  .mapa-selector,
  .galeria-filtros,
  .cuentas-botones { justify-content: center; }

  /* Lista de opciones de pago: el bloque se centra, sus ítems se leen a la izquierda */
  .cuentas-texto .lista-incluye { display: inline-flex; max-width: 100%; }

  /* Lo que se mantiene a la izquierda por legibilidad */
  .lista-incluye,
  .lista-no-incluye,
  .tarjeta-plan .categoria-plan,
  form,
  .gj-stages,
  .gj-modal-body { text-align: left; }

  /* Guías y acompañamiento */
  .gj-card { align-items: center; }
  .gj-card > h3, .gj-card > p { padding-right: 0; }
  .gj-ilustracion {
    position: static;
    display: block;
    width: 140px;
    margin: -4px auto 4px;
  }
  .gj-intro-card { text-align: center; }
  .gj-steps-nav > a { justify-content: center; }
}

/* =====================================================================
   MENÚ MÓVIL: botón de cerrar, fondo oscuro y capas.
   El encabezado sube de capa para que el menú lateral quede por encima de
   los botones flotantes (WhatsApp, Pagos, volver arriba).
   ===================================================================== */
.site-header { z-index: 300; }
.menu-cerrar-item, .menu-overlay { display: none; }

@media (max-width: 768px) {
  .menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(var(--jardin-verde-oscuro-rgb), 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicion-suave);
    z-index: 1;
  }
  .menu-overlay.visible { opacity: 1; pointer-events: auto; }

  .main-nav > ul { z-index: 2; }

  .menu-cerrar-item {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    list-style: none;
  }
  .menu-cerrar {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--jardin-marfil);
    color: var(--jardin-verde);
    font-size: 1.1rem;
    cursor: pointer;
  }

  body.menu-abierto { overflow: hidden; }
}