/**
 * Consciencia al Natural — Shell F2 (publicado)
 * Encima de Astra: oculta chrome del tema y muestra shell propio.
 */

@import url("identity.css");

/* —— Ocultar Astra en rutas Consciencia —— */
body.cn-site .ast-above-header-wrap,
body.cn-site .main-header-bar-wrap,
body.cn-site .ast-primary-header-bar,
body.cn-site .site-header,
body.cn-site #ast-desktop-header,
body.cn-site #ast-mobile-header,
body.cn-site .ast-header-break-point .main-header-bar,
body.cn-site footer#colophon,
body.cn-site footer#colophon *,
body.cn-site .ast-footer-overlay,
body.cn-site .ast-theme-transparent-header,
body.cn-site .entry-header,
body.cn-site .ast-archive-description,
body.cn-site .ast-breadcrumbs-wrapper,
body.cn-site .site-footer,
body.cn-site .site-footer *,
body.cn-site .ast-small-footer,
body.cn-site .ast-footer-copyright,
body.cn-site .ast-footer-copyright *,
body.cn-site .site-footer-primary-section-3,
body.cn-site .ast-builder-grid-row-container,
body.cn-site [class*="love-nature"],
body.cn-site .wp-block-template-part {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html.cn-site,
body.cn-site {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

body.cn-site {
  background: var(--cn-bg) !important;
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
}

/* Sin recuadro azul de toque / foco del navegador o del tema */
body.cn-site *,
body.cn-site *::before,
body.cn-site *::after {
  -webkit-tap-highlight-color: transparent !important;
}

body.cn-site a,
body.cn-site button,
body.cn-site summary,
body.cn-site [role="button"],
body.cn-site input,
body.cn-site textarea,
body.cn-site select,
body.cn-site .cn-nav-toggle,
body.cn-site .cn-nav a,
body.cn-site .cn-btn,
body.cn-site .cn-text-link {
  -webkit-tap-highlight-color: transparent !important;
  outline: none;
}

body.cn-site a:focus,
body.cn-site button:focus,
body.cn-site summary:focus,
body.cn-site [role="button"]:focus,
body.cn-site .cn-nav a:focus,
body.cn-site .cn-btn:focus,
body.cn-site .cn-text-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Enlaces: solo cambio de color, sin caja */
body.cn-site a:active,
body.cn-site a:focus,
body.cn-site a:focus-visible {
  background-color: transparent !important;
  background-image: none !important;
}

body.cn-site a:not(.cn-btn):hover,
body.cn-site a:not(.cn-btn):focus-visible {
  color: #e8d0a0;
}

body.cn-site a:not(.cn-btn):active {
  color: #f5e6c8;
}

body.cn-site .cn-nav a:hover,
body.cn-site .cn-nav a:focus-visible,
body.cn-site .cn-nav a:active {
  color: #e8d0a0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.cn-site .cn-top-brand:hover,
body.cn-site .cn-top-brand:focus-visible,
body.cn-site .cn-top-brand:active {
  color: inherit !important;
  opacity: 0.92;
  background: transparent !important;
}

/* Botones / toggle: foco sutil dorado, sin azul del sistema */
body.cn-site .cn-btn:focus-visible,
body.cn-site .cn-nav-toggle:focus-visible,
body.cn-site button:focus-visible,
body.cn-site summary:focus-visible,
body.cn-site input:focus-visible,
body.cn-site textarea:focus-visible,
body.cn-site select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(232, 208, 160, 0.45) !important;
}

body.cn-site #content,
body.cn-site .site-content,
body.cn-site .ast-container,
body.cn-site .entry-content,
body.cn-site #primary,
body.cn-site #main,
body.cn-site .ast-article-single,
body.cn-site article.post,
body.cn-site article.page,
body.cn-site .ast-separate-container .ast-article-single,
body.cn-site .ast-separate-container .ast-article-post,
body.cn-site .ast-two-container .site-content > .ast-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.cn-site.ast-separate-container .site-content > .ast-container,
body.cn-site.ast-separate-container #primary,
body.cn-site.ast-separate-container .ast-article-single,
body.cn-site.ast-separate-container .ast-article-post,
body.cn-site.ast-two-container .site-content,
body.cn-site .site-content,
body.cn-site #content.site-content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.cn-site.ast-separate-container .ast-article-single,
body.cn-site.ast-separate-container .ast-article-post,
body.cn-site article.ast-article-single {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

@media (max-width: 921px) {
  body.cn-site.ast-separate-container .ast-article-single,
  body.cn-site.ast-separate-container .ast-article-post {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }
}

body.cn-site .entry-content > *:not(.cn-shell):not(.cn-page):not(.cn-meet-join-page) {
  display: none !important;
}

/* —— Top bar —— */
.cn-top {
  position: sticky;
  top: 0;
  z-index: 10000;
  background:
    linear-gradient(180deg, rgba(8, 10, 8, 0.96), rgba(5, 5, 5, 0.94)),
    url("../assets/atmosphere/A4-sm.webp");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--cn-border);
  /* Sin backdrop-filter: atrapa position:fixed del menú móvil */
}

html.cn-nav-lock,
html.cn-nav-lock body.cn-site {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
}

body.cn-site.cn-nav-open {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  touch-action: none;
}

/* Drawer portado a <body>: por encima de toda la página */
body > .cn-nav.cn-nav--drawer {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 5.5rem 1.15rem 2rem !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.99), rgba(8, 10, 8, 1)),
    #050505 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

body.cn-nav-open .cn-nav-toggle {
  position: relative;
  z-index: 2147483001 !important;
}

body.cn-nav-open .cn-top {
  z-index: 2147483002 !important;
}

.cn-top-inner {
  width: var(--cn-wrap);
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.cn-top-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none !important;
  min-width: 0;
  flex-shrink: 0;
}

.cn-top-mark {
  display: block;
  width: clamp(44px, 8vw, 56px);
  height: clamp(44px, 8vw, 56px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}

.cn-top-wordmark {
  font-family: var(--cn-font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--cn-cream-soft);
}

.cn-top-wordmark-short {
  display: none;
}

@media (max-width: 1100px) {
  .cn-top-wordmark-full {
    display: none;
  }

  .cn-top-wordmark-short {
    display: inline;
  }
}

/* —— Megamenú —— */
.cn-nav {
  display: none;
}

.cn-nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  justify-content: flex-end;
}

.cn-nav-item {
  position: relative;
}

.cn-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(232, 224, 208, 0.78);
  font-family: var(--cn-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.22s ease, background 0.22s ease;
}

.cn-nav-trigger-ico {
  display: inline-flex;
  color: rgba(196, 165, 116, 0.72);
  transition: color 0.22s ease;
}

.cn-nav-ico {
  display: block;
}

.cn-nav-chevron {
  width: 6px;
  height: 6px;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.cn-nav-trigger:hover,
.cn-nav-trigger:focus-visible,
.cn-nav-item.is-open > .cn-nav-trigger,
.cn-nav-item.is-current > .cn-nav-trigger,
.cn-nav-trigger[aria-current="page"] {
  color: #e8d0a0;
  background: rgba(232, 208, 160, 0.06);
}

.cn-nav-trigger:hover .cn-nav-trigger-ico,
.cn-nav-trigger:focus-visible .cn-nav-trigger-ico,
.cn-nav-item.is-open > .cn-nav-trigger .cn-nav-trigger-ico,
.cn-nav-item.is-current > .cn-nav-trigger .cn-nav-trigger-ico,
.cn-nav-trigger[aria-current="page"] .cn-nav-trigger-ico {
  color: #e8d0a0;
}

.cn-nav-item.is-open > .cn-nav-trigger .cn-nav-chevron {
  transform: rotate(225deg) translateY(-1px);
  opacity: 0.9;
}

.cn-mega {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: min(92vw, 640px);
  max-width: min(94vw, 720px);
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(196, 165, 116, 0.22);
  border-top: 1px solid rgba(232, 208, 160, 0.38);
  background:
    linear-gradient(165deg, rgba(107, 122, 104, 0.18) 0%, transparent 42%),
    linear-gradient(180deg, rgba(18, 22, 18, 0.98), rgba(8, 10, 8, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.06),
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(196, 165, 116, 0.12);
  z-index: 120;
  overflow: hidden;
}

.cn-mega[hidden] {
  display: none !important;
}

.cn-mega-inner {
  display: grid;
  grid-template-columns: minmax(11rem, 0.9fr) 1.2fr;
  gap: 0;
  min-height: 12rem;
}

.cn-mega-overview {
  padding: 1.35rem 1.25rem 1.4rem;
  border-right: 1px solid rgba(196, 165, 116, 0.14);
  background:
    radial-gradient(420px 180px at 20% 0%, rgba(196, 165, 116, 0.12), transparent 70%);
}

.cn-mega-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(212, 184, 150, 0.78);
}

.cn-mega-title {
  margin: 0 0 0.55rem;
  font-family: var(--cn-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: #e8d0a0;
  line-height: 1.25;
}

.cn-mega-text {
  margin: 0 0 1rem;
  color: rgba(232, 224, 208, 0.78);
  font-size: 0.92rem;
  line-height: 1.55;
}

.cn-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #e8d0a0;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 208, 160, 0.45);
  padding-bottom: 0.12rem;
}

.cn-mega-cta:hover,
.cn-mega-cta:focus-visible {
  color: #f5e6c8;
  border-bottom-color: #e8d0a0;
}

.cn-mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.35rem 1rem;
  padding: 1.15rem 1.15rem 1.25rem;
}

.cn-mega-col-title {
  margin: 0 0 0.55rem;
  padding: 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(196, 165, 116, 0.7);
}

.cn-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.cn-mega-link {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0.55rem;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(242, 235, 224, 0.92);
  transition: background 0.2s ease, color 0.2s ease;
}

.cn-mega-link-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: #d4b896;
  background: rgba(196, 165, 116, 0.06);
}

