/* ==========================================================================
   Andy Flowers — Hoja de estilos principal
   Oxnard, CA · Sitio bilingüe ES/EN
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables y base
   -------------------------------------------------------------------------- */
:root{
  /* Paleta de marca */
  --ink:#241F19;
  --forest:#233B2E;
  --forest-2:#1B2E23;
  --ivory:#FAF7F0;
  --ivory-2:#F1ECE0;
  --gold:#B08D54;
  --rose:#B15C57;
  --blush:#E8D5D2;
  --grey:#6E6558;
  --line:#E3DCC9;
  --white:#FFFFFF;

  /* Tipografía */
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-script:'Pinyon Script', 'Brush Script MT', cursive;

  /* Medidas */
  --wrap:1200px;
  --pad:32px;
  --radius:0px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.15;
  margin:0;
}

p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

/* Accesibilidad: foco visible y coherente */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   2. Utilidades
   -------------------------------------------------------------------------- */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:600;
}

.section{ padding:72px 0; }
.section--tight{ padding:56px 0; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:36px;
  padding-bottom:14px;
  border-bottom:2px solid var(--ink);
}
.section-head h2{ font-size:1.9rem; font-weight:600; }
.section-head .section-link{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.section-head .section-link:hover{ color:var(--rose); }

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 26px;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{ background:var(--forest); color:var(--white); }
.btn--primary:hover{ background:var(--forest-2); }

.btn--whatsapp{ background:#2E7D5B; color:var(--white); }
.btn--whatsapp:hover{ background:#256B4D; }

/* Variante del hero: más limpia y ligera, en línea con la referencia
   (contorno en vez de relleno sólido, para no competir con el botón principal) */
.hero-actions .btn--whatsapp{
  background:transparent;
  color:#2E7D5B;
  border-color:#2E7D5B;
}
.hero-actions .btn--whatsapp:hover{ background:#2E7D5B; color:var(--white); }

.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--ivory); }

.btn--outline-light{ background:transparent; color:var(--ivory); border-color:#C9D3C6; }
.btn--outline-light:hover{ background:var(--ivory); color:var(--forest); }

.btn--sm{ padding:10px 18px; font-size:0.72rem; }

.btn svg{ width:18px; height:18px; flex:none; }

/* --------------------------------------------------------------------------
   3. Espacios de fotografía (sin imágenes externas)
   Sustituir por: <img src="assets/images/archivo.jpg" alt="...">
   -------------------------------------------------------------------------- */
.photo-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  text-align:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(176,141,84,0.05) 0 12px,
      transparent 12px 24px),
    var(--ivory-2);
  border:1px dashed var(--line);
  color:var(--grey);
  overflow:hidden;
}
.photo-slot__icon{
  font-size:1.5rem;
  color:var(--gold);
  line-height:1;
}
.photo-slot__label{
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  max-width:24ch;
}
.photo-slot__note{
  font-size:0.7rem;
  font-style:italic;
  color:var(--grey);
  opacity:0.75;
}

.photo-slot--hero{ aspect-ratio:4/3; min-height:360px; border-left:none; border-top:none; border-bottom:none; }
.photo-slot--square{ aspect-ratio:1/1.05; }
.photo-slot--portrait{ aspect-ratio:0.8/1; }
.photo-slot--wide{ aspect-ratio:16/10; }
.photo-slot--map{ aspect-ratio:4/3; min-height:320px; background:var(--ivory-2); }

/* Variante sobre fondo oscuro (sección condolencias) */
.photo-slot--dark{
  background:rgba(255,255,255,0.05);
  border-color:rgba(201,211,198,0.35);
  color:#C9D3C6;
}
.photo-slot--dark .photo-slot__icon{ color:#C9A45C; }

/* Texto pendiente de redacción */
.placeholder-copy{
  color:var(--grey);
  font-style:italic;
  padding:14px 16px;
  border-left:2px solid var(--gold);
  background:var(--ivory-2);
  font-size:0.92rem;
}

/* --------------------------------------------------------------------------
   4. Selector de idioma (EN | ES) — minimalista, sin píldora ni fondo.
   Vive dentro del header: una copia en #navCta (escritorio, junto a la
   lupa) y otra dentro de #navLinks (solo visible en el menú móvil
   abierto). La franja superior que antes contenía el selector, el aviso
   de entrega, la frase de marca y los iconos sociales fue eliminada por
   completo — no queda ningún resto de ella.
   -------------------------------------------------------------------------- */
.lang-select{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}
.lang-select__icon{ width:15px; height:15px; color:var(--grey); flex:none; }
.lang-select__btn{
  background:none;
  border:none;
  padding:2px 1px 5px;
  margin:0;
  font-family:var(--font-body);
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--grey);
  cursor:pointer;
  position:relative;
  line-height:1;
}
.lang-select__btn[aria-pressed="true"]{ color:var(--ink); }
.lang-select__btn[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:var(--forest);
}
.lang-select__sep{
  width:1px;
  height:12px;
  background:var(--line);
  flex:none;
}

/* En escritorio, .nav-links se muestra como menú horizontal normal: la
   copia del selector que vive ahí (para cuando el menú móvil está
   abierto) permanece oculta. La copia "real" de escritorio es la de
   #navCta, que nunca se oculta con esta regla. */
.nav-links .lang-select{ display:none; }

/* --------------------------------------------------------------------------
   5. Cabecera y navegación
   -------------------------------------------------------------------------- */
.site-header{
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  position:relative;
}
.site-header .nav{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:var(--wrap);
  margin:0 auto;
  padding:11px var(--pad);
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
  flex:none;
  text-decoration:none;
}
.brand__script{
  font-family:var(--font-script);
  font-size:3.1rem;
  color:var(--ink);
}
.brand__sub{
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.3em;
  color:var(--gold);
  margin-top:2px;
  margin-left:3px;
}

/* El menú principal ocupa el espacio disponible entre el logo y el bloque
   de la derecha, y centra sus enlaces dentro de ese espacio ("menú
   centrado" independientemente del ancho del logo o de los botones). */
.nav-links{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.nav-links a{
  text-decoration:none;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:1.5px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover{ border-bottom-color:var(--gold); }
.nav-links a[aria-current="page"]{ border-bottom-color:var(--forest); }

.nav-cta{ flex:none; display:flex; align-items:center; gap:14px; }

.nav-search{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  background:var(--ivory-2);
  border:1px solid var(--line);
  color:var(--forest);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.nav-search:hover{ border-color:var(--gold); color:var(--rose); }
.nav-search svg{ width:16px; height:16px; }

.nav-phone{
  font-size:0.86rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.nav-phone:hover{ color:var(--rose); }

.menu-btn{
  display:none;
  background:none;
  border:1px solid var(--line);
  font-size:1.3rem;
  line-height:1;
  color:var(--forest);
  padding:8px 12px;
  cursor:pointer;
}

@media (max-width:1200px){
  .nav-links{ gap:16px; font-size:0.72rem; }
}

@media (max-width:1080px){
  .nav-links{ gap:14px; font-size:0.68rem; }
  .brand__script{ font-size:2.7rem; }
  .nav-phone{ display:none; }
  .nav-search{ display:none; }
}

@media (max-width:920px){
  /* Logo centrado horizontalmente, hamburguesa fija a la derecha: grid de
     3 columnas (1fr/auto/1fr) en vez de flex, para que el logo quede
     centrado respecto al ancho total del header y no respecto al espacio
     libre entre elementos (que ya no existen: nav-links/nav-cta se
     ocultan en este breakpoint). */
  .site-header .nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
  }
  .brand{ grid-column:2; justify-self:center; }
  .menu-btn{ grid-column:3; justify-self:end; }
  .nav-links, .nav-cta{ display:none; }
  .menu-btn{ display:block; }

  /* Panel desplegable único: enlaces + WhatsApp apilados en el mismo
     flujo (sin position:absolute independiente en cada bloque), para que
     el botón de WhatsApp nunca quede tapado por la lista de enlaces. */
  .nav-links.is-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    position:absolute;
    top:100%; left:0; right:0;
    z-index:60;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    padding:24px var(--pad) 22px;
    box-shadow:0 12px 24px rgba(36,31,25,0.08);
  }
  .nav-cta.is-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    position:absolute;
    top:100%; left:0; right:0;
    z-index:59;
    margin-top:var(--mobile-menu-height, 290px);
    padding:18px var(--pad) 26px;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(36,31,25,0.08);
  }
  .nav-cta.is-open .nav-search{ display:none; }
  .nav-cta.is-open .nav-phone{ font-size:0.95rem; }
  /* En móvil solo debe verse UN selector de idioma (el de .nav-links,
     justo después de Contacto). La copia de .nav-cta es exclusiva de
     escritorio, junto a la lupa. */
  .nav-cta.is-open .lang-select{ display:none; }

  /* Selector ES/EN dentro del menú móvil: último elemento de la lista de
     enlaces, después de "Contacto" y antes del bloque de WhatsApp
     (.nav-cta.is-open, que viene justo debajo en el flujo). En este rango
     (hasta 920px) el fondo del dropdown sigue siendo claro, así que usa
     los colores por defecto de .lang-select (oscuro=activo, gris=inactivo,
     línea verde bosque). */
  .nav-links.is-open .lang-select{
    display:flex;
    align-self:center;
    margin:10px 0 4px;
  }
}

@media (max-width:480px){
  /* Logo ~12% más grande que antes (2.5rem/0.68rem), manteniendo el
     centrado ya existente en el header móvil (ver grid en @media 920px). */
  .brand__script{ font-size:2.8rem; }
  .brand__sub{ font-size:0.76rem; letter-spacing:0.26em; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(115deg, var(--ivory) 0%, var(--ivory) 40%, #FBF2EE 64%, #F6E8E2 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:44% 56%; /* texto ~44% / composición floral ~56% */
  align-items:stretch;
  min-height:clamp(440px, 46vw, 470px);
}
.hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px var(--pad) 28px max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
}
.hero-copy .eyebrow{ margin-bottom:12px; }
.hero-copy .eyebrow .dot{ margin:0 9px; color:var(--gold); }

.hero-title{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  font-weight:600;
  margin-bottom:2px;
}
.hero-script{
  display:block;
  font-family:var(--font-script);
  font-size:clamp(2rem, 3.6vw, 2.6rem);
  font-weight:400;
  color:var(--rose);
  line-height:1;
  margin-bottom:14px;
}
.hero-lede{
  color:var(--grey);
  max-width:38ch;
  margin-bottom:20px;
}
.hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Duplicado de los botones del hero, oculto salvo en móvil (ver
   @media max-width:900px más abajo): permite que en móvil los botones
   aparezcan DESPUÉS del ramo sin alterar el orden/DOM de escritorio,
   donde este bloque nunca se muestra y el original (dentro de
   .hero-copy) sigue siendo el único visible. */
.hero-actions--mobile{ display:none; }
.hero-actions .btn--primary span:last-child{ transition:transform .18s ease; }
.hero-actions .btn--primary:hover span:last-child{ transform:translateX(3px); }

/* En escritorio/tablet los dos botones del hero van siempre en una sola
   fila: se reduce ligeramente su tamaño para que quepan lado a lado. */
@media (min-width:901px){
  .hero-actions{ flex-wrap:nowrap; }
  .hero-actions .btn{ padding:13px 20px; font-size:0.76rem; white-space:nowrap; }
}
@media (min-width:901px) and (max-width:1180px){
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ padding:12px 15px; font-size:0.7rem; }
}

/* --------------------------------------------------------------------------
   Composición floral del hero
   Una sola imagen con transparencia (portada-transparente.png) en dos capas
   dentro de .hero-photo:
     1. __bloom — la misma imagen, mucho más grande, muy desenfocada
                  (blur) y en baja opacidad: solo crea ambiente floral,
                  nunca se percibe como una segunda fotografía definida.
     2. __img   — el ramo nítido y protagonista. Como el PNG ya tiene fondo
                  transparente, se muestra tal cual: sin mask-image, sin
                  mix-blend-mode, sin borde y sin caja alrededor — se ve
                  directamente la silueta real del arreglo.
   -------------------------------------------------------------------------- */
.hero-photo{
  position:relative;
  z-index:0; /* crea un contexto de apilamiento propio para las manchas de fondo */
  height:100%;
  overflow:visible;
}

/* Manchas florales suaves y orgánicas detrás del ramo (solo CSS: gradientes
   radiales + blur, en varias capas superpuestas), para que el fondo se
   sienta romántico y con profundidad en vez de un degradado plano: rosa
   difuso dominante, halos cremosos/blancos y un toque muy sutil de verde. */
.hero-photo::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(ellipse 65% 60% at 78% 30%, rgba(214,110,138,0.26) 0%, transparent 70%),
    radial-gradient(ellipse 70% 65% at 45% 62%, rgba(240,215,210,0.4) 0%, transparent 72%),
    radial-gradient(ellipse 60% 55% at 15% 25%, rgba(255,255,255,0.32) 0%, transparent 68%);
  filter:blur(60px);
  z-index:-1;
  pointer-events:none;
}
.hero-photo::after{
  content:"";
  position:absolute;
  bottom:-22%;
  left:-20%;
  width:52%;
  aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(178,200,172,0.18) 0%, rgba(221,229,210,0.08) 50%, transparent 75%);
  filter:blur(55px);
  z-index:-1;
  pointer-events:none;
}

