/* ===== Estilo corporativo claro: grises + rojo acento ===== */
:root{
  --bg:#f7f8fa;           /* fondo claro */
  --panel:#ffffff;        /* tarjetas */
  --line:#e6e9ee;         /* divisores/bordes */
  --text:#2a2f36;         /* texto principal */
  --muted:#6b7280;        /* texto secundario */
  --accent:#d90429;       /* rojo principal */
  --accent-dark:#8e0f21;  /* rojo más oscuro */
  --ok:#16a34a;
  --warn:#d97706;
  --err:#dc2626;
}

/* Utilidad accesible para ocultar visualmente */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

/* Contenedor */
.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* Encabezado */
.site-header{
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand-mark{
  width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  box-shadow:0 6px 18px rgba(217,4,41,.25);
}
.brand-text h1{
  font-size:1.35rem;margin:0 0 2px 0;font-weight:800;letter-spacing:.2px
}
.brand-text .sub{font-size:.95rem;color:var(--muted)}

/* ===== Cabecera publicitaria ===== */
.promo-header {
  position: relative;
  width: 100%;
  height: 400px;
  background: url('header.png') center/cover no-repeat;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  margin-bottom: 30px;
}
.promo-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}
.promo-content h2 {
  font-size: 2rem;
  margin-bottom: 12px;
  font-weight: 800;
}
.promo-content h2 span {
  color: var(--accent);
}
.promo-content p {
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto 22px;
  line-height: 1.6;
  color: #f1f2f3;
}
.btn-large {
  font-size: 1.05rem;
  padding: 14px 26px;
}
@media (max-width: 720px) {
  .promo-header { height: 320px; }
  .promo-content h2 { font-size: 1.6rem; }
  .promo-content p { font-size: .95rem; }
}



/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:28px;
  background:#fff;
}
.footer-grid{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:18px 0;color:var(--muted);font-size:.95rem
}
.footer-grid a{color:var(--accent);text-decoration:none}

/* Tarjetas / bloques */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(35, 42, 52, .07);
}

/* Héroe */
.hero{margin-top:22px}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;
  padding:20px;
}

/* Imagen del héroe (reemplazable por el cliente) */
.hero-figure{
  margin:0;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;border:1px solid var(--line);
  overflow:hidden;
}
.hero-image{
  display:block;width:100%;height:100%;object-fit:cover;min-height:280px;max-height:420px;
  filter:saturate(1.05) contrast(1.03);
}

/* Copy / formulario */
.lead{font-size:1.05rem;line-height:1.55;margin:0 0 12px 0}
.bullets{padding:0;margin:0 0 12px 0;list-style:none}
.bullets li{
  padding-left:24px;position:relative;margin:8px 0;color:#3a4048
}
.bullets li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.muted{color:var(--muted)}
.small{font-size:.92rem}

/* Caja del formulario */
.hero-form .form-card{padding:18px;border-radius:12px;border:1px solid var(--line);background:#fff}
.hero-form h2{margin:0 0 10px 0;font-size:1.35rem}

/* Formulario */
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px
}
.form-grid .full{grid-column:1/-1}
.field label{display:block;margin-bottom:8px;color:#4b5563;font-size:.92rem}
.field input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d7dce3;
  background:#fff;color:var(--text);outline:none;transition:box-shadow .2s,border .2s
}
.field input:focus{
  border-color:#c8cfda;
  box-shadow:0 0 0 3px rgba(217,4,41,.15);
}
.actions{margin-top:4px}
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-weight:700;letter-spacing:.2px;text-decoration:none;color:#fff;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  box-shadow:0 10px 24px rgba(217,4,41,.25);
}
.btn-secondary{
  background:#f7f7f9;color:#1e232a;border-color:#d7dce3
}
.btn-wide{width:100%}
.helper{color:var(--muted);font-size:.9rem;margin:4px 0 0}