.cn-mega-link-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f2ebe0;
}

.cn-mega-link-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(232, 224, 208, 0.62);
}

.cn-mega-link:hover,
.cn-mega-link:focus-visible,
.cn-mega-link[aria-current="page"] {
  background: rgba(232, 208, 160, 0.08);
  color: #e8d0a0;
}

.cn-mega-link:hover .cn-mega-link-label,
.cn-mega-link:focus-visible .cn-mega-link-label,
.cn-mega-link[aria-current="page"] .cn-mega-link-label {
  color: #e8d0a0;
}

.cn-mega-link:hover .cn-mega-link-ico,
.cn-mega-link:focus-visible .cn-mega-link-ico,
.cn-mega-link[aria-current="page"] .cn-mega-link-ico {
  border-color: rgba(232, 208, 160, 0.55);
  color: #e8d0a0;
  box-shadow: 0 0 16px rgba(196, 165, 116, 0.22);
}

.cn-mega-link--cta {
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: rgba(107, 122, 104, 0.16);
}

.cn-nav-scrim {
  display: none;
}

.cn-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cn-border);
  border-radius: 10px;
  background: rgba(15, 18, 16, 0.85);
  color: #f2ebe0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  z-index: 2;
}

.cn-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 1px;
  background: #f2ebe0;
  box-shadow: none !important;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

body.cn-nav-open .cn-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.cn-nav-open .cn-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

body.cn-nav-open .cn-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop / tablet ancha */
@media (min-width: 1080px) {
  .cn-nav {
    display: block;
  }

  .cn-nav-toggle {
    display: none;
  }

  .cn-nav-trigger-ico {
    display: none;
  }

  .cn-nav-item--link .cn-nav-trigger-ico {
    display: none;
  }
}

@media (min-width: 1280px) {
  .cn-nav-trigger-ico {
    display: inline-flex;
  }

  .cn-nav-item--link .cn-nav-trigger-ico {
    display: inline-flex;
  }
}

