/* =========================================================
   Velatorios San José · hoja de estilo
   Móvil primero (390px) · escritorio derivado
   Paleta: 5 colores. Tipografía: Jost + Source Serif 4.
   ========================================================= */

:root {
  /* --- Paleta cálida (mockups): marfil + marrón + acento oro/marrón --- */
  --marmol: #F4EDDF;   /* fondo marfil cálido */
  --piedra: #EBE1D0;   /* superficies y separación de secciones */
  --crema:  #FBF7EF;   /* tarjetas (crema clara) */
  --tinta:  #2C2822;   /* texto cálido oscuro */
  --taupe:  #9C7B4E;   /* acento cálido (oro/marrón) */
  --salvia: #47403A;   /* banda marrón oscura (secciones destacadas) */

  --linea:        rgba(44, 40, 34, 0.16);
  --linea-suave:  rgba(44, 40, 34, 0.10);
  --tinta-70:     rgba(44, 40, 34, 0.68);
  --sobre-salvia: rgba(244, 237, 223, 0.82);  /* texto claro sobre marrón */

  --barra-h: 68px;
  --max: 1180px;

  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Source Serif 4', Georgia, serif;
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--marmol);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 17px;           /* cuerpo nunca < 16px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* anti scroll horizontal SIN romper position:sticky del header */
}
img, iframe, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--marmol);
  padding: 12px 18px; font-family: var(--f-display);
}
.skip-link:focus { left: 12px; top: 12px; }

/* Foco visible por teclado */
a:focus-visible, button:focus-visible, iframe:focus-visible {
  outline: 2px solid var(--taupe); outline-offset: 3px;
}

/* ---------- Eyebrow / títulos ---------- */
.eyebrow {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 500;
  color: var(--taupe);
  margin: 0 0 14px;
}
.eyebrow-claro { color: var(--sobre-salvia); }

.section-title {
  font-size: clamp(26px, 7vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.22;
  padding-bottom: 0.08em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.section-lead {
  color: var(--tinta-70);
  max-width: 46ch;
  margin: 0 0 34px;
}

.section { padding: 64px 0; scroll-margin-top: 76px; }

/* ============================================================
   ELEMENTO FIRMA · esquineros déco (1px, se dibujan al entrar)
   El SVG lo inyecta main.js dentro de cada .deco-frame
   ============================================================ */
.deco-frame { position: relative; }
/* Esquineros de filigrana (mismo motivo del logo). Asset SVG reutilizable,
   reflejado/rotado en cada esquina. */
.deco-corner {
  position: absolute; z-index: 3; pointer-events: none;
  width: var(--corner, 62px); height: var(--corner, 62px);
  background: url(../assets/img/filigrana-esquina.svg) top left / contain no-repeat;
}
.deco-tl { top: 0; left: 0; }
.deco-tr { top: 0; right: 0; transform: scaleX(-1); }
.deco-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.deco-br { bottom: 0; right: 0; transform: scale(-1, -1); }
/* Tamaños por contexto */
.capa-logo-inner, .capa-hero .hero-inner { --corner: 96px; }
.card, .plan-card, .obituario { --corner: 54px; }
.g-item { --corner: 42px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--marmol);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 8px 24px -16px rgba(44, 40, 34, 0.55);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 64px;
}
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
.wordmark-logo { height: 38px; width: auto; display: block; }
.wordmark-mark { color: var(--taupe); display: flex; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark-name { font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: 0.02em; }
.wordmark-sub { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); }

.site-nav { display: none; }
.site-nav a {
  position: relative;
  font-family: var(--f-display); font-size: 14px; letter-spacing: 0.04em;
  text-decoration: none; color: var(--tinta); padding: 8px 10px;
  transition: color 200ms ease;
}
/* Subrayado fino que se desliza · sección activa o hover */
.site-nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 1px; background: var(--taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms ease;
}
.site-nav a:hover { color: var(--taupe); }
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--taupe); }
.site-nav a[aria-current="page"] { color: var(--taupe); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-call {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  font-family: var(--f-display); font-size: 14px; letter-spacing: 0.03em;
  text-decoration: none; color: var(--tinta);
  border: 1px solid var(--tinta);
}
.header-call:hover { background: var(--piedra); }

/* ---------- 1-2 · ENTRADA (logo ↔ Acompañamos se cruzan) ---------- */
/* La altura del escenario la fija main.js en px reales. */
.entrada { position: relative; }
.entrada-pin {
  position: sticky; top: 0;
  min-height: 70vh;                 /* respaldo si el JS no corriera */
  width: 100%; overflow: hidden;
  background: var(--marmol) url(../assets/img/fondo-hero.jpg) center / cover no-repeat;
}
.capa {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 22px;
  transform-origin: center center; will-change: transform, opacity;
  backface-visibility: hidden;
}
.capa-hero { z-index: 1; background: var(--marmol); }
.js .capa-hero { opacity: 0; }      /* nace desde el centro; lo revela el JS */
.capa-logo { z-index: 2; text-align: center; }

/* Portada (capa que se disuelve) */
.portada-inner { position: relative; width: 100%; max-width: 760px; }
.portada-logo {
  width: min(84vw, 500px); height: auto; margin: 0 auto 24px; display: block;
  mix-blend-mode: multiply;
}
.portada-lema {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 18px; color: var(--tinta);
}
.portada-lema span { font-family: var(--f-display); font-style: italic; font-size: clamp(18px, 3.2vw, 25px); }
.portada-lema::before, .portada-lema::after {
  content: ""; height: 1px; width: clamp(18px, 7vw, 80px); background: var(--taupe); opacity: 0.5;
}
.portada-bajada { color: var(--tinta-70); font-size: 15.5px; margin: 0 0 20px; }
.portada-dir { color: var(--tinta-70); font-size: 14px; margin: 0 0 6px; }
.portada-tels {
  font-family: var(--f-display); font-size: clamp(16px, 2.8vw, 21px);
  letter-spacing: 0.02em; color: var(--taupe); margin: 0;
}
.portada-tels a { color: var(--taupe); text-decoration: none; }
.portada-tels a:hover { text-decoration: underline; text-underline-offset: 3px; }

.portada-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 14px;
  font-family: var(--f-body); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--taupe); text-decoration: none;
}
.portada-chevron { animation: coverDrift 1.9s ease-in-out infinite; }
@keyframes coverDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Acompañamos (capa que emerge) */
.acompana-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; width: 100%; }
.acompana-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(27px, 7.4vw, 50px); line-height: 1.1; margin: 0 0 14px;
}
.acompana-lead { color: var(--tinta-70); font-size: 16px; max-width: 46ch; margin: 0 0 20px; }
.tel-bloques { margin: 0 0 18px; }
.tel-bloques-label {
  font-family: var(--f-body); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 10px;
}
.tel-bloques-row { display: flex; flex-direction: column; gap: 10px; }
.tel-bloque {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 20px;
  border: 1px solid var(--taupe); background: var(--crema);
  text-decoration: none; color: var(--tinta);
  font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: 0.03em;
  transition: background 180ms ease, color 180ms ease;
}
.tel-bloque .ico { color: var(--taupe); width: 22px; height: 22px; flex: none; }
.tel-bloque:hover { background: var(--taupe); color: var(--crema); }
.tel-bloque:hover .ico { color: var(--crema); }
.acompana-cierre { font-size: 15.5px; color: var(--tinta-70); margin: 0; }
.acompana-cierre strong { color: var(--tinta); font-weight: 600; }
.acompana-foto {
  margin: 0; overflow: hidden; aspect-ratio: 16/10;
  border-radius: 140px 140px 12px 12px;
}
.acompana-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Respaldo: si el efecto no arranca, se muestra Acompañamos estático (sin logo) */
.no-entrada .entrada-pin { position: static; min-height: 0; }
.no-entrada .capa-hero { position: static; opacity: 1; transform: none; }
.no-entrada .capa-logo, .no-entrada .portada-scroll { display: none; }

