/* ===========================================================================
   site.css — complementos del diseño original (styles.css).
   Aquí vive sólo lo que el sitio dinámico necesita y el mockup estático no
   contemplaba: rejilla de precios variable, formulario de demo completo y
   mensajes de estado. styles.css se mantiene tal cual llegó del diseño.
   =========================================================================== */

/* ===================== MENÚ MÓVIL ===================== */
/* Debajo de 900px styles.css oculta `.nav-links`; al abrir el menú se despliega
   como panel fijo usando los colores del tema activo. */
@media(max-width:900px){
  .nav-links.open{
    display:flex; position:fixed; top:64px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:18px;
    background:var(--nav-scroll-bg); backdrop-filter:blur(16px);
    padding:24px; border-bottom:1px solid var(--border);
  }
}

/* ===================== PRECIOS DINÁMICOS ===================== */
/* El catálogo decide cuántos planes se publican, así que la rejilla no puede
   estar fijada a tres columnas como en el mockup. */
.pricing-grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.pricing-grid-1{max-width:400px; margin:0 auto}
.pricing-grid-2{max-width:820px; margin:0 auto}

.pricing-note{
  text-align:center; margin-top:22px;
  font-size:12.5px; color:var(--text-dimmer);
}

/* Estado "sin planes publicados": invita a pedir una cotización a la medida.
   Es la única tarjeta de la sección, así que se diseña para captar la atención
   (borde con degradado de marca, halo, icono y beneficios) en vez de una caja plana. */
.quote-card{
  position:relative; max-width:680px; margin:0 auto;
  border-radius:calc(var(--radius) + 6px);
  padding:2px;                 /* grosor del borde degradado */
  background:var(--grad-brand);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
/* Halo suave que respira detrás de la tarjeta. */
.quote-glow{
  position:absolute; z-index:0; width:340px; height:340px; border-radius:50%;
  top:-150px; right:-110px; pointer-events:none;
  background:radial-gradient(circle, var(--accent-2), transparent 68%);
  opacity:.5; filter:blur(6px); animation:quoteFloat 9s ease-in-out infinite;
}
@keyframes quoteFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-18px,22px) scale(1.08)}
}
.quote-body{
  position:relative; z-index:1; text-align:center;
  background:var(--surface); border-radius:var(--radius);
  padding:48px 40px 40px;
}
.quote-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 12px; margin-bottom:22px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.quote-body h3{
  font-size:clamp(23px,3.1vw,32px); line-height:1.2; font-weight:800;
  margin:0 0 14px; letter-spacing:-.01em;
}
.quote-hl{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.quote-body p{
  font-size:15.5px; color:var(--text-dim); max-width:480px;
  margin:0 auto 26px; line-height:1.6;
}
.quote-feats{
  list-style:none; margin:0 auto 30px; padding:0;
  display:inline-flex; flex-direction:column; gap:12px; text-align:left;
}
.quote-feats li{
  display:flex; align-items:center; gap:11px;
  font-size:14.5px; font-weight:600; color:var(--text);
}
.quote-check{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--grad-brand);
  box-shadow:0 4px 10px -3px color-mix(in srgb, var(--accent-3) 70%, transparent);
}
.quote-actions{
  display:flex; flex-wrap:wrap; gap:16px 22px;
  align-items:center; justify-content:center;
}
.quote-actions .btn-primary{box-shadow:0 14px 32px -10px color-mix(in srgb, var(--accent-3) 75%, transparent)}
.quote-link{
  font-size:14px; font-weight:700; color:var(--accent);
  text-decoration:none; position:relative;
}
.quote-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.quote-link:hover::after{transform:scaleX(1)}
.quote-reply{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:26px 0 0; font-size:12.5px; color:var(--text-dimmer); font-weight:500;
}
.quote-dot{
  width:8px; height:8px; border-radius:50%; background:#2ecc71;
  box-shadow:0 0 0 4px rgba(46,204,113,.18); animation:quotePulse 2.2s ease-in-out infinite;
}
@keyframes quotePulse{
  0%,100%{box-shadow:0 0 0 3px rgba(46,204,113,.22)}
  50%{box-shadow:0 0 0 6px rgba(46,204,113,.06)}
}
@media(max-width:560px){
  .quote-body{padding:38px 24px 32px}
  .quote-body h3 br{display:none}
}
@media(prefers-reduced-motion:reduce){
  .quote-glow,.quote-dot{animation:none}
}

/* ===================== FORMULARIO DE DEMO ===================== */
/* `.cta-banner::after` es un velo radial puramente decorativo, pero al ser el
   último hijo posicionado del banner se pinta encima del formulario y se traga
   los clics: sin esto no se puede enfocar ningún campo. */
.cta-banner::after{pointer-events:none}
/* Y el contenido queda explícitamente por encima del velo, no sólo por orden
   de pintado. */
.cta-copy,
.cta-form,
.cta-alert,
.cta-note{z-index:1}

/* La banda CTA tiene fondo claro en ambos temas, por eso los textos del
   formulario se fijan en tinta oscura y no siguen a las variables del tema. */
.cta-form{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px; max-width:620px; margin:0 auto 16px; text-align:left;
}
.cta-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.cta-field-full{grid-column:1 / -1}
/* Tinta plena: 12.5px sobre el degradado azul del banner necesita el contraste
   completo para leerse bien. */
.cta-field label{
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:#0a0b12;
}
.cta-form input,
.cta-form select,
.cta-form textarea{
  width:100%; padding:12px 16px; border-radius:14px;
  border:1px solid rgba(10,11,18,.15); background:rgba(255,255,255,.92);
  font-family:inherit; font-size:14.5px; color:#0a0b12; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus{
  border-color:rgba(10,11,18,.55);
  box-shadow:0 0 0 3px rgba(10,11,18,.12);
}
.cta-form textarea{resize:vertical; min-height:84px}
.cta-form select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0b12' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.cta-form .cta-submit{grid-column:1 / -1; margin-top:4px}

/* Captcha: respuesta + botón para pedir otra pregunta. */
.captcha-row{display:flex; gap:10px; align-items:stretch}
.captcha-row input{flex:1; min-width:0}
.captcha-reload{
  flex:0 0 auto; width:46px; border-radius:14px;
  border:1px solid rgba(10,11,18,.15); background:rgba(255,255,255,.92);
  color:#0a0b12; font-size:18px; line-height:1; cursor:pointer;
  transition:background .15s, transform .15s;
}
.captcha-reload:hover{background:#fff; transform:rotate(-45deg)}
.captcha-reload:disabled{opacity:.5; cursor:progress; transform:none}

/* Campo trampa antispam: fuera de la vista pero presente en el DOM. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ===================== MENSAJES DE ESTADO ===================== */
.cta-alert{
  position:relative; max-width:620px; margin:0 auto 18px;
  padding:14px 18px; border-radius:14px; text-align:left;
  font-size:14px; line-height:1.5;
}
.cta-alert-ok{
  background:rgba(10,11,18,.9); color:#fff; text-align:center; font-weight:600;
}
.cta-alert-error{background:rgba(214,54,54,.14); border:1px solid rgba(214,54,54,.45); color:#7a1414}
.cta-alert-error ul{margin:8px 0 0; padding-left:20px; list-style:disc}
.cta-alert-error li{margin-bottom:4px}

@media(max-width:640px){
  .cta-form{grid-template-columns:1fr}
}