/* ───────── Ponete Protector Solar ─────────
   Glassmorphism · naranja atardecer + celeste cielo */

:root {
  --sky-1: #7fc6f2;
  --sky-2: #b9e3f8;
  --sky-3: #e3f4fc;
  --peach: #ffd8b0;
  --sun-1: #ffb15c;
  --sun-2: #ff8a3d;
  --sun-3: #f2641c;
  --ink: #3b2316;
  --ink-soft: #6d4a37;
  --glass: rgba(255, 255, 255, 0.34);
  --glass-strong: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.62);
  --radius: 28px;
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.55;
  background: linear-gradient(180deg, #a9d9f5 0%, #d0eaf8 28%, #ffddb8 66%, #ffbd7c 100%) fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--sun-3); outline-offset: 3px; border-radius: 10px; }

/* ───────── Cielo ───────── */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
/* Sol desenfocado con rayos de luz: el ancla (.sunrig) deriva despacio y app.js lee su posición para iluminar los bordes del vidrio */
.sunrig { position: absolute; left: 88%; top: 15%; width: 0; height: 0; animation: sundrift 38s ease-in-out infinite alternate; }
.sun, .sun::before { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.sun {
  width: 34vmax; height: 34vmax; filter: blur(16px); will-change: transform;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 244, 1) 6%, rgba(255, 244, 196, .92) 13%, rgba(255, 222, 150, .7) 24%, rgba(255, 190, 100, .5) 38%, rgba(255, 160, 70, .24) 56%, rgba(255, 150, 60, .07) 70%, transparent 82%);
}
.sun::before {
  content: ""; width: 78vmax; height: 78vmax;
  background: radial-gradient(circle, rgba(255, 214, 150, .6) 0%, rgba(255, 196, 120, .3) 30%, rgba(255, 180, 100, .1) 55%, transparent 74%);
}
.rays {
  position: absolute; left: 0; top: 0; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 71.0deg,
    rgba(255, 246, 220, 0.59) 73.3deg,
    transparent 75.6deg,
    transparent 85.3deg,
    rgba(255, 246, 220, 0.47) 86.8deg,
    transparent 88.3deg,
    transparent 96.1deg,
    rgba(255, 246, 220, 0.31) 97.6deg,
    transparent 99.0deg,
    transparent 103.4deg,
    rgba(255, 246, 220, 0.32) 106.1deg,
    transparent 108.7deg,
    transparent 118.7deg,
    rgba(255, 246, 220, 0.34) 121.4deg,
    transparent 124.0deg,
    transparent 129.4deg,
    rgba(255, 246, 220, 0.74) 131.4deg,
    transparent 133.4deg,
    transparent 137.9deg,
    rgba(255, 246, 220, 0.74) 141.0deg,
    transparent 144.1deg,
    transparent 154.0deg,
    rgba(255, 246, 220, 0.43) 155.4deg,
    transparent 156.8deg,
    transparent 158.9deg,
    rgba(255, 246, 220, 0.43) 160.6deg,
    transparent 162.3deg,
    transparent 169.6deg,
    rgba(255, 246, 220, 0.56) 173.5deg,
    transparent 177.4deg,
    transparent 181.6deg,
    rgba(255, 246, 220, 0.54) 184.9deg,
    transparent 188.3deg,
    transparent 191.5deg,
    rgba(255, 246, 220, 0.38) 192.9deg,
    transparent 194.4deg,
    transparent 203.7deg,
    rgba(255, 246, 220, 0.43) 207.2deg,
    transparent 210.7deg,
    transparent 215.1deg,
    rgba(255, 246, 220, 0.43) 218.3deg,
    transparent 221.4deg,
    transparent 226.3deg,
    rgba(255, 246, 220, 0.40) 230.2deg,
    transparent 234.0deg,
    transparent 237.5deg,
    rgba(255, 246, 220, 0.70) 240.6deg,
    transparent 243.7deg,
    transparent 247.1deg,
    rgba(255, 246, 220, 0.74) 250.7deg,
    transparent 254.3deg,
    transparent 260.2deg,
    rgba(255, 246, 220, 0.65) 261.9deg,
    transparent 263.5deg,
    transparent 271.7deg,
    rgba(255, 246, 220, 0.31) 273.4deg,
    transparent 275.2deg,
    transparent 282.2deg,
    rgba(255, 246, 220, 0.56) 285.6deg,
    transparent 289.0deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .85) 28%, rgba(0, 0, 0, .45) 58%, transparent 94%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .85) 28%, rgba(0, 0, 0, .45) 58%, transparent 94%);
  filter: blur(9px); will-change: transform, opacity; animation: raysway 58s ease-in-out infinite alternate;
}
.rays::after {
  content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 81.4deg,
    rgba(255, 246, 220, 0.43) 85.4deg,
    transparent 89.5deg,
    transparent 96.1deg,
    rgba(255, 246, 220, 0.34) 99.2deg,
    transparent 102.4deg,
    transparent 109.3deg,
    rgba(255, 246, 220, 0.34) 113.3deg,
    transparent 117.2deg,
    transparent 117.8deg,
    rgba(255, 246, 220, 0.43) 121.3deg,
    transparent 124.7deg,
    transparent 135.8deg,
    rgba(255, 246, 220, 0.47) 139.1deg,
    transparent 142.5deg,
    transparent 145.6deg,
    rgba(255, 246, 220, 0.41) 147.8deg,
    transparent 150.0deg,
    transparent 159.5deg,
    rgba(255, 246, 220, 0.23) 160.9deg,
    transparent 162.2deg,
    transparent 168.0deg,
    rgba(255, 246, 220, 0.45) 169.7deg,
    transparent 171.3deg,
    transparent 182.3deg,
    rgba(255, 246, 220, 0.32) 183.9deg,
    transparent 185.6deg,
    transparent 192.8deg,
    rgba(255, 246, 220, 0.34) 196.9deg,
    transparent 201.0deg,
    transparent 210.7deg,
    rgba(255, 246, 220, 0.47) 213.7deg,
    transparent 216.8deg,
    transparent 218.7deg,
    rgba(255, 246, 220, 0.32) 222.8deg,
    transparent 226.8deg,
    transparent 236.8deg,
    rgba(255, 246, 220, 0.52) 239.2deg,
    transparent 241.6deg,
    transparent 244.1deg,
    rgba(255, 246, 220, 0.27) 245.8deg,
    transparent 247.6deg,
    transparent 259.1deg,
    rgba(255, 246, 220, 0.40) 261.1deg,
    transparent 263.1deg,
    transparent 267.5deg,
    rgba(255, 246, 220, 0.32) 269.6deg,
    transparent 271.7deg,
    transparent 360deg);
  filter: blur(5px);
  animation: raysway2 41s ease-in-out infinite alternate;
}
@keyframes sundrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-4vmax, 3vmax, 0); } }
@keyframes raysway {
  from { transform: translate(-50%, -50%) rotate(-2.5deg); opacity: .8; }
  to   { transform: translate(-50%, -50%) rotate(3deg); opacity: 1; }
}
@keyframes raysway2 {
  from { transform: rotate(2deg); opacity: .6; }
  to   { transform: rotate(-3.5deg); opacity: 1; }
}

