/* ==========================================================================
   BLAKBOX — diseño inspirado en Cuberto
   Base blanca + secciones negras, escala fluida, cursor circular
   ========================================================================== */

:root {
  --black: #000000;
  --white: #ffffff;
  --gray: #f1f3fa;
  --mint: #e3f5f3;
  --red: #fc0019;
  --green: #00FFA3;
  --cyan: #00E5FF;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slide: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-elastic: cubic-bezier(0.34, 5.56, 0.64, 1);
  --ease-wave: cubic-bezier(0.4, 0, 0, 1);
}

/* Escala fluida: todo se dimensiona en rem sobre una raíz que escala con el viewport */
html { font-size: 2.6666666667vw; }

@media (min-width: 768px) { html { font-size: 0.625vw; } }
@media (min-width: 1600px) { html { font-size: 10px; } }

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }

::selection { background: #494949; color: var(--white); }

.accent { color: var(--green); }
.accent-text { color: var(--green); font-style: italic; text-shadow: 0 0 2.4rem rgba(0,255,163,0.35); }
.accent-text.cyan { color: var(--cyan); text-shadow: 0 0 2.4rem rgba(0,229,255,0.35); }

/* ---------- Captions ---------- */
.cb-caption {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: currentColor;
  opacity: 0.5;
}

/* ---------- Containers ---------- */
.cb-tophead-container,
.cb-overview-grid,
.cb-logoreel-container,
.cb-feature-container,
.cb-faq-container { padding-inline: 2rem; max-width: 1600px; margin: 0 auto; }

@media (min-width: 768px) {
  .cb-tophead-container,
  .cb-overview-grid,
  .cb-logoreel-container,
  .cb-feature-container,
  .cb-faq-container { padding-inline: 12rem; }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.cb-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 8rem;
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease-slide), background 0.4s, color 0.4s;
  color: var(--black);
  background: transparent;
}
.cb-navbar.-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cb-navbar.-fixed { transform: translateY(-100%); }
.cb-navbar.-visible { transform: translateY(0); }
.cb-navbar.-inverse { color: var(--white); background: rgba(0, 0, 0, 0.35); }

.cb-navbar-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2rem;
}
@media (min-width: 768px) { .cb-navbar-inner { padding-inline: 4rem; } }

.cb-logo-text {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cb-navbar-nav { display: none; gap: 3rem; align-items: center; }

@media (min-width: 900px) { .cb-navbar-nav { display: flex; } }

.cb-nav-link {
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  overflow: hidden;
  display: inline-block;
}
.cb-nav-link > span {
  display: inline-block;
  transition: transform 0.8s var(--ease-smooth);
}
.cb-nav-link > span::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 100%;
  transition: transform 0.8s var(--ease-smooth);
}
.cb-nav-link:hover > span { transform: translateY(-100%); }

/* Botones pill (CTA) */
.cb-btn_cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99999px;
  padding: 3.2rem 5.6rem;
  font-size: 2rem;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-elastic);
}
.cb-btn_cta:hover { transform: scaleX(1.02); }

.cb-btn_cta-border {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  z-index: -1;
}
.cb-btn_cta-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: -2;
}
.cb-btn_cta-ripple span {
  position: absolute;
  inset: -1px;
  background: currentColor;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-wave);
}
.cb-btn_cta:hover .cb-btn_cta-ripple span { transform: translateY(0); }

.cb-btn_cta-title { position: relative; overflow: hidden; display: inline-block; }
.cb-btn_cta-title > span {
  display: inline-block;
  position: relative;
  transition: transform 0.8s var(--ease-smooth);
}
.cb-btn_cta-title > span::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 100%;
  transition: transform 0.8s var(--ease-smooth);
}
.cb-btn_cta:hover .cb-btn_cta-title > span { transform: translateY(-100%); }

