/* =============================================================
   SOLO PROMOS - Estilos base y paleta de marca
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* Paleta oficial */
  --coral: #FF4D2E;
  --coral-oscuro: #E03A1D;
  --coral-suave: #FFE6E0;
  --azul: #00487C;
  --azul-oscuro: #002E52;
  --azul-suave: #E3EEF6;
  --amarillo: #FFC93C;
  --amarillo-suave: #FFF4D6;

  /* Neutros */
  --fondo: #F6F7F9;
  --blanco: #FFFFFF;
  --texto: #002E52;
  --texto-suave: #5B6B7B;
  --borde: #DDE3EA;
  --exito: #1E9E5A;
  --error: #D93025;

  /* Forma */
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 4px 16px rgba(0, 46, 82, .08);
  --sombra-fuerte: 0 8px 28px rgba(0, 46, 82, .16);
  --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 900; color: var(--azul); }

.contenedor { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer; text-decoration: none !important;
  transition: transform .1s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 4px 12px rgba(255, 77, 46, .35); }
.btn-coral:hover { background: var(--coral-oscuro); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-oscuro); }
.btn-borde { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-bloque { width: 100%; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }

/* ---------- Etiquetas de precio ---------- */
.precio-promo { font-size: 1.5rem; font-weight: 900; color: var(--coral); }
.precio-anterior { color: var(--texto-suave); text-decoration: line-through; font-size: .95rem; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 800;
}
.badge-amarillo { background: var(--amarillo); color: var(--azul-oscuro); }
.badge-coral { background: var(--coral); color: #fff; }
.badge-azul { background: var(--azul-suave); color: var(--azul); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 1rem;
  border: 2px solid var(--borde); border-radius: var(--radio-chico);
  background: #fff; color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul);
}
.ayuda { font-size: .85rem; color: var(--texto-suave); margin-top: 4px; }

/* ---------- Mensajes ---------- */
.alerta { padding: 12px 16px; border-radius: var(--radio-chico); margin-bottom: 16px; font-weight: 600; }
.alerta-ok { background: #E3F6EC; color: var(--exito); }
.alerta-error { background: #FDE8E6; color: var(--error); }
.alerta-info { background: var(--azul-suave); color: var(--azul); }

/* ---------- Utilidades ---------- */
.texto-centro { text-align: center; }
.texto-suave { color: var(--texto-suave); }
.oculto { display: none !important; }

/* ---------- Íconos de línea (Tabler) ---------- */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.btn .ico { width: 1.25em; height: 1.25em; }
.badge .ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
h1 .ico, h2 .ico { color: var(--coral); }
.vacio-icono .ico { width: 52px; height: 52px; color: var(--coral); stroke-width: 1.5; }