/* Alertas */
.alert{
  padding:12px 14px;border-radius:10px;margin:12px 0 10px;border:1px solid transparent;font-size:.97rem
}
.alert.ok{background:#eaf8ef;border-color:#c9efda;color:#14532d}
.alert.warn{background:#fff6e5;border-color:#fde0a3;color:#7c4a02}
.alert.err{background:#ffeff0;border-color:#ffc2c7;color:#7f1d1d}

/* Beneficios */
.benefits{margin:26px 0}
.benefits-head{margin:0 0 12px 0}
.benefits-head h3{margin:0 0 6px 0;font-size:1.25rem}
.benefit-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px
}
.benefit{padding:18px}
.benefit-icon{
  font-size:1.3rem;width:40px;height:40px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:#fff0f2;border:1px solid #ffd7de;color:#a30d25;margin-bottom:8px
}
.benefit h4{margin:0 0 4px 0;font-size:1.05rem}
.benefit p{margin:0;color:#4b5563;line-height:1.55}

/* Responsivo */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .wrap{padding:18px}
  .benefit-grid{grid-template-columns:1fr}
}
/* ===== Estado "Pronto" / desactivado ===== */
.benefit.soon {
  position: relative;
  opacity: 0.55;                   /* tono grisáceo */
  background: #f2f3f5;             /* gris claro */
  border-style: dashed;            /* borde diferenciado */
  border-color: #d5d8de;
  pointer-events: none;            /* sin clic ni hover */
  transition: opacity .3s ease;
}
.benefit.soon:hover {
  opacity: 0.6;
}
.benefit.soon h4,
.benefit.soon p {
  color: #7a7f86;
}

/* Etiqueta "Pronto" en la esquina superior derecha */
.tag-soon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #c5c7cc;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 2;
}

/* ===== LI desactivado / pronto ===== */
.bullets li.soon {
  color: #8a8f96;
  opacity: 0.7;
  position: relative;
  padding-right: 70px; /* deja espacio para la etiqueta */
}
.bullets li.soon::before {
  background: #c4c7cc; /* viñeta gris en vez de roja */
}

/* Etiqueta "Pronto" en lista */
.bullets li .tag-soon {
  position: absolute;
  top: 2px;
  right: 0;
  background: #c5c7cc;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ===== Slider (hero) ===== */
.hero-figure{
  margin:0;
  display:block;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
}

/* Contenedor del slider con proporción fija 16:9 (responsivo) */
.slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;   /* mantiene alto proporcional */
  max-height:420px;    /* consistente con tu diseño */
  background:#f2f3f5;
}

.slides{
  position:relative;
  width:100%; height:100%;
}

.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.slide.is-active{ opacity:1; pointer-events:auto; }

.slide img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}

/* Flechas */
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; color:#1f2937;
  cursor:pointer; user-select:none;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.slider-nav:hover{ background:#fff; }
.slider-nav.prev{ left:10px; }
.slider-nav.next{ right:10px; }

/* Dots */
.slider-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px;
}
.slider-dots button{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.1);
  cursor:pointer;
}
.slider-dots button.is-active{
  background:var(--accent);
  border-color:transparent;
}

/* Accesibilidad (prefiere reducir motion) */
@media (prefers-reduced-motion: reduce){
  .slide{ transition:none; }
}

/* ===== Botón de pago manual con efecto animado ===== */
.btn-paypulse {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(217,4,41,0.7);
  animation: pulsePay 2s infinite ease-in-out, colorShift 3s infinite alternate;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-paypulse:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(217,4,41,0.5);
}

/* Efecto de pulso */
@keyframes pulsePay {
  0%   { box-shadow: 0 0 0 0 rgba(217,4,41,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(217,4,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,4,41,0); }
}

/* Efecto de cambio de color (rojo ↔ blanco) */
@keyframes colorShift {
  0% {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff;
  }
  50% {
    background: linear-gradient(135deg, #ffffff, #f7f7f7);
    color: var(--accent-dark);
    border: 1px solid var(--accent);
  }
  100% {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
  }
}

/* Accesibilidad: sin animación para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .btn-paypulse { animation: none; }
}


/* ===== Modal de pago (opción A) ===== */
.pay-modal[aria-hidden="true"] { display:none; }
.pay-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.pay-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:saturate(1.2) blur(2px);
}
.pay-dialog{
  position:relative; z-index:1;
  width:min(560px, 92vw);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:18px;
}
.pay-close{
  position:absolute; right:10px; top:10px;
  background:#f7f7f9; border:1px solid #e3e6ec; border-radius:8px;
  width:32px; height:32px; cursor:pointer;
}
.pay-head h3{ margin:0 0 6px 0; font-size:1.25rem; }
.pay-head p{ margin:0; }

.pay-summary{ margin:12px 0; }
.pay-summary ul{ margin:0; padding-left:18px; color:#4b5563; }

.pay-actions{ display:grid; gap:10px; margin-top:12px; }