/* ============================================================
   Funeraria Tanatorio Villa - Lucena
   Recreación estática del diseño original (Joomla / Helix Ultimate)
   ============================================================ */

:root{
  --texto:#5C5C69;
  --titulo:#302F40;
  --negro:#000000;
  --gris-btn:#444444;
  --footer-bg:#171717;
  --degradado:linear-gradient(165deg,#E1E8FD 0%, rgba(241,216,180,.47) 128%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  font-size:16px;line-height:1.5;
  color:var(--texto);
  background:#fff;
}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4,h5,h6{font-family:'IBM Plex Sans',sans-serif;font-weight:700;color:var(--titulo);}

.container{max-width:1320px;margin:0 auto;padding:0 20px;}
.container-narrow{max-width:1018px;margin:0 auto;padding:0 20px;}

.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:2000;}
.skip-link:focus{left:0;}

/* ---------- Cabecera negra ---------- */
.header{background:var(--negro);color:#fff;text-align:center;padding:10px 0 20px;}
.header .logo{margin:0 auto 4px;}
.header .logo img{height:60px;width:auto;margin:0 auto;}
.header-phones{color:#ecf0f1;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:1.3rem;margin-bottom:14px;}
.header-phones a{color:#fff;}
.header-phones a:hover{color:#a00a0a;}
.header-phones .fa{margin-right:4px;}

/* Menú de botones */
.main-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.main-nav a{
  background:var(--gris-btn);color:#fff;font-size:16px;
  padding:6px 14px;border-radius:50px;transition:.3s;
}
.main-nav a:hover,.main-nav a.activo{background:#cccccc;color:#fff;}

/* En móvil los 3 botones caben: menú siempre visible */
@media (max-width:575.98px){
  .main-nav{gap:6px;}
  .main-nav a{font-size:14px;padding:5px 12px;}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;background:var(--gris-btn);color:#fff;
  font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:16px;
  padding:12px 26px;border-radius:50px;transition:.3s;cursor:pointer;border:none;
}
.btn:hover{background:#222;}
.btn-negro{background:#000;border-radius:6px;}
.btn-negro:hover{background:rgba(0,0,0,.75);}
.btn-cuadrado{background:#000;border-radius:0;padding:8px 20px;font-size:15px;}
.btn-cuadrado:hover{background:#333;}
.btn .fa{margin-right:6px;}

/* ---------- Hero portada ---------- */
.hero{background:var(--degradado);overflow:hidden;}
.hero-grid{display:flex;align-items:center;gap:30px;}
.hero-texto{flex:1 1 50%;padding:60px 10px;text-align:center;}
.hero-texto h1{font-size:50px;line-height:1.2;margin-bottom:44px;color:#000;}
.hero-texto .destacado{font-size:18pt;font-weight:700;display:block;margin-bottom:12px;}
.hero-texto p{font-size:18px;line-height:27px;margin-bottom:30px;}
.hero-botones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.hero-imagen{flex:1 1 50%;align-self:stretch;display:flex;align-items:center;}
.hero-imagen img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;}
@media (max-width:991.98px){
  .hero-texto h1{font-size:38px;margin-bottom:24px;}
}
@media (max-width:767.98px){
  .hero-grid{flex-direction:column;gap:0;}
  .hero-texto{padding:50px 20px 30px;}
  .hero-texto h1{font-size:25px;line-height:35px;margin-bottom:12px;}
  .hero-texto p{font-size:14px;line-height:24px;}
  .hero-imagen{width:100%;}
}

/* ---------- Hero interior (Tanatorio) ---------- */
.hero-interior{
  position:relative;color:#fff;text-align:center;
  padding:90px 20px;background:#222 center/cover no-repeat;
}
.hero-interior::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);}
.hero-interior > *{position:relative;}
.hero-interior h1{color:#fff;font-size:34px;margin-bottom:18px;}
.hero-interior p{max-width:760px;margin:0 auto 10px;}
.hero-interior .hero-botones{margin-top:26px;}
@media (max-width:767.98px){.hero-interior h1{font-size:24px;}}

/* ---------- Features 3 columnas ---------- */
.features{padding:130px 0 40px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px;}
.feature img{width:56px;height:56px;margin-bottom:14px;}
.feature h5{font-size:22px;margin-bottom:8px;}
.feature p{font-size:16px;line-height:24px;}
@media (max-width:767.98px){
  .features{padding:60px 0 0;}
  .features-grid{grid-template-columns:1fr;gap:30px;}
  .feature h5{font-size:18px;}
}

/* ---------- Tarjeta degradada ---------- */
.card-degradado{
  background:var(--degradado);border-radius:24px;
  padding:102px 98px 60px;text-align:center;
}
.card-degradado h2,.card-degradado h3{font-size:45px;line-height:52px;letter-spacing:-1px;margin-bottom:17px;}
.card-degradado .intro{max-width:80%;margin:0 auto 45px;}
.card-degradado img{margin:0 auto;}
.seccion-card{padding:60px 0;}
@media (max-width:991.98px){
  .card-degradado{padding:80px 50px 50px;}
  .card-degradado h2,.card-degradado h3{font-size:34px;line-height:44px;}
}
@media (max-width:767.98px){
  .card-degradado{padding:40px 25px 30px;}
  .card-degradado h2,.card-degradado h3{font-size:22px;line-height:32px;}
  .card-degradado .intro{max-width:100%;margin-bottom:25px;}
  .seccion-card{padding:20px 0;}
}

/* ---------- Llamada + lista de servicios ---------- */
.dos-columnas{padding:20px 0 35px;}
.dos-columnas .grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.col-llamada h2{font-size:45px;line-height:52px;letter-spacing:-1px;margin-bottom:17px;}
.col-llamada p{max-width:65%;margin-bottom:48px;}
.col-llamada .hero-botones{justify-content:flex-start;}
.item-servicio{display:flex;gap:32px;border-bottom:1px solid rgba(48,47,64,.16);padding-bottom:32px;margin-bottom:33px;}
.item-servicio img{width:48px;height:48px;flex-shrink:0;margin-top:2px;}
.item-servicio h6{font-size:18px;line-height:25px;margin-bottom:6px;}
.item-servicio:last-child{border-bottom:none;margin-bottom:0;}
@media (max-width:767.98px){
  .dos-columnas .grid{grid-template-columns:1fr;gap:30px;}
  .col-llamada h2{font-size:22px;line-height:32px;}
  .col-llamada p{max-width:90%;margin-bottom:25px;}
  .item-servicio{gap:15px;padding-bottom:20px;margin-bottom:20px;}
}

/* ---------- Tarjetas de servicios (4) ---------- */
.tarjetas{padding:0 0 70px;}
.tarjetas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.tarjeta{background:#f1f1f1;}
.tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.tarjeta-cuerpo{padding:20px;}
.tarjeta-cuerpo h3{font-size:20px;line-height:1.3;margin-bottom:15px;font-weight:400;}
.tarjeta-cuerpo h3 strong{font-weight:700;}
.tarjeta-cuerpo p{font-size:15px;margin-bottom:18px;}
@media (max-width:1199.98px){.tarjetas-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:767.98px){
  .tarjetas{padding:20px 0 10px;}
  .tarjetas-grid{grid-template-columns:1fr;}
}

/* ---------- Sección texto interior ---------- */
.contenido-pagina{padding:60px 0;}
.contenido-pagina h1,.contenido-pagina h2{font-size:32px;margin-bottom:24px;}
.contenido-pagina p{margin-bottom:16px;}
.contenido-pagina ul{margin:0 0 16px 22px;}
@media (max-width:767.98px){.contenido-pagina h1,.contenido-pagina h2{font-size:24px;}}

/* Página de contacto */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.contacto-datos address{font-style:normal;line-height:1.9;}
.contacto-botones{display:flex;flex-direction:column;gap:14px;max-width:320px;margin-top:24px;}
.btn-whatsapp{background:#25d366;}
.btn-whatsapp:hover{background:#1da851;}
@media (max-width:767.98px){.contacto-grid{grid-template-columns:1fr;}}

/* Esquelas / Galería CW: sin contenedor de ancho fijo, hereda el flujo normal */
.esquelas-contenido{padding:40px 0 70px;}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg);color:#fff;padding:60px 0 30px;font-size:15px;}
.footer h3{color:#fff;font-size:18px;margin-bottom:18px;}
.footer-grid{display:grid;grid-template-columns:1fr 3fr;gap:40px;}
.footer a{color:#A2A2A2;}
.footer a:hover{color:#fff;}
.footer address{font-style:normal;line-height:1.9;}
.footer ul{list-style:none;}
.footer ul li{margin-bottom:8px;}
.footer-copy{border-top:1px solid #333;margin-top:40px;padding-top:20px;color:#A2A2A2;}
@media (max-width:767.98px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Aviso de cookies ---------- */
#aviso-cookies{
  position:fixed;left:0;bottom:0;z-index:1000;
  background:#000;color:#fff;max-width:320px;
  padding:16px;font-size:13px;display:none;
}
#aviso-cookies a{color:#f5f5f5;text-decoration:underline;}
#aviso-cookies .btn-cookies{
  display:inline-block;margin-top:10px;background:#fff;color:#333;
  padding:5px 16px;border:none;cursor:pointer;font-size:13px;
}
#aviso-cookies.visible{display:block;}

/* Volver arriba */
.subir{
  position:fixed;right:18px;bottom:18px;width:42px;height:42px;
  background:#000;color:#fff;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:20px;z-index:900;
}
.subir.visible{display:flex;}