.cb-btn_cta.-fill { background: var(--black); color: var(--white); }
.cb-btn_cta.-fill .cb-btn_cta-border { display: none; }
.cb-btn_cta.-fill:hover { color: var(--black); }
.cb-btn_cta.-fill.-inverse { background: var(--white); color: var(--black); }
.cb-btn_cta.-fill.-inverse:hover { color: var(--white); }

.cb-btn_cta.-xs { padding: 1.6rem 2.8rem; font-size: 1.4rem; }
.cb-btn_cta.-sm { padding: 1.8rem 3.2rem; font-size: 1.6rem; }
.cb-btn_cta.-md { padding: 2.6rem 4.6rem; font-size: 1.8rem; }

/* Botón menú hamburguesa */
.cb-btn_menu {
  position: relative;
  z-index: 120;
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  align-items: center;
  color: inherit;
}
.cb-btn_menu-line {
  width: 2.8rem;
  height: 0.2rem;
  background: currentColor;
  transition: transform 0.4s var(--ease-smooth);
}
.cb-navbar.-open .cb-btn_menu { color: var(--black); }
.cb-navbar.-open .cb-btn_menu-line:nth-child(1) { transform: rotate(45deg) translateY(0.92rem); }
.cb-navbar.-open .cb-btn_menu-line:nth-child(2) { transform: rotate(-45deg) translateY(-0.92rem); }

@media (min-width: 900px) { .cb-btn_menu { display: none; } }

/* Menú overlay móvil */
.cb-navbar-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--white);
  color: var(--black);
  padding: 12rem 2rem 4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-slide), visibility 0.6s var(--ease-slide);
  pointer-events: none;
}
.cb-navbar.-open ~ .cb-navbar-menu { opacity: 1; visibility: visible; pointer-events: auto; }

.cb-navbar-menu-inner { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; }

.cb-menu-nav { display: flex; flex-direction: column; }

.cb-menu-link {
  font-size: 3.8rem;
  font-weight: 500;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
  transition: transform 0.4s var(--ease-smooth);
}
.cb-menu-link > span { display: inline-block; position: relative; overflow: hidden; }
.cb-menu-link > span::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 100%;
}
.cb-menu-link:hover > span { transform: translateY(-100%); }
.cb-menu-link:hover { transform: skewY(-2deg); }

.cb-menu-email {
  font-size: 2rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.cb-tophead {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 14rem 0 8rem;
  overflow: hidden;
}
@media (min-width: 768px) { .cb-tophead { padding: 16rem 0 12rem; } }

.cb-net-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cb-tophead-container { position: relative; z-index: 1; width: 100%; }

.cb-tophead-title {
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 768px) { .cb-tophead-title { font-size: 9rem; letter-spacing: -0.03em; } }

.cb-reveal-line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }

.cb-tophead-text {
  margin-top: 4rem;
  max-width: 60rem;
  font-size: 2rem;
  line-height: 135%;
  letter-spacing: 0.01em;
  font-weight: 400;
}
@media (min-width: 768px) { .cb-tophead-text { font-size: 2.4rem; } }

/* ---------- Reveal ---------- */
.cb-reveal { opacity: 0; transform: translateY(3rem); transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth); }
.cb-reveal.-in-view { opacity: 1; transform: translateY(0); }

.cb-reveal-line { opacity: 0; transform: translateY(110%); transition: opacity 0.1s, transform 1s var(--ease-smooth); }
.cb-reveal-line.-in-view { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SHOWREEL
   ========================================================================== */
.cb-preview { padding: 0 2rem; max-width: 1600px; margin: 0 auto; }
@media (min-width: 768px) { .cb-preview { padding: 0 12rem; } }

.cb-preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 2rem;
  overflow: hidden;
  text-align: left;
}
.cb-preview-tile { position: absolute; inset: 0; }

.cb-preview-label {
  position: absolute;
  left: 2.4rem; bottom: 2.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white);
  background: rgba(0,0,0,0.55);
  padding: 1.2rem 2.2rem;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   OVERVIEW (lo que hacemos)
   ========================================================================== */