/* Móvil / tablet: drawer (estilos base; overlay real = body > .cn-nav--drawer) */
@media (max-width: 1079.98px) {
  .cn-top-inner {
    position: relative;
  }

  .cn-nav-scrim {
    display: none;
  }

  body > .cn-nav.cn-nav--drawer .cn-nav-bar,
  body.cn-nav-open .cn-nav .cn-nav-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    max-width: 28rem;
    margin-inline: auto;
  }

  body > .cn-nav.cn-nav--drawer .cn-nav-trigger,
  body.cn-nav-open .cn-nav .cn-nav-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(196, 165, 116, 0.16);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.86rem;
  }

  body > .cn-nav.cn-nav--drawer .cn-nav-trigger-ico,
  body.cn-nav-open .cn-nav .cn-nav-trigger-ico {
    display: inline-flex;
  }

  body > .cn-nav.cn-nav--drawer .cn-nav-chevron,
  body.cn-nav-open .cn-nav .cn-nav-chevron {
    margin-left: auto;
  }

  body > .cn-nav.cn-nav--drawer .cn-mega,
  body.cn-nav-open .cn-nav .cn-mega {
    position: static;
    min-width: 0;
    max-width: none;
    margin: 0.35rem 0 0.55rem;
    border-radius: 14px;
  }

  body > .cn-nav.cn-nav--drawer .cn-mega-inner,
  body.cn-nav-open .cn-nav .cn-mega-inner {
    grid-template-columns: 1fr;
  }

  body > .cn-nav.cn-nav--drawer .cn-mega-overview,
  body.cn-nav-open .cn-nav .cn-mega-overview {
    border-right: 0;
    border-bottom: 1px solid rgba(196, 165, 116, 0.14);
    padding: 1.1rem 1rem;
  }

  body > .cn-nav.cn-nav--drawer .cn-mega-cols,
  body.cn-nav-open .cn-nav .cn-mega-cols {
    grid-template-columns: 1fr;
    padding: 0.75rem 0.75rem 1rem;
  }
}

/* —— Hero home —— */
.cn-hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: grid;
  align-items: end;
  background-color: var(--cn-ink);
  background-image: var(--cn-url-hero);
  background-size: cover;
  background-position: center 32%;
}

.cn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.2) 0%, rgba(5, 5, 5, 0.5) 40%, rgba(5, 5, 5, 0.94) 100%),
    radial-gradient(ellipse 65% 45% at 72% 28%, rgba(196, 165, 116, 0.16), transparent 62%);
  pointer-events: none;
}

.cn-hero-inner {
  position: relative;
  z-index: 1;
  width: var(--cn-wrap);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

/* Marca con presencia (no invasiva): por encima del titular */
.cn-hero-brand {
  margin: 0 0 0.75rem;
  max-width: 18ch;
  font-family: var(--cn-font-display);
  font-size: clamp(1.85rem, 5.2vw, 3.15rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #e8d0a0;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(196, 165, 116, 0.22);
}

.cn-hero h1 {
  margin: 0 0 0.95rem;
  font-family: var(--cn-font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cn-cream-soft);
  max-width: 22ch;
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
}

.cn-hero-lead {
  margin: 0 0 1.75rem;
  max-width: min(38rem, 92vw);
  color: var(--cn-text-muted);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .cn-hero {
    min-height: min(78vh, 680px);
    align-items: end;
  }

  .cn-hero-brand {
    max-width: 12ch;
  }

  .cn-hero h1 {
    max-width: 18ch;
  }
}

.cn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.cn-actions--prose {
  margin-top: 1.75rem;
}

/* Botones premium (efecto shine como LOGOS-CORP; CTA en verde sage del logo) */
.cn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  overflow: hidden;
  isolation: isolate;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cn-btn > * {
  position: relative;
  z-index: 1;
}

.cn-btn--sage {
  background: linear-gradient(180deg, #8a9a86 0%, #6b7a68 48%, #4a5648 100%);
  border-color: #7d8d79;
  color: #0c100c !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 28px rgba(107, 122, 104, 0.42);
}

.cn-btn--sage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: cn-shine 3.2s ease-in-out infinite;
  z-index: 0;
}

.cn-btn--sage:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 18px 36px rgba(107, 122, 104, 0.52);
}

.cn-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border-color: rgba(196, 165, 116, 0.4);
  color: var(--cn-cream-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cn-btn--ghost:hover {
  background: rgba(107, 122, 104, 0.28);
  border-color: var(--cn-sage-soft);
  transform: translateY(-3px);
}

@keyframes cn-shine {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-btn--sage::before,
  .cn-aurora,
  .cn-orb {
    animation: none !important;
  }
}

/* —— Atmosphere / orbs —— */
.cn-atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cn-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  animation: cn-orb-drift 14s ease-in-out infinite;
}

.cn-orb--a {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  top: 12%;
  right: -8%;
  background: radial-gradient(circle, rgba(107, 122, 104, 0.55), transparent 70%);
}

.cn-orb--b {
  width: min(36vw, 360px);
  height: min(36vw, 360px);
  bottom: 18%;
  left: -10%;
  background: radial-gradient(circle, rgba(196, 165, 116, 0.28), transparent 70%);
  animation-delay: -5s;
}

@keyframes cn-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -18px) scale(1.06); }
}

.cn-aurora {
  position: absolute;
  inset: -20% 0 auto;
  height: 55%;
  max-width: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(107, 122, 104, 0.22), transparent 65%);
  pointer-events: none;
  animation: cn-aurora-pulse 10s ease-in-out infinite;
}

.cn-aurora--alt {
  background: radial-gradient(ellipse at 40% 20%, rgba(196, 165, 116, 0.16), transparent 60%);
}

@keyframes cn-aurora-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.cn-wrap {
  width: var(--cn-wrap);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.cn-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* —— Sections —— */
.cn-section {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

/* Catálogo: permitir riel horizontal en móvil */
.cn-section--catalog {
  overflow: visible;
}

.cn-page--inicio .cn-section:first-of-type,
.cn-hero + .cn-section {
  content-visibility: visible;
}

.cn-section--a5 {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.78), rgba(5, 5, 5, 0.9)),
    var(--cn-url-a5);
  background-size: cover;
  background-position: center;
}

.cn-section--prose {
  background:
    radial-gradient(700px 320px at 80% 10%, rgba(107, 122, 104, 0.14), transparent 55%),
    var(--cn-bg-section);
  border-block: 1px solid var(--cn-border-soft);
  overflow-x: clip;
}

.cn-section--pillars {
  background: var(--cn-bg);
  overflow: visible;
}

.cn-section--journey {
  background: var(--cn-bg-elevated);
  border-top: 1px solid var(--cn-border-soft);
}

.cn-section--close {
  background: var(--cn-bg);
  border-top: 1px solid var(--cn-border);
}

.cn-section-head {
  margin: 0 auto 2.25rem;
}

