/* ====== PALETA (rojo vibrante + claros) ====== */
:root{
    --red:#c8102e;          /* rojo vibrante */
    --red-2:#a10d25;        /* rojo profundo */
    --ink:#0b1220;          /* texto principal */
    --muted:#5b6474;        /* texto secundario */
    --surface:#f6f7fb;      /* gris claro */
    --blush:#fff5f7;        /* rosa pálido */
    --border:#e7e9ef;       /* borde sutil */
    --radius:18px;          /* radios */
    --shadow-sm:0 8px 22px rgba(16,24,40,.08);
    --shadow:0 22px 60px rgba(16,24,40,.16);
}

*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.55
}

/* ====== HEADER ====== */
.site-header{
    position:sticky;
    top:0;
    z-index:1020;
    background:#fff;
    border-bottom:1px solid var(--border);
    backdrop-filter:saturate(1.05) blur(6px)
}
.navbar-brand img{
    height:36px
}
.nav-link{
    font-weight:700
}
.nav-link:hover,.nav-link.active{
    color:var(--red)!important
}
.btn-pill{
    border-radius:999px
}

/* ====== HERO (te gustó, lo dejo igual) ====== */
.hero{
    position:relative;
    overflow:hidden;
    padding:clamp(96px,12vh,140px) 0;
    color:#fff;
    background:linear-gradient(135deg,var(--red),#d4142f)
}
.hero h1{
    font-weight:900;
    letter-spacing:-.02em
}
.hero .lead{
    color:#ffffffcc
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem .85rem;
    border-radius:999px;
    background:#ffffff22;
    color:#fff;
    font-weight:800;
    border:1px solid #ffffff44
}
.btn-primary-red{
    background:#fff;
    color:var(--red);
    font-weight:900;
    border:0
}
.btn-primary-red:hover{
    background:#ffe8ed;
    color:var(--red-2)
}
.btn-outline-white{
    border:2px solid #fff;
    color:#fff;
    font-weight:900
}
.btn-outline-white:hover{
    background:#fff;
    color:var(--red)
}

/* ====== FLAGS ====== */
.flags-wrap{
    display:inline-flex;
    gap:.4rem;
    padding:.6rem .85rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm)
}

/* ====== PRICING ====== */
.pricing{
    background:linear-gradient(180deg,#ffffff 0%, #fff5f7 100%)
}
.price-card{
    position:relative;
    border-radius:var(--radius);
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    padding-top:3rem;
    transition:transform .18s ease, box-shadow .18s ease
}
.price-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}
.price-ribbon{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-bottom:1px solid var(--border);
    color:var(--red);
    font-size:.95rem;
    font-weight:900
}
.price-icon{
    display:inline-grid;
    place-items:center;
    width:68px;
    height:68px;
    margin:0 auto;
    border-radius:16px;
    background:#fff;
    border:1px solid var(--border);
    color:var(--red)
}
.price-badge{
    display:inline-block;
    padding:.6rem 1rem;
    border-radius:999px;
    background:#fff;
    color:var(--red);
    border:1px solid var(--border);
    font-weight:900
}
.btn-outline-danger{
    --bs-btn-color:var(--red);
    --bs-btn-border-color:#e2aab7;
    --bs-btn-hover-bg:var(--red);
    --bs-btn-hover-border-color:var(--red);
    --bs-btn-hover-color:#fff
}
.featured{
    border:2px solid #f8bec9;
    box-shadow:0 24px 70px rgba(200,16,46,.15)
}
.featured .price-ribbon{
    background:#ffe9ee;
    color:var(--red)
}

/* ====== CTA ROJA ====== */
.cta-mid{
    background:var(--red);
    color:#fff
}

/* ====== BENEFICIOS ====== */
.benefits .item{
    display:flex;
    gap:.75rem;
    align-items:flex-start
}
.benefits .bullet{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    color:var(--red);
    font-weight:900
}
.benefits .bullet::after{
    content:"✓"
}