@media (min-width: 760px) {
  .acompana-inner { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
  .tel-bloques-row { flex-direction: row; }
  .acompana-foto { aspect-ratio: 3/4; border-radius: 200px 200px 12px 12px; }
}
/* En pantallas de poca altura, la foto se acorta para que quepa el escenario */
@media (max-height: 720px) and (max-width: 759px) {
  .acompana-foto { aspect-ratio: 21/9; }
  .acompana-lead { display: none; }
}

/* ---------- 1 · HERO ---------- */
.hero { position: relative; background: var(--piedra); overflow: hidden; }
.hero-veta {
  position: absolute; inset: -6% 0 auto 0; height: 130%;
  /* veta de mármol muy sutil, con los mismos tonos */
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(247,247,246,0.9), transparent 60%),
    linear-gradient(120deg, rgba(139,112,96,0.05) 0%, transparent 30%, rgba(26,26,26,0.03) 55%, transparent 78%),
    linear-gradient(200deg, rgba(110,128,101,0.04), transparent 40%);
  will-change: transform;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  padding-top: 56px; padding-bottom: 64px;
}
.hero-title {
  font-size: clamp(30px, 9vw, 56px);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
}
.hero-lead {
  font-size: 18px; color: var(--tinta-70);
  max-width: 40ch; margin: 0 0 30px;
}
.phone-block {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
  text-decoration: none; color: var(--marmol);
  background: var(--tinta);
  padding: 18px 22px;
  margin-bottom: 18px;
  transition: background 200ms ease;
}
.phone-block:hover { background: var(--taupe); }
.phone-block-label {
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.82;
}
.phone-block-number {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(28px, 8vw, 40px); letter-spacing: 0.03em;
}
.hero-hours {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 15px; letter-spacing: 0.02em;
}
.hero-hours strong { font-weight: 600; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--salvia); flex: none;
}

/* ---------- 2 · PRIMERAS HORAS ---------- */
.primeras { background: var(--marmol); }
.pasos {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 12px; border-top: 1px solid var(--linea);
}
.paso {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 0;
  border-bottom: 1px solid var(--linea);
}
.paso-cab { display: flex; align-items: baseline; gap: 16px; }
.paso-num {
  font-family: var(--f-display); font-weight: 500;
  font-size: 40px; color: var(--taupe);
  line-height: 1; flex: none;
}
.paso-cab h3 { font-size: 21px; font-weight: 500; margin: 0; }
.paso > p { color: var(--tinta-70); max-width: 42ch; }

/* Teléfonos + botón bajo el primer paso */
.paso-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 8px; }
.paso-tels {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: clamp(21px, 5vw, 26px);
  letter-spacing: 0.02em; color: var(--taupe);
}
.paso-tels .ico { width: 22px; height: 22px; flex: none; }
.paso-tels a { color: var(--taupe); text-decoration: none; }
.paso-tels a:hover { text-decoration: underline; text-underline-offset: 4px; }
.paso-tels-sep { opacity: 0.6; }
.btn-atencion {
  display: inline-block;
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--marmol); background: var(--taupe);
  text-decoration: none; padding: 15px 28px;
  transition: background 180ms ease;
}
.btn-atencion:hover { background: var(--tinta); }

/* ---------- 3 · SERVICIOS ---------- */
.servicios { position: relative; isolation: isolate; background: var(--piedra); }

/* Foto de fondo de TODA la sección · cubre desde arriba a lo ancho y se
   desvanece hacia abajo (mask-image) para dar paso al resto de la página.
   La foto ya trae la orilla izquierda difuminada, así el texto oscuro se
   lee sobre esa zona clara. El contenido (.wrap) flota por encima (z-index). */
.servicios-bg {
  position: absolute; top: 0; left: 0; right: 0;
  height: 760px;
  /* Móvil: velo claro (piedra) arriba, sobre la zona del texto, + la foto */
  background:
    linear-gradient(to bottom, rgba(235, 225, 208, 0.86) 0%, rgba(235, 225, 208, 0.6) 34%, rgba(235, 225, 208, 0.22) 60%, transparent 82%),
    url(../assets/img/fondo-servicios.jpg) top center / cover no-repeat;
  /* Se desvanece hacia abajo para dar paso al resto de la página */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 44%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 44%, transparent 100%);
  z-index: 0;
}
.servicios > .wrap { position: relative; z-index: 1; }

/* Encabezado de Servicios · solo texto; flota sobre la foto de fondo. */
.servicios-hero {
  position: relative;
  min-height: 300px;
  display: flex; align-items: flex-start;
  margin: 4px 0 34px; padding-top: 20px;
}
.servicios-hero-texto { position: relative; z-index: 1; max-width: 62ch; }
.servicios-hero-texto .section-lead { margin-bottom: 0; }

/* Línea divisoria corta bajo el título (como el mockup) */
.hero-title-rule::after {
  content: ""; display: block;
  width: 64px; height: 1px; margin: 22px 0 0;
  background: var(--taupe); opacity: 0.55;
}

/* Botón "Conocer servicios" · borde fino, texto serif, esquinas suaves */
.btn-servicios {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 26px; padding: 13px 30px;
  border: 1px solid var(--tinta); border-radius: 6px;
  font-family: var(--f-display); font-size: 16px; letter-spacing: 0.01em;
  color: var(--tinta); text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-servicios:hover { background: var(--tinta); color: var(--marmol); border-color: var(--tinta); }

@media (min-width: 720px) {
  .servicios-bg {
    height: 1020px;
    /* Escritorio: velo claro a la IZQUIERDA (donde va el texto), + la foto */
    background:
      linear-gradient(to right, rgba(235, 225, 208, 0.9) 0%, rgba(235, 225, 208, 0.45) 24%, transparent 50%),
      url(../assets/img/fondo-servicios.jpg) top center / cover no-repeat;
  }
  .servicios-hero { min-height: 440px; align-items: flex-start; padding-top: 10px; }
  .servicios-hero-texto { max-width: 440px; }
}
.cards { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.card {
  background: var(--crema);
  border: 1px solid var(--linea-suave);
  border-radius: 12px;
  padding: 26px 28px 28px;
  box-shadow: 0 14px 34px -22px rgba(44, 40, 34, 0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -22px rgba(44, 40, 34, 0.55);
}
.card h3 {
  display: flex; align-items: center; gap: 14px;
  font-size: 21px; font-weight: 500; margin: 0 0 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--linea-suave);
}
.card .ico-card { width: 30px; height: 30px; }
.card ul { display: flex; flex-direction: column; gap: 12px; }
.card li { position: relative; padding-left: 20px; color: var(--tinta-70); font-size: 15.5px; line-height: 1.5; }
.card li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 1px; background: var(--taupe);
}
.servicios-nota {
  text-align: center; color: var(--tinta-70); font-style: italic;
  font-size: 15px; margin-top: 6px;
}

/* ---------- Barra de florerías (teaser, área de servicios) ---------- */
.floreria-barra-wrap { background: var(--marmol); padding: 0 0 48px; }
.floreria-barra {
  display: flex; flex-wrap: wrap; justify-content: center;
  width: fit-content; max-width: 100%; margin: 0 auto;
  background: var(--crema); border: 1px solid var(--linea-suave); border-radius: 18px;
  padding: 8px;
  box-shadow: 0 16px 40px -30px rgba(44, 40, 34, 0.4);
}
.fbarra-item {
  flex: 0 0 auto; width: 280px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 22px 20px 20px; border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: background 180ms ease, transform 180ms ease;
}
.fbarra-item + .fbarra-item { border-left: 1px solid var(--linea-suave); }
.fbarra-item:hover { background: rgba(156, 123, 78, 0.06); transform: translateY(-2px); }
.fbarra-ico { width: 44px; height: 44px; color: var(--taupe); }
.fbarra-logo { max-height: 58px; max-width: 210px; width: auto; object-fit: contain; display: block; }
.fbarra-item-logo { gap: 12px; padding-top: 24px; padding-bottom: 22px; }
.fbarra-item-logo .fbarra-horario { margin-top: 2px; }
.fbarra-nombre { font-family: var(--f-display); font-size: 19px; color: var(--taupe); line-height: 1.25; white-space: nowrap; }
.fbarra-horario { font-size: 13px; color: var(--tinta-70); white-space: nowrap; }

@media (max-width: 640px) {
  .floreria-barra { width: auto; }
  .fbarra-item { flex: 1 1 100%; width: auto; padding: 18px 20px; }
  .fbarra-item + .fbarra-item { border-left: 0; border-top: 1px solid var(--linea-suave); }
}

/* ---------- Directorio publicitario de florerías (tras obituarios) ---------- */
.florerias-dir { background: var(--piedra); }
.florerias-intro { text-align: center; max-width: 60ch; margin: 0 auto; }
.florerias-aviso {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  max-width: 74ch; margin: 22px auto 30px; padding: 12px 18px;
  background: var(--marmol); border: 1px solid var(--linea-suave); border-radius: 10px;
  color: var(--tinta-70); font-size: 14px; line-height: 1.5;
}
.florerias-aviso .ico { width: 20px; height: 20px; color: var(--taupe); flex: none; }
.florerias-nota-final {
  display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center;
  max-width: 70ch; margin: 34px auto 0; color: var(--taupe); font-size: 13px; line-height: 1.6;
}
.florerias-nota-final .ico { width: 18px; height: 18px; color: var(--taupe); flex: none; }

/* Placeholder floral compartido para fotos/logos faltantes */
.fdir-foto.is-empty, .fdir-semana-foto.is-empty, .fdir-logo.is-empty { position: relative; }
.fdir-foto.is-empty::after, .fdir-semana-foto.is-empty::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(156,123,78,0.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%239C7B4E' stroke-width='1' stroke-opacity='0.5'%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'/%3E%3Cpath d='M12 2a3 3 0 0 1 3 3c0 .56 -.26 1.44 -.78 2.64l-.72 1.36l1.76 -1.89c.5 -.6 .92 -1 1.27 -1.2a2.97 2.97 0 0 1 4.07 1.1a3.01 3.01 0 0 1 -1.09 4.1c-.37 .21 -.99 .4 -1.85 .53l-2.66 .37l2.4 .33c1 .14 1.7 .34 2.11 .58a3.01 3.01 0 0 1 1.09 4.1a2.97 2.97 0 0 1 -4.07 1.1c-.35 -.2 -.77 -.6 -1.27 -1.2l-1.76 -1.9l.72 1.36c.52 1.2 .78 2.08 .78 2.64a3 3 0 0 1 -6 0c0 -.56 .26 -1.44 .78 -2.64l.72 -1.36l-1.76 1.9c-.5 .6 -.92 1 -1.27 1.2a2.97 2.97 0 0 1 -4.07 -1.1a3.01 3.01 0 0 1 1.09 -4.1c.37 -.22 .99 -.4 1.85 -.54l2.66 -.36l-2.4 -.33c-1 -.14 -1.7 -.34 -2.11 -.58a3.01 3.01 0 0 1 -1.09 -4.1a2.97 2.97 0 0 1 4.07 -1.1c.35 .2 .77 .6 1.27 1.2l1.76 1.9c-1 -2.3 -1.5 -3.63 -1.5 -4a3 3 0 0 1 3 -3'/%3E%3C/svg%3E") center / 44px no-repeat;
}

/* Arreglo de la semana */
.fdir-semana {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--crema); border: 1px solid var(--linea-suave); border-radius: 18px;
  overflow: hidden; margin: 0 0 30px;
  box-shadow: 0 22px 50px -34px rgba(44, 40, 34, 0.45);
}
.fdir-semana-foto { margin: 0; aspect-ratio: 16 / 10; background: var(--marmol); }
.fdir-semana-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdir-semana-info { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.fdir-semana-eyebrow { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin: 0; }
.fdir-semana-nombre { font-size: clamp(24px, 4vw, 32px); margin: 2px 0 2px; }
.fdir-semana-desc { color: var(--tinta-70); margin: 0; }
.fdir-semana-nota { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--taupe); margin: 4px 0 8px; }
.fdir-semana-nota .ico { width: 16px; height: 16px; }

