/* ============================================================
   UNIFICACIÓN VISUAL — newsletter/ y asesores/
   Referencia canónica: index.html (valores medidos con getComputedStyle).
   Se carga DESPUÉS del <style> de cada página para prevalecer sobre las reglas
   heredadas. Solo estilos: no modifica copy ni estructura.
   ============================================================ */

:root {
  --ui-primary:           #041635;   /* tailwind: primary */
  --ui-secondary:         #0057bf;   /* tailwind: secondary (azul CTA) */
  --ui-card:              #eceef0;   /* tailwind: surface-container */
  --ui-fixed:             #d8e2ff;   /* tailwind: primary-fixed */
  --ui-on-fixed:          #091b3a;   /* tailwind: on-primary-fixed */
  --ui-primary-container: #1b2b4b;   /* tailwind: primary-container */
  --ui-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

/* ---------- TIPOGRAFÍA ---------- */
body {
  font-family: var(--font-body);          /* DM Sans */
  font-size: 16px;
  line-height: 1.625;
  font-weight: 400;
  text-align: left;
}

h1, h2, h3 { font-family: 'Manrope', sans-serif; }

h1 {
  font-size: 48px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: normal;
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  h1 { font-size: 72px; line-height: 1; }
  h2 { font-size: 36px; line-height: 1.111; }
}

/* títulos de card (index: h4 text-xl font-bold) */
.pillar-title, .edition-title, .offer__title, .how__title, .who__card-title,
.form-success h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 12px;
}
.preview-title {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  line-height: 1.33;
  font-weight: 700;
}
.feature-label {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

/* subtítulo / lead (index: text-lg y text-xl en hero) */
.section-sub, .who__subtitle, .form-section__subtitle {
  font-size: 18px;
  line-height: 1.55;
}
.hero-sub, .hero__body p {
  font-size: 20px;
  line-height: 1.625;
}
.hero__body p { margin-bottom: 24px; }

/* párrafo de cuerpo (index: text-base leading-relaxed) */
.sobre-body, .pillar-desc, .preview-bajada, .edition-bajada, .offer__text,
.how__text, .who__card-text, .testimonials__text, .about-cristian__body p {
  font-size: 16px;
  line-height: 1.625;
}

/* texto pequeño / caption (index: text-sm y text-xs) */
.feature-desc, .fit__list li, .hero__trust, .hero-proof, label,
.hero-form .form-group label, .radio-option span {
  font-size: 14px;
}
.field-hint, .form-disclaimer, .cta-disclaimer, .testimonials__author-role,
.testimonials__disclaimer {
  font-size: 12px;
}

/* elementos "de titular" de asesores que heredaban Manrope del body */
.hero__badge-value, .hero__badge-label, .form-section-title, .fit__title,
.testimonials__author-name, .who__tag {
  font-family: 'Manrope', sans-serif;
}

/* campos de formulario: cuerpo en DM Sans */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select, input[type="file"],
.hero-form input[type="text"], .hero-form input[type="email"], .form-inline input {
  font-family: var(--font-body);
  font-size: 16px;
}

/* ---------- ESPACIADO ---------- */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}
.site-header .container, .site-footer .container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}

/* newsletter: 96px vertical; el padding lateral (24px) vive en el contenedor interno de 1280px */
.page-newsletter .hero, .sobre, .pillars, .preview, .archivo { padding: 96px 0; }
.cta-close { padding: 96px 24px; }          /* bloque angosto centrado */
.features { padding: 48px 0; }              /* franja: mismo criterio que la trust bar del home (py-12) */
.hero-inner, .sobre-inner, .features-grid, .pillars > div,
.features > div:not(.features-grid) {
  max-width: 1280px !important;
  margin-inline: auto;
  padding-inline: 24px;
}
.pillars-grid, .archivo-grid { max-width: 1280px; }

/* asesores: secciones que usan .container como wrapper */
.page-asesores .hero, .section, .who, .form-section { padding: 96px 0; }
.strip { padding: 48px 0; }                 /* franja: idem trust bar */