.cn-section-head--center {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.cn-section-head--center .cn-f1-lead {
  margin-inline: auto;
}

/* —— Paneles premium (filete superior + profundidad) —— */
.cn-prose-block {
  max-width: 42rem;
}

.cn-prose {
  display: grid;
  gap: 1.15rem;
}

.cn-prose p {
  margin: 0;
  color: var(--cn-text-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.75;
}

.cn-card-stack {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.35rem;
  perspective: 1600px;
}

.cn-card-rail-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 1.35rem;
}

.cn-card-rail-wrap .cn-card-stack {
  margin-top: 0;
}

@media (max-width: 899.98px) {
  .cn-card-rail-wrap {
    margin-inline: -1.25rem;
    overflow: hidden;
  }

  .cn-card-rail.cn-card-stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.35rem 1.25rem 1rem;
    perspective: none !important;
    grid-template-columns: none !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 165, 116, 0.45) transparent;
  }

  .cn-card-rail > .cn-panel {
    flex: 0 0 auto !important;
    width: min(78vw, 17.5rem) !important;
    max-width: min(78vw, 17.5rem) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}

@media (min-width: 900px) {
  .cn-card-stack {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
  }

  .cn-card-rail-wrap {
    margin-inline: 0;
    overflow: visible;
  }

  .cn-card-rail.cn-card-stack {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
}

.cn-panel {
  --cn-glow: 0;
  position: relative;
  padding: 1.7rem 1.55rem 1.55rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 165, 116, 0.12);
  border-top: 1px solid rgba(212, 184, 150, 0.35);
  background:
    linear-gradient(180deg, rgba(34, 38, 34, 0.98) 0%, rgba(14, 16, 14, 1) 55%, rgba(8, 9, 8, 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.06),
    inset 0 2px 12px rgba(196, 165, 116, 0.04),
    inset 0 -28px 56px rgba(0, 0, 0, 0.42),
    0 16px 32px rgba(0, 0, 0, 0.48),
    0 36px 72px rgba(0, 0, 0, 0.38);
  transform:
    translateY(calc(28px * (1 - var(--cn-glow))))
    scale(calc(0.97 + var(--cn-glow) * 0.03));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
  color: var(--cn-text-muted);
  overflow: hidden;
}

/* Filete dorado superior — barra visible + resplandor */
.cn-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 76%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 148, 98, calc(0.35 + var(--cn-glow) * 0.25)) 12%,
    rgba(232, 208, 160, calc(0.75 + var(--cn-glow) * 0.25)) 50%,
    rgba(180, 148, 98, calc(0.35 + var(--cn-glow) * 0.25)) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 calc(20px + var(--cn-glow) * 20px) rgba(196, 165, 116, calc(0.45 + var(--cn-glow) * 0.45)),
    0 2px calc(8px + var(--cn-glow) * 12px) rgba(232, 208, 160, calc(0.25 + var(--cn-glow) * 0.35));
  pointer-events: none;
  z-index: 3;
}

.cn-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: calc(0.42 + var(--cn-glow) * 0.58);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(0.38 * (1 - var(--cn-glow)))), transparent 55%),
    linear-gradient(125deg, rgba(255, 255, 255, calc(0.03 + var(--cn-glow) * 0.12)) 0%, transparent 40%),
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(196, 165, 116, calc(0.12 + var(--cn-glow) * 0.38)), transparent 58%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s ease;
}

.cn-panel > * {
  position: relative;
  z-index: 1;
}

.cn-panel.is-lit,
.cn-panel[data-cn-lit].is-lit {
  border-color: rgba(212, 184, 150, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.2),
    inset 0 3px 16px rgba(196, 165, 116, 0.18),
    inset 0 -24px 48px rgba(0, 0, 0, 0.32),
    0 20px 40px rgba(0, 0, 0, 0.52),
    0 44px 88px rgba(0, 0, 0, 0.4),
    0 0 48px rgba(196, 165, 116, 0.38);
}

.cn-panel--lead {
  margin-bottom: 0.35rem;
  padding: 1.85rem 1.75rem 1.7rem;
  background:
    linear-gradient(165deg, rgba(107, 122, 104, 0.32) 0%, transparent 50%),
    linear-gradient(180deg, rgba(26, 30, 26, 0.99), rgba(10, 12, 10, 1));
}

.cn-panel--lead .cn-f1-title {
  color: #e8d0a0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 calc(18px + var(--cn-glow) * 22px) rgba(196, 165, 116, calc(0.28 + var(--cn-glow) * 0.42)),
    0 2px 20px rgba(196, 165, 116, calc(0.15 + var(--cn-glow) * 0.35));
  transition: text-shadow 0.35s ease;
}

/* Intro sin tarjeta: filete vertical premium (En detalle / Lo que vive…) */
.cn-lead-rule {
  position: relative;
  margin: 0 0 0.15rem;
  padding: 0.15rem 0 0.15rem 1.35rem;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.cn-lead-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(232, 208, 160, 0.15) 0%,
    rgba(232, 208, 160, 0.95) 18%,
    rgba(196, 165, 116, 1) 50%,
    rgba(232, 208, 160, 0.95) 82%,
    rgba(232, 208, 160, 0.15) 100%
  );
  box-shadow:
    0 0 10px rgba(196, 165, 116, 0.45),
    0 0 22px rgba(196, 165, 116, 0.22),
    1px 0 0 rgba(255, 248, 230, 0.12);
  pointer-events: none;
}

.cn-lead-rule .cn-f1-kicker {
  margin: 0 0 0.45rem;
}

.cn-lead-rule .cn-f1-title {
  margin: 0;
  color: #e8d0a0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 18px rgba(196, 165, 116, 0.28),
    0 2px 20px rgba(196, 165, 116, 0.15);
}

