/* ===========================================================
   Landing de OwlCare (pagina publica principal, "/")
   Reusa los tokens de styles.css (--accent, radios, sombras).
   =========================================================== */

.lp-body { background: var(--surface); }

/* --- Nav sticky --- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.lp-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-nav-links a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}
.lp-nav-links a:hover { color: var(--text); text-decoration: none; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }

/* Boton de menu: solo existe en movil (ver el bloque responsive). */
.lp-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.lp-nav-toggle svg { width: 20px; height: 20px; }
.lp-nav-menu { display: none; }
.lp-nav-menu[hidden] { display: none; }

/* El nav es sticky: sin esto, al saltar a #producto el titulo de la seccion
   quedaba tapado por la barra. */
html { scroll-behavior: smooth; }
#producto, #vistazo, #como, #precios, #preguntas, #nosotros { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Botones grandes para la landing --- */
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: var(--radius-sm); }

/* --- Hero --- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 50%, var(--surface) 100%),
    radial-gradient(1100px 480px at 80% -10%, var(--accent-light), transparent 60%),
    radial-gradient(900px 460px at 0% 0%, #EFF6F5, transparent 55%);
}
.lp-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 32px 104px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 52px;
  align-items: center;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}
.lp-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-text); }
.lp-title {
  font-size: 52px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 22px 0 0;
  color: var(--text);
}
.lp-title .accent { color: var(--accent); }
.lp-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 20px 0 0;
  max-width: 520px;
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-hero-note { margin-top: 16px; font-size: 13.5px; color: var(--text-muted); }
.lp-hero-note strong { color: var(--text-muted); font-weight: 600; }

/* --- Mockup del producto en el hero --- */
.lp-hero-visual { position: relative; }
.lp-mock-float {
  position: absolute;
  left: -34px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 11px 15px 11px 12px;
}
.lp-mock-float svg {
  width: 30px; height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success-text);
  flex-shrink: 0;
}
.lp-mock-float b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.lp-mock-float span { font-size: 11.5px; color: var(--text-muted); }

.lp-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-mock-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; }
.lp-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.lp-mock-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.lp-mock-card h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.lp-mock-card h4 svg { width: 15px; height: 15px; }
.lp-mock-rate { display: flex; align-items: baseline; gap: 8px; }
.lp-mock-rate b { font-size: 34px; font-weight: 700; color: var(--success-text); line-height: 1; }
.lp-mock-rate span { font-size: 13px; color: var(--text-muted); }
.lp-mock-trend { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--success-text); display: flex; align-items: center; gap: 6px; }
.lp-mock-trend svg { width: 14px; height: 14px; }
.lp-mock-reminder { display: flex; align-items: center; gap: 12px; }
.lp-mock-reminder + .lp-mock-reminder { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.lp-mock-reminder .info { flex: 1; min-width: 0; }
.lp-mock-reminder .name { font-size: 13.5px; font-weight: 600; }
.lp-mock-reminder .when { font-size: 12px; color: var(--text-muted); }
.lp-mock-wa {
  width: 34px; height: 34px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-mock-wa svg { width: 18px; height: 18px; }

/* --- Franja de datos --- */
.lp-stats {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  transform: translateY(-32px);
}
.lp-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  text-align: center;
}
.lp-stat b { display: block; font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.lp-stat span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* --- Secciones genericas --- */
.lp-section { max-width: 1120px; margin: 0 auto; padding: 72px 32px; }
.lp-section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.lp-section-head h2, .lp-highlight h2, .lp-about h2, .lp-cta-card h2 { text-wrap: balance; }
.lp-section-head p, .lp-sub { text-wrap: pretty; }
.lp-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.lp-section-head h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.lp-section-head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* Sección que es solo encabezado (El problema): sin nada debajo, el margen
   inferior del encabezado se volvia un hueco vacio. */
.lp-section-head:only-child { margin-bottom: 0; }

/* --- Features --- */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--accent-light); }
.feature-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--accent-light);
  color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
}
.feature-ico svg { width: 21px; height: 21px; }
.feature-card h3 { margin: 0 0 7px; font-size: 16px; font-weight: 600; }
.feature-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* --- Vistazo al producto: capturas reales en pestanas --- */
.lp-shots-wrap { background: var(--surface-muted); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.lp-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 auto 28px;
  padding: 5px;
  width: fit-content;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}