/* Bloque de florería */
.fdir-bloque {
  background: var(--crema); border: 1px solid var(--linea-suave); border-radius: 18px;
  padding: 26px 24px 28px; margin: 0 0 24px;
  scroll-margin-top: 88px;
}
.fdir-nivel-destacada { border-color: rgba(156,123,78,0.45); box-shadow: 0 20px 46px -34px rgba(156,123,78,0.5); }
.fdir-nivel-label {
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 14px;
}
.fdir-marca {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--linea-suave);
}
.fdir-logo { margin: 0; display: flex; align-items: center; justify-content: center; }
.fdir-logo img { max-height: 150px; max-width: 380px; width: auto; object-fit: contain; display: block; }
.fdir-logo.is-empty .fdir-logo-txt { display: flex; }
.fdir-logo-txt { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.fdir-logo img + .fdir-logo-txt { display: none; }
.fdir-logo-nombre { font-family: var(--f-display); font-size: 24px; color: var(--tinta); line-height: 1.1; }
.fdir-logo-lema { font-size: 12px; color: var(--tinta-70); font-style: italic; }
.fdir-tels { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.fdir-tel { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--taupe); font-weight: 600; font-size: 15px; }
.fdir-tel .ico { width: 16px; height: 16px; }
.fdir-tel:hover { text-decoration: underline; }
.fdir-tel-sep { color: var(--linea); }

/* Grid de arreglos */
.fdir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fdir-card { display: flex; flex-direction: column; gap: 10px; }
.fdir-foto {
  margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: var(--crema); border: 1px solid var(--linea-suave);
}
.fdir-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdir-card-nombre { font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--tinta); margin: 0; text-align: center; }

/* Acciones (botones o enlaces de texto) */
.fdir-acc { display: flex; gap: 8px; }
.fdir-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 12px; border-radius: 8px; text-decoration: none;
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.06em;
  border: 1px solid var(--linea); background: var(--marmol); color: var(--tinta);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fdir-btn .ico { width: 16px; height: 16px; }
.fdir-btn-wa:hover { background: var(--salvia); border-color: var(--salvia); color: var(--sobre-salvia); }
.fdir-btn-wa:hover .ico { color: var(--sobre-salvia); }
.fdir-btn-tel:hover { background: var(--taupe); border-color: var(--taupe); color: var(--crema); }
.fdir-btn-tel:hover .ico { color: var(--crema); }
.fdir-acc-texto { justify-content: center; gap: 12px; color: var(--taupe); font-size: 14px; }
.fdir-acc-texto a { color: var(--taupe); text-decoration: none; }
.fdir-acc-texto a:hover { text-decoration: underline; }
.fdir-acc-texto span { color: var(--linea); }

/* Semana: botones más grandes */
.fdir-semana .fdir-acc { margin-top: 6px; }
.fdir-semana .fdir-btn { flex: 0 1 auto; min-height: 46px; padding: 0 20px; font-size: 13px; }

/* Espacio disponible */
.fdir-disponible { border-style: dashed; }
.fdir-disponible-head { margin-bottom: 18px; }
.fdir-disponible-txt { color: var(--tinta-70); font-size: 14px; margin: 4px 0 0; max-width: 52ch; }
.fdir-slot {
  aspect-ratio: 1 / 1; border-radius: 12px; border: 1px dashed var(--linea);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--taupe); background: rgba(156,123,78,0.03);
}
.fdir-slot .ico { width: 30px; height: 30px; opacity: 0.6; }
.fdir-slot span { font-size: 13px; opacity: 0.75; }
.fdir-cta {
  display: block; text-align: center; margin: 20px auto 0; max-width: 360px;
  min-height: 46px; line-height: 44px; padding: 0 22px; border-radius: 8px;
  border: 1px solid var(--taupe); color: var(--taupe); text-decoration: none;
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.06em;
  transition: background 160ms ease, color 160ms ease;
}
.fdir-cta:hover { background: var(--taupe); color: var(--crema); }