.cn-panel--center {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.cn-panel--center .cn-f1-lead,
.cn-panel--center .cn-f1-title,
.cn-panel--center .cn-actions {
  margin-inline: auto;
  justify-content: center;
}

.cn-panel--finale {
  max-width: 40rem;
}

.cn-panel--glass {
  background:
    linear-gradient(160deg, rgba(107, 122, 104, 0.26) 0%, transparent 42%),
    linear-gradient(180deg, rgba(20, 24, 20, 0.92), rgba(8, 10, 8, 0.96));
  backdrop-filter: blur(10px);
}

.cn-panel--glass p {
  margin: 0 0 1rem;
  color: rgba(232, 224, 208, 0.88);
  font-size: 1.05rem;
  line-height: 1.7;
}

.cn-panel--glass .cn-f1-title {
  color: #e8d0a0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 0 calc(16px + var(--cn-glow) * 24px) rgba(196, 165, 116, calc(0.25 + var(--cn-glow) * 0.45));
  transition: text-shadow 0.35s ease;
}

.cn-panel-label {
  margin: 0 0 0.7rem;
  font-family: var(--cn-font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b896;
}

.cn-panel > p:not(.cn-panel-label):not(.cn-f1-kicker):not(.cn-f1-lead):not(.cn-actions) {
  margin: 0;
  color: rgba(232, 224, 208, 0.88);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Una sola tarjeta: Mirada + Continúa */
.cn-panel--intro {
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.85rem 1.7rem 1.75rem;
}

.cn-panel-block {
  position: relative;
  z-index: 1;
}

.cn-panel-block > p:not(.cn-panel-label) {
  margin: 0;
  color: rgba(232, 224, 208, 0.88);
  font-size: 1.02rem;
  line-height: 1.7;
}

.cn-panel-block--next {
  margin-top: 1.45rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(196, 165, 116, 0.18);
}

.cn-panel-media {
  --cn-glow: 0;
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(196, 165, 116, 0.18);
  border-top: 1px solid rgba(212, 184, 150, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.08),
    inset 0 2px 10px rgba(196, 165, 116, 0.05),
    0 20px 44px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform:
    translateY(calc(28px * (1 - var(--cn-glow))))
    scale(calc(0.97 + var(--cn-glow) * 0.03));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.cn-panel-media.is-lit {
  border-color: rgba(212, 184, 150, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.14),
    inset 0 3px 14px rgba(196, 165, 116, 0.14),
    0 24px 52px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(196, 165, 116, 0.45);
}

.cn-panel-media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 76%;
  height: 3px;
  transform: translateX(-50%);
  z-index: 4;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 208, 160, calc(0.65 + var(--cn-glow) * 0.35)),
    transparent
  );
  box-shadow:
    0 0 calc(22px + var(--cn-glow) * 18px) rgba(196, 165, 116, calc(0.5 + var(--cn-glow) * 0.4));
  pointer-events: none;
}

.cn-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(0.38 + var(--cn-glow) * 0.62);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(0.4 * (1 - var(--cn-glow)))), transparent 50%),
    linear-gradient(
      128deg,
      rgba(255, 255, 255, calc(0.08 + var(--cn-glow) * 0.14)) 0%,
      transparent 42%,
      transparent 100%
    );
  transition: opacity 0.35s ease;
}

.cn-panel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pillars */
.cn-pillar-grid {
  display: grid;
  gap: 1.25rem;
  perspective: 1600px;
  margin-top: 1.5rem;
}

.cn-pillar-rail-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 1.5rem;
}

.cn-pillar-rail-wrap .cn-pillar-grid {
  margin-top: 0;
}

@media (max-width: 899.98px) {
  .cn-pillar-rail-wrap {
    margin-inline: -1.25rem;
    overflow: hidden;
  }

  .cn-pillar-rail.cn-pillar-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.35rem 1.25rem 1rem;
    perspective: none !important;
    grid-template-columns: none !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 165, 116, 0.45) transparent;
  }

  .cn-pillar-rail.cn-pillar-grid::-webkit-scrollbar {
    height: 4px;
  }

  .cn-pillar-rail.cn-pillar-grid::-webkit-scrollbar-thumb {
    background: rgba(196, 165, 116, 0.4);
    border-radius: 4px;
  }

  .cn-pillar-rail > .cn-pillar {
    flex: 0 0 auto !important;
    width: min(78vw, 17.5rem) !important;
    max-width: min(78vw, 17.5rem) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}

@media (min-width: 900px) {
  .cn-pillar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }

  .cn-pillar-rail-wrap {
    margin-inline: 0;
    overflow: visible;
  }

  .cn-pillar-rail.cn-pillar-grid {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
}

.cn-pillar {
  --cn-glow: 0;
  position: relative;
  padding: 1.95rem 1.65rem 1.8rem;
  border-radius: 18px;
  border: 1px solid rgba(196, 165, 116, 0.14);
  border-top: 1px solid rgba(212, 184, 150, 0.38);
  background:
    linear-gradient(145deg, rgba(168, 184, 162, 0.38) 0%, transparent 46%),
    linear-gradient(168deg, #8a9a86 0%, #6b7a68 34%, #4f5c4d 68%, #384238 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 3px 14px rgba(196, 165, 116, 0.06),
    inset 0 -26px 52px rgba(0, 0, 0, 0.36),
    0 22px 36px rgba(0, 0, 0, 0.42),
    0 48px 82px rgba(0, 0, 0, 0.4);
  transform:
    translateY(calc(28px * (1 - var(--cn-glow))))
    scale(calc(0.97 + var(--cn-glow) * 0.03));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
  color: #f2ebe0;
  overflow: hidden;
}

.cn-pillar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 76%;
  height: 4px;
  transform: translateX(-50%);
  z-index: 3;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 208, 160, calc(0.7 + var(--cn-glow) * 0.3)),
    transparent
  );
  box-shadow:
    0 0 calc(24px + var(--cn-glow) * 16px) rgba(196, 165, 116, calc(0.5 + var(--cn-glow) * 0.45)),
    0 2px calc(10px + var(--cn-glow) * 14px) rgba(232, 208, 160, calc(0.3 + var(--cn-glow) * 0.35));
  pointer-events: none;
}

.cn-pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: calc(0.45 + var(--cn-glow) * 0.55);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(0.32 * (1 - var(--cn-glow)))), transparent 52%),
    linear-gradient(125deg, rgba(255, 255, 255, calc(0.14 + var(--cn-glow) * 0.12)) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(ellipse 75% 45% at 50% 0%, rgba(255, 240, 210, calc(0.08 + var(--cn-glow) * 0.32)), transparent 56%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s ease;
}

.cn-pillar > * {
  position: relative;
  z-index: 1;
}

.cn-pillar.is-lit {
  border-color: rgba(232, 224, 208, 0.68);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.26),
    inset 0 4px 18px rgba(196, 165, 116, 0.2),
    inset 0 -22px 44px rgba(0, 0, 0, 0.3),
    0 28px 44px rgba(0, 0, 0, 0.46),
    0 56px 92px rgba(0, 0, 0, 0.42),
    0 0 48px rgba(196, 165, 116, 0.38);
}

