/* =========================================
   FUNERARIA RODRÍGUEZ — CSS PRINCIPAL
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* --- VARIABLES --- */
:root {
  --crema:       #f5f0e8;
  --crema-oscuro:#ede7da;
  --marron-claro:#c4b8a4;
  --marron:      #8a7d6b;
  --marron-oscuro:#6b5e4e;
  --tierra:      #2c2820;
  --tierra-medio:#3d3530;
  --negro:       #1e1a16;
  --blanco:      #ffffff;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'DM Sans', system-ui, sans-serif;
  --transicion:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --sombra:      0 8px 40px rgba(30,26,22,0.12);
  --sombra-sm:   0 2px 12px rgba(30,26,22,0.08);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--blanco);
  color: var(--negro);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--sans); }
ul { list-style: none; }

/* --- UTILIDADES --- */
.u-serif    { font-family: var(--serif); }
.u-italic   { font-style: italic; }
.u-label    { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--marron); }
.u-center   { text-align: center; }
.u-crema-bg { background: var(--crema); }

/* --- ANIMACIONES DE ENTRADA --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* =========================================
   NAVEGACIÓN
   ========================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 5%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transicion), box-shadow var(--transicion);
  background: linear-gradient(to bottom, rgba(20,17,13,0.82) 0%, rgba(20,17,13,0.55) 60%, rgba(20,17,13,0) 100%);
}
.nav.scrolled {
  background: rgba(245,240,232,0.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--sombra-sm);
}
.nav__logo {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--crema);
  transition: color var(--transicion);
  text-shadow: 0 1px 8px rgba(20,17,13,0.45);
}
.nav__logo em { font-style: italic; color: var(--marron-claro); }
.nav.scrolled .nav__logo { color: var(--negro); }
.nav.scrolled .nav__logo em { color: var(--marron-oscuro); }
.nav__links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav__links a {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.85);
  transition: color var(--transicion);
  position: relative;
}
.nav.scrolled .nav__links a { color: var(--marron-oscuro); }
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--crema);
  transform: scaleX(0);
  transition: transform var(--transicion);
  transform-origin: left;
}
.nav.scrolled .nav__links a::after { background: var(--tierra); }
.nav__links a:hover { color: var(--crema); }
.nav.scrolled .nav__links a:hover { color: var(--tierra); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  background: transparent;
  color: var(--crema);
  border: 1px solid rgba(245,240,232,0.55);
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--transicion);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav__cta:hover { border-color: var(--crema); background: rgba(245,240,232,0.1); }
.nav.scrolled .nav__cta { background: var(--tierra); color: var(--crema); border-color: var(--tierra); }
.nav.scrolled .nav__cta:hover { background: var(--tierra-medio); }
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--tierra);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav__mobile {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: var(--crema);
  padding: 24px 5% 32px;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--marron-claro);
  z-index: 99;
  transform: translateY(-10px);
  opacity: 0;
  transition: opacity var(--transicion), transform var(--transicion);
}
.nav__mobile.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.nav__mobile a {
  font-size: 16px;
  font-family: var(--serif);
  color: var(--tierra);
  letter-spacing: .04em;
}

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--tierra) url('../img/hero-tanatorio.jpg') center/cover no-repeat;
  transform: scale(1.08);
  transition: transform 8s ease-out;
  will-change: transform;
}
.hero__bg.loaded { transform: scale(1); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,17,13,0.7) 0%, rgba(20,17,13,0.0) 30%),
    linear-gradient(105deg, rgba(20,17,13,0.82) 0%, rgba(20,17,13,0.45) 55%, rgba(20,17,13,0.15) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 5%;
  max-width: 680px;
}
.hero__badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--marron-claro);
  border: 1px solid rgba(196,184,164,.5);
  padding: 6px 14px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 300;
  line-height: 1.08;
  color: var(--crema);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
}
.hero__title em { font-style: italic; color: var(--marron-claro); }
.hero__sub {
  font-size: 15px;
  color: rgba(245,240,232,.75);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
}
.hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.9s forwards;
}
.btn-primary {
  background: var(--crema);
  color: var(--tierra);
  border: none;
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 2px;
  font-weight: 500;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover { background: var(--blanco); transform: translateY(-2px); box-shadow: var(--sombra-sm); }
.btn-ghost {
  background: transparent;
  color: var(--crema);
  border: 1px solid rgba(245,240,232,.5);
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: border-color var(--transicion), background var(--transicion);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost:hover { border-color: var(--crema); background: rgba(245,240,232,.08); }
.hero__stats {
  position: absolute;
  bottom: 40px;
  left: 5%; right: 5%;
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(196,184,164,.3);
  padding-top: 28px;
  opacity: 0;
  animation: fadeUp 0.8s 1.1s forwards;
}
.hero__stat {
  flex: 1;
  padding-right: 32px;
  border-right: 1px solid rgba(196,184,164,.2);
  margin-right: 32px;
}
.hero__stat:last-child { border-right: none; }
.hero__stat-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  color: var(--crema);
  line-height: 1;
}
.hero__stat-label {
  font-size: 11px;
  color: var(--marron-claro);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================================
   SECCIONES GENERALES
   ========================================= */