/* ───────── Vidrio ───────── */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 18px 50px -18px rgba(150, 70, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    inset var(--ox, 0px) var(--oy, 0px) 30px -12px rgba(255, 196, 96, calc(1 * var(--li, 0)));
}
/* Contraluz: --lx/--ly (posición del sol relativa a cada contenedor) los calcula app.js */
.glass:not(.nav):not(.results) { position: relative; }
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: radial-gradient(circle 620px at var(--lx, -999px) var(--ly, -999px),
    #fff 0%, rgba(255, 244, 196, 1) 18%, rgba(255, 190, 90, .85) 40%, rgba(255, 150, 60, .3) 68%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ───────── Nav ───────── */
.nav {
  position: sticky; top: 14px; z-index: 20;
  width: min(1120px, calc(100% - 32px)); margin: 14px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px 10px 18px; border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.brand b { font-weight: 800; }
.brand__sun { width: 26px; height: 26px; color: var(--sun-2); animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  text-decoration: none; font-weight: 500; font-size: .93rem;
  padding: 8px 16px; border-radius: 999px; transition: background .2s, color .2s;
}
.nav__links a:hover { background: rgba(255, 255, 255, .6); color: var(--sun-3); }

/* ───────── Layout ───────── */
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sun-3);
}
.eyebrow--stamp { text-transform: none; letter-spacing: .01em; font-size: .92rem; font-weight: 500; color: var(--ink-soft); }
.eyebrow--stamp b { color: var(--ink); font-weight: 600; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; line-height: 1.02; }
em { font-style: normal; background: linear-gradient(100deg, #d9500f, var(--sun-2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; margin-right: -.05em; /* el degradé recorta al texto: la última letra no se corta */ }

/* ───────── Hero ───────── */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  padding: clamp(40px, 8vw, 96px) 0 28px;
}
h1 { font-size: clamp(3rem, 8.2vw, 6.4rem); font-weight: 800; margin: 14px 0 18px; }
h1 em { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--ink-soft); max-width: 34ch; }