.cn-pillar:hover {
  --cn-glow: 1;
  transform: translateY(-10px) rotateX(2deg) scale(1.02);
  border-color: rgba(232, 224, 208, 0.55);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 4px 18px rgba(196, 165, 116, 0.16),
    inset 0 -22px 44px rgba(0, 0, 0, 0.28),
    0 32px 48px rgba(0, 0, 0, 0.48),
    0 58px 96px rgba(0, 0, 0, 0.44),
    0 0 56px rgba(196, 165, 116, 0.38);
}

.cn-pillar-num {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: #e8d0a0;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.cn-pillar h3 {
  margin: 0 0 0.75rem;
  font-family: var(--cn-font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: #e8d0a0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, calc(0.1 + var(--cn-glow) * 0.08)),
    0 2px 16px rgba(0, 0, 0, 0.38),
    0 0 calc(20px + var(--cn-glow) * 28px) rgba(196, 165, 116, calc(0.22 + var(--cn-glow) * 0.48));
  transition: text-shadow 0.35s ease;
}

.cn-pillar > p {
  margin: 0 0 0.85rem;
  color: rgba(247, 242, 232, 0.92);
  font-size: 1.04rem;
  line-height: 1.65;
}

.cn-pillar-note {
  font-size: 0.9rem !important;
  color: rgba(232, 224, 208, 0.82) !important;
  font-style: italic;
}

.cn-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  color: #f0e6d2;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(212, 184, 150, 0.55);
  padding-bottom: 0.1rem;
}

.cn-text-link:hover {
  color: #fff8ec;
  border-bottom-color: #d4b896;
}

/* En pilares verdes: el enlace = color del título */
.cn-pillar .cn-text-link {
  color: #e8d0a0;
  border-bottom-color: rgba(232, 208, 160, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.cn-pillar .cn-text-link:hover,
.cn-pillar .cn-text-link:focus-visible {
  color: #f5e6c8;
  border-bottom-color: #e8d0a0;
}

/* Feature El Círculo */
.cn-feature {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 960px) {
  .cn-feature {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
  }
}

.cn-feature-visual:not(.cn-atm--photo) {
  min-height: min(52vh, 480px);
}

.cn-feature-visual.cn-atm--photo {
  min-height: 0;
  align-self: center;
  width: 100%;
}

.cn-journey-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 960px) {
  .cn-journey-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2.75rem;
  }
}

.cn-journey-fig:not(.cn-atm--photo) {
  min-height: min(48vh, 460px);
}

.cn-journey-fig.cn-atm--photo {
  min-height: 0;
  align-self: center;
  width: 100%;
}

.cn-close-block {
  max-width: 40rem;
  text-align: center;
  margin-inline: auto;
}

.cn-close-block .cn-prose,
.cn-close-block .cn-actions {
  justify-content: center;
}

.cn-close-block .cn-f1-lead,
.cn-close-block .cn-f1-title {
  margin-inline: auto;
}

html.cn-lite .cn-panel,
html.cn-lite .cn-pillar,
html.cn-lite .cn-panel-media {
  transform: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
html.cn-lite .cn-panel:not(.is-lit),
html.cn-lite .cn-pillar:not(.is-lit),
html.cn-lite .cn-panel-media:not(.is-lit) {
  opacity: 0.88;
}
html.cn-lite .cn-panel.is-lit,
html.cn-lite .cn-pillar.is-lit,
html.cn-lite .cn-panel-media.is-lit {
  opacity: 1;
}

/* Reveal + iluminación scroll (encendido, no fade básico) */
[data-cn-reveal] {
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-cn-reveal]:not(.is-in) {
  opacity: 1;
}

[data-cn-reveal].is-in {
  opacity: 1;
}

[data-cn-reveal]:not(.is-in).cn-panel,
[data-cn-reveal]:not(.is-in).cn-pillar,
[data-cn-reveal]:not(.is-in).cn-panel-media {
  --cn-glow: 0;
}

[data-cn-tilt] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-cn-reveal],
  [data-cn-lit],
  .cn-panel,
  .cn-pillar,
  .cn-panel-media {
    opacity: 1 !important;
    --cn-glow: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* —— Interior pages —— */
.cn-page-hero {
  position: relative;
  padding: clamp(4rem, 10vw, 6.5rem) 0 3rem;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.92)),
    var(--cn-url-a5);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--cn-border-soft);
}

.cn-page-hero--a1 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.92)), var(--cn-url-a1); background-position: center; }
.cn-page-hero--a2 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.92)), var(--cn-url-a2); background-position: center; }
/* A3 portrait: anclar arriba para no cortar el motivo */
.cn-page-hero--a3 {
  background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0.9)), var(--cn-url-a3);
  background-position: center top;
}
/* A4 ultra-wide: ideal en banda horizontal */
.cn-page-hero--a4 {
  background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.45), rgba(5, 5, 5, 0.88)), var(--cn-url-a4);
  background-position: center center;
}
.cn-page-hero--a5 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.92)), var(--cn-url-a5); background-position: center; }
.cn-page-hero--a6 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0.9)), var(--cn-url-a6); background-position: center; }
.cn-page-hero--a8 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.52), rgba(5, 5, 5, 0.91)), var(--cn-url-a8); background-position: center; }
.cn-page-hero--a9 { background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.58), rgba(5, 5, 5, 0.93)), var(--cn-url-a9); background-position: center; }
/* A10 square: encuadre medio para cover en héroe ancho */
.cn-page-hero--a10 {
  background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.48), rgba(5, 5, 5, 0.88)), var(--cn-url-a10);
  background-position: center 40%;
}

.cn-page-hero .cn-f1-title {
  max-width: 16ch;
}

.cn-page--interior .cn-section--pillars .cn-section-head {
  text-align: left;
  max-width: 36rem;
  margin-left: 0;
}

/* —— Footer premium —— */
.cn-foot {
  position: relative;
  margin-top: 0;
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  border-top: 1px solid rgba(196, 165, 116, 0.28);
  background:
    linear-gradient(180deg, rgba(12, 14, 12, 0.96) 0%, rgba(5, 5, 5, 1) 100%),
    var(--cn-url-a4);
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

.cn-foot::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 208, 160, 0.75), transparent);
  box-shadow: 0 0 18px rgba(196, 165, 116, 0.4);
  pointer-events: none;
}

