:root{
  /* =========================
     EMPERADOR (alto contraste)
     Blanco + Oro + Verde esmeralda + Rojo imperial
     ========================= */

  /* Base */
  --bg0:#000000;
  --bg1:#020617;
  --bg2:#071227;
  --panel:#071227ee;
  --panel2:#0b2346f0;

  /* Texto */
  --white:#ffffff;
  --text:#f9fafb;
  --muted:#d1fae5;

  /* Oro */
  --gold-700:#8a6a12;
  --gold-600:#b3891a;
  --gold-500:#d4af37;
  --gold-400:#f2d06b;
  --gold-300:#ffe8a3;

  /* Verde (reemplaza el azul) */
  --green-700:#047857;
  --green-600:#059669;
  --green-500:#10b981;
  --green-400:#34d399;
  --green-300:#6ee7b7;

  /* Rojo imperial */
  --red-600:#dc2626;
  --red-500:#ef4444;
  --red-400:#f87171;

  /* Glows */
  --glow-gold: 0 0 0 1px rgba(212,175,55,.28), 0 0 22px rgba(212,175,55,.26), 0 18px 60px rgba(0,0,0,.72);
  --glow-green: 0 0 0 1px rgba(52,211,153,.22), 0 0 26px rgba(16,185,129,.22), 0 18px 60px rgba(0,0,0,.72);
  --glow-red:  0 0 0 1px rgba(239,68,68,.22), 0 0 24px rgba(239,68,68,.18), 0 18px 60px rgba(0,0,0,.72);

  --shadow-deep: 0 26px 90px rgba(0,0,0,.78);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  min-height:100vh;
  color:var(--text);

  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(16,185,129,.38), rgba(0,0,0,0) 65%),
    radial-gradient(900px 520px at 15% 20%, rgba(212,175,55,.22), rgba(0,0,0,0) 62%),
    radial-gradient(900px 520px at 85% 20%, rgba(239,68,68,.14), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 65%);
  background-attachment: fixed;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:22px;
  -webkit-font-smoothing:antialiased;


  overflow-x:hidden;
}

/* Evita scroll horizontal accidental en móvil */
html{ overflow-x:hidden; }
img, svg, iframe{ max-width:100%; }


.hidden{display:none}

/* =========================
   NOTIFICACIÓN
   ========================= */