.section { padding: 96px 5%; }
.section--crema { background: var(--crema); }
.section--oscuro { background: var(--tierra); }
.section__header { margin-bottom: 56px; }
.section__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--negro);
  margin-top: 10px;
}
.section__title em { font-style: italic; color: var(--marron-oscuro); }
.section--oscuro .section__title { color: var(--crema); }
.section--oscuro .section__title em { color: var(--marron-claro); }
.section--oscuro .u-label { color: var(--marron-claro); }

/* =========================================
   SERVICIOS
   ========================================= */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--marron-claro);
  border: 1px solid var(--marron-claro);
}
.servicio-card {
  background: var(--blanco);
  padding: 36px 28px;
  transition: background var(--transicion);
  position: relative;
  overflow: hidden;
}
.servicio-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--tierra);
  transform: scaleX(0);
  transition: transform var(--transicion);
  transform-origin: left;
}
.servicio-card:hover { background: var(--crema); }
.servicio-card:hover::before { transform: scaleX(1); }
.servicio-card__icon { width: 36px; height: 36px; margin-bottom: 20px; opacity: 0.55; transition: opacity var(--transicion); }
.servicio-card:hover .servicio-card__icon { opacity: 0.85; }
.servicio-card__title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--negro); margin-bottom: 10px; }
.servicio-card__desc { font-size: 13px; color: var(--marron-oscuro); line-height: 1.7; }

/* =========================================
   TANATORIO
   ========================================= */
.tanatorio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.tanatorio-features { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.tanatorio-feature { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--marron-claro); letter-spacing: .03em; }
.tanatorio-feature__dot { width: 5px; height: 5px; background: var(--marron-claro); border-radius: 50%; flex-shrink: 0; }
.tanatorio-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px; gap: 10px; }
.tanatorio-img { background: var(--tierra-medio); border-radius: 2px; overflow: hidden; position: relative; }
.tanatorio-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tanatorio-img:hover img { transform: scale(1.04); }
.tanatorio-img--tall { grid-row: span 2; }
.tanatorio-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--marron); }

/* =========================================
   FLORES / TIENDA
   ========================================= */
.flores-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.flores-header__text p { font-size: 13px; color: var(--marron-oscuro); max-width: 380px; margin-top: 8px; }
.flores-filtros { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.flores-filtro {
  font-size: 11px;
  padding: 7px 16px;
  border: 1px solid var(--marron-claro);
  border-radius: 2px;
  color: var(--marron-oscuro);
  background: transparent;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: all var(--transicion);
}
.flores-filtro:hover,
.flores-filtro.active { background: var(--tierra); color: var(--crema); border-color: var(--tierra); }
.flores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.flor-card {
  background: var(--blanco);
  border: 1px solid var(--crema-oscuro);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.flor-card:hover { box-shadow: var(--sombra); transform: translateY(-4px); }

/* ── Contenedor de imagen ── */
.flor-card__img {
  width: 100%;
  height: 340px;
  background: var(--crema-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ── FIX: la imagen rellena el contenedor manteniendo proporciones ── */
.flor-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.5s ease;
}
.flor-card:hover .flor-card__img img { transform: scale(1.04); }

.flor-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--tierra);
  color: var(--crema);
  padding: 4px 8px;
  border-radius: 1px;
}
.flor-card__info { padding: 16px; }
.flor-card__name { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--negro); margin-bottom: 4px; }
.flor-card__price { font-size: 16px; font-weight: 500; color: var(--tierra); margin-bottom: 12px; }
.flor-card__btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--tierra);
  color: var(--tierra);
  font-size: 11px;
  padding: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--transicion);
}
.flor-card__btn:hover { background: var(--tierra); color: var(--crema); }

