/* ============================================================
   KAME RUN+  ·  Sistema visual
   Energético / deportivo · base naranja · verde tortuga · crema
   ============================================================ */

:root{
  /* Marca */
  --kr-orange:        #E8591A;
  --kr-orange-deep:   #C2400C;
  --kr-orange-bright: #FF7A2E;
  --kr-amber:         #F2A93B;
  --kr-cream:         #FBF1DD;
  --kr-paper:         #FBF5EA;
  --kr-green:         #5FA02B;
  --kr-green-deep:    #2C5417;
  --kr-green-bright:  #7FC23E;

  /* Tinta cálida */
  --kr-ink:           #1B130A;
  --kr-ink-2:         #2A2014;
  --kr-ink-soft:      #6B5A45;
  --kr-line:          rgba(27,19,10,.12);

  /* Superficies oscuras */
  --kr-night:         #150F08;
  --kr-night-2:       #221809;

  /* Tipos */
  --kr-display: "Anton", "Arial Narrow", sans-serif;
  --kr-head:    "Barlow Semi Condensed", system-ui, sans-serif;
  --kr-body:    "Barlow", system-ui, sans-serif;

  /* Radii / sombras */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sh-1: 0 2px 8px rgba(27,19,10,.08);
  --sh-2: 0 14px 34px -12px rgba(27,19,10,.28);
  --sh-3: 0 30px 70px -22px rgba(194,64,12,.45);

  --maxw: 1200px;
  --nav-h: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--kr-body);
  color:var(--kr-ink);
  background:var(--kr-paper);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }

/* Loader de imágenes: shimmer horizontal + fundido al cargar */
@keyframes krShimmer{ 0%{ background-position:-150% 0; } 100%{ background-position:250% 0; } }
.lazy-img{ opacity:0; transition:opacity .45s ease; }
.lazy-img.is-loaded{ opacity:1; }
.lazy-img:not(.is-loaded){
  background-image:linear-gradient(100deg, rgba(27,19,10,.05) 30%, rgba(232,89,26,.13) 50%, rgba(27,19,10,.05) 70%);
  background-size:200% 100%;
  animation:krShimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .lazy-img:not(.is-loaded){ animation:none; } }

/* ============================================================
   MULTIMEDIA en publicaciones (YouTube/IG/FB/video/audio/PDF)
   ============================================================ */
.media-block{ margin:1.3rem 0; }
.media-frame{ position:relative; width:100%; border-radius:var(--r-md); overflow:hidden; background:#000; }
.media-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-frame.media-video{ aspect-ratio:16/9; }
.media-frame.media-social{ height:680px; background:var(--kr-paper); }
.media-frame.media-pdf{ height:600px; background:var(--kr-paper); }
.media-frame.media-link{ position:static; height:auto; background:none; }
.media-cap-text{ color:var(--kr-ink-soft); font-size:.88rem; margin-top:.45rem; }
.media-audio{ display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--kr-line); border-radius:var(--r-md); padding:.8rem 1rem; margin:1.3rem 0; box-shadow:var(--sh-1); }
.media-audio .ma-ico{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--kr-orange); color:#fff; display:flex; align-items:center; justify-content:center; }
.media-audio .ma-ico svg{ width:1.4rem; height:1.4rem; }
.media-audio .ma-body{ flex:1; min-width:0; }
.media-audio .ma-cap{ font-weight:600; margin-bottom:.35rem; }
.media-audio audio{ width:100%; }
/* Fachada en la tarjeta del feed */
.media-facade{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--kr-ink), var(--kr-ink-2)); color:var(--kr-cream); }
.media-facade .lazy-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-facade .media-ico svg{ width:3rem; height:3rem; opacity:.65; }
.media-facade .media-play{ position:relative; z-index:2; width:62px; height:62px; border-radius:50%; background:rgba(232,89,26,.92); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.4); }
.media-facade .media-play svg{ width:1.7rem; height:1.7rem; margin-left:3px; }
@media (max-width:600px){ .media-frame.media-social{ height:560px; } .media-frame.media-pdf{ height:460px; } }
.modal-hero.no-cover{ background:linear-gradient(135deg, var(--kr-ink), var(--kr-orange-deep)); }

/* Política de privacidad (modal + página) */
.legal-wrap{ max-width:760px; }
.legal-title{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.1rem; color:var(--kr-ink); }
.legal-text p{ margin:0 0 1rem; color:var(--kr-ink-2); line-height:1.7; }
.legal-modal{ max-width:680px; position:relative; }
.legal-body{ padding:2rem; max-height:82vh; overflow:auto; }
.footer-bot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-bot-links a{ cursor:pointer; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font-family:inherit; }

/* Tipografía base */
h1,h2,h3,h4{ margin:0; line-height:1; letter-spacing:.01em; }
.display{ font-family:var(--kr-display); text-transform:uppercase; letter-spacing:.005em; }
.kicker{
  font-family:var(--kr-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem; color:var(--kr-orange-deep);
}
.kicker.on-dark{ color:var(--kr-amber); }

/* Utilidades */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--kr-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.95rem;
  padding:.85em 1.5em; border-radius:999px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn-primary{
  background:linear-gradient(135deg,var(--kr-orange-bright),var(--kr-orange-deep));
  color:#fff; box-shadow:var(--sh-3);
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 50px -16px rgba(194,64,12,.6); }
.btn-ghost{
  background:rgba(255,255,255,.08); color:var(--kr-cream);
  border:1.5px solid rgba(251,241,221,.4); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.18); transform:translateY(-3px); }
.btn-dark{ background:var(--kr-ink); color:var(--kr-cream); }
.btn-dark:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.btn-sm{ padding:.6em 1.1em; font-size:.82rem; }
.btn:active{ transform:translateY(-1px) scale(.99); }

/* ===== Pills / badges ===== */
.pill{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--kr-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.72rem;
  padding:.4em .8em; border-radius:999px;
}
.pill-dist{ background:var(--kr-ink); color:var(--kr-amber); }
.pill-cat{ background:rgba(232,89,26,.14); color:var(--kr-orange-deep); }
.pill-green{ background:rgba(95,160,43,.16); color:var(--kr-green-deep); }
.pill-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:120;
  display:flex; align-items:center;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.scrolled{
  background:rgba(251,245,234,.88); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--kr-line), var(--sh-1);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-brand{ display:flex; align-items:center; gap:.6rem; }
.nav-brand img{ height:40px; width:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); transition:transform .3s; }
.nav-brand:hover img{ transform:rotate(-4deg) scale(1.05); }
.nav-brand b{ font-family:var(--kr-display); font-size:1.2rem; letter-spacing:.02em; color:var(--kr-ink); display:none; }
.nav.scrolled .nav-brand b{ display:inline; }