.notification{
  position:fixed;
  z-index:50;
  top:16px;
  left:50%;
  transform:translateX(-50%) translateY(-20px);
  max-width:600px;
  width:calc(100% - 32px);
  padding:10px 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.86rem;
  line-height:1.4;

  color:#071227;

  background: linear-gradient(135deg,
    var(--gold-400) 0%,
    #ffffff 22%,
    var(--green-300) 52%,
    var(--gold-500) 100%);
  background-size: 240% 240%;
  animation: notification-shift 6.2s ease infinite;

  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(212,175,55,.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}

@keyframes notification-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.notification-icon{
  width:28px;height:28px;border-radius:999px;
  background:rgba(7,18,39,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.notification-text-main{font-weight:950;display:block;font-size:.93rem}
.notification-text-sub{font-size:.80rem;opacity:.95}

.notification--visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.notification--error{
  color:#fff;
  background: linear-gradient(135deg,
    rgba(7,18,39,.98),
    rgba(220,38,38,.55),
    rgba(7,18,39,.98));
  border-color: rgba(212,175,55,.70);
  box-shadow: var(--glow-red);
}

.notification-close{
  margin-left:auto;
  border:none;
  background:rgba(7,18,39,.10);
  color:inherit;
  border-radius:999px;
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.75rem;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}

/* =========================
   HEADER + LOGO
   ========================= */
.site-header{
  width:100%;
  max-width:980px;
  margin:6px auto 16px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.site-logo{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  padding:14px 18px;
  border-radius:22px;

  background:
    radial-gradient(700px 220px at 50% 0%, rgba(212,175,55,.20), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(7,18,39,.76));
  border:1px solid rgba(212,175,55,.38);

  box-shadow: var(--glow-gold), var(--shadow-deep);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.site-logo:hover{
  transform: translateY(-2px);
  border-color: rgba(242,208,107,.78);
  box-shadow: 0 0 0 1px rgba(212,175,55,.35),
              0 0 34px rgba(212,175,55,.32),
              0 0 22px rgba(16,185,129,.16),
              0 30px 100px rgba(0,0,0,.84);
}

.logo-svg{
  width:92px;
  height:92px;
  display:block;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.62));
}

.wordmark{
  display:flex;
  align-items:baseline;
  line-height:1;
  user-select:none;
  white-space:nowrap;
}

.wordmark .aqui,
.wordmark .mismo,
.wordmark .es{
  font-weight:1000;
  letter-spacing:-0.02em;
  font-size: 28px;
}

.wordmark .aqui{
  color: var(--white);
  text-shadow:
    0 0 18px rgba(255,255,255,.22),
    0 0 34px rgba(16,185,129,.12);
}
.wordmark .mismo{
  color: var(--gold-400);
  text-shadow:
    0 0 22px rgba(212,175,55,.38),
    0 0 44px rgba(212,175,55,.22);
}
.wordmark .es{
  color: var(--green-400);
  text-shadow:
    0 0 22px rgba(52,211,153,.32),
    0 0 44px rgba(16,185,129,.22);
}
.wordmark .tld{
  margin-left:6px;
  font-weight:900;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(212,175,55,.16);
}

/* =========================
   PORTAL
   ========================= */
.portal{
  width:100%;
  max-width:980px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* =========================
   ACORDEÓN
   ========================= */
.accordion-item{
  border-radius:20px;
  overflow:hidden;
}
.accordion-item > summary::-webkit-details-marker{display:none}
.accordion-item > summary{list-style:none}

.main-option{
  width:100%;
  cursor:pointer;
  padding:16px 16px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:12px;

  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(7,18,39,.92));
  border:1px solid rgba(212,175,55,.32);
  box-shadow: var(--glow-gold);

  transition:transform .14s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  position:relative;
}

.main-option::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background:
    radial-gradient(240px 80px at 18% 20%, rgba(242,208,107,.26), rgba(0,0,0,0) 70%),
    radial-gradient(260px 90px at 85% 30%, rgba(52,211,153,.18), rgba(0,0,0,0) 72%);
  opacity:.9;
  pointer-events:none;
  filter: blur(8px);
}

.main-option:hover{
  transform:translateY(-2px);
  border-color:rgba(52,211,153,.70);
  box-shadow: var(--glow-green);
}
.main-option:active{transform:translateY(0)}
.main-option:focus-visible{
  outline:none;
  border-color:rgba(242,208,107,.90);
  box-shadow: 0 0 0 2px rgba(242,208,107,.18), var(--glow-gold);
}

.main-option-title{
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1.00rem;
  line-height:1.10rem;
  color: var(--white);
  text-shadow: 0 0 16px rgba(255,255,255,.14);
}

.main-option-desc{
  margin-left:auto;
  font-size:.84rem;
  color:rgba(255,255,255,.90);

  opacity:0;
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  transform:translateY(-2px);
  transition:opacity .16s ease, transform .16s ease, max-width .16s ease;
}

.main-option:hover .main-option-desc,
.main-option:focus-visible .main-option-desc,
.accordion-item[open] > summary .main-option-desc{
  opacity:1;
  transform:translateY(0);
  max-width:420px;
}

.main-option-chev{
  margin-left:10px;
  opacity:.95;
  color: var(--gold-400);
  text-shadow: 0 0 14px rgba(212,175,55,.28);
  transition:transform .18s ease, opacity .18s ease;
}
.accordion-item[open] > summary .main-option-chev{transform:rotate(180deg)}

.accordion-item[open] > summary.main-option{
  border-color:rgba(242,208,107,.88);
  background:
    radial-gradient(520px 120px at 18% 10%, rgba(212,175,55,.22), rgba(0,0,0,0) 62%),
    radial-gradient(520px 120px at 85% 18%, rgba(239,68,68,.12), rgba(0,0,0,0) 65%),
    linear-gradient(135deg, rgba(242,208,107,.10), rgba(7,18,39,.96));
  box-shadow: var(--glow-gold);
}

/* Panel con slide */
.option-panel{
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(16,185,129,.18), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(7,18,39,.96), rgba(2,6,23,.92));
  border-left:1px solid rgba(212,175,55,.22);
  border-right:1px solid rgba(212,175,55,.22);
  border-bottom:1px solid rgba(212,175,55,.22);
  border-radius:0 0 20px 20px;

  display:grid;
  grid-template-rows:0fr;

  opacity:0;
  transform:translateY(-8px);

  transition:grid-template-rows .34s ease, opacity .22s ease, transform .22s ease;
  overflow:hidden;
}

.option-panel > .panel-inner{overflow:visible}

.accordion-item[open] > .option-panel{
  grid-template-rows:1fr;
  opacity:1;
  transform:translateY(0);
  overflow:visible;
}

.panel-inner{padding:16px 16px 18px}

.panel-head{margin-bottom:10px}
.panel-head h2{
  font-size:1.10rem;
  font-weight:1000;
  color: var(--white);
  text-shadow: 0 0 18px rgba(255,255,255,.12), 0 0 24px rgba(212,175,55,.14);
}
.panel-head p{
  margin-top:6px;
  font-size:.84rem;
  color: rgba(255,255,255,.80);
}

/* =========================
   FORMULARIOS
   ========================= */
form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 10px;
  align-items:flex-start;
}
form .full{grid-column:1 / -1}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.82rem;
}

