:root{
  --ayp-primary:#283d6e;           /* azul institucional */
  --ayp-light:#ffffff;
  --ayp-shadow:0 4px 15px rgba(0,0,0,.15);
  --ayp-radius:1.25rem;
  --ayp-tint:#e9f1f9;             /* fondo sutil para primera card */
}
body{font-family:'Montserrat',sans-serif;}

/* ─── Navbar ─────────────────────────────── */
.navbar{background:var(--ayp-primary);}
.navbar-brand img{height:56px;}
.navbar-toggler{border-color:transparent;}
.navbar-toggler-icon{filter:invert(1);} /* ícono hamburguesa blanco */

/* ─── Hero ───────────────────────────────── */
.hero{
  min-height:100vh;
  background:url("https://www.amorypaz.com.ar/img/slider01-1.jpg") center/cover fixed no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4rem 1rem;
}
.hero::after{              /* overlay para contraste */
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.25);
}
.hero>.container{position:relative;z-index:1;}
.hero-card{
  background:var(--ayp-light);
  border-radius:var(--ayp-radius);
  padding:2.5rem 2rem;
  box-shadow:var(--ayp-shadow);
  text-align:center;
  transition:transform .3s;
  cursor:pointer;
}
.hero-card:hover{transform:translateY(-6px);}
.hero-card img{height:96px;width:auto;margin-bottom:1rem;}
.hero-card h3{font-size:1.1rem;font-weight:600;margin:0;line-height:1.4;color:#082040;}
@media (max-width:575.98px){
  .hero-card{padding:1.5rem 1rem;}
  .hero-card img{height:72px;}
}

/* ─── WhatsApp FAB ───────────────────────── */
.whatsapp-fab{position:fixed;left:1rem;bottom:1rem;z-index:1100;}

/* ─── Botones CTA ─────────────────────────  */
.btn-cta{
  background:var(--ayp-primary);
  color:var(--ayp-light);
  border:none;
  border-radius:2.5rem;
  padding:.9rem 2.75rem;
  font-weight:600;
  font-size:1.125rem;
  display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:var(--ayp-shadow);
  transition:background .2s;
}
.btn-cta i{font-size:1.3rem;}
.btn-cta:hover,
.btn-cta:focus{background:#1d2e55;color:#fff;}

    /* Botón "ir arriba" */
    .back-top{
      position:fixed!important;
      right:1rem!important;
      left:auto!important;  /* evita que nadie lo mueva a la izquierda */
      bottom:6.5rem!important;
      width:48px;               /* círculo */
      height:48px;
      display:none;             /* se muestra via JS */
      align-items:center;
      justify-content:center;
      border-radius:50%;
      font-size:1.25rem;
      z-index:1100;
      box-shadow:0 4px 12px rgba(0,0,0,.3);
    }
    .back-top.show{display:flex;} /* visible al hacer scroll */
    
/* ─── Vineta decorativa ──────────────────── */
.vineta{max-height:140px;width:auto;}

/* ─── Tarjetas de servicios destacados ──── */
.service-card{
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius:var(--ayp-radius);
  box-shadow:var(--ayp-shadow);
  text-align:center;
  transition:transform .25s,background .25s,color .25s;
  padding:2.5rem 1.5rem;
  cursor:pointer;
}
.service-card:first-child{background:var(--ayp-tint);} /* primera con tinte */
.service-card img{height:120px;width:auto;margin-bottom:1.2rem;}
.service-card h4{font-size:1.35rem;font-weight:600;line-height:1.25;color:#082040;}
.service-card:hover{
  transform:translateY(-8px);
  background:var(--ayp-primary);
  color:#fff;
}
.service-card:hover h4{color:#fff;}

/* ─── Sección detalle de servicio ───────── */
.section-title{font-size:3rem;font-weight:600;color:var(--ayp-primary);margin-bottom:1rem;}
.title-underline{
  width:160px;height:6px;background:var(--ayp-primary);
  border-radius:4px;margin:0 0 1.5rem 0;
}
@media (max-width:575.98px){
  .section-title{font-size:2.25rem;}
  .title-underline{width:120px;}
}
/* ─── Cajas CREMATORIO / COCHERÍA ─────────── */
.info-box{
  background:#ededed;           /* gris suave */
  border:0;                     /* sin borde externo */
  border-radius:var(--ayp-radius);
  box-shadow:var(--ayp-shadow);
}
.info-box h5{
  color:var(--ayp-primary);
  font-size:1.35rem;
}
/* ─── Imagen con “esquinazo” y borde violeta ─── */
.drop-img{
  display:inline-block;
  position:relative;
  max-width:420px;     /* ajústalo al gusto */
  overflow:hidden;     /* recorta todo lo que sobresalga */
}
.drop-img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  /* recorte: rectángulo + bisel en la esquina inferior-derecha */
  clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%);
}
.drop-img::before{           /* borde violeta */
  content:"";
  position:absolute;
  inset:0;
  border:10px solid #7b5ec1; /* grosor y color */
  clip-path:inherit;         /* usa la misma forma que la img */
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* tamaño menor en mobile */
@media(max-width:575.98px){
  .drop-img{max-width:300px;}
}
/* ─── Lista con íconos y líneas ───────────── */
.service-list li{
  display:flex;
  align-items:center;
  padding:.6rem 0;
  border-bottom:1px solid #c8d2e0;
  font-weight:600;
  color:var(--ayp-primary);
}
.service-list li:last-child{border-bottom:0;}
.service-list i{
  font-size:1.4rem;
  margin-right:.75rem;
  color:var(--ayp-primary);
}
/* ─── Métodos de Pago ─────────────────────── */
.payment-section{
  background:#9bb9df;
  color:#fff;
  padding:4rem 0;
}
.payment-section h2{font-weight:600;margin-bottom:.75rem}
.payment-section img{max-width:160px}

/* ─── Contacto ────────────────────────────── */
.contact-section{
  background:#072b53;
  color:#fff;
  padding:4rem 0;
}
.contact-section h2{font-weight:600;margin-bottom:2rem}
.contact-section .form-control,
.contact-section .btn{
  border-radius:.25rem;
}
.contact-section .form-control{
  background:#fff; color:#000;
}
.contact-section .btn{
  background:#1565c0; color:#fff; border:0;
}
.contact-section .btn:hover{background:#0f4fa0}
.contact-section iframe{border:0;width:100%;height:320px;border-radius:.25rem;box-shadow:0 4px 8px rgba(0,0,0,.15)}
/* ─── Footer nuevo ────────────────────────── */
.footer-main{background:#072b53;color:#fff;}
.footer-main img{max-height:240px}
.footer-main a{text-decoration:none;color:#fff}
.footer-main a:hover{opacity:.8}
@media (max-width: 991.98px){          /* md y abajo */
  .contact-section iframe{
    height:260px;                     /* un poco más bajo */
  }
}