@media (min-width: 720px) {
  .fdir-semana { grid-template-columns: 1.05fr 1fr; }
  .fdir-semana-foto { aspect-ratio: auto; height: 100%; }
  .fdir-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4 · PLANES A FUTURO · banda marrón + ventajas ---------- */
.prevision { background: var(--salvia); color: var(--marmol); padding-top: 52px; padding-bottom: 56px; }
.prevision .section-title { color: var(--marmol); margin-bottom: 14px; }
.prevision-lead { color: var(--sobre-salvia); margin-bottom: 0; }
.prevision-inner { display: flex; flex-direction: column; gap: 34px; }

.btn-conocer {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 34px; margin-top: 28px; align-self: flex-start;
  border: 1px solid var(--sobre-salvia); color: var(--marmol);
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-conocer:hover { background: var(--marmol); color: var(--tinta); border-color: var(--marmol); }

.ventajas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ventaja {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(247, 247, 246, 0.16);
}
.ventaja:nth-last-child(1), .ventaja:nth-last-child(2) { border-bottom: none; }
.ico-ventaja { width: 26px; height: 26px; flex: none; margin-top: 1px; color: var(--taupe); }
.ventaja span { color: var(--sobre-salvia); font-size: 15.5px; line-height: 1.4; }

/* Lista de ventajas (columna izquierda, sobre la banda oscura) */
.prevision-ventajas { list-style: none; margin: 26px 0 0; padding: 0; }
.prevision-ventajas li {
  padding: 14px 2px; border-top: 1px solid rgba(247, 247, 246, 0.16);
  color: var(--sobre-salvia); font-size: 15.5px;
}
.prevision-ventajas li:last-child { border-bottom: 1px solid rgba(247, 247, 246, 0.16); }

/* ===== Panel interactivo de pago (columna derecha) ===== */
.planf-panel {
  background: var(--crema); color: var(--tinta); border-radius: 16px;
  padding: 30px 24px 26px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}
.planf-panel-head { text-align: center; margin-bottom: 20px; }
.planf-panel-titulo { font-family: var(--f-display); font-size: clamp(22px, 3vw, 30px); font-weight: 500; margin: 0 0 4px; }
.planf-panel-sub { color: var(--taupe); font-size: 14px; text-transform: capitalize; }
.planf-tabs {
  display: flex; gap: 2px; justify-content: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea-suave); margin-bottom: 20px;
}
.planf-tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--f-display); font-size: 15px; color: var(--tinta-70);
  padding: 10px 16px; border-radius: 8px 8px 0 0;
  transition: background 160ms ease, color 160ms ease;
}
.planf-tab:hover { color: var(--tinta); }
.planf-tab.is-active { background: var(--taupe); color: var(--crema); }
.planf-grid { display: flex; overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.planf-col { flex: 1 0 116px; position: relative; text-align: center; padding: 10px 6px; border-right: 1px solid var(--linea-suave); }
.planf-col:last-child { border-right: none; }
.planf-col-rec { border: 1px solid var(--taupe); border-radius: 12px; padding-top: 20px; margin: 0 2px; }
.planf-col-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--taupe); color: var(--crema);
  font-family: var(--f-display); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 10px;
}
.planf-col-plazo { font-family: var(--f-display); font-size: 17px; margin: 0 0 12px; }
.planf-col-lbl { color: var(--tinta-70); font-size: 12px; margin: 8px 0 2px; }
.planf-col-val { font-family: var(--f-display); color: var(--taupe); font-size: 16px; margin: 0; }
.planf-contado {
  text-align: center; font-family: var(--f-display); font-size: 18px;
  padding-top: 18px; border-top: 1px solid var(--linea-suave); margin: 0 0 8px;
}
.planf-contado strong { color: var(--taupe); font-weight: 600; }
.planf-nota { text-align: center; color: var(--tinta-70); font-size: 13px; line-height: 1.5; margin: 0 auto 20px; max-width: 44ch; }
.planf-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.planf-btn {
  flex: 1 1 0; min-width: 150px; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 6px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.planf-btn-out { border: 1px solid var(--taupe); background: transparent; color: var(--taupe); }
.planf-btn-out:hover { background: var(--taupe); color: var(--crema); }
.planf-btn-solid { border: 1px solid var(--taupe); background: var(--taupe); color: var(--crema); }
.planf-btn-solid:hover { background: var(--tinta); border-color: var(--tinta); }

/* ===== Barra lateral · comparar todos los modelos ===== */
.planf-comparar { position: fixed; inset: 0; z-index: 120; }
.planf-comparar[hidden] { display: none; }
.planf-comparar-tras { position: absolute; inset: 0; background: rgba(44, 40, 34, 0.5); opacity: 0; transition: opacity 300ms ease; }
.planf-comparar.is-open .planf-comparar-tras { opacity: 1; }
.planf-comparar-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 96vw); overflow-y: auto;
  background: var(--marmol); box-shadow: -20px 0 60px -30px rgba(44, 40, 34, 0.6);
  padding: 34px 28px 44px;
  transform: translateX(100%); transition: transform 340ms cubic-bezier(.4, 0, .2, 1);
}
.planf-comparar.is-open .planf-comparar-drawer { transform: none; }
.planf-comparar-cerrar {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.planf-comparar-cerrar:hover { background: var(--piedra); }
.planf-comparar-cerrar svg { width: 20px; height: 20px; }
.planf-comparar-eyebrow { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); margin: 4px 0 6px; }
.planf-comparar-titulo { font-size: 24px; font-weight: 500; margin: 0 0 22px; }
.planf-comparar-nota { color: var(--tinta-70); font-size: 13px; font-style: italic; margin-top: 18px; }
.planf-modelo { border: 1px solid var(--linea-suave); border-radius: 12px; background: var(--crema); padding: 18px; margin-bottom: 16px; }
.planf-modelo-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.planf-modelo-foto {
  width: 84px; height: 66px; flex: none; margin: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(156, 123, 78, 0.4);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(156,123,78,0.08) 9px, rgba(156,123,78,0.08) 10px),
    var(--piedra);
  display: flex; align-items: center; justify-content: center;
}
.planf-modelo-foto img { width: 100%; height: 100%; object-fit: cover; }
.planf-modelo-foto-ph { font-family: var(--f-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.planf-modelo-cat { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin: 0 0 3px; }
.planf-modelo-nombre { font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--tinta); margin: 0 0 5px; line-height: 1.25; }
.planf-modelo-contado { color: var(--tinta); font-size: 14px; margin: 0; }
.planf-modelo-contado strong, .planf-modelo-contado b { color: var(--taupe); }
.planf-modelo-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.planf-modelo-tabla th { font-family: var(--f-display); font-weight: 500; color: var(--taupe); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--linea-suave); text-align: right; }
.planf-modelo-tabla th:first-child, .planf-modelo-tabla td:first-child { text-align: left; }
.planf-modelo-tabla td { padding: 6px 8px; color: var(--tinta-70); border-bottom: 1px solid var(--linea-suave); text-align: right; }
.planf-modelo-tabla tr:last-child td { border-bottom: none; }
@media (prefers-reduced-motion: reduce) {
  .planf-comparar-tras, .planf-comparar-drawer { transition: none; }
}

/* ---------- Planes · tarjetas con top arqueado (capilla) ----------
   Tono propio (--marmol, más claro que el --piedra de .servicios) para que
   se lea como un bloque distinto; la costura se disuelve con un degradado
   (piedra → marmol) en vez de un corte duro entre ambos fondos. */
.servicios { padding-bottom: 40px; }
.planes {
  position: relative;
  background: var(--piedra);
  padding-top: 40px;
}
.planes::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px;
  background: linear-gradient(to bottom, var(--marmol), var(--piedra));
  pointer-events: none; z-index: 0;
}
.planes > .wrap { position: relative; z-index: 1; }
.planes-grid { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }

/* Marco de cada tarjeta · grid de una celda para que la tarjeta llene el
   marco exacto en ambos ejes (align/justify-items:stretch, por defecto en
   grid). El brillo vive aquí como HERMANO de la tarjeta, no como hijo: así
   la tarjeta opaca lo cubre por completo y solo se asoma como un halo en
   el contorno exterior, nunca sobre el texto. */
.plan-card-frame { position: relative; z-index: 1; display: grid; }
.plan-card-frame:hover, .plan-card-frame:focus-within { z-index: 2; }

/* Luz cálida que sigue al cursor · oculta por defecto, main.js fija
   --mx/--my (px relativos a la propia luz) al mover el mouse sobre la tarjeta. */
.plan-card-glow {
  /* Caja MUY holgada: la luz completa su desvanecido natural mucho antes de
     llegar al borde de esta caja, así nunca "choca con una pared". */
  position: absolute; inset: -180px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
    rgba(230, 174, 79, 0.72) 0%,
    rgba(230, 174, 79, 0.30) 42%,
    transparent 70%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}
.plan-card-frame:hover .plan-card-glow,
.plan-card-frame:focus-within .plan-card-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .plan-card-glow { transition: opacity 200ms ease; }
}