/* Carrito lateral */
.carrito-overlay { position: fixed; inset: 0; background: rgba(30,26,22,.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--transicion); }
.carrito-overlay.open { opacity: 1; pointer-events: all; }
.carrito { position: fixed; top: 0; right: 0; width: 380px; max-width: 100%; height: 100vh; background: var(--blanco); z-index: 201; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(30,26,22,.15); }
.carrito.open { transform: translateX(0); }
.carrito__header { padding: 24px; border-bottom: 1px solid var(--crema-oscuro); display: flex; justify-content: space-between; align-items: center; }
.carrito__titulo { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.carrito__cerrar { background: none; border: none; font-size: 22px; color: var(--marron); line-height: 1; padding: 4px; }
.carrito__items { flex: 1; overflow-y: auto; padding: 20px 24px; }
.carrito__vacio { text-align: center; padding: 60px 20px; color: var(--marron); font-size: 14px; font-family: var(--serif); font-style: italic; }
.carrito-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--crema-oscuro); align-items: flex-start; }
.carrito-item__img { width: 60px; height: 60px; border-radius: 2px; object-fit: cover; background: var(--crema-oscuro); flex-shrink: 0; }
.carrito-item__info { flex: 1; }
.carrito-item__name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.carrito-item__price { font-size: 13px; color: var(--marron-oscuro); }
.carrito-item__remove { background: none; border: none; color: var(--marron-claro); font-size: 18px; padding: 0; transition: color var(--transicion); }
.carrito-item__remove:hover { color: var(--tierra); }
.carrito__footer { padding: 20px 24px; border-top: 1px solid var(--crema-oscuro); }
.carrito__total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 500; margin-bottom: 16px; }
.carrito__mensaje { margin-bottom: 14px; }
.carrito__mensaje label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--marron); display: block; margin-bottom: 6px; }
.carrito__mensaje textarea { width: 100%; border: 1px solid var(--marron-claro); border-radius: 2px; padding: 10px 12px; font-family: var(--sans); font-size: 13px; resize: none; height: 72px; color: var(--negro); outline: none; transition: border-color var(--transicion); }
.carrito__mensaje textarea:focus { border-color: var(--tierra); }
.carrito__pagar { width: 100%; background: var(--tierra); color: var(--crema); border: none; padding: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; font-weight: 500; transition: background var(--transicion); }
.carrito__pagar:hover { background: var(--tierra-medio); }
.carrito-btn-flotante { position: fixed; bottom: 28px; right: 28px; background: var(--tierra); color: var(--crema); border: none; width: 56px; height: 56px; border-radius: 50%; font-size: 20px; z-index: 150; box-shadow: var(--sombra); transition: transform var(--transicion), background var(--transicion); display: none; align-items: center; justify-content: center; }
.carrito-btn-flotante.visible { display: flex; }
.carrito-btn-flotante:hover { transform: scale(1.08); }
.carrito-btn-flotante__badge { position: absolute; top: -4px; right: -4px; background: #c0392b; color: white; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; }

/* =========================================
   ZONA / COBERTURA
   ========================================= */
.zona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.zona-mapa { background: var(--crema-oscuro); border-radius: 2px; overflow: hidden; height: 340px; border: 1px solid var(--marron-claro); }
.zona-mapa iframe { width: 100%; height: 100%; border: none; filter: sepia(20%) contrast(95%); }
.zona-datos { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.zona-dato { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--marron-oscuro); line-height: 1.5; }
.zona-dato__icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; }

/* =========================================
   TESTIMONIOS
   ========================================= */
.testimonio { background: var(--crema); border-left: 3px solid var(--marron-claro); padding: 28px 32px; border-radius: 0 2px 2px 0; }
.testimonio__texto { font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 300; color: var(--negro); line-height: 1.6; margin-bottom: 16px; }
.testimonio__autor { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marron); }

/* =========================================
   FOOTER
   ========================================= */
.footer { background: var(--negro); padding: 64px 5% 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--tierra-medio); }
.footer__logo { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--crema); margin-bottom: 14px; }
.footer__logo em { font-style: italic; color: var(--marron-claro); }
.footer__desc { font-size: 13px; color: var(--marron); line-height: 1.7; max-width: 260px; }
.footer__col-title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--marron); margin-bottom: 18px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col li a { font-size: 13px; color: var(--marron-claro); transition: color var(--transicion); }
.footer__col li a:hover { color: var(--crema); }
.footer__bottom { padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer__copy { font-size: 11px; color: var(--tierra-medio); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { font-size: 11px; color: var(--tierra-medio); transition: color var(--transicion); }
.footer__legal a:hover { color: var(--marron); }

/* =========================================
   ANIMACIONES
   ========================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .flores-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  .servicios-grid { grid-template-columns: 1fr; }
  .tanatorio-grid, .zona-grid { grid-template-columns: 1fr; }
  .tanatorio-imgs { grid-template-rows: 180px 180px; }
  .tanatorio-img--tall { grid-row: span 1; }
  .flores-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 64px 5%; }
}
@media (max-width: 480px) {
  .flores-grid { grid-template-columns: 1fr; }
  .hero__btns { flex-direction: column; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
}