label{
  font-size:.82rem;
  font-weight:900;
  color: rgba(255,255,255,.94);
  text-shadow: 0 0 14px rgba(255,255,255,.06);
}
label span{
  color: var(--gold-400);
  margin-left:2px;
  text-shadow: 0 0 18px rgba(212,175,55,.20);
}
.field small{
  font-size:.72rem;
  color: rgba(255,255,255,.74);
}

input,select,textarea{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,6,23,.82));
  border-radius:12px;
  border:1px solid rgba(212,175,55,.24);
  padding:9px 10px;
  color:var(--text);
  font-size:.84rem;
  outline:none;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .12s ease;
}

input:hover,select:hover,textarea:hover{ border-color: rgba(52,211,153,.42); }

input:focus,select:focus,textarea:focus{
  border-color:rgba(52,211,153,.82);
  box-shadow:
    0 0 0 2px rgba(52,211,153,.14),
    0 0 24px rgba(16,185,129,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.92));
  transform: translateY(-1px);
}

textarea{
  resize:vertical;
  min-height:88px;
  max-height:280px;
}

.error{
  display:none;
  font-size:.72rem;
  color: #fecaca;
  text-shadow: 0 0 16px rgba(239,68,68,.20);
}

/* =========================
   DROPDOWNS: fondo azul oscuro
   ========================= */
