/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --blue:    #0057FF;
  --blue-dk: #003DB5;
  --blue-lt: #EEF3FF;
  --ink:     #0A0F1E;
  --ink-2:   #1C2340;
  --muted:   #6B7A99;
  --line:    #E4E9F2;
  --bg:      #F7F9FF;
  --white:   #FFFFFF;
  --r:       12px;
  --t:       0.22s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { background: var(--white); color: var(--ink); overflow-x: hidden; line-height: 1.6; min-height: 100vh; }
body.no-scroll { overflow: hidden; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer  { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes heartPop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
@keyframes floatUp  { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-90px) scale(1.6)} }
@keyframes pipIn    { from{opacity:0;transform:translate(-50%,-50%) scale(.6)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes pipOut   { from{opacity:1;transform:translate(-50%,-50%) scale(1)} to{opacity:0;transform:translate(-50%,-50%) scale(.6)} }
@keyframes ticker   { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes barGrow  { from{width:0} to{width:var(--w)} }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:999;
  height:60px; padding:0 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo { font-size:1.2rem; font-weight:800; color:var(--blue); text-decoration:none; letter-spacing:.5px; }
.nav-links { display:flex; gap:.25rem; list-style:none; }
.nav-links a {
  display:flex; align-items:center; gap:6px;
  color:var(--muted); text-decoration:none;
  font-size:.875rem; font-weight:500;
  padding:.45rem 1rem; border-radius:8px; transition:var(--t);
}
.nav-links a i { font-size:.78rem; }
.nav-links a:hover { color:var(--ink); background:var(--bg); }
.nav-links a.active { color:var(--blue); background:var(--blue-lt); }

/* ── Landing ──────────────────────────────────────────────── */
#landing { display:block; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  min-height:100vh; padding:80px 2.5rem 4rem;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:4rem;
  max-width:1200px; margin:0 auto;
}
.hero-left { animation:fadeUp .55s ease both; }
.hero-right { animation:fadeUp .55s ease .1s both; min-width: 0; }

.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--blue);
  background:var(--blue-lt); padding:.3rem .9rem;
  border-radius:50px; margin-bottom:1.4rem;
}
.hero-title {
  font-size:clamp(2.8rem,5vw,4.5rem);
  font-weight:900; line-height:1.05;
  letter-spacing:-2px; color:var(--ink); margin-bottom:1.2rem;
}
.hero-title span { color:var(--blue); }
.hero-sub { font-size:1.05rem; color:var(--muted); font-weight:400; line-height:1.75; margin-bottom:2rem; }

.hero-btns { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:3rem; }
.btn-primary {
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--blue); color:#fff;
  font-family:inherit; font-size:.875rem; font-weight:600;
  padding:.72rem 1.5rem; border-radius:10px; border:none;
  cursor:pointer; transition:var(--t);
}
.btn-primary:hover { background:var(--blue-dk); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,87,255,.25); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--ink); text-decoration:none;
  font-size:.875rem; font-weight:600;
  padding:.72rem 1.5rem; border-radius:10px;
  border:1.5px solid var(--line); transition:var(--t), transform .22s ease; background:none; cursor:pointer; font-family:inherit;
}
.btn-ghost:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }

.hero-stats { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.stat { display:flex; flex-direction:column; }
.stat-num { font-size:1.7rem; font-weight:800; color:var(--ink); line-height:1; }
.stat-lbl { font-size:.72rem; color:var(--muted); font-weight:500; margin-top:3px; text-transform:uppercase; letter-spacing:.5px; }
.stat-div { width:1px; height:36px; background:var(--line); }

/* ── Carousel ─────────────────────────────────────────────── */
.carousel {
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:4/3;
  min-height:320px;
  box-shadow:0 2px 4px rgba(0,0,0,.04), 0 16px 48px rgba(0,87,255,.14);
  border:1px solid var(--line);
}
.carousel-track { display:flex; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1); }

/* ── Best exams section ────────────────────────────────────── */
.best-exams-section {
  padding:5rem 2.5rem;
  background:linear-gradient(135deg, #f7f9ff 0%, #eef3ff 100%);
  border-top:1px solid var(--line);
}
.best-exams-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:2rem; align-items:center;
}
.best-exams-copy { max-width:560px; }
.best-exams-copy .section-label { margin-bottom:1rem; }
.best-exams-copy .section-title { margin-bottom:1rem; }
.best-exams-copy p {
  font-size:1rem; color:var(--muted); line-height:1.8; margin-bottom:2rem;
}
.best-exams-highlights { display:grid; gap:1rem; }
.best-exams-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:1rem 1.1rem;
  box-shadow:0 10px 25px rgba(0,87,255,.06);
}
.best-exams-card i {
  font-size:1.2rem; color:var(--blue); margin-top:3px;
  min-width:26px;
}
.best-exams-card strong { display:block; margin-bottom:.2rem; font-weight:800; }
.best-exams-card span { color:var(--muted); font-size:.92rem; line-height:1.5; }
.best-exams-media {
  position:relative; border-radius:24px; overflow:hidden;
  min-height:300px; box-shadow:0 20px 50px rgba(0,87,255,.1);
}
.best-exams-media img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.best-exams-media::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,15,30,0) 40%,rgba(10,15,30,.58) 100%);
}
.best-exams-media-text {
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem;
  z-index:2; color:#fff;
}
.best-exams-media-text span {
  display:inline-block; margin-bottom:.45rem;
  font-size:.75rem; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.best-exams-media-text h3 {
  margin:0; font-size:1.5rem; line-height:1.2; font-weight:800;
}
.best-exams-media-text p {
  margin:.6rem 0 0; color:rgba(255,255,255,.92);
  font-size:.95rem; line-height:1.6;
}

/* ── Folder sections ─────────────────────────────────────── */
.folder-section {
  padding:5rem 2.5rem;
  border-top:1px solid var(--line);
}
.folder-section .section-label {
  font-size:.72rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--blue); margin-bottom:.75rem;
}
.folder-section .section-title {
  font-size:clamp(2rem,3vw,3rem);
  font-weight:800; color:var(--ink); margin-bottom:1rem; line-height:1.1;
}
.folder-section p { max-width:720px; color:var(--muted); line-height:1.8; margin-bottom:1.8rem; }