.nav-links{ display:flex; align-items:center; gap:.3rem; }
.nav-link{
  font-family:var(--kr-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; color:var(--kr-ink-2);
  padding:.55em .95em; border-radius:999px; position:relative;
  transition:color .2s, background .2s;
}
.nav.at-top:not(.light-nav) .nav-link{ color:rgba(251,241,221,.92); }
.nav.at-top:not(.light-nav) .nav-brand b{ color:var(--kr-cream); display:inline; }
.nav-link:hover{ background:rgba(232,89,26,.12); color:var(--kr-orange-deep); }
.nav.at-top:not(.light-nav) .nav-link:hover{ background:rgba(255,255,255,.14); color:#fff; }
.nav-link.active{ color:#fff; background:var(--kr-orange); }
.nav-cta{ display:flex; align-items:center; gap:.5rem; }

.nav-burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-burger span{ width:24px; height:2.5px; background:var(--kr-ink); border-radius:2px; transition:.3s; }
.nav.at-top:not(.light-nav) .nav-burger span{ background:var(--kr-cream); }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--kr-paper); padding:1rem clamp(18px,4vw,40px) 1.5rem; gap:.2rem;
    box-shadow:var(--sh-2); transform:translateY(-130%); transition:transform .4s cubic-bezier(.16,1,.3,1);
    border-bottom:3px solid var(--kr-orange);
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-link{ color:var(--kr-ink-2)!important; background:none!important; padding:.9em 1em; font-size:1rem; }
  .nav-link.active{ color:var(--kr-orange-deep)!important; }
  .nav-burger{ display:flex; }
  .nav .nav-cta .btn span.hide-sm{ display:none; }
}

/* ============================================================
   PAGE transitions
   ============================================================ */
.page{ animation:pageIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes pageIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; color:var(--kr-cream); padding:calc(var(--nav-h) + 2.2rem) 0 clamp(40px,8vh,90px); }
/* La imagen cubre de borde a borde (top y bottom extendidos) para que el parallax
   nunca deje un borde claro visible. */
.hero-bg{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; }
.hero-bg img{ width:100%; height:120%; object-fit:cover; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(21,15,8,.94) 4%, rgba(21,15,8,.55) 38%, rgba(21,15,8,.18) 68%, rgba(21,15,8,.45) 100%),
    linear-gradient(105deg, rgba(194,64,12,.42), rgba(21,15,8,0) 55%);
}
.hero-grain{ position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:3px 3px; }
.hero-streak{ position:absolute; z-index:1; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--kr-amber),transparent); opacity:.5; }

.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
  font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; }
.hero-eyebrow .badge-loc{ display:inline-flex; align-items:center; gap:.35em; padding:.35em .7em;
  background:rgba(232,89,26,.9); border-radius:999px; color:#fff; }
.hero-brand{
  font-family:var(--kr-display); text-transform:uppercase; line-height:.86;
  font-size:clamp(2.8rem,9vw,7.2rem); margin:.2rem 0 .7rem;
  color:#FF7A2E;
  background:linear-gradient(95deg,#FFB061,#FF7A2E 45%,#FF5A0F 75%,#FFA24D);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,122,46,.65)) drop-shadow(0 6px 30px rgba(255,90,15,.45));
  animation:brandGlow 3.6s ease-in-out infinite;
}
.hero-brand .plus{ -webkit-text-fill-color:#7FC23E; color:#7FC23E; filter:drop-shadow(0 0 18px rgba(127,194,62,.6)); }
@keyframes brandGlow{
  0%,100%{ filter:drop-shadow(0 0 22px rgba(255,122,46,.5)) drop-shadow(0 6px 30px rgba(255,90,15,.4)); }
  50%{ filter:drop-shadow(0 0 40px rgba(255,140,60,.9)) drop-shadow(0 6px 34px rgba(255,90,15,.55)); }
}
@media (prefers-reduced-motion:reduce){ .hero-brand{ animation:none; } }
.hero h1{ font-family:var(--kr-display); text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.6rem); line-height:.86; letter-spacing:.005em;
  text-shadow:0 8px 40px rgba(0,0,0,.4); color:rgba(251,241,221,.96); }
.hero h1 .accent{ color:var(--kr-orange-bright);
  text-shadow:0 0 38px rgba(255,122,46,.55), 0 8px 40px rgba(0,0,0,.4); }
.hero h1 .plus{ color:var(--kr-green-bright); -webkit-text-stroke:0; }
.hero-sub{ max-width:38ch; margin:1.3rem 0 0; font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:rgba(251,241,221,.9); font-weight:400; }
.hero-train{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; margin:1.7rem 0 2rem; }
.train-chip{ display:inline-flex; align-items:center; gap:.55em;
  background:rgba(251,241,221,.1); border:1px solid rgba(251,241,221,.22);
  backdrop-filter:blur(8px); padding:.7em 1.1em; border-radius:14px;
  font-family:var(--kr-head); font-weight:500; font-size:.98rem; }
.train-chip svg{ width:1.25em; height:1.25em; color:var(--kr-amber); flex:none; }
.train-chip b{ font-weight:700; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.hero-scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(251,241,221,.75);
  font-family:var(--kr-head); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.hero-scroll .mouse{ width:22px; height:34px; border:2px solid rgba(251,241,221,.5); border-radius:14px; position:relative; }
.hero-scroll .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px;
  background:var(--kr-amber); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.6s infinite; }
@keyframes scrollDot{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* Tortuga corriendo (motif) */
.turtle-runner{ position:absolute; z-index:2; pointer-events:none; will-change:transform; }
@keyframes turtleBob{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-7px) rotate(2deg) } }
@keyframes dash{ to{ stroke-dashoffset:-1000; } }

/* ============================================================
   SECTION primitives
   ============================================================ */
.section{ padding:clamp(56px,9vh,110px) 0; position:relative; }
.section.dark{ background:
    radial-gradient(120% 90% at 80% -10%, rgba(194,64,12,.5), transparent 60%),
    linear-gradient(180deg,var(--kr-night),var(--kr-night-2)); color:var(--kr-cream); }
.section.cream{ background:var(--kr-paper); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.sec-title{ font-family:var(--kr-display); text-transform:uppercase;
  font-size:clamp(2.1rem,5vw,3.8rem); line-height:.92; }
.sec-title .o{ color:var(--kr-orange); }
.dark .sec-title .o{ color:var(--kr-orange-bright); }
.sec-sub{ max-width:48ch; color:var(--kr-ink-soft); margin-top:.7rem; font-size:1.05rem; }
.dark .sec-sub{ color:rgba(251,241,221,.72); }

/* Filtros */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter{ font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; padding:.55em 1.05em; border-radius:999px; background:#fff;
  border:1.5px solid var(--kr-line); color:var(--kr-ink-2); transition:.2s; }
.filter:hover{ border-color:var(--kr-orange); color:var(--kr-orange-deep); }
.filter.active{ background:var(--kr-ink); color:var(--kr-cream); border-color:var(--kr-ink); }

/* Buscador del feed */
.feed-controls{ margin-bottom:2rem; }
.feed-controls .filters{ margin-bottom:0; }
.feed-search{ position:relative; display:flex; align-items:center; margin-bottom:1rem; max-width:480px; }
.feed-search > svg{ position:absolute; left:1rem; width:1.1rem; height:1.1rem; color:var(--kr-ink-soft); pointer-events:none; }
.feed-search input{ width:100%; font-family:var(--kr-body); font-size:1rem; padding:.7em 2.6em .7em 2.8em;
  border-radius:999px; border:1.5px solid var(--kr-line); background:#fff; color:var(--kr-ink); transition:.2s; }
.feed-search input:focus{ outline:none; border-color:var(--kr-orange); box-shadow:0 0 0 4px rgba(232,89,26,.13); }
.feed-search input::-webkit-search-cancel-button{ display:none; }
.fs-clear{ position:absolute; right:.5rem; display:flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%; color:var(--kr-ink-soft); }
.fs-clear:hover{ background:var(--kr-line); color:var(--kr-ink); }
.fs-clear svg{ width:1rem; height:1rem; }

/* ============================================================
   CARDS (feed)
   ============================================================ */
.feed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.6rem; }
.feed-grid.has-feature{ grid-template-columns:repeat(12,1fr); }
.card{
  position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); cursor:pointer; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  border:1px solid rgba(27,19,10,.05);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--sh-2); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--kr-ink); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,15,8,.6), transparent 55%); opacity:.9; }
