/* ==========================================================================
   Care Activo — landing (perezwebs.com/care)
   Tema claro, propio de esta página únicamente. No modifica styles.css:
   reutiliza sus tokens de marca (--accent, --grad-2, --font-*, --radius-*,
   --ease-*, --nav-h, --container) y sus clases estructurales (.nav, .section,
   .section-inner, .btn/.btn-primary, .footer, .reveal, .consent-banner,
   .progress-bar), y solo redefine color donde esas clases dependen de los
   tokens oscuros del sitio (pensados para fondo #0a0a0d, no para blanco).
   ========================================================================== */

body.care-page {
  --c-bg:        #faf9f6;
  --c-bg-alt:    #f1efe9;
  --c-ink:       #17171b;
  --c-ink-soft:  #55555f;
  --c-ink-faint: #6c6c76;
  --c-line:      rgba(23,23,27,.12);
  --c-line-soft: rgba(23,23,27,.07);
  --c-accent:    var(--grad-2); /* mismo violeta de marca, paso más oscuro del degradé -- contraste suficiente sobre blanco */

  background: var(--c-bg);
  color: var(--c-ink);
}
html.care-page { background: var(--c-bg); }

/* Capas del tema oscuro (glow que sigue el mouse, grano de fondo, cursor
   custom) pensadas para el hero oscuro del home -- no aplican sobre blanco. */
body.care-page .bg-gradient,
body.care-page .bg-grain,
body.care-page .cursor { display: none; }

/* ---------- nav ---------- */
.care-nav.is-scrolled {
  background: rgba(250,249,246,.86);
  border-bottom-color: var(--c-line);
}
.care-nav .nav-brand { color: var(--c-ink); }
.care-nav .nav-brand span { color: var(--c-ink-soft); }
.care-nav .nav-back { color: var(--c-ink-soft); }
.care-nav .nav-back:hover { color: var(--c-ink); }
.care-badge {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent);
  border: 1px solid var(--c-line); border-radius: 100px; padding: 5px 12px;
}

/* ---------- hero ---------- */
.care-hero { padding: calc(var(--nav-h) + 64px) 24px 96px; }
.care-hero-inner { max-width: 760px; }
.care-kicker {
  display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 20px;
}
.care-h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5.4vw, 60px);
  line-height: 1.12; letter-spacing: -.01em; color: var(--c-ink);
}
/* Mismo recurso de gradiente que .hero-title em / .about-copy .section-title em */
.care-h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-soft), var(--accent) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.care-lead { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--c-ink-soft); max-width: 52ch; }
.care-hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- CTA secundario como link de texto (nunca un segundo botón) ---------- */
.care-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600;
  color: var(--c-accent); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .2s;
}
.care-link:hover { opacity: .7; }

/* ---------- secciones ---------- */
.care-section { padding: 96px 24px; border-top: 1px solid var(--c-line-soft); }
.care-section.care-alt { background: var(--c-bg-alt); }
.care-section .section-inner { max-width: 720px; }
.care-h2 {
  margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25; letter-spacing: -.01em; color: var(--c-ink); max-width: 22ch;
}
.care-lead-sm { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--c-ink-soft); max-width: 58ch; }
.care-lead-sm + .care-link { margin-top: 20px; display: inline-flex; }

/* ---------- "lo que suele pasar": líneas editoriales, sin cards ---------- */
.care-lines { margin-top: 40px; display: flex; flex-direction: column; }
.care-lines p {
  font-size: 18px; line-height: 1.6; color: var(--c-ink-soft); padding: 22px 0;
  border-top: 1px solid var(--c-line-soft);
}
.care-lines p:last-child { border-bottom: 1px solid var(--c-line-soft); }

/* ---------- listas editoriales (qué incluye / para quién es) ---------- */
.care-list { margin-top: 28px; display: flex; flex-direction: column; }
.care-list li {
  font-size: 16.5px; line-height: 1.6; color: var(--c-ink-soft); padding: 16px 0 16px 22px;
  border-top: 1px solid var(--c-line-soft); position: relative;
}
.care-list li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent); }
.care-list li:last-child { border-bottom: 1px solid var(--c-line-soft); }

/* Grupos de "Qué incluye" (El sitio revisado / actualizado / a fin de mes) */
.care-list-group { margin-top: 32px; }
.care-list-group:first-child { margin-top: 0; }
.care-list-group-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--c-ink); }
.care-list-group .care-list { margin-top: 12px; }