.plan-card {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  background: var(--crema);
  border: 1px solid rgba(156, 123, 78, 0.55);
  border-radius: 50% 50% 14px 14px / 62px 62px 14px 14px;
  padding: 44px 28px 30px; text-align: center;
  box-shadow: 0 16px 40px -26px rgba(44, 40, 34, 0.5);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
/* Magnificación suave al pasar el cursor (poco pronunciada) */
.plan-card-frame:hover .plan-card {
  transform: scale(1.035);
  border-color: rgba(156, 123, 78, 0.85);
  box-shadow: 0 26px 52px -24px rgba(44, 40, 34, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .plan-card { transition: box-shadow 220ms ease, border-color 220ms ease; }
  .plan-card-frame:hover .plan-card { transform: none; }
}

.ico-plan { width: 40px; height: 40px; color: var(--taupe); display: block; margin: 0 auto 16px; }
.plan-card-titulo { font-size: 22px; font-weight: 500; margin: 0 0 8px; line-height: 1.2; }
.plan-card-tipo {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 14px;
}
.plan-card-precio {
  font-family: var(--f-display); font-size: 18px; color: var(--tinta);
  letter-spacing: 0.01em; margin: 0 0 4px;
}
.plan-card-precio strong { font-weight: 500; font-size: 40px; color: var(--taupe); }
/* Signo "$" con UNA sola raya (se lee como peso) · usa la fuente de cuerpo,
   no Playfair (que dibuja el $ con doble raya, estilo dólar). */
.cur { font-family: var(--f-body); font-weight: inherit; }
.plan-card-unidad { font-size: 16px; color: var(--tinta); }
.plan-card-cond {
  color: var(--tinta-70); font-size: 13.5px; line-height: 1.5;
  margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--linea-suave);
}
/* Badge "Opción recomendada" sobre el arco de la tarjeta central */
.plan-card-badge {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3; white-space: nowrap;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crema); background: var(--taupe);
  padding: 7px 16px; border-radius: 20px;
}
.plan-card-frame-rec .plan-card { padding-top: 60px; }
.plan-card-lista {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left; margin-bottom: 26px;
}

/* Encabezado centrado de la sección de planes (como el mockup) */
.planes-intro { text-align: center; margin-bottom: 40px; }
.planes-intro .eyebrow { margin-bottom: 0; }
.eyebrow-linea::after {
  content: ""; display: block; width: 40px; height: 1px; margin: 12px auto 16px;
  background: var(--taupe); opacity: 0.6;
}
.planes-intro .section-title { max-width: none; margin: 0 auto 14px; }
.planes-intro .section-lead { max-width: 52ch; margin: 0 auto; }
.plan-card-lista li { position: relative; padding-left: 20px; color: var(--tinta-70); font-size: 15.5px; line-height: 1.5; }
.plan-card-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 1px; background: var(--taupe);
}
.btn-cotizar {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; margin-top: auto;
  border: 1px solid var(--taupe); background: var(--taupe); color: var(--crema);
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.btn-cotizar:hover { background: var(--tinta); border-color: var(--tinta); }
.planes-nota {
  text-align: center; color: var(--tinta-70); font-style: italic;
  font-size: 15px; margin-top: 4px;
}

/* ---------- 5 · OBITUARIOS ---------- */
.obituarios { background: var(--marmol); }

/* ---------- Galería coverflow ---------- */
.obit-galeria { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.obit-escenario {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: 700px; overflow: hidden;
  perspective: 1400px;
}
.obit-nav {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--crema); color: var(--taupe);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.obit-nav:hover { background: var(--taupe); color: var(--crema); border-color: var(--taupe); }
.obit-nav svg { width: 22px; height: 22px; }

.obit-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.obit-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 1px solid var(--taupe); background: transparent; cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.obit-dot.is-active { background: var(--taupe); transform: scale(1.15); }

.obituario {
  position: absolute; left: 50%; top: 50%;
  width: min(400px, 86vw);
  border: 1px solid var(--linea);
  /* veta de mármol muy sutil, guiño a la esquela impresa */
  background:
    radial-gradient(150% 90% at 28% 0%, rgba(247,247,246,0.7), transparent 65%),
    linear-gradient(135deg, rgba(139,112,96,0.035) 0%, transparent 38%, rgba(26,26,26,0.02) 68%, transparent 100%),
    var(--marmol);
  padding: 26px 26px 26px; text-align: center;
  transform: translate(-50%, -50%);
  transition: transform 600ms cubic-bezier(.4, 0, .2, 1), opacity 600ms ease, filter 600ms ease;
  will-change: transform, opacity, filter;
}
/* Posiciones del coverflow (las asigna main.js con data-pos) */
.obituario[data-pos="0"]  { transform: translate(-50%, -50%) scale(1);              opacity: 1;    filter: none;        z-index: 30; cursor: default; }
.obituario[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-66%) scale(.8); opacity: .5;  filter: blur(3px);   z-index: 20; cursor: pointer; }
.obituario[data-pos="1"]  { transform: translate(-50%, -50%) translateX(66%)  scale(.8); opacity: .5;  filter: blur(3px);   z-index: 20; cursor: pointer; }
.obituario[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-108%) scale(.66); opacity: 0; filter: blur(6px); z-index: 10; pointer-events: none; }
.obituario[data-pos="2"]  { transform: translate(-50%, -50%) translateX(108%)  scale(.66); opacity: 0; filter: blur(6px); z-index: 10; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .obituario { transition: opacity 300ms ease; }
}
/* Filete interior finísimo: el doble marco del impreso */
.obituario::before {
  content: ""; position: absolute; inset: 11px;
  border: 1px solid var(--linea-suave); pointer-events: none;
}
.obit-provisional {
  display: inline-block;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--taupe);
  border: 1px dashed var(--taupe); padding: 4px 10px; margin-bottom: 24px;
}
.obit-foto {
  width: 118px; height: 148px; margin: 0 auto 16px;
  border-radius: 50%;                 /* óvalo como el retrato de la esquela */
  border: 1px solid var(--linea);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 10px, var(--linea-suave) 10px, var(--linea-suave) 11px),
    var(--piedra);
  display: flex; align-items: center; justify-content: center;
}
.obit-foto-label {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--taupe);
}
.obit-nombre { font-size: 22px; font-weight: 500; margin: 0 0 8px; line-height: 1.2; }
.obit-fechas {
  font-family: var(--f-body); color: var(--tinta-70);
  line-height: 1.5; margin-bottom: 14px; font-size: 15px;
}
.obit-servicio {
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  padding: 12px 0; margin-bottom: 14px;
}
.obit-servicio p { color: var(--tinta-70); font-size: 14.5px; line-height: 1.5; }
.obit-despedida {
  font-family: var(--f-display); font-size: 15px; letter-spacing: 0.03em;
  color: var(--tinta); margin-bottom: 14px;
}
.obit-despedida span { color: var(--taupe); font-size: 13px; letter-spacing: 0.08em; }
.obit-velacion {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe);
}
.obit-nota-edicion { color: var(--tinta-70); font-size: 14px; margin-top: 20px; text-align: center; }

/* Ajustes de la esquela generada por datos */
.obit-memoria {
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 14px;
}
.obit-foto { overflow: hidden; }
.obit-foto img { width: 100%; height: 100%; object-fit: cover; }
.obit-foto-ini { font-family: var(--f-display); font-size: 44px; color: var(--taupe); }
.obit-servicio + .obit-servicio { border-top: none; margin-top: -20px; }
.obit-ver-mas { display: none; }
.obituario[data-pos="0"] { cursor: pointer; }
.obituario[data-pos="0"] .obit-ver-mas {
  display: inline-block; margin-top: 14px;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe);
  border: 1px solid var(--taupe); border-radius: 4px; padding: 8px 16px;
}

/* ---------- Panel de detalles del servicio (drawer deslizante) ---------- */
.obit-panel { position: fixed; inset: 0; z-index: 120; }
.obit-panel[hidden] { display: none; }
.obit-panel-tras {
  position: absolute; inset: 0; background: rgba(44, 40, 34, 0.5);
  opacity: 0; transition: opacity 300ms ease;
}
.obit-panel.is-open .obit-panel-tras { opacity: 1; }
.obit-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 92vw); overflow-y: auto;
  background: var(--crema); box-shadow: -20px 0 60px -30px rgba(44, 40, 34, 0.6);
  padding: 34px 28px 44px; text-align: center;
  transform: translateX(100%); transition: transform 340ms cubic-bezier(.4, 0, .2, 1);
}
.obit-panel.is-open .obit-drawer { transform: none; }
.obit-drawer-cerrar {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 160ms ease;
}
.obit-drawer-cerrar:hover { background: var(--piedra); }
.obit-drawer-cerrar svg { width: 20px; height: 20px; }
.obit-drawer-eyebrow {
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--taupe); margin: 4px 0 18px;
}
.obit-drawer-foto {
  width: 108px; height: 134px; margin: 0 auto 16px; border-radius: 50%;
  border: 1px solid var(--linea); overflow: hidden; background: var(--piedra);
  display: flex; align-items: center; justify-content: center;
}
.obit-drawer-foto img { width: 100%; height: 100%; object-fit: cover; }
.obit-drawer-foto .obit-foto-ini { font-size: 30px; }
.obit-drawer-nombre { font-size: 22px; font-weight: 500; margin: 0 0 6px; line-height: 1.2; }
.obit-drawer-anios {
  font-family: var(--f-display); color: var(--taupe); letter-spacing: 0.08em; margin: 0 0 18px;
}
.obit-drawer-bloque { border-top: 1px solid var(--linea-suave); padding: 15px 0; }
.obit-drawer-sub {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 8px;
}
.obit-drawer-lineas p { color: var(--tinta-70); font-size: 15px; line-height: 1.5; margin: 0; }
.obit-drawer-fuerte { color: var(--tinta); font-weight: 500; }
.obit-drawer-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.obit-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--marmol); color: var(--tinta); text-decoration: none; text-align: left;
  font-family: var(--f-body); font-size: 15px; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.obit-btn .ico { width: 20px; height: 20px; flex: none; color: var(--taupe); }
