/* ==========================================================================
   MÉXICO ROJO — FLORES NATIVAS DEL VALLE DE MÉXICO
   Dark botanical / bioluminescent impressionism
   Diseñado para el HTML existente de #mr-flores
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

#mr-flores.mrf {
  --ink-0: #06070a;
  --ink-1: #090b10;
  --ink-2: #0e1118;
  --ink-3: #151923;
  --ink-4: #1b202b;

  --white: #ffffff;
  --text: #f4f4f2;
  --text-soft: #d8d9d6;
  --muted: #a6aaa8;

  --rose: #ff729f;
  --rose-hi: #ff9fbd;
  --rose-deep: #d93a72;

  --orchid: #c889ff;
  --amber: #ffb45f;
  --gold: #ffd788;

  --jade: #55e7b1;
  --aqua: #6edbd6;
  --blue: #72baff;

  --line: rgba(255, 255, 255, 0.09);
  --line-hi: rgba(255, 255, 255, 0.16);

  --radius-xs: 10px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --radius-xl: 44px;

  --shadow-soft:
    0 18px 50px rgba(0, 0, 0, 0.28);

  --shadow-deep:
    0 30px 90px rgba(0, 0, 0, 0.42);

  --content: 760px;
  --wide: 1120px;
  --full: 1240px;

  position: relative !important;

  width: min(100%, var(--full)) !important;
  max-width: var(--full) !important;

  margin: 0 auto !important;

  padding:
    clamp(12px, 2vw, 26px)
    clamp(12px, 2.3vw, 30px)
    clamp(44px, 7vw, 88px) !important;

  box-sizing: border-box !important;

  color: var(--text) !important;

  background:
    radial-gradient(
      900px 600px at 2% 4%,
      rgba(255, 83, 139, 0.10),
      transparent 58%
    ),
    radial-gradient(
      760px 580px at 96% 18%,
      rgba(82, 230, 180, 0.07),
      transparent 56%
    ),
    radial-gradient(
      900px 700px at 75% 72%,
      rgba(103, 135, 255, 0.045),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #07080b 0%,
      #080a0f 42%,
      #06070a 100%
    ) !important;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius:
    clamp(20px, 3vw, 38px);

  box-shadow:
    var(--shadow-deep),
    0 0 80px rgba(255, 82, 136, 0.04);

  overflow: clip;

  isolation: isolate;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 16px;
  line-height: 1.7;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   02. RESET LOCAL
   ========================================================================== */

#mr-flores *,
#mr-flores *::before,
#mr-flores *::after {
  box-sizing: border-box;
}

#mr-flores article,
#mr-flores section,
#mr-flores header,
#mr-flores nav,
#mr-flores div,
#mr-flores figure {
  min-width: 0;
}

#mr-flores img {
  max-width: 100%;
  height: auto;
}

#mr-flores p,
#mr-flores li,
#mr-flores td,
#mr-flores th {
  overflow-wrap: break-word;
}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

#mr-flores h1,
#mr-flores h2,
#mr-flores h3,
#mr-flores h4 {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif !important;

  margin-top: 0;

  color: var(--white) !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-wrap: balance;
}


/* Hero title */

#mr-flores .hero h1 {
  width: 100% !important;
  max-width: 960px !important;

  margin:
    0 0
    clamp(18px, 2vw, 28px) !important;

  font-size:
    clamp(2.65rem, 6.2vw, 6rem) !important;

  font-weight: 570 !important;

  line-height: 0.96 !important;

  letter-spacing: -0.065em !important;

  color: #fff !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;

  text-shadow:
    0 3px 35px rgba(0, 0, 0, 0.28);

  background:
    linear-gradient(
      122deg,
      #ffffff 0%,
      #fff8fa 30%,
      #ffc3d5 68%,
      #ff91b1 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Section titles */

#mr-flores section > h2 {
  max-width: 940px;

  margin:
    0 0
    clamp(24px, 3vw, 36px) !important;

  font-size:
    clamp(2.05rem, 4.4vw, 4.15rem) !important;

  font-weight: 530 !important;

  line-height: 1.04 !important;

  letter-spacing: -0.047em !important;

  color: #f8f7f4 !important;
}