/* ====== EXTRAS ====== */
.extra-section{
    background:var(--blush)
}
.extra-card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:1.25rem;
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease
}
.extra-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow)
}
.extra-card .icon{
    display:inline-grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--border);
    color:var(--red)
}

/* ====== CTA FINAL ====== */
.cta-final{
    color:#fff;
    background:linear-gradient(135deg,var(--red-2),var(--red))
}

/* ====== FOOTER ====== */
footer{
    background:#0f1114;
    color:#d1d5db
}
footer a{
    color:#cbd5e1
}
footer a:hover{
    color:#fff
}

/* ====== WhatsApp ====== */
.whatsapp-float{
    position:fixed;
    right:18px;
    bottom:18px;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    font-size:28px;
    box-shadow:var(--shadow);
    z-index:1090;
    transition:transform .15s ease, background .15s ease
}
.whatsapp-float:hover{
    background:var(--red-2);
    transform:translateY(-2px) scale(1.04)
}

/* ====== Animaciones ====== */
.fade-in{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease
}
.fade-in.in{
    opacity:1;
    transform:none
}

@media (max-width: 991.98px){
    .hero .chips{
        margin-top:.75rem
    }
}
@media (prefers-reduced-motion: reduce){
    .fade-in{
        transition:none
    }
}
.flags-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    justify-content:center;
    padding:.6rem .85rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm)
}
a{
    text-decoration:none
}
a:hover{
    text-decoration:none
}
.hero-section{
  padding:clamp(60px,8vh,100px) 0;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
}
.hero-section h1{
  font-weight:900;
  letter-spacing:-.02em;
}
.hero-section .lead{
  color:#ffffffcc;
}
/* ====== SECCIÓN PAQUETES ====== */
.pricing {
  background: linear-gradient(180deg, #ffffff 0%, #fff5f7 100%);
}

.price-card {
  position: relative;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e7e9ef;
  box-shadow: 0 8px 22px rgba(16,24,40,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(16,24,40,.16);
}

.price-ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-bottom: 1px solid #e7e9ef;
  color: #c8102e;
  font-size: .95rem;
  font-weight: 900;
}

.price-icon {
  display: inline-grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 3rem auto 0 auto;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e7e9ef;
  color: #c8102e;
  font-size: 28px;
}

.price-badge {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #c8102e;
  border: 1px solid #e7e9ef;
  font-weight: 900;
  margin-top: .5rem;
}

.featured {
  border: 2px solid #f8bec9;
  box-shadow: 0 24px 70px rgba(200,16,46,.15);
}

.featured .price-ribbon {
  background: #ffe9ee;
  color: #c8102e;
}

.btn-outline-danger {
  --bs-btn-color: #c8102e;
  --bs-btn-border-color: #e2aab7;
  --bs-btn-hover-bg: #c8102e;
  --bs-btn-hover-border-color: #c8102e;
  --bs-btn-hover-color: #fff;
}


/* ====== SECCIÓN MEDIOS DE PAGO ====== */
.payments {
  background: #fff5f7; /* mismo blush de tu paleta */
}

.payment-card {
  border: 1px solid #e7e9ef;
  border-radius: 12px;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 8px 22px rgba(16,24,40,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.payment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(16,24,40,.16);
}

.payment-card img {
  max-width: 100%;
  height: auto;
}

.services-sidebar .paquete {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.paquete-titulo {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.paquete-precio {
  font-size: 1.8rem;
  font-weight: bold;
  color: #c00;
}

.paquete-badge {
  display: inline-block;
  background: #ffc107;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.9rem;
  margin: 5px 0;
}

.paquete-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.paquete-lista li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
/* Sidebar paquete responsivo */
.services-sidebar .paquete {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .services-sidebar .paquete {
    padding: 16px;
    margin-top: 20px;
    text-align: center;
  }
  .paquete-precio {
    font-size: 1.5rem;
  }
  .paquete-lista {
    text-align: center;
  }
  .paquete-lista li {
    border: none;
    padding: 4px 0;
  }
}