/* asesores: el grid del hero no debe ensancharse por el contenido (min-content) */
.hero__grid {
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}
.hero__grid > * { min-width: 0; }
@media (max-width: 768px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- BOTONES (píldora, igual que .btn del home) ---------- */
.btn-primary:not(.btn), .btn-outline:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  padding: 12px 32px;
  min-height: 48px;
  border-radius: 9999px;
  border: 2px solid var(--ui-secondary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 250ms ease;
}
.btn-primary:not(.btn) {
  background: var(--ui-secondary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,87,191,.35);
}
.btn-primary:not(.btn):hover {
  background: #003d99;
  border-color: #003d99;
  box-shadow: 0 6px 20px rgba(0,87,191,.45);
  transform: translateY(-1px);
}
.btn-primary.full:not(.btn) { display: flex; width: 100%; }
.btn-outline:not(.btn) {
  background: transparent;
  color: var(--ui-secondary);
}
.btn-outline:not(.btn):hover {
  background: var(--ui-secondary);
  color: #fff;
}
@media (max-width: 480px) {
  .form-inline .btn-primary:not(.btn) { width: 100%; }
}

/* ---------- CARDS ---------- */
/* neutras: gris claro, radio 32px, sin borde ni sombra */
.preview-card, .edition-card, .offer__card, .how__card, .testimonials__card {
  background: var(--ui-card);
  border: 0;
  box-shadow: none;
  border-radius: 32px;
  padding: 32px;
}
.preview-section { border-radius: 16px; }

/* destacadas / dark: navy con borde superior azul (card central de "Tres pilares") */
.pillar-card, .who__card {
  background: var(--ui-primary-container);
  border: 0;
  border-top: 4px solid var(--ui-secondary);
  border-radius: 32px;
  padding: 40px;
  box-shadow: var(--ui-shadow-xl);
}
.pillar-title, .who__card-title { color: #fff; }
.pillar-desc, .who__card-text { color: #cbd5e1; }

/* ---------- BADGES / EYEBROW (píldora del hero del home) ---------- */
.eyebrow, .hero-eyebrow, .section-label, .sobre-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.333;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 18px;                       /* píldora en 1 línea; rectángulo redondeado (no óvalo) si ocupa 2 */
  background: var(--ui-fixed);
  color: var(--ui-on-fixed);
  margin-bottom: 16px;
}
.eyebrow, .hero-eyebrow { margin-bottom: 24px; }
.section-label.light { color: var(--ui-on-fixed); }
.tag { border-radius: 9999px; }

/* ---------- ÍCONOS (contenedor de "Tres pilares") ---------- */
.feature-icon, .offer__icon {
  width: 64px;
  height: 64px;
  background: var(--ui-fixed);
  border-radius: 16px;
}
.feature-icon { margin-bottom: 16px; }
.offer__icon  { margin-bottom: 32px; }
.feature-icon i, .offer__icon i { font-size: 30px; color: var(--ui-primary); }

.pillar-icon, .who__card-icon {
  width: 64px;
  height: 64px;
  background: var(--ui-secondary);
  border-radius: 16px;
  margin-bottom: 32px;
}
.pillar-icon i, .who__card-icon i { font-size: 30px; color: #fff; }

.preview-section i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  background: var(--ui-fixed);
  border-radius: 16px;
  font-size: 24px;
  color: var(--ui-primary);
}

/* ---------- AJUSTES DE ALINEACIÓN ---------- */
.pillars-header h2, .cta-close h2 { text-align: center; }
.edition-card > .tag { align-self: flex-start; }

/* ---------- SEGURIDAD EN MOBILE ANGOSTO ---------- */
h1 { overflow-wrap: break-word; }
@media (max-width: 359px) {
  h1 { font-size: 40px; line-height: 1.2; }
}
.hero__body .btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .eyebrow, .hero-eyebrow, .section-label, .sobre-eyebrow { letter-spacing: 0.06em; }
}

/* ---------- H1 DEL HERO DE ASESORES (copy largo) ---------- */
.page-asesores .hero h1 {
  font-size: clamp(32px, 3vw + 12px, 48px);
  line-height: 1.2;
}

/* ---------- FOTO DEL HERO DE NEWSLETTER: solo en orientación landscape ---------- */
/* En portrait (la gran mayoría de los celulares en uso normal, sin importar
   el ancho) la foto se oculta por completo y el hero se acomoda a su
   contenido en vez de reservar el alto de 720px pensado para la foto. */
@media (orientation: portrait) {
  .page-newsletter .hero { padding-bottom: 0; min-height: 0; }
  .page-newsletter .hero-photo { display: none; }
}

/* Con la foto visible (landscape) pero un ancho angosto (ej. iPhone SE
   apaisado, 667px), la regla existente de .hero-inner a 1 columna dejaría el
   formulario debajo de la foto superpuesta. En ese cruce puntual, se
   mantienen 2 columnas para que el texto/formulario no invada la mitad
   derecha donde vive la foto. */
@media (orientation: landscape) and (max-width: 768px) {
  .page-newsletter .hero-left { max-width: 50%; }
}

/* ---------- ÁREA TÁCTIL: campo de CV ---------- */
input[type="file"] { min-height: 44px; }