.cb-overview { padding: 10rem 0; }
@media (min-width: 768px) { .cb-overview { padding: 16rem 0; } }

#nosotros {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#nosotros .cb-overview-grid,
#servicios,
#trabajo,
#faq,
#nosotros { scroll-margin-top: 8rem; }

.cb-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .cb-overview-grid { flex-direction: row; }
  .cb-overview-left { flex-basis: 28%; }
  .cb-overview-right { flex-grow: 1; }
}

.cb-overview-text {
  font-size: 2rem;
  line-height: 135%;
  letter-spacing: 0.01em;
  max-width: 80rem;
}
@media (min-width: 768px) { .cb-overview-text { font-size: 2.6rem; } }

/* ==========================================================================
   FEATURES (accordion)
   ========================================================================== */
.cb-feature { padding: 4rem 0 10rem; }
@media (min-width: 768px) { .cb-feature { padding: 4rem 0 16rem; } }

.cb-feature-list { border-top: 1px solid rgba(0,0,0,0.14); }

.cb-feature-item { border-bottom: 1px solid rgba(0,0,0,0.14); }

.cb-feature-item-title {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 0;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
  user-select: none;
}
@media (min-width: 768px) { .cb-feature-item-title { font-size: 4.2rem; } }

.cb-feature-index {
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.4;
}
@media (min-width: 768px) { .cb-feature-index { font-size: 1.6rem; } }

.cb-feature-icon {
  margin-left: auto;
  font-size: 2.4rem;
  transition: transform 0.5s var(--ease-smooth);
}
.cb-feature-item.-active .cb-feature-icon { transform: rotate(135deg); }

.cb-feature-item-content {
  display: block;
}

.cb-feature-item-text {
  max-width: 60rem;
  font-size: 1.8rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  padding-bottom: 3rem;
}
@media (min-width: 768px) { .cb-feature-item-text { font-size: 2rem; } }

.cb-btn_more {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  padding-bottom: 4rem;
}
.cb-btn_more::after {
  content: "↗";
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 1.8rem;
  transition: transform 0.5s var(--ease-elastic);
}
.cb-btn_more:hover::after { transform: scale(0.95); }

/* ==========================================================================
   LOGOREEL
   ========================================================================== */
.cb-logoreel { padding: 4rem 0 10rem; }
@media (min-width: 768px) { .cb-logoreel { padding: 4rem 0 16rem; } }

.cb-logoreel-title {
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-align: center;
}
@media (min-width: 768px) { .cb-logoreel-title { font-size: 4.2rem; } }

.cb-logoreel-items {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: center;
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) { .cb-logoreel-items { grid-template-columns: repeat(3, 1fr); } }

.cb-logoreel-item {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 1.2rem;
  text-align: center;
  transition: opacity 0.4s;
  opacity: 0.55;
}
.cb-logoreel-items:hover .cb-logoreel-item { opacity: 0.2; }
.cb-logoreel-items .cb-logoreel-item:hover { opacity: 1; }

/* ==========================================================================
   SUMMARY (sections alternadas, -inverse = negro)
   ========================================================================== */
.cb-summary { background: var(--white); color: var(--black); }
.cb-summary.-inverse { background: var(--black); color: var(--white); }

.cb-summary-content { padding: 10rem 2rem; max-width: 1600px; margin: 0 auto; }
@media (min-width: 768px) { .cb-summary-content { padding: 16rem 12rem 24rem; } }

.cb-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .cb-summary-grid { flex-direction: row; }
  .cb-summary-left { flex-basis: 28%; }
  .cb-summary-right { flex-grow: 1; }
}

/* Cards de proyectos — alineadas en cuadrícula */
.cb-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  row-gap: 6rem;
}
@media (min-width: 768px) { .cb-summary-cards { column-gap: 10rem; } }

.cb-card { display: block; }