.card-badges{ position:absolute; z-index:2; top:.85rem; left:.85rem; right:.85rem;
  display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.card-date{ position:absolute; z-index:2; bottom:.85rem; left:.95rem; color:var(--kr-cream);
  font-family:var(--kr-head); font-weight:600; font-size:.85rem; letter-spacing:.05em;
  display:flex; align-items:center; gap:.4em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.card-date svg{ width:1em; height:1em; color:var(--kr-amber); }
.card-photos{ position:absolute; z-index:2; bottom:.85rem; right:.95rem; color:var(--kr-cream);
  display:flex; align-items:center; gap:.3em; font-family:var(--kr-head); font-weight:600; font-size:.8rem;
  background:rgba(21,15,8,.5); padding:.25em .6em; border-radius:999px; backdrop-filter:blur(4px); }
.card-photos svg{ width:.95em; height:.95em; }
.card-body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card-cat{ display:flex; gap:.4rem; flex-wrap:wrap; }
.card h3{ font-family:var(--kr-display); text-transform:uppercase; font-size:1.5rem; line-height:.98; color:var(--kr-ink); }
.card-place{ display:flex; align-items:center; gap:.4em; color:var(--kr-ink-soft); font-size:.92rem; font-weight:500; }
.card-place svg{ width:1.05em; height:1.05em; color:var(--kr-orange); flex:none; }
.card-excerpt{ color:var(--kr-ink-soft); font-size:.95rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-foot{ margin-top:auto; padding-top:.6rem; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--kr-line); }
.card-more{ font-family:var(--kr-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; color:var(--kr-orange-deep); display:flex; align-items:center; gap:.35em; transition:gap .2s; }
.card:hover .card-more{ gap:.65em; }
.card-more svg{ width:1.1em; height:1.1em; }

/* Tarjeta destacada (ancho completo, arriba del grid) */
.card.feature{ flex-direction:row; }
.card.feature .card-media{ aspect-ratio:auto; flex:1.15; min-height:380px; }
.card.feature .card-body{ flex:1; justify-content:center; padding:clamp(1.4rem,3vw,2.4rem); }
.card.feature h3{ font-size:clamp(1.8rem,3vw,2.8rem); }
.card.feature .card-excerpt{ -webkit-line-clamp:4; font-size:1.05rem; }
@media (max-width:900px){
  .card.feature{ flex-direction:column; }
  .card.feature .card-media{ min-height:240px; }
}

.empty-feed{ text-align:center; padding:4rem 1rem; color:var(--kr-ink-soft); }
.empty-feed svg{ width:64px; height:64px; opacity:.4; margin:0 auto 1rem; }

/* ============================================================
   MODAL (post detail)
   ============================================================ */
.modal-scrim{ position:fixed; inset:0; z-index:300; background:rgba(21,15,8,.7);
  backdrop-filter:blur(8px); display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(10px,4vh,48px) 16px; overflow-y:auto; animation:scrimIn .3s ease both; }
@keyframes scrimIn{ from{opacity:0} to{opacity:1} }
.modal{ width:min(880px,100%); background:var(--kr-paper); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7); animation:modalIn .45s cubic-bezier(.16,1,.3,1) both; margin:auto 0; }
@keyframes modalIn{ from{opacity:0; transform:translateY(40px) scale(.97)} to{opacity:1; transform:none} }
.modal-hero{ position:relative; aspect-ratio:16/9; background:var(--kr-ink); overflow:hidden; }
.modal-hero img{ width:100%; height:100%; object-fit:cover; }
.modal-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(21,15,8,.85),transparent 60%); }
.modal-hero-info{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.8rem clamp(1.2rem,4vw,2.4rem); color:var(--kr-cream); }
.modal-hero-info .card-cat{ margin-bottom:.7rem; }
.modal-hero-info h2{ font-family:var(--kr-display); text-transform:uppercase; font-size:clamp(1.8rem,4.5vw,3rem); line-height:.95; }
.modal-close{ position:absolute; z-index:3; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%;
  background:rgba(21,15,8,.55); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:.2s; }
.modal-close:hover{ background:var(--kr-orange); transform:rotate(90deg); }
.modal-close svg{ width:20px; height:20px; }
.modal-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; padding:1.3rem clamp(1.2rem,4vw,2.4rem);
  border-bottom:1px solid var(--kr-line); background:#fff; }
.meta-item{ display:flex; align-items:center; gap:.5em; font-family:var(--kr-head); font-weight:500; font-size:.95rem; color:var(--kr-ink-2); }
.meta-item svg{ width:1.2em; height:1.2em; color:var(--kr-orange); }
.meta-item b{ font-weight:700; }
.modal-body{ padding:1.6rem clamp(1.2rem,4vw,2.4rem) 2rem; }
.modal-text{ font-size:1.06rem; color:var(--kr-ink-2); line-height:1.72; white-space:pre-wrap; }
.modal-text p{ margin:0 0 1rem; }
.modal-section-title{ font-family:var(--kr-head); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.85rem; color:var(--kr-orange-deep); margin:1.8rem 0 .9rem; display:flex; align-items:center; gap:.5em; }
.modal-section-title svg{ width:1.2em; height:1.2em; }

/* Resultados */
.results-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); }
.results-table th{ background:var(--kr-ink); color:var(--kr-amber); font-family:var(--kr-head); text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; text-align:left; padding:.7em 1em; }
.results-table td{ padding:.7em 1em; border-top:1px solid var(--kr-line); font-size:.95rem; }
.results-table tr:hover td{ background:rgba(232,89,26,.05); }
.results-table .pos{ font-family:var(--kr-display); color:var(--kr-orange); font-size:1.1rem; width:3rem; }