.obit-btn:hover { background: var(--piedra); border-color: var(--taupe); }
.obit-btn-flores {
  background: var(--taupe); border-color: var(--taupe); color: var(--crema);
  font-family: var(--f-display); letter-spacing: 0.04em;
}
.obit-btn-flores .ico { color: var(--crema); }
.obit-btn-flores:hover { background: var(--tinta); border-color: var(--tinta); }
.obit-btn-compartir { margin-top: 12px; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .obit-panel-tras, .obit-drawer { transition: none; }
}

/* ---------- 6 · INSTALACIONES ---------- */
.instalaciones { background: var(--piedra); }
.galeria { display: grid; grid-template-columns: 1fr; gap: 14px; }
.g-item {
  margin: 0; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--linea); background: var(--piedra);
}
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-ancha { aspect-ratio: 16/9; }
.g-video { aspect-ratio: 16/9; background: var(--tinta); }

/* ---------- 7 · UBICACIÓN ---------- */
.ubicacion { background: var(--marmol); }
.datos-lista { display: flex; flex-direction: column; gap: 20px; margin: 8px 0 0; }
.dato dt {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 5px;
}
.dato dd { margin: 0; font-size: 18px; }
.dato dd a { text-decoration: none; }
.dato dd a:hover { color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; }
.mapa {
  margin-top: 30px; border: 1px solid var(--tinta);
  aspect-ratio: 4/3; overflow: hidden;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.25) contrast(1.02); }

/* ---------- 8 · FOOTER ---------- */
.site-footer {
  background: var(--tinta); color: var(--marmol);
  padding: 48px 0 calc(48px + var(--barra-h));   /* deja aire sobre la barra fija */
}
.footer-inner { display: flex; flex-direction: column; gap: 26px; }
.footer-nombre { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: 0.02em; }
.footer-lema { color: rgba(247,247,246,0.7); font-style: italic; margin-top: 4px; }
.footer-datos p { color: rgba(247,247,246,0.82); margin-bottom: 6px; font-size: 15px; }
.footer-datos a { color: var(--marmol); text-decoration: none; }
.footer-datos a:hover { color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { color: rgba(247,247,246,0.5); font-size: 13px; border-top: 1px solid rgba(247,247,246,0.16); padding-top: 22px; }

/* ============================================================
   EFECTO 4 · Barra fija inferior (aparece por opacidad)
   ============================================================ */
.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; gap: 1px;
  background: var(--tinta);
  height: var(--barra-h);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
}
.barra-fija.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s;
}
.barra-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--f-display); font-size: 15px; letter-spacing: 0.03em;
}
.barra-llamar { background: var(--tinta); color: var(--marmol); }
.barra-llamar:hover { background: var(--taupe); }
.barra-whats { background: var(--salvia); color: var(--marmol); }
.barra-whats:hover { filter: brightness(1.06); }

/* ---------- Botones flotantes de contacto (escritorio) ---------- */
.fabs {
  display: none;
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  flex-direction: column; gap: 12px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms;
}
.fabs.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 300ms ease, transform 300ms ease, visibility 0s;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tinta); background: var(--marmol); color: var(--tinta);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fab .ico { width: 22px; height: 22px; color: inherit; }
.fab:hover { background: var(--tinta); color: var(--marmol); }
.fab-wa { background: var(--salvia); border-color: var(--salvia); color: var(--marmol); }
.fab-wa:hover { background: var(--tinta); border-color: var(--tinta); color: var(--marmol); }

/* ============================================================
   Íconos lineales · el trazo hereda color de currentColor
   ============================================================ */
.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--taupe);
}

/* ---------- Franja de datos clave (bajo el hero) ---------- */
.franja { background: var(--tinta); color: var(--marmol); }
.franja-lista { display: grid; grid-template-columns: 1fr 1fr; }
.franja-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 30px 22px;
  border-top: 1px solid rgba(247, 247, 246, 0.14);
}
.franja-item:nth-child(1), .franja-item:nth-child(2) { border-top: none; }
.franja-item:nth-child(odd) { border-right: 1px solid rgba(247, 247, 246, 0.14); }
.franja-item .ico { width: 30px; height: 30px; margin-bottom: 6px; }
.franja-titulo { font-family: var(--f-display); font-size: 18px; letter-spacing: 0.01em; line-height: 1.25; }
.franja-texto { font-size: 14px; line-height: 1.5; color: rgba(247, 247, 246, 0.6); }

/* ---------- Íconos en tarjetas de servicio y datos ---------- */
.card h3 { display: flex; align-items: center; gap: 11px; }
.ico-card { width: 22px; height: 22px; }
.card-destacada h3 { flex-wrap: wrap; }
.dato dt { display: flex; align-items: center; gap: 8px; }
.ico-dt { width: 16px; height: 16px; }

/* ---------- Footer enriquecido ---------- */
.footer-tel {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--f-display); font-size: 20px; letter-spacing: 0.03em;
  text-decoration: none; color: var(--marmol);
  transition: color 180ms ease;
}
.footer-tel .ico { width: 18px; height: 18px; }
.footer-tel:hover { color: var(--taupe); }
.footer-24 { margin-top: 8px; color: rgba(247, 247, 246, 0.6); font-size: 14px; }
.footer-col-titulo {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li { color: rgba(247, 247, 246, 0.82); font-size: 15px; }
.footer-col a { color: rgba(247, 247, 246, 0.82); text-decoration: none; }
.footer-col a:hover { color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; }

/* Fondos de sección (tema cálido) */
.primeras, .obituarios, .ubicacion { background: var(--marmol); }
.servicios, .instalaciones { background-color: var(--piedra); }

/* ============================================================
   ESCRITORIO · derivado del móvil
   ============================================================ */
@media (min-width: 720px) {
  .section { padding: 88px 0; }
  .wrap { padding: 0 40px; }

  .servicios { padding-bottom: 60px; }
  .planes { padding-top: 60px; }
  .planes::before { height: 72px; }

  .hero-inner { padding-top: 80px; padding-bottom: 96px; }
  .phone-block {
    flex-direction: row; align-items: center; justify-content: space-between;
    max-width: 460px;
  }

  .pasos { flex-direction: row; align-items: start; gap: 0; margin-top: 20px; }
  .paso {
    flex: 1; gap: 14px;
    padding: 34px 34px 34px 0;
    border-bottom: none;
  }
  .paso + .paso { padding-left: 34px; border-left: 1px solid var(--linea); }
  .paso-num { font-size: 44px; }

  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .prevision { padding-top: 66px; padding-bottom: 70px; }
  .prevision-inner {
    display: grid; grid-template-columns: 0.78fr 1.42fr; gap: 44px; align-items: center;
    max-width: 1300px;
  }
  .planf-panel { padding: 40px 40px 34px; }
  /* Las 5 columnas caben sin deslizar (rejilla, no scroll) */
  .planf-grid { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .planf-col { flex: none; }
  .planf-col-rec { margin: 0; }
  .obit-escenario { height: 660px; }

  .franja-lista { grid-template-columns: repeat(4, 1fr); }
  .franja-item { border-top: none; }
  .franja-item:nth-child(odd) { border-right: none; }
  .franja-item + .franja-item { border-left: 1px solid rgba(247, 247, 246, 0.14); }

  /* Planes: tres tarjetas de igual altura */
  .planes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px; align-items: stretch;
  }

  /* Galería a dos columnas; las anchas ocupan todo */
  .galeria { grid-template-columns: 1fr 1fr; }
  .g-ancha { grid-column: 1 / -1; }

  /* Hero acotado para que el marco no deje un vacío a la derecha */
  .hero-inner { max-width: 960px; }
}

@media (min-width: 960px) {
  .site-nav { display: flex; align-items: center; gap: 4px; }
  .cards { grid-template-columns: repeat(3, 1fr); }

  .ubicacion-inner {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center;
  }
  .mapa { margin-top: 0; aspect-ratio: auto; height: 420px; }

  .footer-inner {
    display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 34px 40px;
    align-items: start;
  }
  .footer-copy { grid-column: 1 / -1; }

  /* La barra fija es un patrón móvil; en escritorio los botones flotantes */
  .barra-fija { display: none; }
  .fabs { display: flex; }
  .site-footer { padding-bottom: 56px; }
}

/* ============================================================
   Revelado sereno al entrar · una sola vez, un bloque por sección
   Lento y contenido: se asienta, no "brinca". Solo con JS activo.
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.js .reveal.is-in,
.reveal-ready .reveal {          /* failsafe: nunca dejar contenido oculto */
  opacity: 1;
  transform: none;
}