select{
  background: linear-gradient(180deg, rgba(11,35,70,.95), rgba(2,6,23,.92)) !important; /* azul oscuro */
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(242,208,107,.40) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 24px rgba(16,185,129,.10) !important;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:hover{
  border-color: rgba(52,211,153,.70) !important;
}
select:focus{
  border-color: rgba(52,211,153,.90) !important;
  box-shadow:
    0 0 0 2px rgba(52,211,153,.14),
    0 0 26px rgba(16,185,129,.16),
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Opciones (menú desplegado)
   Nota: algunos navegadores/OS no permiten estilizar el menú nativo al 100%. */
select option,
select optgroup{
  background:#0b2346 !important; /* azul oscuro */
  color:#ffffff !important;
}
select option:disabled{
  color: rgba(255,255,255,.55) !important;
}

/* =========================
   BOTONES
   ========================= */
.actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:6px;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.84rem;
  border-radius:999px;
  padding:9px 16px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  overflow:hidden;

  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .08s ease;
}

/* Desktop safety: pseudo-elementos decorativos no deben capturar el click */
.btn::before,
.btn::after{
  pointer-events: none;
}

.btn-primary{
  background:
    radial-gradient(circle at 30% 20%, #ffffff, var(--gold-400) 35%, var(--gold-500) 70%, #a97d12 100%);
  color: #071227;
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.30),
    0 0 30px rgba(212,175,55,.32),
    0 18px 46px rgba(0,0,0,.65);
  font-weight:1000;
  letter-spacing:.02em;
}
.btn-primary::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:45%;
  height:220%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: rotate(18deg);
  opacity:0;
  transition: opacity .18s ease;
  /* Fix desktop: algunos navegadores tratan el pseudo-elemento como capa clickable */
  pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(52,211,153,.16),
    0 0 34px rgba(212,175,55,.38),
    0 0 22px rgba(16,185,129,.20),
    0 24px 60px rgba(0,0,0,.74);
}
.btn-primary:hover::before{
  opacity:.95;
  animation: shine 1.1s ease forwards;
}
@keyframes shine{
  0%{ transform: translateX(0) rotate(18deg); }
  100%{ transform: translateX(420%) rotate(18deg); }
}

.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-ghost:hover{
  background: rgba(16,185,129,.10);
  border-color: rgba(52,211,153,.62);
  box-shadow: var(--glow-green);
  transform: translateY(-1px);
}

/* =========================
   MODAL (cliente existente)
   ========================= */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;

  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-card{
  width:min(720px, 100%);
  border-radius:22px;
  padding:16px 16px 14px;
  border:1px solid rgba(242,208,107,.60);
  background:
    radial-gradient(760px 240px at 50% 0%, rgba(212,175,55,.16), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(7,18,39,.96), rgba(2,6,23,.94));
  box-shadow: var(--glow-gold), var(--shadow-deep);
}

.modal-title{
  font-size:1.05rem;
  font-weight:1000;
  letter-spacing:.02em;
  margin-bottom:10px;
}

.modal-body{
  font-size:.92rem;
  color: rgba(255,255,255,.90);
  line-height:1.35rem;
}

.modal-main{ margin-bottom:10px; }

.modal-meta{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(52,211,153,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,6,23,.80));
}

.modal-question{ margin-top:10px; font-weight:700; }

.modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
}

.modal-actions .btn{ min-width: 240px; justify-content:center; }

.modal-hint{
  margin-top:10px;
  font-size:.82rem;
  opacity:.85;
}

/* =========================
   CONSENTIMIENTO
   ========================= */
.consent-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;

  background:
    radial-gradient(520px 120px at 18% 20%, rgba(212,175,55,.20), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,6,23,.86));
  border:1px solid rgba(242,208,107,.70);
  box-shadow: var(--glow-gold);
}
.consent-box input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: var(--gold-500);
  cursor:pointer;
}
.consent-title{
  font-weight:1000;
  letter-spacing:.03em;
  color: var(--gold-300);
  text-shadow: 0 0 18px rgba(212,175,55,.22);
}
.consent-text{
  font-size:.80rem;
  color:rgba(255,255,255,.92);
  line-height:1.30rem;
}

/* =========================
   PLANES: Cartas Premium
   ========================= */
.plans-intro{ margin-top:6px; }

/* Planes en formato acordeón (dentro de la sección PLANES Y PRECIOS) */
.plan-accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

/* En el acordeón de planes, mostrar siempre el "meta" (precio) incluso sin hover */
.plan-accordion .main-option-desc{
  opacity:1;
  max-width:520px;
  transform:translateY(0);
}