.lp-tab {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lp-tab:hover { color: var(--text); }
.lp-tab.is-active { background: var(--accent); color: #fff; }

.lp-shot[hidden] { display: none; }
/* Marco de navegador: da contexto a la captura y la separa del fondo. */
.lp-window {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.lp-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.lp-window-bar i {
  margin-left: 12px;
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--text-soft);
}
.lp-window img { display: block; width: 100%; height: auto; }

.lp-phone {
  width: 300px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: var(--navy-900, #0B1521);
  box-shadow: var(--shadow-lg);
}
.lp-phone img { display: block; width: 100%; height: auto; border-radius: 24px; }

.lp-shot-cap {
  max-width: 620px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Como funciona --- */
.lp-steps-wrap { background: var(--surface); border-bottom: 1px solid var(--border-soft); }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { position: relative; }
.step::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(50% + 32px);
  width: calc(100% + 28px - 64px);
  height: 2px;
  background: var(--accent-light);
}
.step:last-child::before { display: none; }
.step { text-align: center; }
.step-num { position: relative; z-index: 1; }
.step-num {
  width: 44px; height: 44px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* --- Diferenciador (franja destacada) --- */
.lp-highlight {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
}
.lp-highlight-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 76px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.lp-highlight .lp-kicker { color: #BDE3E0; }
.lp-highlight h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 16px; }
.lp-highlight p { font-size: 16px; line-height: 1.65; color: #D9EBE9; margin: 0 0 18px; max-width: 460px; }
.lp-highlight ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-highlight li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.lp-highlight li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: #bcf0cf; }
.lp-highlight-visual {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(6px);
}
.lp-visual-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #D9EBE9;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 4px 10px;
  border-radius: 999px;
}
.lp-highlight-visual .cap { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #EFF6F5; font-weight: 500; }
.lp-mini-labels { display: flex; gap: 12px; margin-top: 30px; font-size: 11px; color: #D9EBE9; text-align: center; }
.lp-mini-labels span { flex: 1; }
.lp-mini-bars { display: flex; align-items: flex-end; gap: 12px; height: 108px; margin-top: 26px; }
.lp-mini-bars .bar { flex: 1; border-radius: 6px 6px 0 0; background: rgba(255,255,255,0.9); position: relative; }
.lp-mini-bars .bar::after {
  content: attr(data-label);
  position: absolute; bottom: -22px; left: 0; right: 0;
  text-align: center; font-size: 11px; color: #D9EBE9;
}
.lp-mini-bars .bar b {
  position: absolute; top: -20px; left: 0; right: 0;
  text-align: center; font-size: 12px; font-weight: 700; color: #fff;
}

/* --- Pricing (reusa .pricing-grid / .plan-card de pricing.css) --- */
.lp-pricing { text-align: center; }
.lp-pricing .plan-card { text-align: left; }
.lp-pricing .plan-cta { text-align: center; }

/* --- Preguntas frecuentes --- */
.lp-faq-wrap { background: var(--surface-muted); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.lp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq-item[open] { border-color: var(--accent-light); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--accent-dark);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* --- Nosotros --- */
.lp-about-wrap { background: var(--surface); }
.lp-about { max-width: 760px; text-align: center; }
.lp-about h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 18px; }
.lp-about p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.lp-about p strong { color: var(--text); font-weight: 600; }

/* --- CTA final --- */
.lp-cta-band { text-align: center; }
.lp-cta-card {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: var(--radius-xl);
  color: #fff;
}
.lp-cta-card h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.lp-cta-card p { font-size: 16px; color: #D9EBE9; margin: 0 0 26px; }
.btn-white { background: #fff; color: var(--accent-dark); border: none; }
.btn-white:hover { background: #EFF6F5; text-decoration: none; color: var(--accent-dark); }

/* --- Footer --- */
.lp-footer { border-top: 1px solid var(--border-soft); background: var(--surface); }
.lp-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 32px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.lp-footer .about { max-width: 300px; }
.lp-footer .about p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 12px 0 0; }
.lp-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.lp-footer-col h5 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); }
.lp-footer-col a { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 9px; }
.lp-footer-col a:hover { color: var(--accent); text-decoration: none; }
.lp-footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 18px 32px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-soft);
}

/* --- Responsive --- */
/* En portatiles (1280-1366) el titular a 54px partia justo despues de "es";
   un paso intermedio lo deja en las dos lineas que marca el <br>. */
@media (max-width: 1120px) {
  .lp-title { font-size: 44px; }
  .lp-hero-inner { gap: 40px; }
}
@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 60px 24px 72px; }
  .lp-title { font-size: 38px; }
  .lp-highlight-inner { grid-template-columns: 1fr; gap: 36px; }
  .lp-features, .lp-steps { grid-template-columns: 1fr; }
  .step::before { display: none; }
  .lp-stats { grid-template-columns: 1fr; transform: translateY(-20px); gap: 14px; }
  .lp-mock-float { left: 8px; bottom: -18px; }
}
@media (max-width: 720px) {
  .lp-nav-links { display: none; }
  .lp-nav-inner { padding: 12px 20px; gap: 10px; }
  /* Los botones se van al menu; el switch de tema que inyecta theme.js en
     .lp-nav-actions se queda a la vista. */
  .lp-nav-btn { display: none; }
  .lp-nav-toggle { display: inline-flex; }
  .lp-nav-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 20px 18px;
    border-top: 1px solid var(--border-soft);
  }
  .lp-nav-menu > a {
    padding: 11px 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
  }
  .lp-nav-menu > a:hover { color: var(--text); text-decoration: none; }
  .lp-nav-menu-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }
  .lp-nav-menu-actions a {
    flex: 1;
    justify-content: center;
    padding: 11px 14px;
    text-align: center;
  }
  .lp-section { padding: 56px 22px; }
  .lp-title { font-size: 32px; }
  .lp-sub { font-size: 16px; }
  .lp-section-head h2, .lp-highlight h2, .lp-about h2, .lp-cta-card h2 { font-size: 26px; }
  .lp-footer-inner { flex-direction: column; gap: 28px; }
  .lp-tabs { width: 100%; justify-content: stretch; border-radius: var(--radius-md); }
  .lp-tab { flex: 1; padding: 9px 8px; font-size: 13px; }
  .lp-window-bar i { display: none; }
}