/* Galería dentro de modal */
.modal-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.modal-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); cursor:pointer; transition:.25s; }
.modal-gallery img:hover{ transform:scale(1.04); box-shadow:var(--sh-1); }
.modal-foot{ display:flex; flex-wrap:wrap; gap:.7rem; padding-top:1.6rem; margin-top:.5rem; border-top:1px solid var(--kr-line); }
.contact-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.contact-chip{ display:inline-flex; align-items:center; gap:.45em; background:#fff; border:1.5px solid var(--kr-line);
  padding:.55em 1em; border-radius:999px; font-weight:600; font-size:.9rem; transition:.2s; }
.contact-chip:hover{ border-color:var(--kr-green); color:var(--kr-green-deep); transform:translateY(-2px); }
.contact-chip svg{ width:1.1em; height:1.1em; color:var(--kr-green); }

/* ===== Compartir (OG) ===== */
.share-scrim{ position:fixed; inset:0; z-index:360; background:rgba(21,15,8,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:scrimIn .25s ease both; }
.share-pop{ width:min(440px,100%); background:#fff; border-radius:var(--r-xl); padding:1.4rem; box-shadow:0 30px 80px -16px rgba(0,0,0,.5);
  animation:modalIn .4s cubic-bezier(.16,1,.3,1) both; }
.share-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; }
.share-head b{ font-family:var(--kr-display); text-transform:uppercase; font-size:1.25rem; }
.share-note{ font-size:.88rem; color:var(--kr-ink-soft); margin:.2rem 0 1rem; }
.og-preview{ border:1px solid var(--kr-line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); }
.og-preview img{ width:100%; aspect-ratio:1.91/1; object-fit:cover; }
.og-body{ padding:.7rem .9rem; display:flex; flex-direction:column; gap:.2rem; }
.og-domain{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--kr-ink-soft); }
.og-title{ font-family:var(--kr-head); font-weight:700; font-size:1rem; line-height:1.2; color:var(--kr-ink); }
.og-desc{ font-size:.85rem; color:var(--kr-ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.share-url{ display:flex; gap:.5rem; margin-top:1rem; }
.share-url input{ flex:1; min-width:0; padding:.7em .9em; border:1.5px solid var(--kr-line); border-radius:var(--r-md);
  background:var(--kr-paper); font-size:.85rem; color:var(--kr-ink-2); }
.share-url input:focus{ outline:none; border-color:var(--kr-orange); }

/* ============================================================
   GALERÍA tab
   ============================================================ */
.gal-groups{ display:flex; flex-direction:column; gap:3rem; }
.gal-group-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.gal-group-head h3{ font-family:var(--kr-display); text-transform:uppercase; font-size:clamp(1.4rem,3vw,2.1rem); color:var(--kr-ink); }
.gal-group-head .line{ flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--kr-orange) 0 14px,transparent 14px 26px); opacity:.5; }
.gal-group-head .count{ font-family:var(--kr-head); font-weight:600; color:var(--kr-ink-soft); font-size:.9rem; }
.gal-grid{ columns:4 220px; column-gap:.9rem; }
.gal-item{ break-inside:avoid; margin-bottom:.9rem; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  position:relative; box-shadow:var(--sh-1); transition:.3s; }
.gal-item img{ width:100%; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.gal-item:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
.gal-item:hover img{ transform:scale(1.06); }
.gal-item .gal-tag{ position:absolute; inset:auto 0 0 0; padding:1.4rem .8rem .6rem; color:#fff;
  background:linear-gradient(to top,rgba(21,15,8,.8),transparent); font-family:var(--kr-head); font-weight:600;
  font-size:.82rem; opacity:0; transform:translateY(8px); transition:.3s; }
.gal-item:hover .gal-tag{ opacity:1; transform:none; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(13,9,4,.94); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; padding:clamp(.8rem,3vh,2rem); box-sizing:border-box;
  animation:scrimIn .3s ease both; }
.lightbox img{ display:block; max-width:92vw; max-height:min(82vh, calc(100vh - 7rem)); width:auto; height:auto;
  min-height:0; object-fit:contain; border-radius:var(--r-sm); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox-cap{ color:var(--kr-cream); font-family:var(--kr-head); margin-top:1rem; text-align:center; }
.lightbox-cap b{ color:var(--kr-amber); }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lb-btn:hover{ background:var(--kr-orange); }
.lb-btn svg{ width:26px; height:26px; }
.lb-prev{ left:2vw; } .lb-next{ right:2vw; }
.lb-close{ position:absolute; top:2vh; right:2vw; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lb-close:hover{ background:var(--kr-orange); transform:rotate(90deg); }

/* ============================================================
   GRUPO tab
   ============================================================ */
.grupo-hero{ position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:420px;
  display:flex; align-items:flex-end; color:var(--kr-cream); margin-bottom:3rem; }
.grupo-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.grupo-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(21,15,8,.92),rgba(21,15,8,.2) 70%),linear-gradient(100deg,rgba(194,64,12,.4),transparent 60%); }
.grupo-hero-inner{ position:relative; z-index:2; padding:clamp(1.5rem,4vw,3rem); max-width:60ch; }
.grupo-hero h2{ font-family:var(--kr-display); text-transform:uppercase; font-size:clamp(2.2rem,6vw,4.5rem); line-height:.9; }
.grupo-hero p{ margin-top:1rem; font-size:1.15rem; color:rgba(251,241,221,.9); }

.stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:0 0 3rem; }
.stat{ background:#fff; border-radius:var(--r-lg); padding:1.6rem 1.4rem; box-shadow:var(--sh-1); text-align:center;
  border-bottom:4px solid var(--kr-orange); }
.stat .num{ font-family:var(--kr-display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--kr-orange-deep); line-height:1; }
.stat .lbl{ font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--kr-ink-soft); margin-top:.4rem; }

.grupo-cols{ display:grid; grid-template-columns:1.3fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width:820px){ .grupo-cols{ grid-template-columns:1fr; } }
.prose p{ font-size:1.08rem; color:var(--kr-ink-2); line-height:1.75; margin:0 0 1.1rem; }
.prose h3{ font-family:var(--kr-display); text-transform:uppercase; font-size:1.6rem; margin:2rem 0 .8rem; color:var(--kr-ink); }
.values{ display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; }
.value{ display:flex; gap:.9rem; align-items:flex-start; }
.value .vico{ flex:none; width:42px; height:42px; border-radius:12px; background:rgba(232,89,26,.12);
  display:flex; align-items:center; justify-content:center; color:var(--kr-orange-deep); }
.value .vico svg{ width:22px; height:22px; }
.value b{ font-family:var(--kr-head); font-weight:700; }
.value p{ margin:.1rem 0 0; font-size:.97rem; color:var(--kr-ink-soft); }