.hero-photo__bloom{
  position:absolute;
  left:56%;
  top:42%;
  height:230%;
  width:auto;
  max-width:none;
  transform:translate(-50%, -50%) scale(1.7);
  filter:blur(34px) saturate(1.2);
  opacity:0.48;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

/* Segunda copia del ramo, desplazada/rotada y a otra escala: junto con
   .hero-photo__bloom simula varias "flores desenfocadas" a distintas
   profundidades en vez de un único halo, para un fondo floral más real. */
.hero-photo__bloom2{
  position:absolute;
  left:20%;
  top:28%;
  height:130%;
  width:auto;
  max-width:none;
  transform:translate(-50%, -50%) rotate(-12deg) scale(1.4);
  filter:blur(24px) saturate(1.1);
  opacity:0.32;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

/* Tercera copia, muy borrosa y a muy baja definición, colocada cerca del
   borde derecho y hacia la zona inferior: refuerza la sensación de flores
   reales fuera de foco justo donde la referencia las muestra, sin llegar
   a leerse como una silueta reconocible (blur muy fuerte + opacidad baja). */
.hero-photo__bloom3{
  position:absolute;
  left:88%;
  top:80%;
  height:150%;
  width:auto;
  max-width:none;
  transform:translate(-50%, -50%) rotate(9deg) scale(1.3);
  filter:blur(46px) saturate(1.05);
  opacity:0.22;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

.hero-photo__img{
  position:absolute;
  right:15%;
  bottom:-30%;
  height:143%;
  width:auto;
  max-width:none;
  z-index:2;
  /* Sin mask-image, sin mix-blend-mode, sin borde: el PNG ya trae la
     transparencia real, así que el drop-shadow sigue la silueta del ramo
     en vez de un rectángulo. */
  filter:drop-shadow(0 22px 28px rgba(36,31,25,0.18));
  animation:heroFloat 7s ease-in-out infinite;
  will-change:transform;
}

/* Texto decorativo a la derecha del arreglo: itálica fina y alargada,
   perfectamente legible (nada de script/caligráfico enlazado, que a
   tamaño reducido se vuelve ilegible), con bastante espacio entre líneas,
   pegada al extremo derecho y en la parte superior de la composición para
   no invadir el ramo. Un pequeño corazón cierra el conjunto. */
.hero-photo__script{
  position:absolute;
  right:2%;
  top:4%;
  max-width:160px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  pointer-events:none;
}
.hero-photo__script span{
  display:block;
  color:var(--rose);
  opacity:1;
  /* Halo claro detrás del texto para que se despegue de las flores del
     fondo (mejor contraste) sin volverse oscuro ni pesado. */
  text-shadow:0 1px 16px rgba(253,248,244,0.96), 0 1px 4px rgba(253,248,244,0.9);
}
/* "Flores": firma en script grande — una sola palabra común, se lee bien
   incluso en caligráfico. El resto se queda en itálica fina y clara para
   que "que hacen" no se confunda con otra cosa a tamaño reducido. */
.hero-photo__script span:nth-child(1){
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(2.3rem, 3.6vw, 2.85rem);
  line-height:0.85;
  margin-bottom:10px;
}
.hero-photo__script span:nth-child(2),
.hero-photo__script span:nth-child(3),
.hero-photo__script span:nth-child(4){
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.28rem, 1.95vw, 1.55rem);
  line-height:1.7;
  letter-spacing:0.03em;
  opacity:0.97;
}
.hero-photo__heart{
  display:block;
  margin-top:16px;
  font-size:1.2rem;
  color:var(--gold);
  opacity:0.85;
  text-shadow:0 1px 10px rgba(253,248,244,0.85);
}

@media (max-width:1100px){
  .hero-photo__img{ right:11%; height:128%; bottom:-24%; }
  .hero-photo__script{ right:0; max-width:128px; top:5%; }
  .hero-photo__script span:nth-child(1){ font-size:2.05rem; }
  .hero-photo__script span:nth-child(2),
  .hero-photo__script span:nth-child(3),
  .hero-photo__script span:nth-child(4){ font-size:1.25rem; }
}

/* Flotación vertical muy sutil: 5px de recorrido, 7s, suave */
@keyframes heroFloat{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-5px); }
}
/* Misma flotación, conservando el centrado horizontal del móvil */
@keyframes heroFloatCentered{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-5px); }
}
/* Misma flotación para el ramo en flujo normal (móvil integrado al fondo,
   sin translateX porque ya se centra con margin:auto) */
