/* ──────────────────────────────────────────────────────────────────────────
   Candosa 2026 — puente al sistema de la nueva landing.

   Las páginas secundarias (about, blog, legales, gracias) siguen con su markup
   `.lp-*` original. Esta hoja NO reescribe esas páginas: remapea sus tokens a
   la paleta y la tipografía del design system nuevo, de modo que todo el sitio
   se ve igual sin tocar una línea de contenido — el texto legal queda literal.

   Se enlaza la última en cada <head> para ganar la cascada.
   ────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  /* ── Tipografía ──
     El sistema nuevo no usa serif para titulares: Roboto 700 con tracking
     cerrado hace de display. Playfair queda solo para énfasis en la landing. */
  --lp-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --lp-font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ── Superficies ── */
  --lp-surface-from: #FDFCFA;
  --lp-gray-50:  #F6F2EC;
  --lp-gray-100: #F6F2EC;
  --lp-gray-200: rgba(17,33,45,.10);
  --lp-gray-300: rgba(17,33,45,.16);

  /* ── Tinta ── */
  --lp-brand-950: #11212d;
  --lp-brand-900: #11212d;
  --lp-brand-800: #1b2a36;
  --lp-brand-700: #22323f;
  --lp-gray-950: #11212d;
  --lp-gray-900: #11212d;
  --lp-gray-700: #2c3a47;
  --lp-gray-600: #2c3a47;
  --lp-gray-500: #6B7480;
  --lp-gray-400: #8a929c;

  /* ── Marca ──
     El CTA deja de ser azul pizarra y pasa a naranja Candosa. */
  --lp-accent-500: #F03906;
  --lp-accent-600: #c62e05;
  --lp-accent-700: #9e200e;
  --lp-accent-50:  rgba(240,57,6,.08);
  --lp-cta: #F03906;
  --lp-cta-hover: #c62e05;
  --lp-cta-shadow: rgba(240,57,6,.28);

  /* ── Radios ── */
  --lp-radius-lg:   24px;
  --lp-radius-xl:   32px;
  --lp-radius-2xl:  32px;
  --lp-radius-3xl:  999px;
  --lp-radius-full: 999px;

  /* ── Líneas y sombras ── */
  --lp-grid-line: rgba(17,33,45,.05);
  --lp-shadow-xs: 0 1px 0 rgba(17,33,45,.03);
  --lp-shadow-sm: 0 1px 0 rgba(17,33,45,.03);
  --lp-shadow-md: 0 8px 22px -10px rgba(17,33,45,.18);
  --lp-shadow-lg: 0 22px 44px -20px rgba(17,33,45,.20);
}

html, body { background: #FDFCFA; }
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #11212d;
  -webkit-font-smoothing: antialiased;
}

/* ── Titulares ── */
h1, h2, h3, h4, h5, h6,
.lp-section-title, .lp-whatis-title, .lp-reviews-title, .about-prose h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  color: #11212d;
}
h1 { letter-spacing: -0.05em; }
blockquote, .about-inline-quote {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 500;
}

/* ── Barra superior: plana y pegajosa, como en la landing ── */
.lp-nav-outer { padding: 0 !important; top: 0 !important; }
.lp-nav {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 0 !important;
  background: rgba(253,252,250,.86) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0 !important;
  box-shadow: none !important;
}
.lp-nav-outer { border-bottom: 1px solid rgba(17,33,45,.06); background: rgba(253,252,250,.86); }
.lp-nav-link { color: #2c3a47 !important; font-weight: 500 !important; }
.lp-nav-link:hover { color: #11212d !important; }
.lp-nav-login { color: #2c3a47 !important; }

/* ── Botones: naranja y píldora ── */
.lp-nav-cta, .lp-cta-primary, .lp-cta-whatsapp, .lp-btn,
.about-cta a, .lp-divider-cta, .lp-svc-cta {
  background: #F03906 !important;
  border-color: #F03906 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(17,33,45,.03) !important;
}
.lp-nav-cta:hover, .lp-cta-primary:hover, .lp-btn:hover, .about-cta a:hover {
  background: #c62e05 !important;
  border-color: #c62e05 !important;
}

/* ── Pastillas y etiquetas ── */
.about-pill, .lp-pill {
  border-radius: 999px !important;
  background: rgba(240,57,6,.08) !important;
  color: #c62e05 !important;
  border-color: transparent !important;
}

/* ── Footer ── */
.lp-footer { background: #FDFCFA; border-top: 1px solid rgba(17,33,45,.06); }
.lp-footer a { color: #6B7480; }
.lp-footer a:hover { color: #F03906; }
.lp-footer h3 { font-size: 13px !important; letter-spacing: 0 !important; }

a { color: #F03906; }
a:hover { color: #c62e05; }

:focus-visible { outline: 2px solid #F03906; outline-offset: 3px; border-radius: 4px; }

/* ── Móvil ── */
img, svg, table, pre { max-width: 100%; }
body { overflow-x: hidden; }
@media (max-width: 700px) {
  h1 { font-size: clamp(32px, 9vw, 46px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(25px, 7vw, 36px) !important; line-height: 1.1 !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; }
  /* Evita el zoom automático de iOS al enfocar un campo. */
  input, select, textarea { font-size: 16px !important; }
}