/* ==========================================================================
   Landing Flori — para cuidadores
   Section layout, ported from the "Landing Flori.dc.html" artboard.
   ========================================================================== */

:root {
  /* Values the artboard set literally rather than via a system token. */
  --text-body-soft: #4A403A;                        /* between --ink-700 and --ink-500 */
  --shadow-card: 0 2px 10px rgba(22, 16, 13, .08);  /* tighter than --shadow-md */
  --scrim-hero: linear-gradient(90deg,
    rgba(16, 12, 9, .90) 0%,
    rgba(16, 12, 9, .72) 40%,
    rgba(16, 12, 9, .10) 78%,
    rgba(16, 12, 9, 0) 100%);
  /* Mobile art direction runs top-down: the copy sits in the portrait crop's
     headroom, so the scrim has to be heaviest at the top and clear by the faces. */
  --scrim-hero-mobile: linear-gradient(180deg,
    rgba(16, 12, 9, .88) 0%,
    rgba(16, 12, 9, .74) 30%,
    rgba(16, 12, 9, .34) 58%,
    rgba(16, 12, 9, .06) 78%,
    rgba(16, 12, 9, 0) 100%);
  --gutter: clamp(20px, 4vw, 40px);
}

body {
  background: var(--bg-page-alt);
  font-family: var(--font-sans);
  color: var(--text-body);
  min-height: 100vh;
}

.shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-xs);
  z-index: 20;
}

.skip-link:focus { left: var(--space-4); top: var(--space-4); color: var(--white); }

/* --- site header ---------------------------------------------------------- */
.site-header {
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: var(--nav-height);
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- hero ----------------------------------------------------------------- */
.hero { padding: 0 var(--gutter) clamp(24px, 4vw, 40px); }

.hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: clamp(440px, 60vw, 520px);
  display: flex;
  align-items: center;
  background: var(--ink-900);
}

.hero__panel picture { display: contents; }

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.hero__body {
  position: relative;
  padding: clamp(28px, 5vw, 56px);
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero__eyebrow { color: var(--text-eyebrow); }

.hero__title {
  font-size: clamp(30px, 5.4vw, 46px);
  font-weight: var(--fw-extrabold);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  color: var(--white);
}

.hero__lede {
  font-size: clamp(18px, 2.6vw, 23px);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: rgba(255, 255, 255, .92);
}

.hero__support {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  max-width: 540px;
}

.hero__actions {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* --- programa ------------------------------------------------------------- */
.programa {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(40px, 7vw, 64px) var(--gutter);
}

.programa__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.programa__intro .eyebrow { color: var(--text-muted); }

.programa__title {
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: var(--fw-bold);
  line-height: 1.14;
  letter-spacing: var(--ls-heading);
}

.programa__blurb {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body-soft);
  max-width: 660px;
}

/* tabs */
.tabs {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  background: rgba(22, 16, 13, .06);
  padding: 6px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin: 0 auto 40px;
}

.tab {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  transition: all var(--dur-base) var(--ease-out);
}

.tab[aria-selected="true"] { background: var(--ink-900); color: var(--white); }

.tab-panel[hidden] { display: none; }

.programa__layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
}

.programa__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 220px;
  max-width: 340px;
}

.programa__aside .eyebrow { color: var(--text-accent); }

.programa__aside h3 {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.16;
  letter-spacing: var(--ls-heading);
}

.programa__aside p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body-soft);
}

.cadence {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 220px;
  max-width: 340px;
}

.cadence__card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cadence__when {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--text-muted);
}

.cadence__what { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

/* --- section headings ----------------------------------------------------- */
.section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(48px, 7vw, 72px);
}

.section__title {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  margin: 0 0 var(--space-12);
}

.g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}

/* --- beneficios ----------------------------------------------------------- */
.benefit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: min(340px, 100%);
}

.benefit__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.benefit h3 { font-size: 17px; font-weight: var(--fw-semibold); line-height: 1.3; }

.benefit p { font-size: 15px; line-height: var(--lh-body); color: var(--text-muted); }

/* --- testimonios ---------------------------------------------------------- */
.testimonials { gap: var(--grid-gap); align-items: stretch; }

.testimonial {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonial blockquote { font-size: 17px; line-height: var(--lh-body); color: var(--ink-900); }

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}

.testimonial figcaption p { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }

/* --- resultados ----------------------------------------------------------- */
.results {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: 72px var(--space-12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-10);
  justify-items: center;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.result__score {
  font-size: clamp(44px, 6vw, 64px);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.result h3 { font-size: 19px; font-weight: var(--fw-bold); line-height: 1.3; }

.result p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 280px;
}

/* --- cierre --------------------------------------------------------------- */
.closing {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
}

.closing__band {
  background: var(--surface-card-amber);
  border-radius: var(--radius-lg);
  padding: clamp(44px, 7vw, 80px) clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}

.closing__title {
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: var(--fw-bold);
  line-height: 1.14;
  letter-spacing: var(--ls-heading);
  max-width: 760px;
}

/* --- pie ------------------------------------------------------------------ */
.site-footer {
  background: var(--surface-inverse);
  padding: clamp(40px, 6vw, 64px) var(--space-6);
  display: flex;
  justify-content: center;
}

.site-footer .flori-logo { height: 52px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .g3 { grid-template-columns: 1fr; }
}

/* Mobile hero is art-directed, not just reflowed: `assets/hero-mobile.jpg` is a
   portrait crop whose top ~47% is empty wall and curtain. Anchor the copy to the
   top of that headroom and pin the photo to its top edge, so the text block ends
   above the faces instead of landing on them. */
@media (max-width: 700px) {
  .hero__panel {
    align-items: flex-start;
    min-height: 0;
    /* Framed off the photo, not the viewport: at 1:1.9 the crop always reaches
       the arms of the hug, whatever the phone is. max-height keeps it from
       swallowing the screen on short viewports. */
    aspect-ratio: 1 / 1.9;
    max-height: 82vh;
  }

  .hero__photo { object-position: 50% 0; }

  .hero__scrim { background: var(--scrim-hero-mobile); }

  .hero__body {
    max-width: none;
    gap: 14px;
    padding: clamp(24px, 6vw, 32px) clamp(20px, 5vw, 28px);
  }

  .hero__actions { gap: var(--space-3); margin-top: var(--space-1); }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Below ~620px the headroom is no longer tall enough for the supporting
   paragraph as well — the Programa section restates it immediately below. */
@media (max-width: 620px) {
  .hero__support { display: none; }
}

/* On the narrowest phones every line wraps once more, so the copy has to give
   back the height it gains or it reaches the faces. */
@media (max-width: 380px) {
  .hero__body { gap: 12px; padding-top: 20px; }
  .hero__title { font-size: 27px; }
  .hero__lede { font-size: 16px; }
  .hero__actions .btn { font-size: var(--fs-body); padding: 14px 26px; }
}

@media (max-width: 520px) {
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 14px var(--space-4); }
  .results { padding: var(--space-12) var(--space-6); }
  .testimonial, .cadence__card { padding: var(--space-6); }
}