@keyframes heroFloatStatic{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  .hero-photo__img{ animation:none; }
}

@media (max-width:900px){
  /* En móvil todo el hero (texto + ramo + botones) es UNA sola tarjeta
     visual: el degradado rosado/beige vive en `.hero` (el contenedor que
     envuelve las tres partes), no en `.hero-photo` por separado, para que
     no haya ninguna costura/cambio de fondo entre el texto, el ramo y los
     botones — se ve como una sola composición, no como secciones sueltas. */
  .hero{ background:linear-gradient(165deg, #FDF4F1 0%, #FAE9E3 30%, #F5DCD5 62%, #EFCEC6 100%); }
  .hero-grid{ grid-template-columns:1fr; min-height:0; }
  .hero-copy{ padding:40px var(--pad) 8px; text-align:center; align-items:center; }
  .hero-copy .eyebrow, .hero-lede{ max-width:46ch; }
  .hero-actions{ justify-content:center; }

  .hero-photo{
    height:auto;
    max-width:none;
    width:100%;
    margin:18px 0 0;
    padding:32px 0 26px;
    background:transparent;
    overflow:hidden;
  }
  .hero-photo::before{
    inset:-10%;
    background:
      radial-gradient(ellipse 55% 50% at 82% 12%, rgba(255,255,255,0.6) 0%, transparent 70%),
      radial-gradient(ellipse 60% 55% at 12% 90%, rgba(214,110,138,0.22) 0%, transparent 72%);
    filter:blur(26px);
  }
  .hero-photo::after{ display:none; }

  .hero-photo__bloom{
    left:78%; top:14%;
    width:46%; height:auto; max-width:none;
    transform:translate(-50%, -50%);
    opacity:0.3;
    filter:blur(22px) saturate(1.15);
  }
  .hero-photo__bloom2{
    left:10%; top:88%;
    width:40%; height:auto; max-width:none;
    transform:translate(-50%, -50%) rotate(-10deg);
    opacity:0.24;
    filter:blur(18px) saturate(1.05);
  }
  .hero-photo__bloom3{
    display:block;
    left:92%; top:82%;
    width:32%; height:auto; max-width:none;
    transform:translate(-50%, -50%) rotate(8deg);
    opacity:0.18;
    filter:blur(24px);
  }
  .hero-photo__img{
    position:relative;
    left:auto; right:auto; bottom:auto;
    z-index:2;
    display:block;
    width:82%;
    max-width:380px;
    height:auto;
    margin:0 auto;
    transform:none;
    animation-name:heroFloatStatic;
    filter:drop-shadow(0 18px 22px rgba(120,60,68,0.2));
  }
  .hero-photo__script{ display:none; }
  .photo-slot--hero{ min-height:300px; border:1px dashed var(--line); border-left:none; border-right:none; }

  /* Orden móvil: texto → ramo → botones (el duplicado vive después de
     .hero-photo en el HTML; el original dentro de .hero-copy se oculta). */
  .hero-copy .hero-actions{ display:none; }
  .hero-actions--mobile{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:22px var(--pad) 34px;
  }
}

/* --------------------------------------------------------------------------
   7. Franja de beneficios
   -------------------------------------------------------------------------- */
.benefits{
  background:var(--ivory-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:38px 0;
}
.benefits-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:22px;
}
.benefit{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.benefit__icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--forest);
  flex:none;
}
.benefit__icon svg{ width:24px; height:24px; }
.benefit h3{
  font-family:var(--font-body);
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.01em;
}
.benefit p{ font-size:0.78rem; color:var(--grey); max-width:24ch; }

@media (max-width:1080px){ .benefits-row{ grid-template-columns:repeat(3,1fr); gap:28px; } }
@media (max-width:660px){ .benefits-row{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:420px){ .benefits-row{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   8. Arreglos destacados
   -------------------------------------------------------------------------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.product-card{
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 28px -20px rgba(36,31,25,0.28);
}
.product-card__media{ margin-bottom:14px; }
/* Cuando product-card__media es una fotografía real (no el div
   .photo-slot de relleno), se recorta a un marco uniforme para que toda
   la cuadrícula del catálogo se vea pareja. */
img.product-card__media{
  width:100%;
  aspect-ratio:1/1.05;
  object-fit:cover;
  display:block;
  background:var(--ivory-2);
}
/* Fotos nuevas: se muestran completas (sin recorte) dentro del mismo marco
   uniforme de la cuadrícula; el sobrante lateral toma el blanco de estudio
   de las propias fotografías. */
img.product-card__media--full{
  object-fit:contain;
  object-position:center;
  background:#FAF8F4;
}
.product-card__body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card__name{
  font-family:var(--font-body);
  font-size:0.88rem;
  font-weight:600;
}
.product-card__price{ font-size:0.86rem; color:var(--grey); }
.product-card__tagline{
  font-size:0.8rem;
  color:var(--grey);
  line-height:1.4;
}
.product-card__pending{
  font-size:0.75rem;
  font-style:italic;
  color:var(--grey);
  opacity:0.8;
}
.product-card .btn{ margin-top:12px; width:100%; }
/* Solo las fotos nuevas: el botón baja al fondo de la tarjeta para quedar
   alineado con el de la tarjeta vecina aunque el título ocupe 1 o 2 líneas
   (sin alturas fijas ni recorte de texto). */
.product-card--align .product-card__tagline{ margin-bottom:auto; }

.section-foot{ margin-top:34px; text-align:center; }

@media (max-width:980px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .products-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   9. Comprar por ocasión
   -------------------------------------------------------------------------- */
.occasions{ background:var(--forest); color:var(--ivory); padding:64px 0; }
.occasions .section-head{ border-bottom-color:rgba(201,211,198,0.35); }
.occasions .section-head h2{ color:var(--white); }
.occasions .section-head .section-link{ color:#C9A45C; }
.occasions .section-head .section-link:hover{ color:var(--white); }

.occasions-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
.occasion-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:var(--ivory);
  cursor:pointer;
}
.occasion-card__photo{
  position:relative;
  width:100%;
  max-width:230px;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,0.05);
  border:2px solid #C9A45C;
  transition:transform .22s ease, box-shadow .22s ease;
}
.occasion-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.occasion-card__label{
  font-family:var(--font-display);
  font-size:1.55rem;
  font-weight:600;
  text-align:center;
  transition:color .18s ease;
}
.occasion-card:hover .occasion-card__photo,
.occasion-card:focus-visible .occasion-card__photo{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 12px 22px -10px rgba(0,0,0,0.45);
}
.occasion-card:hover .occasion-card__label,
.occasion-card:focus-visible .occasion-card__label{ color:#C9A45C; }

@media (max-width:1040px){
  .occasion-card__photo{ max-width:190px; }
  .occasion-card__label{ font-size:1.3rem; }
}
@media (max-width:820px){
  .occasions-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
}
@media (max-width:480px){
  .occasion-card__photo{ max-width:150px; }
  .occasion-card__label{ font-size:1.15rem; }
}

/* --------------------------------------------------------------------------
   10. Condolencias y arreglos fúnebres
   -------------------------------------------------------------------------- */
.condolences{
  background:var(--ivory-2);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:76px 0;
}

/* Composición de 3 columnas: foto grande | texto | tarjetas pequeñas */
.condolences-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr 0.85fr;
  gap:40px;
  align-items:stretch;
}

.condolences-photo{
  position:relative;
  min-height:440px;
  overflow:hidden;
  box-shadow:0 24px 44px -28px rgba(36,31,25,0.35);
}
.condolences-photo picture{ display:block; width:100%; height:100%; }
.condolences-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.condolences-copy{ display:flex; flex-direction:column; justify-content:center; }
.condolences .eyebrow{ color:var(--gold); margin-bottom:16px; display:block; }
.condolences h2{
  color:var(--ink);
  font-size:1.85rem;
  font-weight:600;
  margin-bottom:18px;
}
.condolences p{ color:var(--grey); margin-bottom:26px; max-width:46ch; }

.condolences-cards{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
.condolences-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--line);
  padding:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.condolences-card:hover{
  border-color:var(--gold);
  box-shadow:0 10px 22px -16px rgba(36,31,25,0.3);
}
.condolences-card picture{ display:block; flex:none; }
.condolences-card img{
  width:72px;
  height:72px;
  object-fit:cover;
  display:block;
  flex:none;
}
.condolences-card__body h3{
  font-family:var(--font-body);
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}
.condolences-card__body p{
  font-size:0.8rem;
  color:var(--grey);
  margin:0;
  max-width:none;
}

/* Frase decorativa centrada, debajo de las 3 columnas */
.condolences-quote{
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.1rem, 2vw, 1.45rem);
  color:var(--rose);
  margin:52px auto 0;
  max-width:34ch;
  padding:0 var(--pad);
}

@media (max-width:960px){
  .condolences-layout{ grid-template-columns:1fr; gap:34px; }
  .condolences-photo{ min-height:320px; }
  .condolences-cards{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .condolences-card{ flex:1 1 220px; flex-direction:column; text-align:center; }
  .condolences-card img{ width:100%; height:150px; }
}

@media (max-width:600px){
  .condolences-photo{ min-height:260px; }
  .condolences-cards{ flex-direction:column; }
  .condolences-card{ flex:none; flex-direction:row; align-items:center; text-align:left; }
  .condolences-card img{ width:72px; height:72px; }
  .condolences-quote{ margin-top:40px; }
}

/* --------------------------------------------------------------------------
   11. Sobre Andy Flowers
   -------------------------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:48px;
  align-items:center;
}
.about-copy .eyebrow{ display:block; margin-bottom:14px; }
.about-copy h2{ font-size:1.85rem; font-weight:600; margin-bottom:18px; }

@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }

/* --------------------------------------------------------------------------
   12. Ubicación y contacto
   -------------------------------------------------------------------------- */
.location{ background:var(--ivory-2); border-top:1px solid var(--line); }

/* Mapa (izquierda, más pequeño y proporcionado) / información (derecha) */
.location-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:44px;
  align-items:start;
  min-width:0;
}

.location-map{ min-width:0; }
.location-map__frame{
  position:relative;
  width:100%;
  height:360px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid var(--line);
}
.location-map__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.location-map__link{
  display:inline-block;
  margin-top:12px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--forest);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.location-map__link:hover{ border-bottom-color:var(--gold); color:var(--rose); }

.location-info{ min-width:0; }
.location-info .eyebrow{ display:block; margin-bottom:14px; }
.location-info h2{ font-size:1.85rem; font-weight:600; margin-bottom:8px; }
.location-brand{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--rose);
  font-size:1rem;
  margin-bottom:26px;
}

.contact-list{ display:flex; flex-direction:column; gap:20px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.contact-item__icon{
  width:40px; height:40px;
  flex:none;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--forest);
}
.contact-item__icon svg{ width:19px; height:19px; }
.contact-item > div{ min-width:0; }
.contact-item__label{
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:2px;
}
.contact-item__value{
  display:inline-block;
  max-width:100%;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.contact-item__value:hover{ color:var(--rose); }

/* Horario de atención */
.hours-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:3px;
}
.hours-list li{
  display:flex;
  flex-wrap:wrap;
  gap:2px 8px;
  font-size:0.95rem;
  line-height:1.4;
}
.hours-days{ font-weight:600; color:var(--ink); }
.hours-days::after{ content:':'; }
.hours-time{ color:var(--grey); font-variant-numeric:tabular-nums; }

.location-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:1024px){
  .location-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .location-map__frame{ height:320px; }
}

@media (max-width:820px){
  .location-grid{ grid-template-columns:1fr; gap:32px; }
  .location-map__frame{ height:280px; }
}

@media (max-width:480px){
  .contact-item{ gap:12px; }
  .contact-item__value{ font-size:0.92rem; }
  .location-actions .btn{ width:100%; }
  .location-map__frame{ height:260px; }
}

/* --------------------------------------------------------------------------
   13. Pie de página
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--forest-2);
  color:#C9D3C6;
  padding:56px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.4fr;
  gap:44px;
  margin-bottom:40px;
}
.footer-brand__script{
  font-family:var(--font-script);
  font-size:2.3rem;
  color:var(--white);
  display:block;
  line-height:1;
}
.footer-brand__sub{
  font-size:0.6rem;
  letter-spacing:0.28em;
  color:#9FAE9A;
  margin-top:4px;
}
.footer-brand p{ margin-top:16px; font-size:0.84rem; max-width:30ch; }

.site-footer h4{
  font-family:var(--font-body);
  color:var(--white);
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.site-footer li{ margin-bottom:10px; font-size:0.85rem; }
.site-footer a{ text-decoration:none; color:#C9D3C6; }
.site-footer a:hover{ color:var(--white); }

/* Redes sociales del footer: discreto, sin píldora ni círculo llamativo,
   íconos pequeños alineados en fila junto a la etiqueta "Síguenos". */
.footer-social{ margin-top:18px; }
.footer-social__label{
  display:block;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#9FAE9A;
  margin-bottom:10px;
}
.footer-social__icons{ display:flex; gap:6px; }
.footer-social__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  color:#C9D3C6;
  transition:color .18s ease;
}
.footer-social__icon svg{ width:18px; height:18px; }
.footer-social__icon:hover{ color:var(--gold); }