.folder-actividades .actividades-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
}
.folder-actividades .folder-card {
  position:relative; border-radius:24px; overflow:hidden;
  min-height:240px; border:1px solid var(--line);
  box-shadow:0 18px 45px rgba(0,87,255,.08);
}
.folder-actividades .folder-card img { width:100%; height:100%; object-fit:cover; display:block; }
.folder-actividades .folder-card-meta {
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(0,87,255,.92));
  color:#fff;
}
.folder-actividades .folder-card-meta strong { display:block; margin-bottom:.25rem; }

.folder-dormilones { background:var(--ink); color:#fff; }
.folder-dormilones .section-title,
.folder-dormilones p { color:#fff; }
.folder-dormilones .dormilones-row {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
}
.folder-dormilones .sleep-card {
  position:relative; border:1px solid rgba(255,255,255,.15);
  border-radius:24px; overflow:hidden; min-height:280px;
  background:rgba(255,255,255,.04); box-shadow:0 18px 40px rgba(0,0,0,.2);
}
.folder-dormilones .sleep-card img { width:100%; height:100%; object-fit:cover; display:block; }
.folder-dormilones .sleep-overlay {
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(10,15,30,.88));
  color:#fff;
}
.folder-dormilones .sleep-overlay strong { display:block; margin-bottom:.4rem; }

.folder-eventos .folder-eventos-head {
  margin-bottom:2.5rem;
  padding:2rem 2rem 2rem 2rem;
  background:rgba(0,87,255,.05);
  border:1px solid rgba(0,87,255,.12);
  border-radius:28px;
  box-shadow:0 16px 40px rgba(0,87,255,.08);
}
.folder-eventos .folder-eventos-head .section-title {
  margin-top:.25rem;
}
.folder-eventos .eventos-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem;
}
.folder-eventos .event-card {
  position:relative; border-radius:26px; overflow:hidden;
  background:#fff; border:none;
  box-shadow:0 18px 48px rgba(0,87,255,.12);
  transition:transform .3s ease, box-shadow .3s ease;
}
.folder-eventos .event-card:hover {
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,87,255,.18);
}
.folder-eventos .event-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  min-height:240px;
}
.folder-eventos .event-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.folder-eventos .event-badge {
  position:absolute; top:1rem; left:1rem;
  z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem;
  background:var(--blue);
  color:#fff; font-size:.8rem; font-weight:700;
  border-radius:999px; letter-spacing:.8px;
  box-shadow:0 12px 24px rgba(0,87,255,.14);
}
.folder-eventos .event-meta {
  position:relative;
  z-index:2;
  padding:1.2rem 1.25rem 1.5rem;
  background:#fff;
}
.folder-eventos .event-meta strong {
  display:block; margin-bottom:.45rem;
  color:var(--ink);
}
.folder-eventos .event-meta span {
  color:var(--muted);
}
.folder-eventos .wide-card { grid-column:span 2; min-height:280px; }