#mr-flores section > h2::before {
  content: "";

  display: block;

  width: 42px;
  height: 3px;

  margin-bottom: 18px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--rose),
      var(--amber),
      var(--jade)
    );

  box-shadow:
    0 0 18px rgba(255, 114, 159, 0.32);
}


/* Card/sub titles */

#mr-flores h3 {
  margin:
    0 0 12px !important;

  font-size:
    clamp(1.22rem, 1.5vw, 1.55rem) !important;

  font-weight: 620 !important;

  line-height: 1.18 !important;

  letter-spacing: -0.025em !important;

  color: #ffa6c0 !important;
}


#mr-flores p {
  color: var(--text-soft) !important;

  font-size:
    clamp(1rem, 0.98rem + 0.1vw, 1.075rem);

  line-height: 1.74;

  margin:
    0 0 1.25em;
}


#mr-flores section > p {
  max-width: var(--content);
}


#mr-flores strong,
#mr-flores b {
  color: #ffffff !important;
  font-weight: 650;
}


#mr-flores .latin,
#mr-flores em {
  font-style: italic;
}


/* ==========================================================================
   04. HERO — COMPLETE REDESIGN
   ========================================================================== */

#mr-flores .hero {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;

  width: 100% !important;

  min-height:
    clamp(580px, 76vh, 820px) !important;

  padding:
    clamp(28px, 5vw, 72px) !important;

  margin-bottom:
    clamp(16px, 3vw, 34px);

  border-radius:
    clamp(18px, 2.6vw, 32px);

  overflow: hidden;

  background:
    #111;

  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.38);
}


/* Hero image */

#mr-flores .hero > img {
  position: absolute !important;

  inset: 0 !important;

  z-index: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  object-position:
    center center !important;

  filter:
    brightness(0.72)
    saturate(0.90)
    contrast(1.04);
}


/* Cinematic overlay */

#mr-flores .hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 14% 22%,
      rgba(255, 103, 153, 0.15),
      transparent 34%
    ),
    linear-gradient(
      90deg,
      rgba(5, 6, 8, 0.82) 0%,
      rgba(5, 6, 8, 0.53) 42%,
      rgba(5, 6, 8, 0.18) 72%
    ),
    linear-gradient(
      180deg,
      rgba(5, 6, 8, 0.05) 20%,
      rgba(5, 6, 8, 0.30) 54%,
      rgba(5, 6, 8, 0.90) 100%
    );
}


#mr-flores .hero::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1;

  height: 42%;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(5, 6, 8, 0.92),
      transparent
    );
}


/* Critical fix for ugly narrow title */

#mr-flores .hero-copy {
  position: relative !important;

  z-index: 2 !important;

  display: block !important;

  width: 100% !important;
  max-width: 1040px !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  grid-column: auto !important;
}


/* Eyebrow */

#mr-flores .eyebrow {
  display: inline-flex;

  width: fit-content;

  margin-bottom:
    clamp(16px, 2vw, 24px);

  padding:
    8px 13px;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius:
    999px;

  background:
    rgba(8, 10, 14, 0.46);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  color:
    #f5e7ec !important;

  font-size:
    clamp(0.72rem, 1.2vw, 0.83rem);

  font-weight: 580;

  line-height: 1;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}


/* Hero description */

#mr-flores .dek {
  max-width:
    760px !important;

  margin:
    0 0 24px !important;

  color:
    rgba(255, 255, 255, 0.88) !important;

  font-size:
    clamp(1.05rem, 1.7vw, 1.34rem) !important;

  line-height:
    1.55 !important;

  text-wrap:
    pretty;
}


/* Pills */