.cn-foot-glow {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(107, 122, 104, 0.18), transparent 70%);
  pointer-events: none;
}

.cn-foot-inner {
  position: relative;
  z-index: 1;
  width: var(--cn-wrap);
  margin: 0 auto;
  display: grid;
  gap: 2rem 2.5rem;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 720px) {
  .cn-foot-inner {
    grid-template-columns: 1.35fr 0.9fr 1fr;
    align-items: start;
  }
}

.cn-foot-brand {
  max-width: 26rem;
}

.cn-foot-logo {
  display: inline-block;
  margin-bottom: 0.85rem;
  text-decoration: none;
}

.cn-foot-logo img {
  display: block;
  width: clamp(64px, 12vw, 88px);
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.cn-foot-name {
  margin: 0 0 0.55rem;
  font-family: var(--cn-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 500;
  color: #e8d0a0;
  letter-spacing: 0.02em;
}

.cn-foot-tag {
  margin: 0;
  color: rgba(232, 224, 208, 0.78);
  font-size: 0.98rem;
  line-height: 1.65;
}

.cn-foot-label {
  margin: 0 0 0.85rem;
  font-family: var(--cn-font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b896;
}

.cn-foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.cn-foot-nav a {
  color: rgba(232, 224, 208, 0.82);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.cn-foot-nav a:hover {
  color: #e8d0a0;
}

.cn-foot-aside .cn-foot-note {
  margin: 0 0 1rem;
  color: rgba(232, 224, 208, 0.72);
  font-size: 0.95rem;
  line-height: 1.65;
}

.cn-foot-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  color: rgba(196, 165, 116, 0.55);
  font-size: 0.92rem;
}

.cn-foot-links a {
  color: #e8d0a0;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(212, 184, 150, 0.35);
  padding-bottom: 0.05rem;
}

.cn-foot-links a:hover {
  border-bottom-color: #e8d0a0;
}

.cn-foot-paths {
  display: none;
}

.cn-foot-base {
  position: relative;
  z-index: 1;
  width: var(--cn-wrap);
  margin: 0 auto;
  padding: 1.15rem 0 1.5rem;
  border-top: 1px solid rgba(196, 165, 116, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  align-items: center;
}

.cn-foot-base p {
  margin: 0;
  color: rgba(232, 224, 208, 0.55);
  font-size: 0.82rem;
}

.cn-foot-credit {
  letter-spacing: 0.02em;
}

.cn-foot-credit a {
  color: rgba(232, 208, 160, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 165, 116, 0.28);
  padding-bottom: 0.05rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cn-foot-credit a:hover {
  color: #e8d0a0;
  border-bottom-color: rgba(232, 208, 160, 0.55);
}

/* Footer móvil: marca centrada, sin lista tipo menú */
@media (max-width: 719px) {
  .cn-foot-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.75rem;
  }

  .cn-foot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
  }

  .cn-foot-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .cn-foot-logo img {
    width: 76px;
    margin-inline: auto;
  }

  .cn-foot-nav,
  .cn-foot-aside {
    display: none;
  }

  .cn-foot-paths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 0.35rem;
    max-width: 22rem;
    padding: 0.15rem 0 0;
  }

  .cn-foot-paths a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(196, 165, 116, 0.28);
    border-radius: 999px;
    color: rgba(232, 224, 208, 0.88);
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.03);
  }

  .cn-foot-paths a:hover,
  .cn-foot-paths a:focus-visible {
    border-color: rgba(232, 208, 160, 0.5);
    color: #e8d0a0;
  }

  .cn-foot-base {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.65rem;
    padding-bottom: 1.75rem;
  }
}

/* Iluminación ~15% más suave en celular (refuerzo CSS; JS usa glow 0.85) */
@media (max-width: 900px) {
  .cn-panel.is-lit::before,
  .cn-pillar.is-lit::before,
  .cn-panel-media.is-lit::before {
    opacity: 0.85;
  }

  .cn-panel.is-lit,
  .cn-pillar.is-lit,
  .cn-panel-media.is-lit {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 230, 0.1),
      0 18px 36px rgba(0, 0, 0, 0.45),
      0 0 36px rgba(196, 165, 116, 0.22);
  }
}

/* —— Catálogo F9 (libros / estanterías) —— */
.cn-section--catalog {
  background: var(--cn-bg);
  border-top: 1px solid var(--cn-border-soft);
  overflow: visible;
}

.cn-section--catalog-alt {
  background: var(--cn-bg-elevated);
}

.cn-shelf {
  margin-top: 2.25rem;
  min-width: 0;
  max-width: 100%;
}

.cn-page--interior .cn-wrap {
  min-width: 0;
  max-width: 100%;
}

.cn-shelf-head {
  margin-bottom: 1.15rem;
  max-width: 40rem;
}

.cn-shelf-label {
  margin: 0 0 0.45rem;
  font-family: var(--cn-font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b896;
}

.cn-shelf-title {
  margin: 0 0 0.55rem;
  font-family: var(--cn-font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 500;
  color: #e8d0a0;
}

.cn-shelf-summary {
  margin: 0;
  color: rgba(232, 224, 208, 0.78);
  font-size: 1rem;
  line-height: 1.65;
}

.cn-book-grid {
  display: grid;
  gap: 1.15rem;
  perspective: 1200px;
}

@media (min-width: 720px) {
  .cn-book-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .cn-book-grid:not(.cn-book-grid--compact) {
    grid-template-columns: repeat(3, 1fr);
  }

  .cn-book-grid--compact {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Riel horizontal en móvil (max-width, no pelea con .cn-book-grid).
 * Escritorio: cuadrícula normal.
 */
.cn-book-rail-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 899.98px) {
  .cn-book-rail-wrap {
    margin-inline: -1.25rem;
    overflow: hidden;
  }

  .cn-book-rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.35rem 1.25rem 1rem;
    margin: 0;
    perspective: none !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 165, 116, 0.45) transparent;
  }

  .cn-book-rail::-webkit-scrollbar {
    height: 4px;
  }

  .cn-book-rail::-webkit-scrollbar-thumb {
    background: rgba(196, 165, 116, 0.4);
    border-radius: 4px;
  }

  .cn-book-rail > .cn-book,
  .cn-book-rail > .cn-book-rail-item {
    flex: 0 0 auto !important;
    width: min(78vw, 17.5rem) !important;
    max-width: min(78vw, 17.5rem) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    box-sizing: border-box;
  }
}

@media (min-width: 900px) {
  .cn-book-rail-wrap {
    margin-inline: 0;
    overflow: visible;
  }

  .cn-book-rail.cn-book-grid {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    gap: 1.15rem;
  }
}

.cn-book {
  --cn-glow: 0;
  position: relative;
  padding: 1.35rem 1.35rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 165, 116, 0.22);
  border-top: 1px solid rgba(212, 184, 150, 0.4);
  background: linear-gradient(180deg, rgba(28, 32, 28, 0.96), rgba(10, 12, 10, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 32px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.cn-book::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 70%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 208, 160, 0.8), transparent);
  box-shadow: 0 0 16px rgba(196, 165, 116, 0.4);
  pointer-events: none;
}