.schedule-card{ background:var(--kr-ink); color:var(--kr-cream); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
.schedule-card .sc-head{ padding:1.4rem 1.6rem; background:linear-gradient(135deg,var(--kr-orange),var(--kr-orange-deep)); }
.schedule-card .sc-head h3{ font-family:var(--kr-display); text-transform:uppercase; font-size:1.5rem; }
.schedule-card .sc-head p{ margin:.2rem 0 0; font-size:.9rem; opacity:.9; }
.sc-list{ padding:.6rem 0; }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.6rem; border-bottom:1px solid rgba(251,241,221,.08); }
.sc-row:last-child{ border-bottom:none; }
.sc-row .day{ font-family:var(--kr-head); font-weight:600; }
.sc-row .time{ font-family:var(--kr-display); color:var(--kr-amber); font-size:1.05rem; }
.sc-row .act{ font-size:.85rem; color:rgba(251,241,221,.6); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ display:flex; flex-direction:column; gap:1rem; }
.ci-row{ display:flex; gap:1rem; align-items:center; background:rgba(251,241,221,.06);
  border:1px solid rgba(251,241,221,.12); border-radius:var(--r-md); padding:1rem 1.2rem; transition:.2s; }
.ci-row:hover{ border-color:var(--kr-amber); transform:translateX(4px); }
.ci-row .cico{ flex:none; width:46px; height:46px; border-radius:12px; background:rgba(232,89,26,.2);
  display:flex; align-items:center; justify-content:center; color:var(--kr-amber); }
.ci-row .cico svg{ width:22px; height:22px; }
.ci-row .lbl{ font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:rgba(251,241,221,.6); }
.ci-row .val{ font-size:1.05rem; font-weight:600; color:var(--kr-cream); }
.socials{ display:flex; gap:.7rem; margin-top:.4rem; }
.social-btn{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(251,241,221,.08); border:1px solid rgba(251,241,221,.16); color:var(--kr-cream); transition:.25s; }
.social-btn:hover{ background:var(--kr-orange); transform:translateY(-3px); }
.social-btn svg{ width:24px; height:24px; }

.form-card{ background:var(--kr-paper); color:var(--kr-ink); border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--sh-2); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.76rem; color:var(--kr-ink-soft); margin-bottom:.4rem; }
.field input,.field textarea,.field select{ width:100%; padding:.85em 1em; border:1.5px solid var(--kr-line);
  border-radius:var(--r-md); background:#fff; font-size:1rem; color:var(--kr-ink); transition:.2s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--kr-orange); box-shadow:0 0 0 4px rgba(232,89,26,.13); }
.field textarea{ resize:vertical; min-height:120px; }
.field.error input,.field.error textarea{ border-color:#d23b1f; box-shadow:0 0 0 4px rgba(210,59,31,.12); }
.field .err{ color:#d23b1f; font-size:.82rem; margin-top:.35rem; font-weight:600; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-success{ text-align:center; padding:2.5rem 1rem; }
.form-success .check{ width:72px; height:72px; border-radius:50%; background:var(--kr-green); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.form-success .check svg{ width:38px; height:38px; }
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--kr-night); color:rgba(251,241,221,.7); padding:3rem 0 2rem; }
.footer-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:center; padding-bottom:2rem; border-bottom:1px solid rgba(251,241,221,.1); }
.footer-brand{ display:flex; align-items:center; gap:.8rem; }
.footer-brand img{ height:54px; }
.footer-brand b{ font-family:var(--kr-display); font-size:1.5rem; color:var(--kr-cream); }
.footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--kr-head); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.footer-links a:hover{ color:var(--kr-amber); }
.footer-bot{ padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; font-size:.85rem; }
.footer-bot a{ color:var(--kr-amber); }

/* ============================================================
   REVEAL animations
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform:scale(.94) translateY(20px); }
.reveal-scale.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-scale{ opacity:1!important; transform:none!important; }
  *{ animation-duration:.001ms!important; }
}

/* float loader turtle */
.kr-loader{ position:fixed; inset:0; z-index:999; background:var(--kr-night); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; transition:opacity .6s, visibility .6s; }
.kr-loader.hide{ opacity:0; visibility:hidden; }
.kr-loader img{ height:90px; animation:turtleBob 1s infinite; filter:drop-shadow(0 8px 20px rgba(255,122,46,.5)); }
.kr-loader .track{ width:200px; height:4px; border-radius:4px; background:rgba(251,241,221,.15); overflow:hidden; }
.kr-loader .track span{ display:block; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg,var(--kr-orange-bright),var(--kr-amber)); animation:loadBar 1.1s infinite; }
@keyframes loadBar{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }

/* ============================================================
   LOGO NCS dentro de la publicación + tabla con scroll
   ============================================================ */
.post-logo{ display:flex; align-items:center; gap:1rem; background:var(--kr-night); color:var(--kr-cream);
  border-radius:var(--r-md); padding:.8rem 1rem; margin-bottom:1.4rem; box-shadow:var(--sh-1); }
.post-logo img{ width:76px; height:76px; border-radius:12px; object-fit:cover; flex:none; }
.post-logo .pl-k{ display:block; font-family:var(--kr-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.7rem; color:var(--kr-amber); }
.post-logo b{ font-family:var(--kr-head); font-size:1.08rem; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); }
.table-wrap .results-table{ min-width:380px; }

/* ============================================================
   MÓVIL · optimización fina (≤600px)
   ============================================================ */