#mr-flores .kicker {
  display: flex;
  flex-wrap: wrap;

  gap:
    8px;
}


#mr-flores .pill {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    8px 13px;

  color:
    #f8f7f5 !important;

  font-size:
    0.82rem;

  font-weight:
    540;

  line-height:
    1;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    999px;

  background:
    rgba(12, 14, 19, 0.62);

  backdrop-filter:
    blur(10px);
}


/* ==========================================================================
   05. TABLE OF CONTENTS
   ========================================================================== */

#mr-flores .toc {
  position: sticky;

  top: 12px;

  z-index: 50;

  display: flex;

  gap: 7px;

  width: 100%;

  margin:
    0 0
    clamp(34px, 5vw, 64px);

  padding:
    8px;

  overflow-x: auto;
  overflow-y: hidden;

  background:
    rgba(11, 13, 18, 0.86);

  border:
    1px solid rgba(255, 255, 255, 0.085);

  border-radius:
    18px;

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.18);

  backdrop-filter:
    blur(20px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(140%);

  scrollbar-width:
    none;
}


#mr-flores .toc::-webkit-scrollbar {
  display: none;
}


#mr-flores .toc a {
  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    40px;

  padding:
    8px 14px;

  border:
    1px solid transparent;

  border-radius:
    12px;

  color:
    #dfe0dd !important;

  background:
    transparent;

  text-decoration:
    none !important;

  font-size:
    0.87rem;

  font-weight:
    520;

  white-space:
    nowrap;

  transition:
    180ms ease;
}


#mr-flores .toc a:hover,
#mr-flores .toc a:focus-visible {
  color:
    #ffffff !important;

  background:
    rgba(255, 255, 255, 0.07);

  border-color:
    rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   06. STATISTICS
   ========================================================================== */

#mr-flores .stats {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    12px;

  width:
    min(100%, var(--wide));

  margin:
    0 auto
    clamp(28px, 5vw, 60px);
}


#mr-flores .stat {
  min-height:
    180px;

  padding:
    clamp(20px, 2.5vw, 28px);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-md);

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255, 104, 150, 0.11),
      transparent 54%
    ),
    rgba(18, 21, 29, 0.82);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 16px 42px rgba(0, 0, 0, 0.17);
}


#mr-flores .num {
  margin-bottom:
    22px;

  color:
    #ffffff !important;

  font-size:
    clamp(2.25rem, 2.1vw, 4.4rem);

  font-weight:
    570;

  line-height:
    0.92;

  letter-spacing:
    -0.065em;

  font-variant-numeric:
    tabular-nums;
}


#mr-flores .label {
  color:
    #bdc0bf !important;

  font-size:
    0.88rem;

  line-height:
    1.45;
}


/* ==========================================================================
   07. SECTIONS
   ========================================================================== */

#mr-flores section {
  width:
    min(100%, var(--wide));

  margin:
    0 auto;

  padding:
    clamp(55px, 8vw, 104px)
    0;
}


#mr-flores section + section {
  border-top:
    1px solid rgba(255, 255, 255, 0.055);
}


/* ==========================================================================
   08. CARDS
   ========================================================================== */

#mr-flores .grid {
  display:
    grid;

  gap:
    clamp(14px, 2vw, 20px);

  margin-top:
    clamp(28px, 4vw, 44px);
}


#mr-flores .grid-2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


#mr-flores .grid-3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


#mr-flores .card {
  position:
    relative;

  min-width:
    0;

  padding:
    clamp(22px, 2.8vw, 32px);

  border:
    1px solid rgba(255, 255, 255, 0.085);

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(24, 27, 36, 0.90),
      rgba(13, 15, 21, 0.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 48px rgba(0, 0, 0, 0.18);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}


#mr-flores .card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(255, 123, 163, 0.20);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.25),
    0 0 35px rgba(255, 86, 141, 0.035);
}


/* ==========================================================================
   09. FLOWER CARDS
   ========================================================================== */