.cb-card-preview {
  position: relative;
  aspect-ratio: 5/6.75;
  border-radius: 2rem;
  overflow: hidden;
  transition: transform 1.2s var(--ease-smooth);
}
.cb-card:hover .cb-card-preview { transform: scale(0.98); }

.cb-card-preview-media { position: absolute; inset: 0; transition: opacity 0.5s; }
.cb-card-preview-media.-image { opacity: 1; }
.cb-card-preview-media.-video { opacity: 0; }

.cb-card-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20%;
  filter: drop-shadow(0 0.6rem 1.6rem rgba(0,0,0,0.35));
}

.cb-card-preview-media .tile { transition: transform 1.2s var(--ease-smooth); }
.cb-card:hover .cb-card-preview-media .tile { transform: scale(1.05); }

.cb-card-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}
.cb-card-caption h3 { font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width: 768px) { .cb-card-caption h3 { font-size: 2.4rem; } }
.cb-card-caption span { font-size: 1.4rem; font-weight: 500; opacity: 0.5; }

.cb-summary-cta { margin-top: 12rem; display: flex; justify-content: center; }

/* Testimonios */
.cb-testimonials {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.cb-testimonial {
  background: var(--gray);
  border-radius: 2rem;
  padding: 3rem;
  max-width: 56rem;
  transition: transform 0.6s var(--ease-smooth);
}
.cb-testimonial.-a { background: var(--gray); transform: rotate(-1.2deg); }
.cb-testimonial.-b { background: var(--mint); transform: rotate(1.4deg) translateX(3rem); align-self: flex-end; }
.cb-testimonial.-c { background: var(--gray); transform: rotate(-0.8deg); }
.cb-testimonials:hover .cb-testimonial { transform: rotate(0); }
.cb-testimonial p { font-size: 2rem; line-height: 135%; letter-spacing: 0.01em; }
.cb-testimonial footer { margin-top: 2rem; font-size: 1.5rem; }

/* ==========================================================================
   STATS (tiles)
   ========================================================================== */
.cb-why { padding-top: 0; }

.cb-overview-tiles {
  margin-top: 6rem;
  padding-inline: 2rem;
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .cb-overview-tiles { grid-template-columns: repeat(6, 1fr); padding-inline: 12rem; }
}

.cb-tile {
  background: var(--gray);
  border-radius: 2rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-column: span 1;
  transition: background 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth);
}
@media (min-width: 768px) { .cb-tile { grid-column: span 2; } }
.cb-tile strong {
  font-size: 4rem;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.02em;
}
.cb-tile span { font-size: 1.5rem; opacity: 0.6; }
.cb-tile:hover { background: var(--black); color: var(--white); }
.cb-tile.-wide { grid-column: span 2; }

/* ==========================================================================
   ENTRIES (blog)
   ========================================================================== */
.cb-summary-entries {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.cb-entry { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) {
  .cb-entry { flex-direction: row; gap: 4rem; align-items: flex-start; }
}

.cb-entry-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.6rem;
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 768px) { .cb-entry-thumb { width: 40rem; } }

.cb-entry-body { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; }
.cb-entry-cat {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  padding: 0.6rem 1.4rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9999px;
  width: fit-content;
}
.cb-entry-body h3 {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 115%;
  text-wrap: balance;
}
.cb-entry-date { font-size: 1.4rem; opacity: 0.5; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.cb-faq { padding: 4rem 0 10rem; }
.cb-faq.-inverse { background: var(--black); color: var(--white); }
@media (min-width: 768px) { .cb-faq { padding: 4rem 0 16rem; } }

.cb-faq-list { border-top: 1px solid rgba(255,255,255,0.14); }

.cb-faq-item { border-bottom: 1px solid rgba(255,255,255,0.14); }

.cb-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 0;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 768px) { .cb-faq-item summary { font-size: 2.8rem; } }

.cb-faq-item summary::-webkit-details-marker { display: none; }