/* Desktop: los tres grupos completos a la vista. Mobile: se invierte (ver
   @media) para no saturar la pantalla -- solo el <details> colapsable. */
.care-includes-desktop { display: block; margin-top: 36px; }
.care-details { display: none; }
.care-details summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--c-accent); padding: 14px 0; border-top: 1px solid var(--c-line-soft);
  list-style: none;
}
.care-details summary::-webkit-details-marker { display: none; }
.care-details summary::after { content: "+"; float: right; }
.care-details[open] summary::after { content: "–"; }
.care-details .care-list { margin-top: 0; }

/* ---------- cómo funciona ---------- */
.care-steps { margin-top: 40px; display: flex; flex-direction: column; gap: 32px; }
.care-steps li { display: flex; gap: 24px; align-items: baseline; }
.care-step-n { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--c-ink-faint); flex-shrink: 0; }
.care-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--c-ink); }
.care-steps p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); }

/* ---------- inversión: precio fijo, siempre visible ---------- */
.care-pricing { margin-top: 36px; }
.care-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

/* Precio de lista: visible, pero secundario -- nunca compite con el fundador. */
.care-price-regular { padding-bottom: 20px; border-bottom: 1px solid var(--c-line-soft); }
.care-price-regular .care-price-label { font-size: 14px; color: var(--c-ink-faint); }
.care-price-regular .care-price-value {
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: var(--c-ink-faint); white-space: nowrap;
}

/* Precio fundador: tratamiento premium y sobrio -- fondo violeta muy suave +
   borde fino, sin ningún recurso de descuento/promo (sin tachado, sin badge,
   sin colores de alerta). */
.care-price-founder-block {
  margin-top: 24px; padding: 28px 32px; border-radius: var(--radius-m);
  background: rgba(124,108,255,.05); border: 1px solid var(--accent-line);
}
.care-price-founder .care-price-label { font-size: 15px; color: var(--c-ink); font-weight: 600; }
.care-price-founder .care-price-value {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--c-accent); white-space: nowrap;
}
.care-price-founder-block .care-price-note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--c-ink-soft); }
.care-price-founder-block .care-price-note:first-of-type { margin-top: 18px; }

.care-terms { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--c-line-soft); }
.care-terms-label {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 10px;
}
.care-terms p { font-size: 15px; line-height: 1.65; color: var(--c-ink-soft); }

.care-pricing + .care-link, .care-terms + .care-link { display: inline-flex; margin-top: 32px; }

/* ---------- cierre ---------- */
.care-signoff { margin-top: 24px; font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--c-ink-soft); }

/* ---------- footer (mismo componente que el resto del sitio, tokens claros) ---------- */
.care-footer { border-top-color: var(--c-line); }
.care-footer .footer-role,
.care-footer .footer-bottom p { color: var(--c-ink-faint); }
.care-footer .footer-links a,
.care-footer .footer-contact a { color: var(--c-ink-soft); }
.care-footer .footer-links a:hover,
.care-footer .footer-contact a:hover { color: var(--c-accent); }
.care-footer .footer-bottom { border-top-color: var(--c-line); }
.care-footer .back-to-top { border-color: var(--c-line); color: var(--c-ink-soft); }

/* ---------- CTA fijo inferior (solo mobile, tras el primer scroll) ---------- */
.care-sticky-cta { display: none; }

/* ==========================================================================
   Responsive — mismos breakpoints que el resto del sitio (1080/860/560)
   ========================================================================== */
@media (max-width: 860px) {
  .care-hero { padding: calc(var(--nav-h) + 32px) 20px 64px; }
  .care-section { padding: 64px 20px 84px; }
  .care-badge { display: none; } /* header angosto: se prioriza marca + volver */
  .care-includes-desktop { display: none; }
  .care-details { display: block; }

  .care-sticky-cta {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 210;
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .care-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .care-sticky-cta .btn { box-shadow: 0 12px 30px -8px rgba(124,108,255,.45); }
  /* Mismo criterio que .assistant en styles.css: si el banner de cookies
     todavía está visible, el CTA fijo se corre hacia arriba en vez de
     superponerse o desaparecer. */
  .consent-banner:not([hidden]) ~ .care-sticky-cta { bottom: 190px; }
}

@media (max-width: 560px) {
  .care-hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .care-hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .care-sticky-cta { transition: opacity .3s var(--ease-out); }
}