#mr-flores .flower-card {
  padding:
    0;

  overflow:
    hidden;

  background:
    #10131a;
}


#mr-flores .flower-card > img {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    4 / 3;

  object-fit:
    cover;

  border-radius:
    0 !important;

  transition:
    transform 700ms cubic-bezier(.2, .7, .2, 1),
    filter 700ms ease;

  filter:
    saturate(0.96)
    contrast(1.02);
}


#mr-flores .flower-card:hover > img {
  transform:
    scale(1.025);

  filter:
    saturate(1.06)
    contrast(1.025);
}


#mr-flores .flower-body {
  padding:
    24px;
}


#mr-flores .flower-body .latin {
  margin:
    -5px 0 16px;

  color:
    #afb4b4 !important;

  font-size:
    0.92rem;
}


#mr-flores .tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    18px;
}


#mr-flores .tag {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    6px 10px;

  border:
    1px solid rgba(87, 229, 177, 0.16);

  border-radius:
    999px;

  background:
    rgba(87, 229, 177, 0.055);

  color:
    #bff4dd !important;

  font-size:
    0.74rem;

  line-height:
    1;
}


/* ==========================================================================
   10. NOTES / CALLOUTS
   ========================================================================== */

#mr-flores .note,
#mr-flores .cta {
  max-width:
    900px;

  margin:
    clamp(24px, 4vw, 40px)
    0;

  padding:
    20px 22px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-left:
    3px solid var(--rose);

  border-radius:
    4px var(--radius-sm) var(--radius-sm) 4px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 102, 150, 0.07),
      rgba(255, 102, 150, 0.012)
    );

  color:
    var(--text-soft) !important;

  line-height:
    1.65;
}


#mr-flores .note.good {
  border-left-color:
    var(--jade);

  background:
    linear-gradient(
      90deg,
      rgba(83, 229, 177, 0.07),
      transparent
    );
}


#mr-flores .note.warning {
  border-left-color:
    var(--amber);

  background:
    linear-gradient(
      90deg,
      rgba(255, 178, 89, 0.075),
      transparent
    );
}


/* ==========================================================================
   11. TIMELINE
   ========================================================================== */

#mr-flores .timeline {
  position:
    relative;

  max-width:
    820px;

  margin:
    36px 0;

  padding-left:
    32px;
}


#mr-flores .timeline::before {
  content:
    "";

  position:
    absolute;

  left:
    6px;

  top:
    8px;

  bottom:
    8px;

  width:
    1px;

  background:
    linear-gradient(
      to bottom,
      var(--rose),
      var(--amber),
      var(--jade),
      transparent
    );
}


#mr-flores .time {
  position:
    relative;

  margin-bottom:
    26px;

  color:
    var(--text-soft) !important;

  line-height:
    1.65;
}


#mr-flores .time::before {
  content:
    "";

  position:
    absolute;

  left:
    -30px;

  top:
    0.65em;

  width:
    9px;
  height:
    9px;

  border-radius:
    50%;

  background:
    var(--rose);

  box-shadow:
    0 0 16px rgba(255, 114, 159, 0.45);
}


/* ==========================================================================
   12. FIGURES
   ========================================================================== */

#mr-flores figure {
  width:
    min(100%, 940px);

  margin:
    clamp(34px, 5vw, 60px)
    0;
}


#mr-flores figure > img {
  display:
    block;

  width:
    100%;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    var(--radius-md);

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.32);
}


#mr-flores figcaption {
  margin-top:
    12px;

  padding-inline:
    3px;

  color:
    #979c9a !important;

  font-size:
    0.77rem;

  line-height:
    1.55;
}


/* ==========================================================================
   13. LINKS
   ========================================================================== */

#mr-flores a {
  color:
    #ff91b1 !important;

  text-decoration-color:
    rgba(255, 145, 177, 0.42) !important;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    0.18em;

  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}


#mr-flores a:hover {
  color:
    #ffd1dd !important;

  text-decoration-color:
    #ffd1dd !important;
}