.folder-best-moments {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border-top:1px solid rgba(0,87,255,.14);
  padding:6rem 2.5rem;
}
.folder-best-moments .folder-copy {
  background:#fff;
  border:1px solid rgba(0,87,255,.12);
  border-radius:28px;
  padding:2.2rem 2.4rem;
  box-shadow:0 24px 60px rgba(0,87,255,.08);
}
.folder-best-moments .folder-copy .section-title {
  margin-bottom:1rem;
}
.folder-best-moments .folder-copy p {
  color: var(--ink-2);
  line-height:1.85;
  max-width:620px;
  margin-bottom:1.75rem;
}
.folder-best-moments .folder-best-inner {
  display:grid;
  gap:1.75rem;
}
.folder-best-moments .momentos-layout {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(240px, auto));
  gap:1rem;
  align-items:start;
}
.folder-best-moments .momento-card {
  position:relative;
  border-radius:28px;
  overflow:hidden;
  min-height:240px;
  box-shadow:0 22px 48px rgba(0,87,255,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.folder-best-moments .momento-card:hover {
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(0,87,255,.16);
}
.folder-best-moments .momento-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.folder-best-moments .momento-card-large {
  grid-column:1 / span 2;
  grid-row:1 / span 2;
  min-height:380px;
}
.folder-best-moments .momento-card-tall {
  grid-column:3 / 4;
  grid-row:1 / span 2;
  min-height:380px;
}
.folder-best-moments .momento-card-small {
  min-height:240px;
}
.folder-best-moments .momento-card-wide {
  grid-column:1 / 4;
  grid-row:4 / 5;
  min-height:240px;
}

.folder-last-day { background:linear-gradient(135deg, #f8f0ff 0%, #eef6ff 100%); }
.folder-last-day .last-day-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
}
.folder-last-day .last-day-badges {
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem;
}
.folder-last-day .last-day-badges span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .9rem; border-radius:999px;
  background:#fff; color:var(--ink); font-weight:600; font-size:.85rem;
}
.folder-last-day .last-day-media {
  position:relative; border-radius:28px; overflow:hidden;
  min-height:340px; box-shadow:0 24px 60px rgba(0,87,255,.12);
}
.folder-last-day .last-day-media img { width:100%; height:100%; object-fit:cover; display:block; }
.folder-last-day .last-day-media figcaption {
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem;
  color:#fff; font-size:1rem; line-height:1.6;
  background:linear-gradient(180deg,transparent,rgba(10,15,30,.8)); padding:1rem 1rem 1.1rem; border-radius:18px;
}

/* ── Responsive section styles ─────────────────────────── */

.carousel-slide { min-width:100%; height:100%; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.c-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08);
  color:var(--ink); font-size:.8rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--t); z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.c-btn:hover { box-shadow:0 4px 16px rgba(0,0,0,.18); transform:translateY(-50%) scale(1.05); }
.c-prev { left:12px; }
.c-next { right:12px; }
.c-dots { display:flex; justify-content:center; gap:6px; position:absolute; bottom:12px; left:0; right:0; }
.c-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer; transition:var(--t); }
.c-dot.active { background:#fff; width:18px; border-radius:3px; }

.carousel-caption {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .2rem 0;
}
.cc-num { font-size:.72rem; font-weight:700; color:var(--muted); letter-spacing:1px; }
.cc-label { font-size:.72rem; color:var(--muted); }

/* ── Highlights strip ─────────────────────────────────────── */
.highlights-strip {
  background:var(--ink); padding:0 2.5rem;
  display:flex; align-items:center; justify-content:center;
  gap:2rem; height:52px; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.hl-item { display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.hl-item i { color:var(--blue); font-size:.8rem; }
.hl-item span { font-size:.78rem; font-weight:500; color:rgba(255,255,255,.65); letter-spacing:.3px; }
.hl-sep { width:1px; height:18px; background:rgba(255,255,255,.12); flex-shrink:0; }

/* ── Progress section ─────────────────────────────────────── */
.progress-section {
  padding:6rem 2.5rem;
  border-top:1px solid var(--line);
}
.progress-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.section-label {
  font-size:.72rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--blue); margin-bottom:.5rem;
}
.section-title {
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-weight:800; letter-spacing:-1px;
  color:var(--ink); margin-bottom:.8rem; line-height:1.15;
}
.section-sub { font-size:.95rem; color:var(--muted); line-height:1.7; }

.progress-bars { display:flex; flex-direction:column; gap:1.6rem; }
.pbar-item {}
.pbar-head { display:flex; justify-content:space-between; margin-bottom:.5rem; }
.pbar-head span { font-size:.82rem; font-weight:600; color:var(--ink); }
.pbar-val { color:var(--blue) !important; }
.pbar-track {
  height:6px; background:var(--line); border-radius:99px; overflow:hidden;
}
.pbar-fill {
  height:100%; width:0; border-radius:99px;
  background:var(--blue);
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ── Timeline ─────────────────────────────────────────────── */
.timeline-section {
  padding:6rem 2.5rem;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.tl-header { max-width:1100px; margin:0 auto 3.5rem; }
.timeline {
  max-width:700px; margin:0 auto;
  position:relative;
}
.timeline::before {
  content:''; position:absolute;
  left:50%; top:0; bottom:0;
  width:1px; background:var(--line);
  transform:translateX(-50%);
}
.tl-item {
  display:flex; justify-content:flex-end;
  padding-right:calc(50% + 2rem);
  margin-bottom:2.5rem; position:relative;
  animation:fadeUp .5s ease both;
}
.tl-item.right { justify-content:flex-start; padding-right:0; padding-left:calc(50% + 2rem); }
.tl-dot {
  position:absolute; left:50%; top:1.1rem;
  width:10px; height:10px; border-radius:50%;
  background:var(--blue); border:2px solid var(--white);
  box-shadow:0 0 0 3px var(--line);
  transform:translateX(-50%);
}
.tl-card {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:1.2rem 1.4rem;
  max-width:260px; transition:var(--t);
}
.tl-card:hover { border-color:#c0d0ff; box-shadow:0 4px 20px rgba(0,87,255,.1); transform:translateY(-2px); }
.tl-date { font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--blue); }
.tl-card h3 { font-size:.95rem; font-weight:700; color:var(--ink); margin:.3rem 0 .4rem; }
.tl-card p { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* ── Quote ────────────────────────────────────────────────── */
.quote-section {
  padding:7rem 2.5rem;
  background:var(--ink);
  text-align:center;
}
.quote-inner { max-width:680px; margin:0 auto; }
.quote-mark {
  font-size:6rem; line-height:.6; color:var(--blue);
  font-family:Georgia,serif; margin-bottom:1rem; display:block;
}
.quote-section blockquote p {
  font-size:clamp(1.4rem,3vw,2.1rem);
  font-weight:700; color:var(--white);
  line-height:1.45; letter-spacing:-.5px; margin-bottom:1.2rem;
}
.quote-section blockquote cite {
  font-size:.85rem; color:var(--muted);
  font-style:normal; font-weight:500; display:block; margin-bottom:2.5rem;
}
.btn-light {
  background:rgba(255,255,255,.1) !important;
  border:1.5px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.btn-light:hover { background:var(--blue) !important; border-color:var(--blue) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { background:var(--ink-2,#1C2340); padding:2.5rem 2.5rem 1.5rem; }
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap; gap:1.2rem;
}
.footer-logo { font-size:1.4rem; font-weight:900; color:var(--blue); display:block; margin-bottom:.2rem; }
.footer-brand p { font-size:.78rem; color:var(--muted); }
.footer-nav { display:flex; gap:1.5rem; }
.footer-nav a { font-size:.8rem; color:rgba(255,255,255,.45); text-decoration:none; transition:var(--t); }
.footer-nav a:hover { color:#fff; }
.footer-links { display:flex; gap:.5rem; }
.footer-social {
  width:36px; height:36px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; text-decoration:none; transition:var(--t);
}
.footer-social:hover { background:var(--blue); border-color:var(--blue); color:#fff; }
.footer-bottom { text-align:center; font-size:.72rem; color:rgba(255,255,255,.2); padding-top:1.2rem; }

/* ── Reels ────────────────────────────────────────────────── */
#reels-section {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 998;
  background: #000;
  align-items: center;
  justify-content: center;
}
#reels-section.active { display: flex; }

.reels-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.reel-item {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.reel-item.active { opacity: 1; pointer-events: all; }

.reel-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.reel-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.12) 45%, transparent 70%);
}

.reel-info {
  position: absolute; bottom: 90px; left: 16px; right: 76px;
  z-index: 5; pointer-events: none;
}
.reel-user { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.reel-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; flex-shrink: 0;
}
.reel-user span { font-size: .88rem; font-weight: 700; color: #fff; }
.reel-info p { font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.55; }

.reel-actions {
  position: absolute; right: 10px; bottom: 100px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 5;
}
.r-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: #fff; font-family: inherit; cursor: pointer;
}
.r-btn i {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: var(--t);
}
.r-btn:hover i { background: rgba(255,255,255,.26); transform: scale(1.08); }
.r-btn span { font-size: .62rem; font-weight: 500; color: rgba(255,255,255,.75); }
.r-btn.liked i {
  background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5);
  color: #ef4444; animation: heartPop .35s ease;
}

.reel-pip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.6);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; pointer-events: none; opacity: 0; z-index: 10;
}
.reel-pip.show { animation: pipIn .18s ease forwards; }
.reel-pip.hide { animation: pipOut .3s ease forwards; }

.float-heart {
  position: absolute; font-size: 2.4rem;
  pointer-events: none; z-index: 20;
  animation: floatUp .9s ease forwards;
}

.reel-dots {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 5px; z-index: 5;
}
.reel-dot {
  width: 3px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.3); cursor: pointer; transition: var(--t);
}
.reel-dot.active { background: #fff; height: 18px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first
═══════════════════════════════════════════════════════════ */

/* ── 1024px ── */
@media (min-width: 1440px) {
  /* Aprovechar pantallas grandes */
  .hero {
    max-width: 1400px;
    padding: 100px 3rem 5rem;
    gap: 5rem;
    min-height: auto;
  }
  .hero-title { font-size: 4.8rem; }
  .hero-sub { font-size: 1.15rem; }
  .hero-stats { gap: 2rem; }
  .carousel { max-height: 480px; }

  /* Secciones más espaciosas */
  .folder-section { padding: 4.5rem 3rem; }
  .section-title { font-size: 2.4rem; }
  .section-sub { font-size: 1rem; }

  /* Grid de imágenes expandida */
  .folder-actividades .actividades-grid { gap: 1.2rem; }
  .folder-actividades .folder-card { min-height: 320px; }
  .folder-dormilones .dormilones-row { gap: 1.2rem; }
  .folder-dormilones .sleep-card { min-height: 360px; }
  .folder-eventos .eventos-grid { gap: 1.4rem; }
  .folder-eventos .event-card { min-height: 320px; }

  /* Best moments - grid más generoso */
  .folder-best-moments .momentos-layout {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1rem;
  }
  .folder-best-moments .momento-card-large {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 420px;
  }
  .folder-best-moments .momento-card-tall {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 420px;
  }
  .folder-best-moments .momento-card-wide {
    grid-column: 3;
    grid-row: 2;
    min-height: 200px;
  }
  .folder-best-moments .momento-card-small {
    min-height: 200px;
  }

  /* Best exams */
  .best-exams-inner { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
  .best-exams-media { min-height: 400px; }
  .best-exams-section { padding: 4.5rem 3rem; }

  /* Last day */
  .folder-last-day { padding: 4.5rem 3rem; }
  .folder-last-day .last-day-layout { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .folder-last-day .last-day-media { min-height: 420px; }

  /* Progress */
  .progress-section { padding: 4.5rem 3rem; }
  .progress-inner { grid-template-columns: 1fr 1.2fr; gap: 3rem; max-width: 100%; }

  /* Timeline */
  .timeline-section { padding: 4.5rem 3rem; }
  .tl-card { max-width: 280px; }
  .tl-card h3 { font-size: 1.1rem; }
  .tl-card p { font-size: .95rem; }

  /* Quote */
  .quote-section { padding: 4.5rem 3rem; }
  .quote-mark { font-size: 4rem; }
  .quote-section blockquote p { font-size: 1.5rem; }

  /* Footer */
  .footer { padding: 3.5rem 3rem 2rem; }

  /* Highlights */
  .highlights-strip { justify-content: center; overflow-x: visible; gap: 2rem; }

  /* Carousel más grande */
  .carousel-caption { font-size: .95rem; }
}

@media (max-width: 1024px) {
  /* Hero */
  .hero {
    gap: 2.8rem;
    padding: 80px 1.8rem 3.5rem;
    max-width: 100%;
  }
  .hero-title { font-size: clamp(2.6rem, 4vw, 4rem); }
  .hero-sub { font-size: .95rem; }
  .btn-primary, .btn-ghost { font-size: .82rem; padding: .65rem 1.3rem; }
  .hero-stats { gap: 1.3rem; }
  .carousel { max-height: 380px; }

  /* Sections */
  .folder-section { padding: 3.5rem 1.8rem; }
  .section-title { font-size: 2rem; }

  /* Progress */
  .progress-inner { grid-template-columns: 1fr; gap: 2.5rem; max-width: 680px; margin: 0 auto; }

  /* Best moments - 2 columnas en 1024px */
  .folder-best-moments .folder-best-inner { grid-template-columns: 1fr; }
  .folder-best-moments .momentos-layout { grid-template-columns: repeat(2, 1fr); }
  .folder-best-moments .momento-card-large,
  .folder-best-moments .momento-card-tall,
  .folder-best-moments .momento-card-wide {
    min-height: 300px;
  }

  /* Best exams */
  .best-exams-inner { grid-template-columns: 1fr; gap: 2rem; }
  .best-exams-media { min-height: 320px; }
  .best-exams-section { padding: 3.5rem 1.8rem; }

  /* Timeline */
  .timeline { max-width: 100%; }
  .tl-card { max-width: 240px; }
  .timeline-section { padding: 3.5rem 1.8rem; }

  /* Last day */
  .folder-last-day .last-day-layout { gap: 2rem; }
  .folder-last-day .last-day-media { min-height: 360px; }

  /* Quote */
  .quote-section { padding: 3.5rem 1.8rem; }

  /* Footer */
  .footer { padding: 2.5rem 1.8rem 1.5rem; }
}

/* ── 900px — Tablet mediana y laptops pequeñas ── */
@media (max-width: 900px) {
  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 76px;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    gap: 2rem;
    text-align: center;
  }
  .hero-left { order: 1; }
  .hero-right { order: 2; max-width: 420px; margin: 0 auto; width: 100%; }
  .hero-tag { margin-bottom: 1rem; }
  .hero-title { font-size: clamp(2.4rem, 6vw, 3.5rem); letter-spacing: -1px; }
  .hero-sub { font-size: .95rem; margin-bottom: 1.5rem; }
  .hero-btns { justify-content: center; gap: .6rem; }
  .btn-primary, .btn-ghost { font-size: .8rem; padding: .6rem 1.2rem; }
  .hero-stats { justify-content: center; gap: 1.2rem; font-size: .9rem; }
  .carousel { max-height: 340px; }

  /* Sections */
  .folder-section { padding: 3rem 1.5rem; }
  .section-title { font-size: 1.8rem; }
  .section-sub { font-size: .92rem; }

  /* Highlights scrollable */
  .highlights-strip {
    padding: 0 1.5rem;
    gap: 1.4rem;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .highlights-strip::-webkit-scrollbar { display: none; }

  /* Folder sections - ajuste de espacios */
  .folder-actividades .actividades-grid { gap: .95rem; }
  .folder-actividades .folder-card { min-height: 280px; }
  .folder-dormilones .dormilones-row { gap: .95rem; }
  .folder-dormilones .sleep-card { min-height: 300px; }
  .folder-eventos .eventos-grid { gap: 1.1rem; }
  .folder-eventos .event-card { min-height: 280px; }

  /* Best moments - 1 columna */
  .folder-best-moments { padding: 3rem 1.5rem; }
  .folder-best-moments .folder-best-inner { grid-template-columns: 1fr; gap: 2rem; }
  .folder-best-moments .momentos-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: .85rem;
  }
  .folder-best-moments .momento-card-large,
  .folder-best-moments .momento-card-tall,
  .folder-best-moments .momento-card-wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 320px;
  }

  /* Best exams */
  .best-exams-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .best-exams-section { padding: 3rem 1.5rem; }
  .best-exams-media { min-height: 300px; }

  /* Last day */
  .folder-last-day { padding: 3rem 1.5rem; }
  .folder-last-day .last-day-layout { grid-template-columns: 1fr; gap: 2rem; }
  .folder-last-day .last-day-media { min-height: 340px; }

  /* Progress */
  .progress-section { padding: 3rem 1.5rem; }
  .progress-inner { grid-template-columns: 1fr; gap: 2rem; }

  /* Timeline */
  .timeline-section { padding: 3rem 1.5rem; }
  .timeline { max-width: 100%; }
  .tl-card { max-width: 200px; font-size: .9rem; }
  .tl-card h3 { font-size: .95rem; }
  .tl-card p { font-size: .8rem; }

  /* Quote */
  .quote-section { padding: 3rem 1.5rem; }
  .quote-mark { font-size: 3.2rem; }
  .quote-section blockquote p { font-size: 1.3rem; }

  /* Footer en columna */
  .footer { padding: 2rem 1.5rem 1rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-center { order: 3; width: 100%; }
  .footer-links { order: 2; }
}

/* ── 640px — móvil ── */
@media (max-width: 640px) {
  /* Navbar */
  .navbar { padding: 0 1rem; height: 54px; }
  .nav-links a { padding: .4rem .7rem; font-size: .82rem; gap: 4px; }
  .nav-links a i { display: none; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    padding: 68px 1rem 2.5rem;
    gap: 2rem;
    min-height: auto;
  }
  .hero-tag { margin-bottom: 1rem; }
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    letter-spacing: -1px;
    margin-bottom: 1rem;
  }
  .hero-sub {
    font-size: .9rem;
    margin-bottom: 1.5rem;
  }
  .hero-btns {
    gap: .6rem;
    justify-content: stretch;
    width: 100%;
    flex-direction: column;
  }
  .btn-primary, .btn-ghost {
    font-size: .82rem;
    padding: .6rem 1.1rem;
    width: 100%;
    justify-content: center;
  }
  .hero-left,
  .hero-right { width: 100%; }
  .hero-stats {
    gap: 1.2rem;
    justify-content: space-around;
    margin-top: 1.5rem;
  }
  .hero-right { max-width: 100%; }
  .carousel {
    width: 100%;
    max-height: 300px;
  }
  .stat-num { font-size: 1.35rem; }
  .stat-div { height: 28px; }

  .nav-links { flex-wrap: wrap; justify-content: center; }
  .nav-links a { flex: 1 1 auto; text-align: center; }

  /* Folder sections */
  .folder-section { padding: 2.5rem 1rem; }
  .folder-header {
    margin-bottom: 2rem;
  }
  .section-title { font-size: 1.6rem; letter-spacing: -.5px; }
  .section-sub { font-size: .88rem; }
  .section-label { font-size: .65rem; }

  .folder-actividades .actividades-grid {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .folder-actividades .folder-card {
    min-height: 220px;
    border-radius: 20px;
  }
  .folder-actividades .folder-card-meta {
    padding: .9rem 1rem;
  }

  .folder-dormilones .dormilones-row {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .folder-dormilones .sleep-card {
    min-height: 240px;
    border-radius: 20px;
  }
  .folder-dormilones .sleep-overlay {
    padding: .9rem 1rem;
  }
  .folder-dormilones { padding: 2.5rem 1rem; }

  .folder-eventos .folder-eventos-head {
    padding: 1.5rem 1.2rem;
    margin-bottom: 2rem;
    border-radius: 20px;
  }
  .folder-eventos .eventos-grid {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .folder-eventos .event-card {
    min-height: 240px;
    border-radius: 20px;
  }
  .folder-eventos .event-card img {
    min-height: 160px;
  }
  .folder-eventos .event-meta {
    padding: .9rem 1rem;
  }
  .folder-eventos .event-card.wide-card {
    grid-column: 1;
    min-height: 240px;
  }

  .reel-info { left: 12px; right: 12px; bottom: 76px; }
  .reel-actions { right: 12px; bottom: 80px; align-items: flex-end; }
  .reel-actions .r-btn { min-width: 42px; }

  /* Quote */
  .quote-section { padding: 2.5rem 1rem; }
  .quote-mark { font-size: 2.8rem; }
  .quote-section blockquote p { font-size: 1.1rem; }
  .quote-section blockquote cite { font-size: .78rem; margin-bottom: 1.5rem; }
  .btn-light {
    width: 100%;
    justify-content: center;
  }

  /* Best moments - rediseño para móvil */
  .folder-best-moments {
    padding: 2.5rem 1rem;
  }
  .folder-best-moments .folder-best-inner {
    gap: 1.5rem;
  }
  .folder-best-moments .momentos-layout {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .folder-best-moments .momento-card {
    min-height: 200px;
    border-radius: 18px;
  }
  .folder-best-moments .momento-card-large {
    min-height: 220px;
    grid-column: auto;
    grid-row: auto;
  }
  .folder-best-moments .momento-card-tall {
    min-height: 180px;
    grid-column: auto;
    grid-row: auto;
  }
  .folder-best-moments .momento-card-small {
    min-height: 180px;
  }
  .folder-best-moments .momento-card-wide {
    min-height: 180px;
    grid-column: auto;
    grid-row: auto;
  }

  /* Last day */
  .folder-last-day {
    padding: 2.5rem 1rem;
  }
  .folder-last-day .last-day-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .folder-last-day .last-day-media {
    min-height: auto;
    border-radius: 20px;
    display: grid;
    grid-template-rows: auto auto;
  }
  .folder-last-day .last-day-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
  }
  .folder-last-day .last-day-media figcaption {
    position: static !important;
    background: rgba(255,255,255,.96) !important;
    padding: .8rem 1rem !important;
    border-radius: 0 0 20px 20px;
    margin-top: -1px;
  }
  .folder-last-day .last-day-badges {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  .folder-last-day .last-day-badges span {
    font-size: .75rem;
    padding: .4rem .8rem;
  }

  /* Footer */
  .footer { padding: 1.8rem 1rem 1rem; }
  .footer-inner { gap: 1rem; }
  .footer-center { display: none; }
  .footer-logo { font-size: 1.2rem; }
  .footer-brand p { font-size: .75rem; }

  /* Reels */
  .reels-wrap { max-width: 100%; }
  .reel-info { bottom: 76px; left: 12px; right: 64px; }
  .reel-actions { right: 8px; bottom: 84px; gap: 12px; }
  .r-btn i { width: 40px; height: 40px; font-size: .95rem; }
  .r-btn span { font-size: .58rem; }

  /* Highlights */
  .highlights-strip { display: none; }

  /* Progress bars */
  .progress-section { padding: 2.5rem 1rem; }
  .progress-inner { gap: 2rem; }
  .pbar-item { gap: 0.6rem; }
  .pbar-head { font-size: .85rem; }
  .pbar-track { height: 8px; }

  /* Timeline */
  .timeline-section { padding: 2.5rem 1rem; }
  .tl-header { margin-bottom: 2rem; }
  .timeline::before {
    left: 12px;
    transform: none;
  }
  .tl-item,
  .tl-item.right {
    padding-right: 0;
    padding-left: 2.4rem;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
  }
  .tl-dot {
    left: 8px;
    transform: none;
    top: .9rem;
    width: 8px;
    height: 8px;
  }
  .tl-card {
    max-width: 100%;
    padding: 1rem 1.1rem;
  }
  .tl-card h3 { font-size: .88rem; }
  .tl-card p { font-size: .78rem; }

  /* Best exams section */
  .best-exams-inner { grid-template-columns: 1fr; }
  .best-exams-section { padding: 2.5rem 1rem; }
  .best-exams-copy { text-align: center; margin-bottom: 1.5rem; }
  .best-exams-media { min-height: 260px; border-radius: 20px; }
  .best-exams-card { padding: .75rem .9rem; }
  .best-exams-card i { font-size: 1.4rem; }
  .best-exams-media-text {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    background: rgba(255,255,255,.95);
    color: var(--ink);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: .9rem 1rem;
    margin-top: -1px;
    text-align: left;
  }
  .best-exams-media-text span { color: var(--blue); font-size: .75rem; }
  .best-exams-media-text h3 { color: var(--ink); font-size: .95rem; }
  .best-exams-media-text p { color: var(--muted); font-size: .8rem; }

  /* Card layouts - unified for mobile */
  .folder-card,
  .sleep-card,
  .event-card,
  .best-exams-media {
    display: grid;
    grid-template-rows: auto auto;
  }
  .folder-card-meta,
  .sleep-overlay,
  .event-meta,
  .best-exams-media-text {
    position: static;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    text-align: left;
    border-radius: 0 0 20px 20px;
    padding: .9rem 1rem;
    margin-top: -1px;
  }
  .sleep-overlay { background: rgba(255,255,255,.94); }
  .event-meta { border-top: 1px solid var(--line); }
  .folder-card img,
  .sleep-card img,
  .event-card img,
  .best-exams-media img,
  .last-day-media img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .folder-card-meta strong,
  .sleep-overlay strong,
  .event-meta strong { color: var(--ink); font-size: .9rem; }
  .folder-card-meta span,
  .sleep-overlay span,
  .event-meta span { color: var(--muted); font-size: .78rem; }

  /* Lightbox responsive */
  .image-lightbox-close { width: 40px; height: 40px; font-size: 1.4rem; }
  .image-lightbox-content { width: min(100%, 90vw); }
  .image-lightbox-content img { max-height: min(100vh, 70vh); }
  .image-lightbox-caption { font-size: .85rem; }

}

/* ── 480px — Móviles grandes (S25 Ultra, etc) ── */
@media (max-width: 480px) {
  /* Last day */
  .folder-last-day { padding: 2.2rem .9rem; }
  .folder-last-day .last-day-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .folder-last-day .last-day-media {
    min-height: auto;
    border-radius: 22px;
    display: grid;
    grid-template-rows: auto auto;
  }
  .folder-last-day .last-day-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-radius: 22px 22px 0 0;
  }
  .folder-last-day .last-day-media figcaption {
    position: static !important;
    background: rgba(255,255,255,.96) !important;
    padding: .8rem .95rem !important;
    border-radius: 0 0 22px 22px;
    margin-top: -1px;
    color: var(--ink);
  }
  .folder-last-day .last-day-badges span { font-size: .72rem; padding: .35rem .7rem; }

  /* Navbar */
  .navbar { height: 52px; }
  .nav-logo { font-size: 1.05rem; }
  .nav-links a { font-size: .78rem; padding: .4rem .65rem; }

  /* Hero */
  .hero { padding: 64px .9rem 2.2rem; gap: 1.8rem; }
  .hero-tag { font-size: .7rem; padding: .28rem .8rem; margin-bottom: .9rem; }
  .hero-title {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    letter-spacing: -0.8px;
  }
  .hero-sub { font-size: .87rem; line-height: 1.6; }
  .hero-btns { gap: .55rem; }
  .btn-primary, .btn-ghost { font-size: .78rem; padding: .55rem .95rem; }
  .hero-stats { gap: .9rem; font-size: .82rem; }
  .stat-num { font-size: 1.15rem; }
  .carousel { max-height: 280px; }
  .carousel-caption { font-size: .78rem; }

  /* Sections */
  .folder-section { padding: 2.2rem .9rem; }
  .section-title { font-size: 1.45rem; letter-spacing: -.4px; }
  .section-sub { font-size: .83rem; }
  .section-label { font-size: .62rem; }

  /* Folder cards */
  .folder-actividades .folder-card { min-height: 200px; border-radius: 22px; }
  .folder-actividades .folder-card-meta { padding: .8rem .95rem; font-size: .78rem; }
  .folder-dormilones .sleep-card { min-height: 220px; border-radius: 22px; }
  .folder-dormilones .sleep-overlay { padding: .8rem .95rem; font-size: .78rem; }
  .folder-eventos .event-card { min-height: 220px; border-radius: 22px; }
  .folder-eventos .event-meta { padding: .8rem .95rem; font-size: .78rem; }
  .folder-eventos .folder-eventos-head { padding: 1.35rem 1.1rem; margin-bottom: 1.75rem; }

  /* Best moments */
  .folder-best-moments { padding: 2.2rem .9rem; }
  .folder-best-moments .momentos-layout {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .folder-best-moments .momento-card {
    min-height: 180px;
    border-radius: 20px;
  }
  .folder-best-moments .momento-card-large {
    min-height: 200px;
    grid-column: auto;
    grid-row: auto;
  }
  .folder-best-moments .momento-card-tall {
    min-height: 160px;
    grid-column: auto;
    grid-row: auto;
  }
  .folder-best-moments .momento-card-wide {
    min-height: 160px;
    grid-column: auto;
    grid-row: auto;
  }

  /* Last day */
  .folder-last-day { padding: 2.2rem .9rem; }
  .folder-last-day .last-day-media { min-height: 260px; border-radius: 22px; }
  .folder-last-day .last-day-badges span { font-size: .72rem; padding: .35rem .7rem; }

  /* Progress */
  .progress-section { padding: 2.2rem .9rem; }
  .pbar-head { font-size: .78rem; }
  .pbar-val { font-size: .72rem; }

  /* Timeline */
  .timeline-section { padding: 2.2rem .9rem; }
  .tl-card { padding: .8rem .95rem; }
  .tl-card h3 { font-size: .82rem; }
  .tl-card p { font-size: .72rem; }
  .tl-dot { width: 7px; height: 7px; }

  /* Best exams */
  .best-exams-card { padding: .65rem .8rem; font-size: .8rem; }
  .best-exams-card i { font-size: 1.3rem; }
  .best-exams-media { min-height: 240px; border-radius: 22px; }
  .best-exams-media-text { padding: .8rem .95rem; }
  .best-exams-media-text span { font-size: .72rem; }
  .best-exams-media-text h3 { font-size: .88rem; }
  .best-exams-media-text p { font-size: .77rem; }

  /* Quote */
  .quote-section { padding: 2.2rem .9rem; }
  .quote-mark { font-size: 2.4rem; }
  .quote-section blockquote p { font-size: .98rem; }
  .quote-section blockquote cite { font-size: .72rem; }
  .btn-light { font-size: .75rem; padding: .55rem .9rem; }

  /* Footer */
  .footer { padding: 1.6rem .9rem .85rem; font-size: .77rem; }
  .footer-logo { font-size: 1.05rem; }
  .footer-brand p { font-size: .68rem; }
  .footer-social { font-size: .95rem; }

  /* Reels */
  .reel-info { font-size: .78rem; left: 10px; right: 55px; bottom: 72px; }
  .reel-actions { gap: 10px; right: 7px; bottom: 80px; }
  .r-btn i { width: 37px; height: 37px; font-size: .88rem; }
  .r-btn span { font-size: .53rem; }

  /* Lightbox */
  .image-lightbox-close { width: 38px; height: 38px; font-size: 1.3rem; top: -8px; right: -8px; }
  .image-lightbox-caption { font-size: .8rem; }
}

/* ── 400px — Móvil pequeño ── */
@media (max-width: 400px) {
  /* Last day */
  .folder-last-day { padding: 2rem .8rem; }
  .folder-last-day .last-day-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .folder-last-day .last-day-media {
    min-height: auto;
    border-radius: 18px;
    display: grid;
    grid-template-rows: auto auto;
  }
  .folder-last-day .last-day-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-radius: 18px 18px 0 0;
  }
  .folder-last-day .last-day-media figcaption {
    position: static !important;
    background: rgba(255,255,255,.96) !important;
    padding: .7rem .85rem !important;
    border-radius: 0 0 18px 18px;
    margin-top: -1px;
    color: var(--ink);
    font-size: .8rem;
  }
  .folder-last-day .last-day-badges span { font-size: .7rem; padding: .3rem .6rem; }

  /* Navbar */
  .navbar { height: 50px; }
  .nav-logo { font-size: 1rem; }
  .nav-links a { font-size: .75rem; padding: .35rem .55rem; }

  /* Hero */
  .hero { padding: 60px .8rem 2rem; gap: 1.5rem; }
  .hero-tag { font-size: .68rem; padding: .25rem .75rem; margin-bottom: .8rem; }
  .hero-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: -0.5px;
  }
  .hero-sub { font-size: .85rem; line-height: 1.5; }
  .hero-btns { gap: .5rem; }
  .btn-primary, .btn-ghost { font-size: .75rem; padding: .5rem .9rem; }
  .hero-stats { gap: .8rem; font-size: .8rem; }
  .stat-num { font-size: 1.1rem; }
  .carousel { max-height: 250px; }
  .carousel-caption { font-size: .75rem; }

  /* Sections */
  .folder-section { padding: 2rem .8rem; }
  .section-title { font-size: 1.35rem; letter-spacing: -.3px; }
  .section-sub { font-size: .8rem; }
  .section-label { font-size: .6rem; }

  /* Folder cards */
  .folder-actividades .folder-card { min-height: 180px; }
  .folder-actividades .folder-card-meta { padding: .7rem .85rem; font-size: .75rem; }
  .folder-dormilones .sleep-card { min-height: 200px; }
  .folder-dormilones .sleep-overlay { padding: .7rem .85rem; font-size: .75rem; }
  .folder-eventos .event-card { min-height: 200px; }
  .folder-eventos .event-meta { padding: .7rem .85rem; font-size: .75rem; }
  .folder-eventos .folder-eventos-head { padding: 1.2rem 1rem; margin-bottom: 1.5rem; }

  /* Best moments */
  .folder-best-moments { padding: 2rem .8rem; }
  .folder-best-moments .momento-card { min-height: 160px; }
  .folder-best-moments .momento-card-large { min-height: 160px; }

  /* Last day */
  .folder-last-day { padding: 2rem .8rem; }
  .folder-last-day .last-day-media { min-height: 240px; }
  .folder-last-day .last-day-badges span { font-size: .7rem; padding: .3rem .6rem; }

  /* Progress */
  .progress-section { padding: 2rem .8rem; }
  .pbar-head { font-size: .75rem; }
  .pbar-val { font-size: .7rem; }

  /* Timeline */
  .timeline-section { padding: 2rem .8rem; }
  .tl-card { padding: .75rem .9rem; }
  .tl-card h3 { font-size: .8rem; }
  .tl-card p { font-size: .7rem; }
  .tl-dot { width: 6px; height: 6px; }

  /* Best exams */
  .best-exams-card { padding: .6rem .75rem; font-size: .78rem; }
  .best-exams-card i { font-size: 1.2rem; }
  .best-exams-media { min-height: 220px; }
  .best-exams-media-text { padding: .75rem .85rem; }
  .best-exams-media-text span { font-size: .7rem; }
  .best-exams-media-text h3 { font-size: .85rem; }
  .best-exams-media-text p { font-size: .75rem; }

  /* Quote */
  .quote-section { padding: 2rem .8rem; }
  .quote-mark { font-size: 2.2rem; }
  .quote-section blockquote p { font-size: .95rem; }
  .quote-section blockquote cite { font-size: .7rem; }
  .btn-light { font-size: .7rem; padding: .5rem .85rem; }

  /* Footer */
  .footer { padding: 1.5rem .8rem .8rem; font-size: .75rem; }
  .footer-logo { font-size: 1rem; }
  .footer-brand p { font-size: .65rem; }
  .footer-social { font-size: .9rem; }

  /* Reels */
  .reel-info { font-size: .75rem; left: 8px; right: 50px; bottom: 68px; }
  .reel-actions { gap: 8px; right: 6px; bottom: 76px; }
  .r-btn i { width: 35px; height: 35px; font-size: .85rem; }
  .r-btn span { font-size: .5rem; }

  /* Lightbox */
  .image-lightbox-close { width: 36px; height: 36px; font-size: 1.2rem; top: -8px; right: -8px; }
  .image-lightbox-caption { font-size: .75rem; }
}