.cn-book--featured {
  border-color: rgba(212, 184, 150, 0.38);
  background:
    linear-gradient(165deg, rgba(107, 122, 104, 0.28) 0%, transparent 48%),
    linear-gradient(180deg, rgba(22, 26, 22, 0.98), rgba(10, 12, 10, 0.99));
}

.cn-book--featured .cn-book-title {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.cn-book-meta {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(212, 184, 150, 0.85);
  font-weight: 700;
}

.cn-book-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.65rem;
}

.cn-book-title {
  margin: 0;
  font-family: var(--cn-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #e8d0a0;
  line-height: 1.25;
  flex: 1 1 12rem;
}

.cn-book-summary {
  margin: 0;
  color: rgba(232, 224, 208, 0.86);
  font-size: 0.98rem;
  line-height: 1.65;
}

.cn-book-cta {
  margin: 0.85rem 0 0;
}

.cn-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: rgba(196, 165, 116, 0.1);
  color: #d4b896;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cn-chapters {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(196, 165, 116, 0.18);
  padding-top: 0.85rem;
}

.cn-chapters summary {
  cursor: pointer;
  color: #e8d0a0;
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
}

.cn-chapters summary::-webkit-details-marker {
  display: none;
}

.cn-chapter-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.cn-chapter-list li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.65rem;
  align-items: start;
}

.cn-chapter-n {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d4b896;
  padding-top: 0.15rem;
}

.cn-chapter-title {
  margin: 0 0 0.2rem;
  font-weight: 600;
  color: rgba(247, 242, 232, 0.95);
  font-size: 0.98rem;
}

.cn-chapter-blurb {
  margin: 0;
  color: rgba(232, 224, 208, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
}

.cn-dual-shelf {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .cn-dual-shelf {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* —— Contacto / correos —— */
.cn-mail-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .cn-mail-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cn-mail-card {
  position: relative;
  padding: 1.6rem 1.45rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 165, 116, 0.25);
  border-top: 1px solid rgba(212, 184, 150, 0.42);
  background:
    linear-gradient(165deg, rgba(107, 122, 104, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, rgba(22, 26, 22, 0.98), rgba(10, 12, 10, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 36px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.cn-mail-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 72%;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 208, 160, 0.8), transparent);
  box-shadow: 0 0 14px rgba(196, 165, 116, 0.35);
  pointer-events: none;
}

.cn-mail-card--featured {
  max-width: 40rem;
  margin-inline: auto;
}

.cn-mail-label {
  margin: 0 0 0.55rem;
  font-family: var(--cn-font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b896;
}

.cn-mail-address {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-family: var(--cn-font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  color: #e8d0a0;
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid rgba(212, 184, 150, 0.35);
  padding-bottom: 0.1rem;
}

.cn-mail-address:hover {
  border-bottom-color: #e8d0a0;
}

.cn-mail-body {
  margin: 0 0 0.65rem;
  color: rgba(232, 224, 208, 0.88);
  font-size: 0.98rem;
  line-height: 1.65;
}

.cn-mail-hint {
  margin: 0 0 1.1rem;
  color: rgba(232, 224, 208, 0.55);
  font-size: 0.82rem;
  line-height: 1.5;
  font-style: italic;
}

.cn-mail-card .cn-actions {
  margin-top: 0.25rem;
}

/* —— Sala virtual / Jitsi —— */
.cn-section--jitsi {
  background: var(--cn-bg-elevated);
  border-top: 1px solid var(--cn-border-soft);
}

.cn-jitsi-gate {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.85rem 1.6rem 1.75rem;
  border-radius: 18px;
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-top: 1px solid rgba(212, 184, 150, 0.45);
  background:
    linear-gradient(165deg, rgba(107, 122, 104, 0.22) 0%, transparent 48%),
    linear-gradient(180deg, rgba(18, 22, 18, 0.98), rgba(8, 10, 8, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.cn-jitsi-gate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 74%;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 208, 160, 0.85), transparent);
  box-shadow: 0 0 16px rgba(196, 165, 116, 0.4);
  pointer-events: none;
}

.cn-jitsi-status {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(196, 165, 116, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(232, 224, 208, 0.82);
  font-size: 0.92rem;
  line-height: 1.55;
}

.cn-jitsi-status--live {
  border-color: rgba(138, 154, 134, 0.45);
  color: rgba(232, 224, 208, 0.92);
}

.cn-jitsi-form {
  display: grid;
  gap: 1rem;
}

.cn-jitsi-field {
  display: grid;
  gap: 0.4rem;
}

.cn-jitsi-field span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4b896;
}

.cn-jitsi-field input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(196, 165, 116, 0.32);
  background: rgba(5, 5, 5, 0.55);
  color: var(--cn-cream-soft);
  font-family: inherit;
  font-size: 1rem;
}

.cn-jitsi-field input:focus {
  outline: none;
  border-color: rgba(232, 208, 160, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 165, 116, 0.15);
}

.cn-jitsi-note {
  margin: 0;
  color: rgba(232, 224, 208, 0.55);
  font-size: 0.85rem;
  line-height: 1.5;
}

.cn-jitsi-msg {
  margin: 0.35rem 0 0;
  color: #e8d0a0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cn-jitsi-frame-wrap {
  margin-top: 1.5rem;
}

.cn-jitsi-frame {
  display: block;
  width: 100%;
  min-height: min(70vh, 640px);
  height: 70vh;
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-radius: 14px;
  background: #050505;
}

.cn-jitsi-form .cn-btn {
  border: none;
  font: inherit;
}