/* ==========================================================================
   14. TABLE
   ========================================================================== */

#mr-flores .table-wrap {
  width:
    100%;

  margin-top:
    32px;

  overflow-x:
    auto;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-md);

  background:
    rgba(15, 18, 24, 0.82);
}


#mr-flores table {
  width:
    100%;

  min-width:
    700px;

  margin:
    0 !important;

  border-collapse:
    collapse;

  background:
    transparent !important;
}


#mr-flores th,
#mr-flores td {
  padding:
    16px 18px !important;

  border:
    0 !important;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.065) !important;

  background:
    transparent !important;

  text-align:
    left;

  vertical-align:
    top;

  color:
    var(--text-soft) !important;

  line-height:
    1.5;
}


#mr-flores th {
  color:
    #ffffff !important;

  font-size:
    0.76rem;

  font-weight:
    650;

  text-transform:
    uppercase;

  letter-spacing:
    0.055em;

  background:
    rgba(255, 255, 255, 0.035) !important;
}


#mr-flores tbody tr:hover td {
  background:
    rgba(255, 255, 255, 0.018) !important;
}


/* ==========================================================================
   15. FAQ
   ========================================================================== */

#mr-flores details {
  margin-bottom:
    10px;

  overflow:
    clip;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-sm);

  background:
    rgba(16, 19, 26, 0.82);

  transition:
    border-color 180ms ease,
    background 180ms ease;
}


#mr-flores details[open] {
  border-color:
    rgba(255, 117, 158, 0.18);

  background:
    rgba(20, 22, 30, 0.92);
}


#mr-flores summary {
  position:
    relative;

  cursor:
    pointer;

  list-style:
    none;

  padding:
    18px 52px 18px 20px;

  color:
    #f4f4f2 !important;

  font-size:
    1rem;

  font-weight:
    570;

  line-height:
    1.4;
}


#mr-flores summary::-webkit-details-marker {
  display:
    none;
}


#mr-flores summary::after {
  content:
    "+";

  position:
    absolute;

  top:
    50%;
  right:
    18px;

  transform:
    translateY(-50%);

  color:
    var(--rose);

  font-size:
    1.35rem;

  font-weight:
    350;
}


#mr-flores details[open] summary::after {
  content:
    "−";
}


#mr-flores details > p {
  padding:
    0 20px 20px;

  margin:
    0;
}


/* ==========================================================================
   16. REFERENCES
   ========================================================================== */

#mr-flores .refs {
  max-width:
    920px;

  padding-left:
    1.4rem;
}


#mr-flores .refs li {
  margin-bottom:
    14px;

  padding-left:
    6px;

  color:
    #b4b7b5 !important;

  font-size:
    0.88rem;

  line-height:
    1.55;
}


/* ==========================================================================
   17. SMALL TEXT
   ========================================================================== */

#mr-flores .small {
  color:
    #959a98 !important;

  font-size:
    0.82rem !important;

  line-height:
    1.6 !important;
}


/* ==========================================================================
   18. READING PROGRESS
   ========================================================================== */

#mr-flores .mrf-progress {
  position:
    fixed;

  top:
    0;
  left:
    0;

  z-index:
    99999;

  width:
    var(--progress, 0%);

  height:
    2px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      var(--rose),
      var(--amber),
      var(--jade)
    );

  box-shadow:
    0 0 14px rgba(255, 103, 151, 0.45);
}


/* ==========================================================================
   19. ACCESSIBILITY
   ========================================================================== */

#mr-flores :focus-visible {
  outline:
    2px solid var(--jade) !important;

  outline-offset:
    3px;
}


#mr-flores ::selection {
  color:
    #ffffff;

  background:
    rgba(255, 93, 143, 0.50);
}


/* ==========================================================================
   20. TABLET
   ========================================================================== */