.footer-bottom{
  border-top:1px solid #33453A;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:0.76rem;
  color:#8FA08A;
}

@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   14. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;
  bottom:26px; right:26px;
  width:56px; height:56px;
  border-radius:50%;
  background:#2E7D5B;
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.24);
  z-index:70;
  transition:transform .18s ease, background-color .18s ease;
}
.wa-float:hover{ background:#256B4D; transform:translateY(-2px); }
.wa-float svg{ width:28px; height:28px; }

/* --------------------------------------------------------------------------
   15. Página de catálogo
   -------------------------------------------------------------------------- */
.page-hero{
  background:var(--ivory-2);
  border-bottom:1px solid var(--line);
  padding:56px 0;
  text-align:center;
}
.page-hero .eyebrow{ display:block; margin-bottom:14px; }
.page-hero h1{ font-size:clamp(2rem, 4vw, 2.7rem); font-weight:600; }
.page-hero p{ color:var(--grey); margin:16px auto 0; max-width:52ch; }

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:10px 20px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filter-btn:hover{ border-color:var(--gold); }
.filter-btn[aria-pressed="true"]{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--white);
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.catalog-grid .product-card[hidden]{ display:none; }
.catalog-grid .funeral-pricing[hidden]{ display:none; }

/* Bloque de precios fúnebres — vive dentro de la cuadrícula del catálogo,
   asociado a la categoría "condolencias" (mismo mecanismo de filtro que
   las tarjetas de producto, sin tocar el JS de filtros). */
.funeral-pricing{
  grid-column:1 / -1;
  background:var(--ivory);
  border:1px solid var(--line);
  padding:36px 32px;
  text-align:center;
}
.funeral-pricing__eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.funeral-pricing__title{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  margin-top:8px;
  margin-bottom:28px;
}
.funeral-pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  max-width:720px;
  margin:0 auto;
}
.funeral-price-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:26px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.funeral-price-card h4{
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.funeral-price-card__price{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:600;
  color:var(--forest);
}
.funeral-price-card--featured{
  border:2px solid var(--gold);
}
.funeral-pricing__note{
  margin-top:26px;
  font-size:0.85rem;
  color:var(--grey);
  line-height:1.6;
}

@media (max-width:620px){
  .funeral-pricing{ padding:28px 20px; }
  .funeral-pricing-grid{ grid-template-columns:1fr; max-width:320px; }
}

.catalog-empty{
  margin-top:40px;
  text-align:center;
  color:var(--grey);
  font-style:italic;
  font-size:0.92rem;
}

@media (max-width:1040px){ .catalog-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .catalog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .catalog-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   16. Ramos de rosas — banner visual único (imagen de diseño ya maquetada
   con fotos y precios reales integrados). Solo se controla el contenedor:
   ancho, centrado, borde suave y escalado responsivo de la imagen.
   -------------------------------------------------------------------------- */
.rose-banner{
  padding:20px 0 40px;
}
.rose-banner[hidden]{ display:none; }
.rose-banner__img{
  display:block;
  width:100%;
  max-width:1080px;
  height:auto;
  margin:0 auto;
  border-radius:16px;
}

@media (max-width:600px){
  .rose-banner{ padding:16px 0 28px; }
  .rose-banner__img{ border-radius:12px; }
}

.catalog-section-head{
  text-align:center;
  max-width:520px;
  margin:0 auto 40px;
}
.catalog-section-head[hidden]{ display:none; }
.catalog-section-head .eyebrow{ display:block; margin-bottom:10px; }
.catalog-section-head h2{ font-size:1.9rem; font-weight:600; }

/* Espaciado compacto alrededor de los filtros del catálogo: los ~40-70px
   de separación visual se logran reduciendo solo el padding vertical de
   estas dos secciones puntuales, sin tocar `.section`/`.section--tight`
   (usadas en el resto del sitio). */
.catalog-filters-section{ padding-bottom:24px; }
.catalog-results-section{ padding-top:24px; }

/* --------------------------------------------------------------------------
   17. Compactación móvil (≤600px)
   Todas las reglas de este bloque solo se activan en móvil (breakpoints
   nuevos o coincidentes con los ya existentes más arriba) y, por orden de
   aparición en el archivo, ganan sobre las reglas de escritorio/tablet
   equivalentes sin tocarlas ni modificar 768px/1024px/1440px en adelante.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  :root{ --pad:20px; --mobile-menu-height:324px; }

  /* --- Hero: más compacto, ramo protagonista sin ocupar toda la pantalla --- */
  .hero-copy{ padding-top:20px; padding-bottom:6px; }
  .hero-copy .eyebrow{ font-size:0.62rem; letter-spacing:0.09em; margin-bottom:8px; }
  .hero-title{ font-size:1.5rem; margin-bottom:0; }
  .hero-script{ font-size:1.7rem; margin-bottom:8px; }
  .hero-lede{ font-size:0.85rem; margin-bottom:14px; }
  .hero-photo{ padding:26px 0 20px; }
  .hero-photo__img{ width:85%; }
  .hero-actions{ flex-direction:column; width:100%; gap:10px; }
  .hero-actions .btn{ width:100%; padding:12px 18px; font-size:0.75rem; }

  /* --- Franja de beneficios y secciones generales: menos padding vertical --- */
  .benefits{ padding:26px 0; }
  .section{ padding:44px 0; }
  .section--tight{ padding:32px 0; }
  .section-head{ margin-bottom:22px; padding-bottom:10px; }

  /* --- Comprar por ocasión: menos espacio entre tarjetas --- */
  .occasions{ padding:40px 0; }
  .occasions .section-head{ margin-bottom:22px; }
  .occasions-grid{ gap:20px; row-gap:24px; }
  .occasion-card{ gap:10px; }

  /* --- Ramos rojos y azules: imagen a ~94% del viewport --- */
  .rose-banner .wrap{ padding-left:10px; padding-right:10px; }

  /* --- Catálogo: dos productos por fila (se anula el 1 columna de 480px) --- */
  .catalog-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .product-card__name{ font-size:0.95rem; }
  .product-card__tagline{ font-size:0.72rem; }
  .product-card .btn--sm{ padding:9px 10px; font-size:0.66rem; gap:5px; }
  .product-card .btn--sm svg{ width:14px; height:14px; }

  /* Texto corto del botón de WhatsApp solo dentro de las tarjetas del
     catálogo (no afecta "Ordenar por WhatsApp" del resto del sitio). El
     texto completo bilingüe sigue en el DOM para lectores de pantalla. */
  .catalog-grid .product-card .btn--whatsapp span[data-mobile-es]{ font-size:0; }
  .catalog-grid .product-card .btn--whatsapp span[data-mobile-es]::before{
    content:attr(data-mobile-es);
    font-size:0.66rem;
  }
  html[lang="en"] .catalog-grid .product-card .btn--whatsapp span[data-mobile-es]::before{
    content:attr(data-mobile-en);
  }

  /* --- "Nuestro catálogo / Arreglos que inspiran": mucho más compacto --- */
  .catalog-section-head{ margin:0 auto 20px; }
  .catalog-section-head .eyebrow{ margin-bottom:6px; }
  .catalog-section-head h2{ font-size:1.4rem; line-height:1.2; }

  /* --- Condolencias (index.html): texto e imagen más compactos --- */
  .condolences{ padding:44px 0; }
  .condolences h2{ font-size:1.4rem; margin-bottom:12px; }
  .condolences p{ margin-bottom:18px; font-size:0.92rem; }
  .condolences-quote{ font-size:1.05rem; margin-top:28px; }

  /* --- Condolencias (catalog.html): precios en 3 tarjetas compactas
     en fila, como en la referencia, en vez de apiladas verticalmente --- */
  .funeral-pricing{ padding:22px 14px; }
  .funeral-pricing__title{ font-size:1.15rem; margin-top:6px; margin-bottom:16px; }
  .funeral-pricing-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; max-width:100%; }
  .funeral-price-card{ padding:12px 6px; gap:4px; }
  .funeral-price-card h4{ font-size:0.62rem; letter-spacing:0.03em; }
  .funeral-price-card__price{ font-size:1.15rem; }
  .funeral-pricing__note{ margin-top:16px; font-size:0.76rem; }

  /* --- Ubicación y contacto: mapa e información compactos --- */
  .location-grid{ gap:24px; }
  .location-map__frame{ height:200px; }
  .location-info h2{ font-size:1.4rem; }
  .contact-list{ gap:14px; }

  /* --- Pie de página --- */
  .site-footer{ padding:36px 0 20px; }
  .footer-grid{ gap:26px; margin-bottom:26px; }

  /* --- Botón flotante de WhatsApp: más pequeño, no tapa contenido --- */
  .wa-float{ width:46px; height:46px; bottom:16px; right:16px; }
  .wa-float svg{ width:22px; height:22px; }

  /* --- Filtros del catálogo: una sola fila deslizable con el dedo --- */
  .filters{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:8px;
    margin:0 calc(var(--pad) * -1);
    padding:0 var(--pad) 4px;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter-btn{ flex:none; white-space:nowrap; padding:9px 16px; font-size:0.7rem; }

  .page-hero{ padding:32px 0; }
  .page-hero p{ margin-top:10px; }

  /* --- Menú hamburguesa: panel verde oscuro a pantalla completa,
     ícono ✕ al abrir, enlaces con separadores sutiles --- */
  .menu-btn{ position:relative; }
  .menu-btn[aria-expanded="true"]{ font-size:0; }
  .menu-btn[aria-expanded="true"]::before{
    content:"\2715";
    font-size:1.25rem;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .site-header:has(.nav-links.is-open){ background:var(--forest); border-bottom-color:var(--forest); }
  .site-header:has(.nav-links.is-open) .brand__script{ color:var(--ivory); }
  .site-header:has(.nav-links.is-open) .brand__sub{ color:var(--gold); }
  .site-header:has(.nav-links.is-open) .menu-btn{ color:var(--ivory); border-color:rgba(255,255,255,0.3); }

  .nav-links.is-open{
    background:var(--forest);
    border-bottom-color:var(--forest);
    gap:0;
    padding-top:6px;
    padding-bottom:10px;
  }
  .nav-links.is-open a{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
    color:var(--ivory);
    font-size:0.95rem;
  }
  .nav-links.is-open a:last-child{ border-bottom:none; }
  .nav-links.is-open a:hover{ border-bottom-color:rgba(255,255,255,0.14); color:var(--gold); }
  .nav-links.is-open a[aria-current="page"]{ color:var(--gold); border-bottom-color:rgba(255,255,255,0.14); }

  /* El selector ES/EN pasa a colores claros aquí porque el dropdown tiene
     fondo verde bosque en este ancho: texto oscuro/gris normal sería
     ilegible. Activo = marfil + línea dorada; inactivo = gris claro
     translúcido; sin fondo ni píldora en ningún caso. */
  .nav-links.is-open .lang-select__icon{ color:rgba(237,231,216,0.55); }
  .nav-links.is-open .lang-select__btn{ color:rgba(237,231,216,0.55); }
  .nav-links.is-open .lang-select__btn[aria-pressed="true"]{ color:var(--ivory); }
  .nav-links.is-open .lang-select__btn[aria-pressed="true"]::after{ background:var(--gold); }
  .nav-links.is-open .lang-select__sep{ background:rgba(237,231,216,0.28); }

  .nav-cta.is-open{
    background:var(--forest);
    border-bottom-color:var(--forest);
    border-top:1px solid rgba(255,255,255,0.14);
  }
  .nav-cta.is-open .nav-phone{ color:var(--ivory); }

  /* --- Arreglos destacados (index.html): 2 columnas, cabecera y
     espaciado compactos. Todo escopado a #destacados/.products-grid
     para no afectar ninguna otra sección. --- */
  #destacados{ padding:24px 0 32px; }
  #destacados .section-head{ margin-bottom:14px; padding-bottom:8px; gap:10px; }
  #destacados .section-head h2{ font-size:1.3rem; }
  #destacados .section-head .section-link{ font-size:0.68rem; }
  .products-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .products-grid .product-card__media{ margin-bottom:8px; }
  #destacados .section-foot{ margin-top:18px; }
}

/* --------------------------------------------------------------------------
   18. Hero móvil — imagen final aprobada (≤768px)
   Sustituye visualmente el hero de texto+ramo+botones (construido en
   HTML/CSS) por la imagen aprobada assets/images/hero-mobile-final.png
   (recortada para excluir la barra superior/header, que sigue siendo el
   header real del sitio). Dos enlaces reales, posicionados en porcentaje
   sobre las zonas de los botones ya dibujados en la imagen, mantienen la
   funcionalidad (catálogo y WhatsApp) sin duplicar texto visible.
   Entre 769px y 900px se conserva el hero móvil anterior (texto+ramo+
   botones); desde 901px en adelante (escritorio) no cambia nada.
   -------------------------------------------------------------------------- */
.hero-mobile-approved{ display:none; }

@media (max-width:768px){
  .hero-copy,
  .hero-photo,
  .hero-actions--mobile{ display:none; }

  .hero-mobile-approved{
    display:block;
    position:relative;
    width:100%;
    line-height:0;
  }
  .hero-mobile-approved img{
    display:block;
    width:100%;
    height:auto;
  }
  .hero-mobile-approved__link{
    position:absolute;
    left:7%;
    width:86%;
    display:block;
  }
  .hero-mobile-approved__link--collection{ top:80.2%; height:6.9%; }
  .hero-mobile-approved__link--whatsapp{ top:88.3%; height:7.5%; }
}