.cb-faq-icon {
  font-size: 3rem;
  font-weight: 300;
  transition: transform 0.5s var(--ease-smooth);
}
.cb-faq-item[open] .cb-faq-icon { transform: rotate(135deg); }

.cb-faq-answer {
  max-width: 60rem;
  font-size: 1.8rem;
  line-height: 140%;
  letter-spacing: 0.02em;
  padding-bottom: 3rem;
}

/* ==========================================================================
   OUTRO
   ========================================================================== */
.cb-outro {
  position: relative;
  background: var(--black);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.cb-outro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 40rem at 80% 0%, rgba(0,229,255,0.25), transparent 60%),
    radial-gradient(50rem 40rem at 10% 100%, rgba(255,46,196,0.2), transparent 60%),
    radial-gradient(40rem 30rem at 50% 60%, rgba(0,255,163,0.12), transparent 60%),
    var(--black);
}
.cb-outro-content {
  position: relative;
  padding: 14rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}
@media (min-width: 768px) { .cb-outro-content { padding: 20rem 12rem; } }

.cb-outro-title {
  font-size: 4.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 100%;
}
@media (min-width: 768px) { .cb-outro-title { font-size: 9rem; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.cb-footer {
  background: var(--black);
  color: var(--white);
  padding: 10rem 2rem 4rem;
}
@media (min-width: 768px) { .cb-footer { padding: 16rem 12rem 4rem; } }

.cb-footer-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

.cb-footer-locations {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 60rem;
  align-items: center;
}

.cb-footer-location { display: flex; flex-direction: column; gap: 1.6rem; align-items: center; }

.cb-footer-address { font-size: 2rem; font-weight: 500; line-height: 130%; }

.cb-footer-navs nav { display: flex; flex-direction: column; gap: 2rem; }
.cb-footer-navs .cb-nav-link { font-size: 2.2rem; }

.cb-footer-bgrid {
  margin-top: 8rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.cb-footer-copy { font-size: 1.4rem; opacity: 0.5; }

.cb-footer-social { display: flex; gap: 1.6rem; }

.cb-btn_round {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 600;
  transition: transform 0.5s var(--ease-elastic), background 0.3s, color 0.3s;
}
.cb-btn_round:hover { transform: scale(0.9); background: var(--white); color: var(--black); }

/* ==========================================================================
   MODAL
   ========================================================================== */
.cb-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  color: var(--black);
  display: grid;
  place-items: center;
  padding: 6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth);
}
.cb-modal.-show { opacity: 1; pointer-events: auto; }
.cb-modal[hidden] { display: none; }

.cb-modal-close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  font-size: 2.4rem;
}

.cb-modal-media {
  width: min(120rem, 90vw);
  aspect-ratio: 16/9;
  border-radius: 2rem;
  overflow: hidden;
}

/* ==========================================================================
   GALERÍA (carrusel)
   ========================================================================== */
.cb-gallery {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0,0,0,0.96);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth);
}
.cb-gallery.-show { opacity: 1; pointer-events: auto; }
.cb-gallery[hidden] { display: none; }

.cb-gallery-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.6rem;
  z-index: 2;
}
.cb-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 2.4rem;
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s, transform 0.5s var(--ease-elastic);
}
.cb-gallery-arrow:hover { background: var(--white); color: var(--black); transform: translateY(-50%) scale(0.9); }
.cb-gallery-arrow.-prev { left: 2rem; }
.cb-gallery-arrow.-next { right: 2rem; }

.cb-gallery-viewport {
  width: min(110rem, 88vw);
  overflow: hidden;
}
.cb-gallery-track {
  display: flex;
  transition: transform 0.6s var(--ease-smooth);
}
.cb-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  place-items: center;
}
.cb-gallery-slide img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 1.6rem;
}