@media (max-width:600px){
  :root{ --nav-h:62px; }
  .wrap{ padding:0 16px; }
  .section{ padding:44px 0; }

  /* Hero */
  .hero{ min-height:92svh; align-items:center; padding-top:calc(var(--nav-h) + 12px); }
  .hero-brand{ font-size:clamp(2.9rem,15vw,4.4rem); }
  .hero h1{ font-size:clamp(1.7rem,7.5vw,2.6rem); }
  .hero-sub{ font-size:1.02rem; }
  .hero-train{ gap:.5rem; margin:1.3rem 0 1.5rem; }
  .train-chip{ padding:.6em .9em; font-size:.9rem; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .hero-turtle{ display:none; }
  .hero-scroll{ display:none; }

  /* Tipografía secciones */
  .sec-head{ margin-bottom:1.6rem; }
  .filters{ gap:.4rem; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
  .filter{ flex:none; }

  /* Tarjeta destacada → columna */
  .card.feature{ flex-direction:column; }
  .card.feature .card-media{ min-height:0; aspect-ratio:4/3; }
  .card.feature h3{ font-size:1.7rem; }
  .card.feature .card-excerpt{ font-size:.97rem; -webkit-line-clamp:3; }

  /* Modal a pantalla casi completa */
  .modal-scrim{ padding:0; }
  .modal{ border-radius:18px 18px 0 0; min-height:100%; margin:0; }
  .modal-hero{ aspect-ratio:4/3; }
  .modal-hero-info h2{ font-size:1.6rem; }
  .modal-meta{ gap:.5rem .9rem; }
  .modal-meta .btn{ width:100%; margin-left:0; justify-content:center; order:3; }
  .post-logo img{ width:60px; height:60px; }
  .modal-text{ font-size:1rem; }
  .modal-gallery{ grid-template-columns:repeat(3,1fr); }
  .contact-chip{ width:100%; }

  /* Galería */
  .gal-grid{ columns:2 140px; column-gap:.6rem; }
  .gal-item{ margin-bottom:.6rem; }
  .gal-group-head{ flex-wrap:wrap; gap:.5rem; }
  .gal-group-head h3{ font-size:1.5rem; width:100%; }
  .gal-group-head .line{ display:none; }

  /* Grupo */
  .grupo-hero{ min-height:320px; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }

  /* Compartir */
  .share-scrim{ align-items:flex-end; padding:0; }
  .share-pop{ border-radius:18px 18px 0 0; }

  /* Lightbox */
  .lb-btn{ width:44px; height:44px; }
  .lightbox img{ max-height:72vh; }

  /* ADMIN móvil */
  .admin-top .a-brand{ font-size:1rem; }
  .admin-wrap{ padding:1.2rem 14px 3rem; }
  .admin-tabs{ width:100%; overflow-x:auto; flex-wrap:nowrap; border-radius:16px; }
  .admin-tab{ flex:none; }
  .editor-grid{ grid-template-columns:1fr; }
  .ed-side{ position:static; }
  .post-row{ flex-wrap:wrap; }
  .post-row .thumb{ width:64px; height:50px; }
  .post-row .pr-main{ flex:1 1 60%; }
  .dash-head{ gap:.7rem; }
  .dash-head .btn{ width:100%; justify-content:center; }
  .dyn-row{ flex-wrap:wrap; }
  .dyn-row input{ flex:1 1 40%; }
  .code-block{ font-size:.74rem; }

  /* Footer */
  .footer-top{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .footer-bot{ flex-direction:column; gap:.5rem; }
}

/* Pantallas muy chicas */
@media (max-width:360px){
  .hero-brand{ font-size:2.6rem; }
  .modal-gallery{ grid-template-columns:repeat(2,1fr); }
}

/* Aviso no intrusivo de estado offline / sin conexión con el backend */
.offline-banner{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--kr-amber); color:var(--kr-ink);
  font-size:.85rem; font-weight:600; padding:.5em 1em; text-align:center;
  box-shadow:var(--sh-1);
}
.offline-banner svg{ width:1.1em; height:1.1em; flex:none; }

/* Mapas (Leaflet) */
.kr-map-wrap{ position:relative; }
/* z-index:0 crea un contexto de apilamiento para que los controles de Leaflet
   no floten por encima de la cabecera/modal. */
.kr-map{ width:100%; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--kr-line);
  background:#dfe7ea; position:relative; z-index:0; }
.kr-map .leaflet-container{ font-family:var(--kr-body); }
.kr-map-link{ display:inline-flex; align-items:center; gap:.4em; margin-top:.6rem;
  font-size:.85rem; font-weight:600; color:var(--kr-orange-deep); }
.kr-map-link svg{ width:1.1em; height:1.1em; }

/* ---- Contador de visitas (Hero) ---- */
.hero-visits{ margin-top:1.6rem; }
.hero-visits-pill{ display:inline-flex; align-items:center; gap:.55em;
  background:rgba(251,241,221,.1); border:1px solid rgba(251,241,221,.22);
  backdrop-filter:blur(8px); padding:.6em 1.05em; border-radius:999px;
  color:rgba(251,241,221,.92); font-family:var(--kr-head); font-weight:500; font-size:.96rem; }
.hero-visits-pill b{ font-family:var(--kr-display); font-weight:400; letter-spacing:.02em;
  font-size:1.25em; color:var(--kr-amber); font-variant-numeric:tabular-nums; }
.hero-visits-pill .hv-eye{ font-size:1.15em; line-height:1; }
@media (max-width:720px){ .hero-visits{ margin-top:1.1rem; } .hero-visits-pill{ font-size:.88rem; } }

/* ---- Panel admin · Contador de visitas ---- */
.visits-total{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; margin-bottom:1.2rem; }
.visits-num{ font-family:var(--kr-display); font-weight:400; font-size:clamp(2.4rem,6vw,3.6rem);
  line-height:1; color:var(--kr-orange-deep); font-variant-numeric:tabular-nums; }
.visits-lbl{ font-family:var(--kr-head); text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; color:var(--kr-ink-soft); }
.visits-toggle{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 0; border-top:1px solid var(--kr-line); border-bottom:1px solid var(--kr-line); }
.visits-base{ display:flex; align-items:flex-end; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.visits-base .field{ flex:1; min-width:200px; margin:0; }

/* Interruptor accesible (switch) */
.kr-switch{ flex:none; width:50px; height:28px; border-radius:999px; border:1px solid var(--kr-line);
  background:var(--kr-line); position:relative; cursor:pointer; transition:background .2s ease; padding:0; }
.kr-switch.on{ background:var(--kr-green); border-color:var(--kr-green-deep); }
.kr-switch:disabled{ opacity:.6; cursor:default; }
.kr-switch:focus-visible{ outline:2px solid var(--kr-orange); outline-offset:2px; }
.kr-switch-knob{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:transform .2s ease; }
.kr-switch.on .kr-switch-knob{ transform:translateX(22px); }

/* ---- Hero · altura ajustable ---- */
.hero.h-medium{ min-height:80svh; }
.hero.h-compact{ min-height:0; padding-top:calc(var(--nav-h) + clamp(28px,6vh,64px)); }

/* ---- Auspiciantes / publicidad ---- */
.sponsor-card{ position:relative; display:flex; align-items:center; gap:.9rem;
  background:#fff; border:1px solid var(--kr-line); border-radius:var(--r-md);
  padding:.85rem 1rem; box-shadow:var(--sh-1); }
.sponsor-card .sp-logo{ width:54px; height:54px; object-fit:contain; border-radius:10px; flex:none; background:var(--kr-paper); }
.sponsor-card .sp-text{ flex:1; min-width:0; font-family:var(--kr-head); font-weight:500; color:var(--kr-ink-2); line-height:1.3; }
.sponsor-card .sp-cta{ flex:none; }
.sponsor-card .sp-tag{ position:absolute; top:6px; right:12px; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kr-ink-soft); opacity:.65; }

/* Banner del Hero (vidrio sobre la imagen, ocupa el espacio superior) */
.ss-hero{ position:absolute; left:0; right:0; top:calc(var(--nav-h) + 14px); z-index:3;
  display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; padding:0 clamp(16px,4vw,40px); pointer-events:none; }
.sp-hero{ pointer-events:auto; max-width:560px; width:100%;
  background:rgba(21,15,8,.42); border-color:rgba(251,241,221,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--kr-cream); }
.sp-hero .sp-text{ color:var(--kr-cream); }
.sp-hero .sp-tag{ color:rgba(251,241,221,.7); }

/* Franja en la página de inicio */
.ss-home{ width:min(1100px,92%); margin:2.4rem auto 0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
/* Dentro del feed (arriba de las tarjetas) */
.ss-feed{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-bottom:1.6rem; }
/* Dentro de una publicación */
.ss-post{ display:grid; gap:.8rem; margin:1.4rem 0; }

@media (max-width:560px){
  .sponsor-card{ flex-wrap:wrap; }
  .sponsor-card .sp-text{ flex-basis:100%; order:3; }
  .ss-hero{ display:none; } /* en móvil el espacio superior es chico: no tapar el título */
}

/* ---- Promociones ---- */
.promo-slot{ display:grid; gap:1rem; }
.ps-home{ width:min(1100px,92%); margin:2.4rem auto 0; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.ps-feed{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-bottom:1.6rem; }
.ps-post{ margin:1.4rem 0; }
/* Hero: en el flujo del contenido (arriba del título) para que NO se solape. */
.ps-hero{ max-width:480px; margin:0 0 1.6rem; }
.ps-hero .promo-card{ width:100%; }

.promo-card{ position:relative; background:#fff; border:1px solid var(--kr-line); border-left:4px solid var(--kr-orange);
  border-radius:var(--r-md); padding:1rem 1.1rem; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:.65rem; }
.promo-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.promo-badge{ display:inline-block; background:linear-gradient(95deg,var(--kr-orange-bright),var(--kr-orange-deep));
  color:#fff; font-family:var(--kr-head); font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  font-size:.78rem; padding:.25em .6em; border-radius:8px; }
.promo-title{ font-family:var(--kr-head); font-weight:700; font-size:1.12rem; margin:0; color:var(--kr-ink); }
.promo-text{ margin:0; color:var(--kr-ink-2); line-height:1.45; }
.promo-perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.promo-perks li{ display:flex; align-items:flex-start; gap:.5em; color:var(--kr-ink-2); font-size:.95rem; }
.promo-perks svg{ width:1.05em; height:1.05em; color:var(--kr-green); flex:none; margin-top:.15em; }
.promo-cta{ align-self:flex-start; }

.promo-countdown{ display:flex; gap:.5rem; }
.cd-cell{ display:flex; flex-direction:column; align-items:center; min-width:48px;
  background:var(--kr-paper); border:1px solid var(--kr-line); border-radius:10px; padding:.35rem .2rem; }
.cd-cell b{ font-family:var(--kr-display); font-weight:400; font-size:1.3rem; line-height:1;
  color:var(--kr-orange-deep); font-variant-numeric:tabular-nums; }
.cd-cell span{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--kr-ink-soft); margin-top:.15rem; }

/* Variante Hero (vidrio sobre la imagen) */
.pr-hero{ background:rgba(21,15,8,.5); border-color:rgba(251,241,221,.22); border-left-color:var(--kr-orange);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pr-hero .promo-title{ color:var(--kr-cream); }
.pr-hero .promo-text, .pr-hero .promo-perks li{ color:rgba(251,241,221,.92); }
.pr-hero .cd-cell{ background:rgba(255,255,255,.1); border-color:rgba(251,241,221,.25); }
.pr-hero .cd-cell b{ color:var(--kr-amber); }
.pr-hero .cd-cell span{ color:rgba(251,241,221,.75); }

/* Modal de bienvenida */
.promo-modal{ max-width:560px; width:calc(100% - 2.4rem); padding:1.6rem 1.5rem; max-height:88vh; overflow:auto; }
.promo-modal-title{ font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 .3rem; color:var(--kr-orange-deep); line-height:1; }
.promo-modal-intro{ color:var(--kr-ink-soft); margin:0 0 1rem; }
.pr-modal{ border-left-width:5px; }
.promo-others{ margin-top:1.1rem; }
.promo-others-h{ font-family:var(--kr-head); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--kr-ink-soft); margin-bottom:.5rem; }
.pr-modallist{ box-shadow:none; padding:.7rem .8rem; margin-bottom:.6rem; }
.pr-modallist .promo-cta{ padding:.45em .85em; font-size:.85rem; }

/* Botón de cerrar (banner del Hero) */
.promo-card .promo-close{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  background:rgba(27,19,10,.45); color:#fff; border:1px solid rgba(255,255,255,.25); }
.promo-card .promo-close:hover{ background:rgba(27,19,10,.7); }
.promo-card .promo-close svg{ width:1.05em; height:1.05em; }
.pr-hero .promo-head, .pr-hero .promo-text{ padding-right:1.6rem; } /* aire para la X */

/* Reborde naranja brillante + parpadeo tenue (banners destacados) */
@keyframes promoGlow{
  0%,100%{ box-shadow:0 0 0 rgba(255,122,46,0), var(--sh-2); border-color:var(--kr-orange); }
  50%{ box-shadow:0 0 20px 2px rgba(255,138,60,.6), var(--sh-2); border-color:var(--kr-orange-bright); }
}
.pr-hero, .pr-modal{ border:2px solid var(--kr-orange-bright); animation:promoGlow 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .pr-hero, .pr-modal{ animation:none; } }

/* Modal: contenido centrado y elegante */
.promo-modal-title, .promo-modal-intro{ text-align:center; }
.promo-modal-title{ padding:0 2.2rem; }
.pr-modal{ text-align:center; align-items:center; border-left-width:2px; }
.pr-modal .promo-head{ justify-content:center; }
.pr-modal .promo-countdown{ justify-content:center; }
.pr-modal .promo-cta{ align-self:center; }
.pr-modal .promo-perks{ align-self:center; text-align:left; }

@media (max-width:560px){
  .cd-cell{ min-width:42px; }
  .cd-cell b{ font-size:1.1rem; }
}

/* ============================================================
   Instagram · sección de posts en el home + visor propio
   ============================================================ */
.ig-sec{ background:var(--kr-paper); }
.ig-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ig-head .kicker svg{ width:1.05em; height:1.05em; vertical-align:-.18em; margin-right:.25em; }
.ig-follow{ flex:none; }
.ig-follow svg{ width:1.1em; height:1.1em; }

.ig-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin-top:1.4rem; }
@media (min-width:680px){ .ig-grid{ gap:1rem; } }

.ig-tile{ position:relative; display:block; width:100%; aspect-ratio:1/1; padding:0; border:0; cursor:pointer;
  border-radius:var(--r-md); overflow:hidden; background:var(--kr-cream); box-shadow:var(--sh-1);
  transition:transform .2s, box-shadow .2s; }
.ig-tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.ig-tile:focus-visible{ outline:3px solid var(--kr-orange); outline-offset:2px; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.ig-tile-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--kr-orange-bright),var(--kr-orange-deep)); color:#fff; }
.ig-tile-ph svg{ width:34%; height:34%; opacity:.85; }
.ig-tile-badge{ position:absolute; top:.5rem; right:.5rem; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(13,9,4,.55);
  backdrop-filter:blur(2px); }
.ig-tile-badge svg{ width:1em; height:1em; }
.ig-tile-veil{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(13,9,4,.34); opacity:0; transition:opacity .2s; }
.ig-tile-veil svg{ width:30%; height:30%; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.ig-tile:hover .ig-tile-veil,.ig-tile:focus-visible .ig-tile-veil{ opacity:1; }

/* Visor (lightbox propio, con soporte de video) */
.ig-lb{ position:fixed; inset:0; z-index:1000; background:rgba(13,9,4,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; }
.ig-lb-frame{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.7rem; max-width:96vw; }
.ig-lb-media{ display:block; max-width:92vw; max-height:min(72vh, calc(100vh - 11rem)); width:auto; height:auto;
  border-radius:var(--r-sm); box-shadow:0 24px 60px -20px rgba(0,0,0,.7); background:#000; }
.ig-lb-dots{ display:flex; gap:.4rem; }
.ig-dot{ width:7px; height:7px; border-radius:50%; background:rgba(251,241,221,.4); transition:background .2s, transform .2s; }
.ig-dot.on{ background:var(--kr-amber); transform:scale(1.25); }
.ig-lb-cap{ margin-top:1rem; max-width:min(640px,92vw); text-align:center; color:var(--kr-cream); }
.ig-lb-date{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--kr-head);
  color:var(--kr-amber); font-size:.85rem; margin-bottom:.4rem; }
.ig-lb-date svg{ width:1.05em; height:1.05em; }
.ig-lb-text{ font-size:.95rem; line-height:1.5; margin:0 0 .8rem; max-height:22vh; overflow:auto;
  white-space:pre-wrap; word-break:break-word; }
.ig-lb-cap .btn svg{ width:1.1em; height:1.1em; }

/* Cabecera de la tarjeta informativa de Instagram (panel Integraciones) */
.ic-head.ic-ig{ background:linear-gradient(120deg,#F58529,#DD2A7B 55%,#8134AF); color:#fff; }

@media (max-width:560px){
  .ig-lb-media{ max-height:min(64vh, calc(100vh - 12rem)); }
}

/* Web → Instagram: botón en la fila + modal de publicación */
.ig-pub-btn{ color:#C13584; }
.ig-pub-btn:hover{ background:linear-gradient(120deg,#F58529,#DD2A7B 55%,#8134AF); color:#fff; }
.ig-pub-card{ max-width:600px; width:min(600px,94vw); text-align:left; }
.ig-pub-card h3{ display:flex; align-items:center; gap:.5em; }
.ig-pub-card h3 svg{ width:1.1em; height:1.1em; color:#C13584; }
.ig-pub-body{ display:flex; gap:1rem; margin-top:.8rem; }
.ig-pub-prev{ flex:none; width:140px; height:140px; border-radius:var(--r-md); overflow:hidden;
  background:var(--kr-cream); display:flex; align-items:center; justify-content:center; }
.ig-pub-prev img{ width:100%; height:100%; object-fit:cover; }
.ig-pub-fields{ flex:1; min-width:0; }
.ig-pub-card .seg{ display:inline-flex; background:var(--kr-cream); border:1px solid var(--kr-line);
  border-radius:999px; padding:3px; gap:2px; }
.ig-pub-card .seg-btn{ border:0; background:transparent; border-radius:999px; padding:.4rem .9rem;
  font-family:var(--kr-head); font-weight:600; font-size:.85rem; color:var(--kr-ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; gap:.4em; }
.ig-pub-card .seg-btn svg{ width:1.05em; height:1.05em; }
.ig-pub-card .seg-btn.on{ background:var(--kr-orange); color:#fff; }
.ig-pub-done{ margin-top:1rem; display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.ig-pub-done .btn{ align-self:stretch; justify-content:center; }
@media (max-width:520px){
  .ig-pub-body{ flex-direction:column; }
  .ig-pub-prev{ width:100%; height:170px; }
}

/* Instagram · grilla de embeds oficiales (curados desde el panel) */
.ig-embed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,326px),1fr));
  gap:1.2rem; margin-top:1.4rem; justify-items:center; align-items:start;
  --ig-card-h:580px; } /* altura uniforme de cada tarjeta (tuneable) */

/* Cada publicación: ancho parejo + altura FIJA para que ninguna se vea más
   grande. El contenido excedente se recorta y se desvanece con un degradado. */
.ig-embed{ position:relative; width:100%; max-width:540px; height:var(--ig-card-h);
  overflow:hidden; border-radius:14px; }
.ig-embed-host{ width:100%; }
.ig-embed-host > a{ display:inline-block; padding:1rem; color:var(--kr-orange-deep); font-family:var(--kr-head); }
/* Degradado inferior que suaviza el recorte (solo cuando ya cargó). */
.ig-embed.is-ok::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:88px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--kr-paper));
  pointer-events:none; }

/* Skeleton de carga: ocupa la tarjeta hasta que el embed esté medido, así
   tampoco se percibe "una más lenta". Se oculta al quedar lista. */
.ig-skel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:linear-gradient(110deg,#f3eee6 30%,#faf6ef 50%,#f3eee6 70%);
  background-size:220% 100%; animation:igShimmer 1.25s ease-in-out infinite; }
.ig-embed.is-ok .ig-skel{ display:none; }
.ig-skel-spin{ width:30px; height:30px; border-radius:50%; border:3px solid rgba(221,42,123,.22);
  border-top-color:#DD2A7B; animation:igSpin .8s linear infinite; }
@keyframes igShimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
@keyframes igSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ig-skel{ animation:none; } .ig-skel-spin{ animation-duration:1.6s; }
}

/* Instagram · tarjeta de acceso en la portada (Hero), debajo de la tortuga */
.ig-hero-card{ position:absolute; z-index:6; right:clamp(12px,5vw,80px); top:clamp(206px,28vh,320px);
  display:flex; align-items:center; gap:.6rem; max-width:268px; text-decoration:none; color:var(--kr-cream);
  background:rgba(13,9,4,.46); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(251,241,221,.26); border-radius:16px; padding:.6rem .75rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55); transition:transform .2s, box-shadow .2s, border-color .2s; }
.ig-hero-card:hover{ transform:translateY(-2px); border-color:var(--kr-orange-bright); box-shadow:0 18px 42px -12px rgba(0,0,0,.65); }
.ig-hero-logo{ width:40px; height:40px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,#F58529,#DD2A7B 55%,#8134AF); color:#fff; }
.ig-hero-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.ig-hero-txt b{ font-family:var(--kr-head); font-size:.92rem; font-weight:700; }
.ig-hero-handle{ font-size:.78rem; opacity:.85; }
.ig-hero-btn{ flex:none; background:var(--kr-orange); color:#fff; font-family:var(--kr-head); font-weight:700;
  font-size:.76rem; letter-spacing:.02em; padding:.32rem .72rem; border-radius:999px; }
@media (max-width:900px){ .ig-hero-card{ display:none; } }

/* Instagram · sección compacta (espacios y texto mínimos) */
.ig-sec{ padding-top:1.3rem; padding-bottom:1rem; }
.ig-mini-head{ display:flex; align-items:center; gap:.55rem; margin:0; }
.ig-mini-head h2{ font-family:var(--kr-head); font-weight:700; font-size:1.12rem; line-height:1.1;
  margin:0; color:var(--kr-ink); letter-spacing:.01em; }
.ig-mini-ico{ width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,#F58529,#DD2A7B 55%,#8134AF); color:#fff; }
.ig-sec .ig-embed-grid{ margin-top:.85rem; }