/* ============================================================
   Movimiento reducido · solo bloquea lo intrusivo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cover-chevron { animation: none; }
}

/* ============================================================
   PÁGINA DE FLORERÍA (floreria.html) · hero + catálogo + panel
   ============================================================ */
.floreria-hero { position: relative; overflow: hidden; background: var(--marmol); }
.floreria-hero-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 80% at 82% 18%, rgba(156,123,78,0.12), transparent 58%), var(--marmol); }
.floreria-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 40px; padding-bottom: 34px; }
.floreria-hero-texto { max-width: 42ch; }
.fh-badge { display: inline-block; font-family: var(--f-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); border: 1px solid var(--taupe); border-radius: 20px; padding: 6px 14px; margin-bottom: 16px; }
.floreria-hero-title { font-size: clamp(30px, 6vw, 48px); font-weight: 500; line-height: 1.12; margin: 0 0 14px; }
.floreria-hero-sub { color: var(--tinta-70); font-size: 17px; margin: 0 0 12px; }
.floreria-hero-meta { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin: 0; }
.floreria-hero-logo { margin: 10px 0 0; display: flex; align-items: center; min-height: 40px; }
.floreria-hero-logo img { max-height: 80px; width: auto; }
.floreria-hero-orn { position: relative; z-index: 1; text-align: center; color: var(--taupe); opacity: 0.55; padding-bottom: 6px; }
.floreria-hero-orn .ico { width: 26px; height: 26px; }

.floreria-catalogo { background: var(--crema); }
.floreria-aviso { background: rgba(71,64,58,0.10); border: 1px solid rgba(71,64,58,0.28); color: var(--salvia); border-radius: 10px; padding: 14px 18px; margin: 4px 0 26px; font-size: 15px; }

.arreglos-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
.arreglo-card { display: flex; flex-direction: column; background: var(--marmol); border: 1px solid var(--linea-suave); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -24px rgba(44,40,34,0.5); transition: transform 200ms ease, box-shadow 200ms ease; }
.arreglo-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(44,40,34,0.55); }
.arreglo-foto { margin: 0; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(156,123,78,0.06) 10px, rgba(156,123,78,0.06) 11px), var(--piedra); }
.arreglo-foto img { width: 100%; height: 100%; object-fit: cover; }
.fp-ph { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); text-align: center; padding: 0 10px; }
.arreglo-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.arreglo-nombre { font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.arreglo-desc { color: var(--tinta-70); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.arreglo-precio { font-family: var(--f-display); font-size: 24px; color: var(--taupe); margin: 0 0 16px; }
.arreglo-moneda { font-size: 13px; color: var(--tinta-70); letter-spacing: 0.06em; }
.arreglo-btn { margin-top: auto; min-height: 48px; border: 1px solid var(--taupe); background: var(--taupe); color: var(--crema); font-family: var(--f-display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.arreglo-btn:hover { background: var(--tinta); border-color: var(--tinta); }

.floreria-vacio { text-align: center; padding: 44px 20px; color: var(--tinta-70); }
.floreria-vacio p { margin: 0 0 8px; font-size: 16px; }
.fp-wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 22px; border: 1px solid var(--taupe); border-radius: 8px; color: var(--taupe); text-decoration: none; font-family: var(--f-display); letter-spacing: 0.04em; }
.fp-wa:hover { background: var(--taupe); color: var(--crema); }
.fp-wa .ico { width: 20px; height: 20px; }

.pasos-entrega { display: grid; grid-template-columns: 1fr; gap: 16px; border-top: 1px solid var(--linea-suave); padding-top: 30px; }
.pe-item { display: flex; align-items: center; gap: 14px; }
.pe-num { font-family: var(--f-display); font-size: 26px; color: var(--taupe); flex: none; width: 34px; line-height: 1; }
.pe-item p { margin: 0; font-size: 16px; }
.pe-nota { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--tinta-70); font-size: 14px; margin: 24px 0 0; text-align: center; }
.pe-nota .ico { width: 18px; height: 18px; color: var(--taupe); flex: none; }
.floreria-disclaimer-legal { text-align: center; color: var(--taupe); font-size: 13px; line-height: 1.6; margin: 26px auto 0; max-width: 62ch; }

.floreria-volver-wrap { text-align: center; padding: 30px 22px 54px; background: var(--crema); }
.btn-volver { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border: 1px solid var(--linea); border-radius: 6px; color: var(--tinta); text-decoration: none; font-family: var(--f-display); font-size: 14px; letter-spacing: 0.04em; transition: background 160ms ease, border-color 160ms ease; }
.btn-volver:hover { background: var(--piedra); border-color: var(--taupe); }
.florerias-volver { text-align: center; margin-top: 34px; }
.floreria-noexiste { text-align: center; padding: 120px 22px; }
.floreria-noexiste h1 { font-size: 32px; margin: 0 0 12px; }

/* Panel de contacto (dentro de .obit-drawer) */
.fp-titulo { font-size: 20px; }
.fp-minicard { display: flex; gap: 14px; align-items: center; text-align: left; background: var(--marmol); border: 1px solid var(--linea-suave); border-radius: 10px; padding: 12px; margin: 14px 0 20px; }
.fp-mini-foto { margin: 0; width: 72px; height: 56px; flex: none; border-radius: 8px; overflow: hidden; background: var(--piedra); display: flex; align-items: center; justify-content: center; }
.fp-mini-foto img { width: 100%; height: 100%; object-fit: cover; }
.fp-mini-precio { font-family: var(--f-display); color: var(--taupe); font-size: 18px; margin: 0 0 2px; }
.fp-mini-floreria { color: var(--taupe); font-size: 13px; margin: 0; }
.fp-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.fp-campo { display: flex; flex-direction: column; gap: 6px; }
.fp-campo label { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.04em; color: var(--tinta); }
.fp-campo input, .fp-campo select, .fp-campo textarea { font-family: var(--f-body); font-size: 15px; color: var(--tinta); background: var(--marmol); border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; width: 100%; }
.fp-campo textarea { min-height: 72px; resize: vertical; }
.fp-campo input:focus, .fp-campo select:focus, .fp-campo textarea:focus { outline: none; border-color: var(--taupe); }
.fp-msg { display: none; color: var(--salvia); font-size: 12.5px; }
.fp-campo.fp-error input, .fp-campo.fp-error select, .fp-campo.fp-error textarea { border-color: var(--salvia); }
.fp-campo.fp-error .fp-msg { display: block; }
.fp-contador { color: var(--tinta-70); font-size: 12px; text-align: right; }
.fp-enviar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-top: 6px; border: none; background: var(--taupe); color: var(--crema); font-family: var(--f-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 8px; cursor: pointer; transition: background 160ms ease; }
.fp-enviar:hover { background: var(--tinta); }
.fp-enviar .ico { width: 20px; height: 20px; color: var(--crema); }

@media (min-width: 720px) {
  .floreria-hero-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; padding-top: 48px; padding-bottom: 44px; }
  .arreglos-grid { grid-template-columns: 1fr 1fr; }
  .pasos-entrega { grid-template-columns: repeat(4, 1fr); }
  .pe-item { flex-direction: column; text-align: center; gap: 8px; }
}
@media (min-width: 960px) {
  .arreglos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   INSTALACIONES · teaser (home) + página instalaciones.html
   ========================================================= */

/* Foto genérica + marcador cuando falta la imagen (onerror → .is-empty) */
.inst-foto { margin: 0; background: var(--piedra); position: relative; overflow: hidden; }
.inst-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inst-foto.is-empty::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 50% 42%, rgba(156,123,78,0.10), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%239C7B4E' stroke-width='1' stroke-opacity='0.55'%3E%3Cpath d='M3 21l18 0'/%3E%3Cpath d='M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3Cpath d='M6 21v-7m-2 2l8 -8l8 8m-2 -2v7'/%3E%3C/svg%3E") center 40% / 46px no-repeat;
}
.inst-foto.is-empty::after {
  content: attr(data-fallback); position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center; color: var(--taupe); font-family: var(--f-display);
  font-size: 12px; letter-spacing: 0.06em; padding: 0 14px;
}

/* Teaser en el panel principal */
.instalaciones-teaser { background: var(--piedra); }
.inst-teaser-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.inst-teaser-texto .section-title { max-width: 15ch; font-size: clamp(30px, 5.4vw, 46px); }
.inst-teaser-texto .section-lead { max-width: 40ch; }
.inst-teaser-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--f-display); font-size: 15px; letter-spacing: 0.02em;
  color: var(--taupe); text-decoration: none;
}
.inst-teaser-link span { transition: transform 160ms ease; }
.inst-teaser-link:hover span { transform: translateX(4px); }
.inst-teaser-foto {
  position: relative; display: block; text-decoration: none;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(44, 40, 34, 0.55);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.inst-teaser-foto .inst-foto { background: var(--marmol); }
.inst-teaser-foto .inst-foto { aspect-ratio: 16 / 11; }
.inst-teaser-foto:hover { transform: translateY(-3px); box-shadow: 0 40px 70px -40px rgba(44, 40, 34, 0.6); }
.inst-teaser-hint {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; background: rgba(251, 247, 239, 0.92); color: var(--tinta);
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.03em;
  box-shadow: 0 10px 26px -14px rgba(44, 40, 34, 0.55);
}
.inst-teaser-hint .ico { width: 16px; height: 16px; color: var(--taupe); }
@media (min-width: 860px) {
  .inst-teaser-inner { grid-template-columns: 0.82fr 1.18fr; gap: 50px; }
}

/* Página instalaciones.html */
.inst-head { text-align: center; margin-bottom: 34px; }
.inst-head .section-title { max-width: none; margin-left: auto; margin-right: auto; }
.inst-head .section-lead { max-width: 56ch; margin-left: auto; margin-right: auto; margin-bottom: 0; }

.inst-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.inst-card {
  display: flex; flex-direction: column; background: var(--crema);
  border: 1px solid var(--linea-suave); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px -34px rgba(44, 40, 34, 0.42);
}
.inst-card .inst-foto { aspect-ratio: 16 / 10; background: var(--marmol); }
.inst-card-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.inst-card-nombre { font-family: var(--f-display); font-weight: 500; font-size: 20px; color: var(--tinta); margin: 0; }
.inst-card-desc { color: var(--tinta-70); font-size: 15px; margin: 0; }
.inst-ver {
  align-self: flex-start; margin-top: 8px; font-family: var(--f-display);
  font-size: 13px; letter-spacing: 0.04em; color: var(--taupe); text-decoration: none;
  border-bottom: 1px solid rgba(156, 123, 78, 0.4); padding-bottom: 2px;
  transition: border-color 160ms ease;
}
.inst-ver:hover { border-color: var(--taupe); }

.inst-otros-sec { background: var(--piedra); }
.inst-otros-sec .inst-card { background: var(--marmol); }
.inst-otros-sec .inst-card .inst-foto { aspect-ratio: 4 / 3; background: var(--crema); }

/* CTA final */
.inst-cta { text-align: center; }
.inst-cta-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 4.4vw, 38px); margin: 0 0 10px; }
.inst-cta-sub { color: var(--tinta-70); margin: 0 auto 24px; max-width: 48ch; }
.inst-cta-acc { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.inst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 28px; border-radius: 8px; text-decoration: none;
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--taupe); background: var(--marmol); color: var(--taupe);
  transition: background 160ms ease, color 160ms ease;
}
.inst-btn .ico { width: 19px; height: 19px; }
.inst-btn-tel:hover { background: var(--taupe); color: var(--crema); }
.inst-btn-wa { background: var(--salvia); border-color: var(--salvia); color: var(--sobre-salvia); }
.inst-btn-wa:hover { background: var(--tinta); border-color: var(--tinta); }
.inst-volver { text-align: center; margin-top: 40px; }