.cb-gallery-counter {
  font-size: 1.5rem;
  opacity: 0.6;
  font-weight: 500;
}
.cb-gallery-name {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .cb-gallery-arrow { top: auto; bottom: 4rem; transform: none; }
  .cb-gallery-arrow:hover { transform: scale(0.9); }
  .cb-gallery-arrow.-prev { left: 1.5rem; }
  .cb-gallery-arrow.-next { right: 1.5rem; }
}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cb-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: currentColor;
  mix-blend-mode: exclusion;
  color: var(--white);
  transform: scale(0.1);
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  display: grid;
  place-items: center;
  transition: opacity 0.3s;
}
.cb-cursor.-active { opacity: 1; }
.cb-cursor.-pointer { transform: translate(-50%, -50%) scale(1); }
.cb-cursor.-lg { transform: translate(-50%, -50%) scale(1.6); }
.cb-cursor.-text { transform: translate(-50%, -50%) scale(3.4); }

.cb-cursor-text {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
}
.cb-cursor.-text .cb-cursor-text { opacity: 1; }
.cb-cursor.-hidden { opacity: 0; }

@media (hover: none), (pointer: coarse) { .cb-cursor { display: none; } }

/* ==========================================================================
   SONIDO (botón flotante)
   ========================================================================== */
.cb-sound {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 90;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--white);
  color: var(--black);
  display: grid;
  place-items: center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.14);
  transition: transform 0.5s var(--ease-elastic), background 0.3s, color 0.3s, border-color 0.3s;
}
.cb-sound:hover { transform: scale(0.9); background: var(--black); color: var(--white); border-color: var(--black); }
.cb-sound svg { width: 2.2rem; height: 2.2rem; }

.cb-sound-wave { display: none; align-items: flex-end; gap: 0.3rem; height: 1.8rem; }
.cb-sound-bar {
  width: 0.35rem;
  background: currentColor;
  border-radius: 2px;
  animation: cb-sound-bounce 1s var(--ease-smooth) infinite;
}
.cb-sound-bar:nth-child(2) { animation-delay: 0.2s; }
.cb-sound-bar:nth-child(3) { animation-delay: 0.4s; }
.cb-sound.-on .cb-sound-mute { display: none; }
.cb-sound.-on .cb-sound-wave { display: flex; }

@keyframes cb-sound-bounce {
  0%, 100% { height: 0.5rem; }
  50% { height: 1.8rem; }
}

@media (max-width: 767px) {
  .cb-sound { right: 1.5rem; bottom: 1.5rem; width: 5rem; height: 5rem; }
}

/* ==========================================================================
   TILES (imágenes placeholder)
   ========================================================================== */
.tile {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.tile-a  { background: linear-gradient(135deg, #0a0a0a, #1a2b22); }
.tile-a2 { background: linear-gradient(135deg, #00FFA3, #004d2e); }
.tile-b  { background: linear-gradient(135deg, #0a0a0a, #12263a); }
.tile-b2 { background: linear-gradient(135deg, #00E5FF, #00344a); }
.tile-c  { background: linear-gradient(135deg, #0a0a0a, #241a3a); }
.tile-c2 { background: linear-gradient(135deg, #B14BFF, #3a0a6e); }
.tile-d  { background: linear-gradient(135deg, #0a0a0a, #2b1a1a); }
.tile-d2 { background: linear-gradient(135deg, #FF2EC4, #6e003c); }
.tile-e  { background: linear-gradient(135deg, #0a0a0a, #1a1a2e); }
.tile-e2 { background: linear-gradient(135deg, #F2FF00, #4d5000); }
.tile-f  { background: linear-gradient(135deg, #0a0a0a, #1f2b1a); }
.tile-f2 { background: linear-gradient(135deg, #4ade80, #052e16); }
.tile-g  { background: linear-gradient(135deg, #052e16, #00FFA3); }
.tile-h  { background: linear-gradient(135deg, #00344a, #00E5FF); }
.tile-i  { background: linear-gradient(135deg, #3a0a6e, #B14BFF); }
.tile-video { background: linear-gradient(135deg, #0a0a0a, #1a1a2e); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cb-reveal, .cb-reveal-line { opacity: 1; transform: none; }
}