.search {
  position: relative; margin-top: 30px; max-width: 480px;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px;
}
.search:focus-within { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 18px 50px -18px rgba(150, 70, 20, .4); }
.search__icon { width: 20px; height: 20px; flex: none; color: var(--sun-3); }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink); padding: 10px 0;
}
.search input::placeholder { color: rgba(109, 74, 55, .75); }
.chip-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .88rem; color: #fff;
  padding: 11px 16px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--sun-1), var(--sun-3));
  box-shadow: 0 8px 20px -8px rgba(242, 100, 28, .75), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .2s, box-shadow .2s;
}
.chip-btn svg { width: 17px; height: 17px; }
.chip-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(242, 100, 28, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn[disabled] { opacity: .7; cursor: progress; }

.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30;
  list-style: none; padding: 8px; border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, .78);
}
.results[hidden] { display: none; }
.results li { padding: 11px 14px; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; font-weight: 500; }
.results li small { color: var(--ink-soft); font-weight: 400; }
.results li:hover, .results li[aria-selected="true"] { background: rgba(255, 177, 92, .35); }
.results .empty { cursor: default; color: var(--ink-soft); }
.results .empty:hover { background: transparent; }

/* Tarjeta UV */
.uvcard { border-radius: var(--radius); padding: 26px 28px 28px; position: relative; overflow: hidden; }
.uvcard::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 110, .75), transparent 70%); pointer-events: none;
}
.uvcard__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: .85rem; color: var(--ink-soft); position: relative; }
.uvcard__place { font-weight: 600; color: var(--ink); font-size: .98rem; }
.uvcard__main { display: flex; align-items: center; gap: 22px; margin: 10px 0 18px; position: relative; }
.uvcard__num {
  font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 11vw, 7.4rem); line-height: 1; letter-spacing: -.035em;
  padding: .04em .06em .1em 0; /* el degradé recorta al texto: damos margen para que no se coma el borde */
  background: linear-gradient(170deg, var(--sun-1), var(--sun-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uv-sep { display: inline-block; margin: 0 .09em 0 .05em; letter-spacing: 0; }
.uvcard__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.uvcard__label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.level {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
  padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9); color: var(--lvl, var(--sun-3));
}
.scale {
  position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #7ed3a0 0%, #7ed3a0 18%, #f4d35e 32%, #f4d35e 43%, #ffb15c 57%, #ff8a3d 68%, #f2641c 82%, #d6336c 92%, #8e44ad 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 0 0 3px rgba(255, 255, 255, .45);
}
.scale__pin {
  position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink); transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transition: left 1.1s cubic-bezier(.2, .9, .25, 1);
}
.scale__legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-soft); margin-top: 8px; padding: 0 2px; font-variant-numeric: tabular-nums; }
.uvcard__tip { margin-top: 16px; font-size: .95rem; color: var(--ink); position: relative; }

/* Banner de estado */
.status {
  display: flex; align-items: center; gap: 14px; margin: 8px 0 0; padding: 16px 22px; border-radius: 22px;
  background: linear-gradient(120deg, rgba(255, 177, 92, .6), rgba(255, 255, 255, .35));
}
.status[hidden] { display: none; }
.status__icon { font-size: 1.5rem; color: var(--sun-3); }
.status p { font-weight: 500; font-size: 1.02rem; }
.status b { font-weight: 700; }

/* ───────── Bloques ───────── */
.block { padding: clamp(48px, 8vw, 88px) 0 0; }
.block__head { max-width: 760px; margin-bottom: 28px; }
.block__head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; margin: 10px 0 12px; }
.block__sub { font-size: 1.08rem; color: var(--ink-soft); max-width: 56ch; }