/* En móvil, el sitio ocultaba .main-option-desc por defecto; aquí lo volvemos visible */
@media (max-width:680px){
  /* En móvil, los planes muestran el meta (precio) y deben ajustarse al ancho sin forzar scroll horizontal */
  #sec-planes .plan-accordion .main-option-desc{ display:block !important; }

  /* Evita que el texto en una sola línea agrande el viewport */
  #sec-planes .plan-accordion .main-option{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
  }

  /* Primera fila: título + chevron */
  #sec-planes .plan-accordion .main-option-title{
    flex:1 1 auto;
    min-width:0;
  }
  #sec-planes .plan-accordion .main-option-chev{
    margin-left:auto;
  }

  /* Segunda fila: meta (precio) en 2 líneas si hace falta */
  #sec-planes .plan-accordion .main-option-desc{
    flex:1 1 100%;
    margin-left:0;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    transform:none;
    opacity:.95;
  }
}

.plan-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:10px;
}

@media (min-width: 860px){
  .plan-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
}

/* Espacio real para el badge */
.plan-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:54px 16px 16px;

  background:
    radial-gradient(560px 180px at 12% 10%, rgba(212,175,55,.18), rgba(0,0,0,0) 62%),
    radial-gradient(600px 200px at 95% 20%, rgba(16,185,129,.16), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(2,6,23,.92));

  border:1px solid rgba(242,208,107,.42);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.14),
    0 24px 80px rgba(0,0,0,.70);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.plan-card::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-35%;
  width:70%;
  height:120%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  transform: rotate(18deg);
  opacity:.6;
  pointer-events:none;
  filter: blur(6px);
}

.plan-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(242,208,107,.85), rgba(16,185,129,.55), rgba(0,0,0,0));
  opacity:.85;
}

.plan-card:hover{
  transform: translateY(-3px);
  border-color: rgba(52,211,153,.55);
  box-shadow:
    0 0 0 1px rgba(52,211,153,.20),
    0 0 34px rgba(212,175,55,.26),
    0 0 22px rgba(16,185,129,.18),
    0 30px 100px rgba(0,0,0,.82);
}

/* Cabecera */
.plan-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  margin-top:2px;
}

.plan-title{
  font-size:1.12rem;
  font-weight:1000;
  color:#fff;
  text-shadow: 0 0 18px rgba(255,255,255,.10), 0 0 26px rgba(212,175,55,.14);
}

.plan-sub{
  margin-top:6px;
  font-size:.78rem;
  color: rgba(255,255,255,.86);
  line-height:1.15rem;
}

.plan-price{ text-align:right; min-width:130px; }
.plan-amount{
  font-size:1.55rem;
  font-weight:1000;
  letter-spacing:-0.02em;
  color:#ffffff;
  text-shadow:
    0 0 20px rgba(255,255,255,.16),
    0 0 30px rgba(242,208,107,.16);
}
.plan-period{
  font-size:.78rem;
  color: rgba(255,255,255,.75);
}

/* Badge */
.plan-badge{
  position:absolute;
  top:14px;
  left:14px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;

  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(2,6,23,.70));
  border: 1px solid rgba(242,208,107,.60);
  box-shadow: 0 0 20px rgba(212,175,55,.14);
  color: rgba(255,232,163,.95);

  z-index:2;
}

.plan-quote{
  margin-top:2px;
  font-size:.92rem;
  font-weight:950;
  color: rgba(255,255,255,.95);
}
.plan-pitch{
  margin-top:6px;
  font-size:.86rem;
  color: rgba(255,255,255,.88);
}

.plan-block{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(242,208,107,.22);
}
.plan-block h4{
  font-size:.86rem;
  font-weight:1000;
  color: rgba(255,232,163,.96);
  letter-spacing:.02em;
  margin-bottom:7px;
}

.plan-card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.plan-card ul li{
  position:relative;
  padding-left:22px;
  font-size:.86rem;
  color: rgba(255,255,255,.92);
  line-height:1.25rem;
}
.plan-card ul li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: rgba(52,211,153,.98);
  text-shadow: 0 0 18px rgba(16,185,129,.24);
  font-weight:1000;
}

.plan-highlight{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  background:
    radial-gradient(400px 120px at 15% 20%, rgba(16,185,129,.18), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,6,23,.78));
  border: 1px solid rgba(52,211,153,.38);
  box-shadow: 0 0 26px rgba(16,185,129,.12);
  color: rgba(255,255,255,.90);
  font-size:.85rem;
  line-height:1.32rem;
}