@media (max-width: 980px) {

  #mr-flores.mrf {
    border-radius:
      24px;
  }


  #mr-flores .hero {
    min-height:
      650px !important;
  }


  #mr-flores .hero h1 {
    max-width:
      820px !important;

    font-size:
      clamp(2.7rem, 7.8vw, 5.25rem) !important;
  }


  #mr-flores .stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  #mr-flores .grid-3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   21. MOBILE
   ========================================================================== */

@media (max-width: 700px) {

  #mr-flores.mrf {
    width:
      100% !important;

    padding:
      8px 8px 48px !important;

    border-radius:
      18px;
  }


  #mr-flores .hero {
    min-height:
      min(720px, 86svh) !important;

    padding:
      24px 20px !important;

    border-radius:
      15px;

    justify-content:
      flex-end !important;
  }


  #mr-flores .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 6, 8, 0.10) 0%,
        rgba(5, 6, 8, 0.24) 34%,
        rgba(5, 6, 8, 0.88) 78%,
        rgba(5, 6, 8, 0.97) 100%
      ),
      radial-gradient(
        circle at 25% 24%,
        rgba(255, 106, 157, 0.11),
        transparent 40%
      );
  }


  #mr-flores .hero-copy {
    width:
      100% !important;

    max-width:
      none !important;
  }


  #mr-flores .hero h1 {
    width:
      100% !important;

    max-width:
      100% !important;

    margin-bottom:
      18px !important;

    font-size:
      clamp(2.45rem, 11.4vw, 4.15rem) !important;

    line-height:
      0.96 !important;

    letter-spacing:
      -0.058em !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

    hyphens:
      none !important;
  }


  #mr-flores .eyebrow {
    font-size:
      0.66rem;

    line-height:
      1.25;
  }


  #mr-flores .dek {
    max-width:
      31rem !important;

    font-size:
      1rem !important;

    line-height:
      1.5 !important;
  }


  #mr-flores .kicker {
    gap:
      6px;
  }


  #mr-flores .pill {
    padding:
      7px 10px;

    font-size:
      0.73rem;
  }


  #mr-flores .toc {
    top:
      6px;

    margin-bottom:
      28px;

    border-radius:
      14px;
  }


  #mr-flores section {
    padding:
      54px 10px;
  }


  #mr-flores section > h2 {
    font-size:
      clamp(2rem, 9vw, 3rem) !important;

    line-height:
      1.06 !important;

    letter-spacing:
      -0.045em !important;
  }


  #mr-flores .stats {
    grid-template-columns:
      1fr 1fr;

    gap:
      8px;
  }


  #mr-flores .stat {
    min-height:
      150px;

    padding:
      18px;
  }


  #mr-flores .num {
    font-size:
      clamp(2rem, 10vw, 3rem);
  }


  #mr-flores .label {
    font-size:
      0.78rem;
  }


  #mr-flores .grid-2,
  #mr-flores .grid-3 {
    grid-template-columns:
      1fr;
  }


  #mr-flores .card {
    padding:
      21px;

    border-radius:
      18px;
  }


  #mr-flores .flower-card {
    padding:
      0;
  }


  #mr-flores .flower-body {
    padding:
      20px;
  }
}


/* ==========================================================================
   22. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

  #mr-flores .hero {
    min-height:
      650px !important;

    padding:
      22px 17px !important;
  }


  #mr-flores .hero h1 {
    font-size:
      clamp(2.25rem, 11vw, 3.2rem) !important;

    line-height:
      0.98 !important;
  }


  #mr-flores .stats {
    grid-template-columns:
      1fr;
  }


  #mr-flores .stat {
    min-height:
      auto;
  }


  #mr-flores .num {
    margin-bottom:
      10px;
  }
}


/* ==========================================================================
   23. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1350px) {

  #mr-flores .hero h1 {
    max-width:
      1000px !important;
  }


  #mr-flores .hero {
    min-height:
      790px !important;
  }
}


/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  #mr-flores *,
  #mr-flores *::before,
  #mr-flores *::after {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }
}