/* Gráfico */
.chart { border-radius: var(--radius); padding: 24px 24px 18px; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .84rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 18px; }
.chart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw--hot { background: linear-gradient(180deg, var(--sun-1), var(--sun-3)); }
.sw--cool { background: linear-gradient(180deg, #d4eefb, #8fd0f3); }
.sw--now { width: 3px; height: 14px; border-radius: 2px; background: var(--ink); }

.chart__area { position: relative; height: clamp(220px, 34vw, 320px); }
.chart__band {
  position: absolute; top: 0; bottom: 0; border-radius: 18px;
  background: repeating-linear-gradient(135deg, rgba(255, 177, 92, .26) 0 10px, rgba(255, 177, 92, .12) 10px 20px);
  border: 1.5px dashed rgba(242, 100, 28, .55);
}
.chart__bars { position: absolute; inset: 0; display: grid; align-items: end; }
.bar { position: relative; height: 100%; display: flex; align-items: flex-end; padding: 0 clamp(2px, .5vw, 5px); outline-offset: -2px; }
.bar__fill {
  width: 100%; border-radius: 10px 10px 4px 4px; min-height: 4px;
  background: linear-gradient(180deg, #d9f0fc, #8fd0f3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transform-origin: bottom; transform: scaleY(0);
  animation: grow .9s cubic-bezier(.2, .9, .25, 1) forwards; animation-delay: calc(var(--k) * 45ms + 250ms);
}
.bar--hot .bar__fill { background: linear-gradient(180deg, var(--sun-1), var(--sun-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px -8px rgba(242, 100, 28, .8); }
@keyframes grow { to { transform: scaleY(1); } }
.bar__val {
  position: absolute; left: 50%; bottom: calc(var(--h) + 6px); transform: translateX(-50%);
  font-size: .72rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap;
  background: rgba(255, 255, 255, .85); padding: 2px 7px; border-radius: 8px;
}
.bar:hover .bar__val, .bar:focus-visible .bar__val, .bar--peak .bar__val { opacity: 1; }
.chart__thr {
  position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(59, 35, 22, .45); pointer-events: none;
}
.chart__thr span {
  position: absolute; right: 0; top: -26px; font-size: .72rem; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .78); padding: 3px 10px; border-radius: 999px;
}
.chart__now {
  position: absolute; top: -6px; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); pointer-events: none;
}
.chart__now::after {
  content: "Ahora"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; font-weight: 700; background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.chart__axis { display: grid; padding: 10px 0 0; font-size: .76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chart__axis span { text-align: center; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.fact { border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.fact__k { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.fact strong { font-family: var(--display); font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fact small { color: var(--ink-soft); font-size: .84rem; }

/* Timeline del plan */
.timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: dose; }
.dose {
  position: relative; border-radius: 26px; padding: 56px 22px 24px; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; transition: transform .3s, opacity .3s;
}
.dose:hover { transform: translateY(-4px); }
.dose__n { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.dose__time { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.dose__why { font-size: .92rem; color: var(--ink-soft); }
.dose__tag {
  position: absolute; top: 18px; right: 18px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink-soft);
}
.dose--next {
  background: linear-gradient(145deg, rgba(255, 177, 92, .85), rgba(242, 100, 28, .55));
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 24px 60px -18px rgba(242, 100, 28, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.dose--next .dose__tag { background: var(--ink); color: #fff; }
.dose--next .dose__why, .dose--next .dose__n { color: var(--ink); }
.dose--done { opacity: .55; }
.dose--done .dose__time { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(59, 35, 22, .35); }
.dose--empty { grid-column: 1 / -1; text-align: center; align-items: center; padding: 34px; }

.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.rule { border-radius: 24px; padding: 24px 22px 26px; }
.rule__n { font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--sun-3); letter-spacing: .1em; }
.rule h3 { font-size: 1.45rem; font-weight: 700; margin: 10px 0 8px; }
.rule p { color: var(--ink-soft); font-size: .96rem; }
.rule b { color: var(--ink); font-weight: 600; }

/* FAQs */
.faqs { display: grid; gap: 14px; }
.faq { border-radius: 24px; padding: 0; overflow: hidden; }
.faq summary {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__n { font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--sun-3); letter-spacing: .1em; }
.faq h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.15; }
.faq__icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .6); position: relative; transition: background .25s, transform .3s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .3s; }
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon { background: linear-gradient(135deg, var(--sun-1), var(--sun-3)); }
.faq[open] .faq__icon::before, .faq[open] .faq__icon::after { background: #fff; }
.faq[open] .faq__icon::after { transform: rotate(0); }
.faq summary:hover h3 { color: var(--sun-3); }
.faq__body { padding: 0 24px 24px 64px; display: grid; gap: 12px; max-width: 78ch; }
.faq__body p { color: var(--ink-soft); font-size: 1rem; }
.faq__body p b { color: var(--ink); font-weight: 600; }
.faq__body .faq__src { font-size: .84rem; padding-top: 12px; border-top: 1px solid rgba(59, 35, 22, .12); }
.faq__src a { color: var(--ink); font-weight: 600; text-decoration-color: var(--sun-2); text-underline-offset: 3px; }
.faq__src a:hover { color: var(--sun-3); }
.faq__disclaimer { margin-top: 18px; font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  .faq summary { padding: 16px 18px; gap: 12px; }
  .faq__body { padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; } }

/* Footer · estética mm.dev: crema, tinta oscura, acento violeta, Manrope + Instrument Serif */
.foot {
  --mm-dark: #151622; --mm-light: #f7f1e4; --mm-purple: #9f86ff; --mm-plum: #34264f; --mm-muted: rgba(247, 241, 228, .62);
  width: 100%; margin: 72px 0 0; padding: 0;
  font-family: "Manrope", var(--body); color: var(--mm-light);
}
.foot__panel { background: var(--mm-dark); border-radius: 40px 40px 0 0; padding: 56px max(24px, calc((100% - 1120px) / 2)) 28px; box-shadow: 0 -18px 60px rgba(21, 22, 34, .16); position: relative; overflow: hidden; }
.foot__panel::before { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 100%; background: radial-gradient(closest-side, rgba(159, 134, 255, .28), transparent); pointer-events: none; }
.foot__top { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot__logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -.035em; text-decoration: none; color: var(--mm-light); }
.foot__tagline { margin-top: 18px; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.035em; }
.foot__tagline em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--mm-purple); letter-spacing: 0; }
.foot__lede { margin-top: 14px; max-width: 34ch; color: var(--mm-muted); font-size: .92rem; line-height: 1.6; }
.foot__cta { margin-top: 24px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px 8px 8px; border-radius: 999px; background: var(--mm-light); color: var(--mm-dark); font-weight: 800; font-size: .95rem; text-decoration: none; transition: transform .3s, box-shadow .3s, background .3s; }
.foot__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(159, 134, 255, .35); }
.foot__cta-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mm-dark); color: var(--mm-light); }
.foot__cta-icon svg { width: 16px; height: 16px; }
.foot__col h3 { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-purple); margin-bottom: 16px; }
.foot__col ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .9rem; color: var(--mm-muted); line-height: 1.5; }
.foot__col a { color: var(--mm-light); font-weight: 600; text-decoration: none; transition: color .25s; }
.foot__col a:hover, .foot__credit a:hover { color: var(--mm-purple); }
.foot__bottom { position: relative; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(247, 241, 228, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .84rem; color: var(--mm-muted); }
.foot__credit a { color: var(--mm-light); font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.foot a:focus-visible { outline-color: var(--mm-purple); }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__intro { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__panel { border-radius: 28px 28px 0 0; padding-top: 40px; } .foot__top { grid-template-columns: 1fr; gap: 32px; } .foot__bottom { flex-direction: column; } }

/* ───────── Animaciones de entrada ───────── */
.rise { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Estado de carga */
.loading .uvcard__num, .loading .fact strong { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .45; } }

/* ───────── Responsive ───────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .lede { max-width: 46ch; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nav { justify-content: center; }
  .nav__links { display: none; }
  .brand { white-space: nowrap; }
  .search { padding-left: 14px; }
  .chip-btn span { display: none; }
  .chip-btn { padding: 12px; }
  .rules { grid-template-columns: 1fr; }
  .chart { padding: 18px 12px 14px; }
  .uvcard { padding: 22px 20px 24px; }
  .uvcard__main { gap: 14px; }
  .bar__val { display: none; }
  .bar--peak .bar__val { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .72); }
}