@media (min-width: 760px) {
  .inst-grid-capillas { grid-template-columns: repeat(2, 1fr); }
  .inst-grid-otros { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   PLANES · página completa (planes.html)
   ========================================================= */
.planes-todos { background: var(--marmol); }
.planes-modelos { display: grid; grid-template-columns: 1fr; gap: 18px; }
.planes-modelos .planf-modelo { margin-bottom: 0; }
.planes-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
@media (min-width: 800px) {
  .planes-modelos { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* =========================================================
   MÓVIL · ajustes puntuales (≤ 640 px)
   Objetivo: misma distribución que en compu, sin que el texto
   se corte ni haga falta hacer zoom.
   ========================================================= */
@media (max-width: 640px) {
  /* overflow-x: clip (no hidden) para no romper position:sticky del hero */
  html, body { overflow-x: clip; }

  /* --- Contacto rápido: en móvil también usamos los circulitos flotantes
     (mismo patrón que compu). La barra negra ocupaba mucho espacio vertical. */
  .barra-fija { display: none; }
  .fabs {
    display: flex;
    right: 14px; bottom: 18px;
    gap: 10px;
  }
  .fab { width: 48px; height: 48px; }
  .fab .ico, .fab svg { width: 22px; height: 22px; }
  .site-footer { padding-bottom: 32px; }

  /* --- Header móvil: dos filas · logo grande arriba, nav horizontal debajo.
     El botón "Llamar" se retira porque el círculo flotante cubre esa acción. */
  .header-inner {
    position: relative;
    display: flex; flex-direction: column;
    align-items: stretch; gap: 6px;
    min-height: 0; padding: 10px 0 4px;
  }
  .wordmark { align-self: flex-start; }
  .wordmark-logo { height: 62px; }
  .header-call { display: none; }
  .site-nav {
    display: flex;
    flex: none; min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 26px;
    /* Fade en el borde derecho: pista visual de que hay más para deslizar */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex: none;
    padding: 6px 12px;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .site-nav a + a { border-left: 1px solid var(--linea); }
  .site-nav a::after { display: none; }
  /* Chevron animado en el borde derecho del nav (segunda fila) */
  .header-inner::after {
    content: "›";
    position: absolute; right: 0; bottom: 4px;
    width: 22px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1;
    color: var(--tinta); background: var(--marmol);
    pointer-events: none;
    animation: navHint 1.6s ease-in-out infinite;
  }
  @keyframes navHint {
    0%, 100% { transform: translateX(0);   opacity: 0.7; }
    50%      { transform: translateX(4px); opacity: 1;   }
  }
  @media (prefers-reduced-motion: reduce) {
    .header-inner::after { animation: none; opacity: 0.7; }
  }
  /* Al saltar a un ancla, dejar espacio para el header sticky más alto */
  [id] { scroll-margin-top: 120px; }

  /* En la home, el header sticky se mantiene oculto durante la cinemática
     de entrada. El JS agrega/quita `.pre-hero` según el scroll. */
  .site-header.pre-hero {
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
  }
  .site-header {
    transition: opacity 320ms ease, transform 320ms ease;
  }

  /* --- Obituarios: carrusel de una sola card ---
     En compu se ven las esquelas laterales borrosas; en móvil
     eso comprime el escenario y corta el texto. Aquí las
     laterales se sacan por completo y las flechas van debajo. */
  .obit-galeria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "esc  esc"
      "prev next";
    row-gap: 18px;
    margin-top: 20px;
  }
  .obit-escenario {
    grid-area: esc;
    height: auto; min-height: 700px;
    perspective: none;
  }
  .obit-nav {
    position: static;
    justify-self: center;
    width: 46px; height: 46px;
  }
  .obit-prev { grid-area: prev; }
  .obit-next { grid-area: next; }

  .obituario {
    width: min(360px, calc(100vw - 44px));
    padding: 24px 20px;
  }
  .obituario[data-pos="-1"],
  .obituario[data-pos="1"],
  .obituario[data-pos="-2"],
  .obituario[data-pos="2"] {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0; filter: none; pointer-events: none;
  }

  .obit-dots { margin-top: 22px; }

  .obit-foto { width: 132px; height: 165px; }
  .obit-nombre { font-size: 22px; }
  .obit-fechas { font-size: 15px; }
  .obit-servicio p { font-size: 14.5px; }

  /* --- Drawer de detalles: que respire mejor en el celular --- */
  .obit-drawer { padding: 28px 20px 90px; }
}