.plan-cta{
  margin-top:14px;
  width:100%;
  justify-content:center;
  font-weight:1000;
  letter-spacing:.02em;
}

.plan-card--arranque{ border-color: rgba(242,208,107,.70); }
.plan-card--boost  { border-color: rgba(110,231,183,.62); } /* NUEVO */
.plan-card--puente { border-color: rgba(52,211,153,.55); }
.plan-card--pro    { border-color: rgba(255,255,255,.32); }
.plan-card--elite  { border-color: rgba(239,68,68,.48); }

/* Destacado */
.plan-card--featured{
  box-shadow:
    0 0 0 1px rgba(242,208,107,.22),
    0 0 34px rgba(242,208,107,.22),
    0 0 22px rgba(16,185,129,.16),
    0 34px 120px rgba(0,0,0,.86);
  border-color: rgba(242,208,107,.92);
  filter: saturate(1.15);
  transform: translateY(-4px) scale(1.01);
}
.plan-card--featured:hover{
  transform: translateY(-6px) scale(1.015);
}
.plan-card--featured .plan-badge{
  background: linear-gradient(135deg, rgba(242,208,107,.92), rgba(16,185,129,.35));
  color: #071227;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 26px rgba(242,208,107,.28);
}

.plans-footnote{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(242,208,107,.35);
  color: rgba(255,255,255,.90);
  font-size:.84rem;
  line-height:1.3rem;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:680px){
  body{ padding:14px; background-attachment: scroll; }

  form{grid-template-columns:1fr}
  .main-option-desc{display:none}

  .site-logo{ padding:12px 14px; gap:8px; }
  .logo-svg{ width:78px; height:78px; }

  /* La marca no debe forzar ancho extra en pantallas chicas */
  .wordmark{
    flex-wrap:wrap;
    justify-content:center;
    white-space:normal;
    text-align:center;
    row-gap:2px;
  }
  .wordmark .aqui, .wordmark .mismo, .wordmark .es{ font-size:clamp(18px, 6vw, 22px); }
  .wordmark .tld{ font-size:clamp(14px, 4.2vw, 18px); }

  .modal-actions .btn{ min-width: min(240px, 100%); }

  .plan-price{ min-width: 110px; }
  .plan-amount{ font-size: 1.40rem; }
}

/* =========================
   ACCESIBILIDAD
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* =========================
   DEMOS / EJEMPLOS
   ========================= */
.demo-card{
  border-radius:18px;
  padding:14px 14px 12px;
  border:1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(800px 240px at 40% 0%, rgba(16,185,129,.12), rgba(0,0,0,0) 62%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(7,18,39,.92));
  box-shadow: var(--glow-gold);
}

.demo-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.demo-title{
  font-weight:1000;
  letter-spacing:.02em;
  color: var(--white);
  text-shadow: 0 0 18px rgba(255,255,255,.12), 0 0 24px rgba(212,175,55,.14);
}

.demo-sub{
  margin-top:2px;
  font-size:.82rem;
  color: rgba(255,255,255,.78);
}

.demo-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.demo-frame-wrap{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(242,208,107,.26);
  background: rgba(2,6,23,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.demo-frame{
  width:100%;
  height:620px;
  border:0;
  display:block;
  background: transparent;
}

@media (max-width: 720px){
  .demo-frame{ height: 560px; }
}


/* Demos del sistema: acordeón interno para ahorrar espacio en móvil */
.demo-accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.demo-item{ margin-top: 6px; }

/* Visit counter */
.visit-counter{
  font-size: 0.95rem;
  opacity: 0.85;
  text-align: center;
  margin: 10px 0 18px;
}


/* ====== Solicitud de Información: Botones Email/WhatsApp ====== */
.actions--split{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.actions--split .btn{
  min-width: 220px;
}
.btn-sub{
  font-size:.85em;
  opacity:.85;
  font-weight:500;
}