/* ===========================================================
   Modo oscuro de la landing. styles.css ya re-mapea la paleta de
   tokens; aqui solo se corrigen los valores claros que esta hoja
   tenia hardcodeados (nav blanca, degradado mint del hero, pill
   blanca del eyebrow, degradado de las bandas teal).

   Se aplica igual por el switch manual (:root[data-theme='dark'])
   y, sin JS, por el tema del SO. Los valores viven en variables
   para no repetir cada regla; solo se repite la lista de tokens
   (mantener las dos en sincronia). */

:root[data-theme='dark'] {
  --lp-nav-bg: rgba(11, 21, 33, 0.82);
  --lp-hero-tint: var(--surface-muted);
  --lp-eyebrow-bg: var(--surface);
  --lp-band: linear-gradient(135deg, #2F7573 0%, #1F5250 100%);
  --lp-btn-white-fg: #2F7573;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --lp-nav-bg: rgba(11, 21, 33, 0.82);
    --lp-hero-tint: var(--surface-muted);
    --lp-eyebrow-bg: var(--surface);
    --lp-band: linear-gradient(135deg, #2F7573 0%, #1F5250 100%);
    --lp-btn-white-fg: #2F7573;
  }
}

.lp-nav      { background: var(--lp-nav-bg, rgba(255, 255, 255, 0.82)); }
.lp-hero {
  background:
    linear-gradient(to bottom, transparent 50%, var(--surface) 100%),
    radial-gradient(1100px 480px at 80% -10%, var(--accent-light), transparent 60%),
    radial-gradient(900px 460px at 0% 0%, var(--lp-hero-tint, #EFF6F5), transparent 55%);
}
.lp-eyebrow  { background: var(--lp-eyebrow-bg, #fff); }
/* Las franjas teal llevan texto blanco encima; en oscuro --accent-dark pasa a
   teal CLARO y el degradado por defecto pierde contraste, por eso se fija. */
.lp-highlight,
.lp-cta-card { background: var(--lp-band, linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%)); }
.btn-white,
.btn-white:hover { color: var(--lp-btn-white-fg, var(--accent-dark)); }