/* ==========================================================================
   MonteVIDEO Tech — capa de diseño v2
   Se carga DESPUÉS de site.css y solo aplica dentro de .v2, así que no toca
   ninguna de las páginas actuales. Reutiliza los tokens de site.css.
   ========================================================================== */

.v2 {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --scrim-top: rgba(0, 0, 0, 0.55);
  --scrim-bot: rgba(0, 0, 0, 0.88);
}

/* --------------------------------------------------------------------------
   Kicker — Manrope en mayúscula, igual que el resto del sitio.
   Sin guion decorativo delante.
   -------------------------------------------------------------------------- */
.v2 .kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 0.95vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.v2 .kicker--center { text-align: center; }

/* --------------------------------------------------------------------------
   Header transparente sobre el hero, sólido al scrollear
   -------------------------------------------------------------------------- */
.v2 .site-header--over {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
}
.v2 .site-header--over.is-stuck {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.v2 .site-header--over .site-header__logo img { height: 30px; }

/* --------------------------------------------------------------------------
   Hero cinematográfico
   -------------------------------------------------------------------------- */
.v2 .hero-v2 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: #0b0d0e;
  isolation: isolate;
}
.v2 .hero-v2__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.v2 .hero-v2__media img,
.v2 .hero-v2__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El póster queda debajo del video: si el video no arranca, no se ve un hueco. */
.v2 .hero-v2__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.v2 .hero-v2__media video.is-ready { opacity: 1; }

.v2 .hero-v2__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* banda superior más densa: el logo del header tiene que leerse aunque
       debajo pase el cielo del video */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.52) 18%,
      rgba(0, 0, 0, 0.54) 45%, var(--scrim-bot) 100%),
    radial-gradient(120% 80% at 15% 85%, rgba(76, 188, 172, 0.22), transparent 60%);
}

.v2 .hero-v2__inner {
  width: 100%;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(2rem, 5vh, 3.5rem);
}
.v2 { --teal-bright: #6fd8c7; }
/* Sobre el video el teal no llega a 4.5:1 contra el cielo ni con el scrim
   reforzado (da 3.0:1), así que el kicker del hero va en blanco: 5.1:1. */
.v2 .hero-v2 .kicker { color: rgba(255, 255, 255, 0.95); }

.v2 .hero-v2__title {
  color: #fff;
  font-size: clamp(2.45rem, 6.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 300;
  max-width: 17ch;
  margin: 0;
  text-wrap: balance;
}
.v2 .hero-v2__title strong { font-weight: 800; }
.v2 .hero-v2__title .tint { color: var(--teal); font-weight: 800; }

.v2 .hero-v2__sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 1.6rem 0 0;
}
.v2 .hero-v2 .btn-row { margin-top: 2.2rem; }
.v2 .hero-v2 .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.v2 .hero-v2 .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* Glifo de marca que reemplaza al emoji — gira lento, se detiene si el
   usuario pidió menos movimiento.
   Va dibujado en SVG y no como carácter: U+2733 (✳) tiene presentación de emoji
   por defecto, así que en el celular lo resolvía con la fuente de emoji y salía
   de color en vez del teal de marca. En SVG se ve igual en todos lados. */
.v2 .glyph {
  display: inline-block;
  color: var(--teal);
  animation: v2-spin 14s linear infinite;
  transform-origin: 50% 50%;
}
.v2 .glyph svg {
  display: block;
  /* al alto de una mayúscula del titular, para que acompañe la línea */
  width: 0.82em;
  height: 0.82em;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* Cifras dentro del hero */
.v2 .hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.v2 .hero-stats__n {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}
.v2 .hero-stats__l {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.v2 .scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  writing-mode: vertical-rl;
  text-decoration: none;
}
.v2 .scroll-cue::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
  animation: v2-cue 2.4s var(--ease) infinite;
}
@keyframes v2-cue {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@media (max-width: 780px) { .v2 .scroll-cue { display: none; } }

/* --------------------------------------------------------------------------
   Fila de logos — tres eventos, sin movimiento
   -------------------------------------------------------------------------- */
.v2 .logo-row--v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 8vw, 7rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.v2 .logo-row--v2 img {
  height: clamp(30px, 3.6vw, 46px);
  width: auto;
  opacity: 0.8;
  transition: opacity 0.25s var(--ease);
}
.v2 .logo-row--v2 a:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   Marquesina de logos (sin uso en el home; se conserva por si vuelve a hacer falta)
   -------------------------------------------------------------------------- */
.v2 .marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.v2 .marquee__track {
  display: flex;
  width: max-content;
  animation: v2-marquee 34s linear infinite;
}
.v2 .marquee:hover .marquee__track,
.v2 .marquee:focus-within .marquee__track { animation-play-state: paused; }
.v2 .marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
  padding-right: clamp(3rem, 7vw, 6rem);
}
.v2 .marquee__group a { display: block; }
.v2 .marquee__group img {
  height: clamp(26px, 3.4vw, 40px);
  width: auto;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease);
}
.v2 .marquee__group a:hover img { opacity: 1; }
@keyframes v2-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Sección oscura + banda de cifras
   -------------------------------------------------------------------------- */
.v2 .section--ink {
  background: var(--black);
  color: #fff;
}
.v2 .section--ink h2,
.v2 .section--ink h3 { color: #fff; }
.v2 .section--ink p { color: rgba(255, 255, 255, 0.72); }
.v2 .section--ink .section-title::after { background: rgba(255, 255, 255, 0.18); }

/* --------------------------------------------------------------------------
   Bento de valores — una grande + tres chicas
   -------------------------------------------------------------------------- */
.v2 .bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.v2 .bento__cell {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 190px;
}
.v2 .bento__cell--feature {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--black);
  border-color: transparent;
  color: #fff;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 380px;
}
.v2 .bento__cell--feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.v2 .bento__cell--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 12%, rgba(0, 0, 0, 0.25) 65%, transparent);
}
.v2 .bento__cell--feature > * { position: relative; z-index: 1; }
.v2 .bento__cell--accent { background: var(--teal); border-color: transparent; }
.v2 .bento__cell--accent .bento__t,
.v2 .bento__cell--accent .bento__p { color: #fff; }
.v2 .bento__cell--accent .bento__p { color: rgba(255, 255, 255, 0.9); }

.v2 .bento__n {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.v2 .bento__cell--feature .bento__n { color: rgba(255, 255, 255, 0.6); }
.v2 .bento__cell--accent .bento__n { color: rgba(255, 255, 255, 0.75); }
.v2 .bento__t {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.v2 .bento__cell--feature .bento__t {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
}
.v2 .bento__p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.v2 .bento__cell--feature .bento__p { color: rgba(255, 255, 255, 0.85); max-width: 46ch; }
/* Celda ancha: ocupa la fila entera y limita el ancho de lectura. El span se
   reduce con el viewport; si se deja fijo en 3, el grid crea columnas implícitas
   en móvil y la página desborda. */
.v2 .bento__cell--wide { grid-column: span 3; }
.v2 .bento__cell--wide .bento__p { max-width: 72ch; }

@media (max-width: 900px) {
  .v2 .bento { grid-template-columns: repeat(2, 1fr); }
  .v2 .bento__cell--feature { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .v2 .bento__cell--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .v2 .bento { grid-template-columns: 1fr; }
  .v2 .bento__cell--feature,
  .v2 .bento__cell--wide { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   Bloque de proyecto con numeración editorial
   -------------------------------------------------------------------------- */
.v2 .idx-list { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.v2 .idx-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .idx-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.v2 .idx-item__n {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  padding-top: 0.35rem;
  letter-spacing: 0.06em;
}
.v2 .idx-item__t {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}
.v2 .idx-item__p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); }
.v2 .idx-item__go { align-self: center; white-space: nowrap; }
@media (max-width: 700px) {
  .v2 .idx-item { grid-template-columns: auto 1fr; }
  .v2 .idx-item__go { grid-column: 2; justify-self: start; margin-top: 0.9rem; }
}

/* --------------------------------------------------------------------------
   Bloque destacado a sangre (Next event)
   -------------------------------------------------------------------------- */
.v2 .feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.v2 .feature--reverse > :first-child { order: 2; }
.v2 .feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.v2 .feature__media img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
  .v2 .feature { grid-template-columns: 1fr; }
  .v2 .feature--reverse > :first-child { order: 0; }
}

/* --------------------------------------------------------------------------
   Títulos de sección v2 — más grandes y con más aire
   -------------------------------------------------------------------------- */
.v2 .h-display {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
.v2 .h-display strong { font-weight: 800; }
.v2 .h-display .tint { color: var(--accent); font-weight: 800; }

/* --------------------------------------------------------------------------
   Accesibilidad: sin movimiento si el sistema lo pide
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2 .marquee__track,
  .v2 .glyph,
  .v2 .scroll-cue::after { animation: none; }
  .v2 .hero-v2__media video { display: none; }
}

/* --------------------------------------------------------------------------
   Correcciones detectadas al revisar la v2 renderizada
   -------------------------------------------------------------------------- */

/* La galería usa auto-fit con minmax(220px), y en el contenedor ancho generaba
   más pistas que imágenes: las tres quedaban chicas y sueltas. Con tres fotos
   fijas, tres columnas explícitas. */
.v2 .gallery { grid-template-columns: repeat(3, 1fr); }
.v2 .gallery > picture { display: block; }
@media (max-width: 720px) { .v2 .gallery { grid-template-columns: 1fr; } }

/* El botón fantasma solo estaba definido dentro del hero; en las secciones
   oscuras caía al relleno sólido y se perdía la jerarquía entre los dos CTA. */
.v2 .section--ink .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.v2 .section--ink .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}


/* --------------------------------------------------------------------------
   Carrusel de fotos de comunidad
   Scroll nativo con snap: funciona sin JS, con dedo, con rueda y con teclado.
   Los botones solo empujan el scroll.
   -------------------------------------------------------------------------- */
.v2 .shots__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.v2 .shots__nav { display: flex; gap: 0.6rem; flex-shrink: 0; }
.v2 .shots__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.v2 .shots__btn svg { width: 20px; height: 20px; }
.v2 .shots__btn:hover { background: var(--accent); color: #fff; border-color: transparent; }
.v2 .shots__btn[disabled] { opacity: 0.3; pointer-events: none; }

.v2 .shots {
  /* El sangrado va acá y no en .shots__track: el track es width:max-content, o sea
     una caja sin ancho definido, y el padding porcentual contra ella daba valores
     distintos según el contexto. .shots sí tiene ancho definido. */
  padding-inline: max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)));
  /* Sin scroll-padding, el snap alinea la primera foto al borde del scrollport y
     se come el sangrado: el navegador scrollea 100px solo y la foto queda pegada
     al borde de la ventana. */
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.v2 .shots::-webkit-scrollbar { display: none; }
.v2 .shots__track {
  display: flex;
  list-style: none;
  padding-block: 0;
  margin: 0;
  /* Sin max-content el flex se queda del ancho del scroller, los items lo
     desbordan y el scroll-snap devuelve la posición a cero. */
  width: max-content;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);

}
.v2 .shots__item {
  list-style: none;
  flex: 0 0 clamp(240px, 30vw, 400px);
  scroll-snap-align: start;
}
.v2 .shots__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
@media (max-width: 640px) {
  .v2 .shots__head { flex-direction: column; align-items: flex-start; }
  .v2 .shots__item { flex-basis: 78vw; }
}
@media (prefers-reduced-motion: reduce) { .v2 .shots { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   Panel de Mate Talks — tarjetas parejas
   El problema del original: bios de 3 a 15 líneas dejaban la grilla dentada.
   Acá el retrato tiene ratio fijo, nombre y rol caen siempre a la misma altura,
   y la bio se recorta a cuatro líneas con un botón para expandirla.
   -------------------------------------------------------------------------- */
.v2 .panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 940px) { .v2 .panel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v2 .panel-grid { grid-template-columns: 1fr; } }

.v2 .panelist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .panelist:hover { border-color: var(--accent); transform: translateY(-2px); }

.v2 .panelist__n {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 0.9rem;
}
.v2 .panelist__photo {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  margin-bottom: 1rem;
}
.v2 .panelist__photo img {
  width: 100%;
  /* Antes 4:5. Ocupaba demasiada página con seis retratos. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
}
.v2 .panelist__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.25;
}
.v2 .panelist__name strong { font-weight: 800; }

.v2 .panelist__li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.v2 .panelist__li svg { width: 15px; height: 15px; fill: currentColor; }
.v2 .panelist__li:hover { color: var(--accent-dark); }

/* line-clamp no sirve acá: la bio son varios <p> y el -webkit-box solo cuenta
   líneas de su propio flujo inline, así que no recortaba nada. Con max-height
   funciona con cualquier cantidad de párrafos. */
.v2 .panelist__bio {
  position: relative;
  max-height: 7.8em;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  transition: max-height 0.3s var(--ease);
}
.v2 .panelist__bio::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.2em;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.v2 .panelist__bio.is-open { max-height: none; }
.v2 .panelist__bio.is-open::after { opacity: 0; }
.v2 .panelist__bio p { margin: 0 0 0.8rem; }
.v2 .panelist__bio p:last-child { margin-bottom: 0; }

.v2 .panelist__more {
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v2 .panelist__more:hover { color: var(--accent-dark); }

/* Hero con foto fija (sin video): un poco menos alto que el del home */
/* Más alto que antes: al sacarle las cifras, el hero necesitaba aire para que
   el video del fondo se luzca. */
.v2 .hero-v2--short { min-height: min(88svh, 840px); }

/* --------------------------------------------------------------------------
   Barra superior fija: ticker + header juntos
   El header de la v2 va fijo sobre el hero. Si el ticker quedara fuera, se iría
   con el scroll y el header lo taparía. Los dos viajan en el mismo contenedor.
   -------------------------------------------------------------------------- */
.v2 .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}
.v2 .topbar .site-header--over { position: static; }

/* ==========================================================================
   Componentes de Summer Camp 2023
   ========================================================================== */

/* Header blanco translúcido sobre el hero con foto */
.v2 .site-header--glass.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
}
.v2 .site-header--glass:not(.is-stuck) .archive-badge {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.v2 .site-header--glass:not(.is-stuck) .site-header__logo img { filter: brightness(0) invert(1); }

/* Sticker del hero */
.v2 .hero-sticker { margin: 0 0 1.75rem; }
.v2 .hero-sticker img { width: 100%; max-width: 300px; }

/* Aviso de edición cerrada, sobre fondo oscuro */
.v2 .notice--on-dark {
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  text-align: left;
  backdrop-filter: blur(6px);
}
.v2 .notice--on-dark strong { color: #fff; }

/* Datos del hero cuando son texto y no cifras */
.v2 .hero-stats__v {
  display: block;
  margin: 0.4rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  max-width: 22ch;
}
.v2 .hero-stats dt { order: -1; }

/* --------------------------------------------------------------------------
   Badges de audiencia — los emojis sueltos ahora viven en un disco de color
   -------------------------------------------------------------------------- */
.v2 .badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.v2 .badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .badge-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.v2 .badge-card__ico {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.v2 .badge-card__ico img { width: 44px; height: 44px; }
.v2 .badge-card__t {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.35;
}
@media (max-width: 860px) { .v2 .badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .v2 .badges { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Par de tarjetas grandes
   -------------------------------------------------------------------------- */
.v2 .split-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}
@media (max-width: 820px) { .v2 .split-cards { grid-template-columns: 1fr; } }

.v2 .big-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
  min-height: 260px;
}
.v2 .big-card--ink { background: var(--purple); color: #fff; }
.v2 .big-card--accent { background: var(--magenta); color: #fff; }
.v2 .big-card__n {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
}
.v2 .big-card__t {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.v2 .big-card__p { margin: 0; color: rgba(255, 255, 255, 0.88); line-height: 1.6; }
.v2 .big-card__p strong { color: #fff; }

/* Chips (los ítems que eran viñetas) */
.v2 .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
}
.v2 .chips li {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v2 .chips--outline li {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Ficha de proyecto (Summer Project / Hackathon)
   -------------------------------------------------------------------------- */
.v2 .spec {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.v2 .spec__t {
  margin: 0 0 0.9rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
}
.v2 .spec__meta {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.65rem;
}
.v2 .spec__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line-soft);
}
.v2 .spec__meta dt { font-size: 0.9rem; color: var(--ink-muted); }
.v2 .spec__meta dd { margin: 0; font-size: 0.9rem; font-weight: 700; text-align: right; }
.v2 .techs {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  padding-top: 1.5rem;
}
.v2 .techs img { height: 30px; width: auto; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Repos — los tres botones sueltos ahora son tarjetas
   -------------------------------------------------------------------------- */
.v2 .repos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.v2 .repo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .repo:hover {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
}
.v2 .repo__t { font-weight: 800; font-size: clamp(0.98rem, 1.5vw, 1.1rem); }
.v2 .repo__go { font-size: 1.35rem; line-height: 1; opacity: 0.55; }
.v2 .repo:hover .repo__go { opacity: 1; }
@media (max-width: 780px) { .v2 .repos { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Lista con tilde y lista de beneficios con emoji
   -------------------------------------------------------------------------- */
.v2 .ticks { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.6rem; }
.v2 .ticks li { position: relative; padding-left: 1.75rem; color: var(--ink-soft); line-height: 1.6; }
.v2 .ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.v2 .perks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.9rem; }
.v2 .perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  line-height: 1.6;
}
.v2 .perks__ico {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Tarjetas con foto (cultural exchange)
   -------------------------------------------------------------------------- */
.v2 .photo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.v2 .photo-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: var(--purple);
}
.v2 .photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2 .photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 4, 80, 0.92) 8%, rgba(44, 4, 80, 0.25) 55%, transparent);
}
.v2 .photo-card__t {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
}
@media (max-width: 820px) { .v2 .photo-cards { grid-template-columns: 1fr; } .v2 .photo-card { min-height: 240px; } }

/* --------------------------------------------------------------------------
   Cita destacada
   -------------------------------------------------------------------------- */
.v2 .pullquote {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Participantes
   -------------------------------------------------------------------------- */
.v2 .guest {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.v2 .guest__head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.v2 .guest__photo { flex: 0 0 84px; border-radius: 50%; overflow: hidden; }
.v2 .guest__photo img { width: 84px; height: 84px; object-fit: cover; }
.v2 .guest__name { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.v2 .guest__role { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-muted); }
.v2 .guest__bio { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.v2 .guest__faq { margin-top: auto; padding-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */
.v2 .quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.v2 .quote blockquote { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.v2 .quote blockquote p { margin: 0 0 0.9rem; }
.v2 .quote figcaption { margin-top: auto; padding-top: 1.5rem; }
.v2 .quote__name { margin: 0; font-size: 1rem; }
.v2 .quote__role { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--ink-muted); }

/* El sticker del hero y el logo del header son la misma marca. Mientras el
   header está transparente sobre el hero manda el sticker; el logo aparece
   cuando el header se vuelve sólido al scrollear. Así no se ven duplicados
   y no se pierde ninguno de los dos. */
.v2 .site-header--glass:not(.is-stuck) .site-header__logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.v2 .site-header--glass.is-stuck .site-header__logo { opacity: 1; }

/* Los iconos ilustrados de 2024 son más grandes que los emojis de 2023 */
.v2 .badge-card__ico--lg { width: 96px; height: 96px; background: transparent; }
.v2 .badge-card__ico--lg img { width: 72px; height: 72px; }

/* --------------------------------------------------------------------------
   Hero de Summer Camp 2024
   El banner de cuadraditos es el fondo, entero y sin deformar. Encima va un velo
   morado translúcido: el banner se sigue viendo debajo y el texto se lee.
   El H1 es la bajada de la edición; el nombre de marca ya lo trae el banner.
   -------------------------------------------------------------------------- */
.v2 .hero-2024 {
  position: relative;
  display: grid;
  align-items: center;
  background: var(--purple);
  color: #fff;
  isolation: isolate;
}
.v2 .hero-2024__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.v2 .hero-2024__bg img {
  width: 100%;
  height: 100%;
  /* Encuadre corrido a la franja de cuadraditos: el título horneado del banner
     queda fuera de cuadro y no se pisa con el H1. */
  object-fit: cover;
  object-position: center 84%;
  display: block;
}
.v2 .hero-2024__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dos capas: una vertical suave que unifica, y una horizontal que tapa hasta
     el 62%. El título horneado del banner está centrado y no hay margen de
     recorte para sacarlo sin ampliar la imagen, así que ahí el velo cierra;
     del 78% en adelante se abre y los cuadraditos se ven nítidos. */
  background:
    linear-gradient(to right, rgba(28, 3, 52, 0.99) 0%, rgba(28, 3, 52, 0.985) 68%,
      rgba(44, 4, 80, 0.55) 80%, rgba(44, 4, 80, 0.38) 100%),
    linear-gradient(to bottom, rgba(30, 3, 56, 0.35) 0%, rgba(44, 4, 80, 0.2) 55%, rgba(30, 3, 56, 0.45) 100%);
}
.v2 .hero-2024__text {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
}
.v2 .hero-2024 .kicker { color: var(--yellow); }
.v2 .hero-2024__title {
  margin: 0;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 300;
  color: #fff;
  max-width: 20ch;
  text-wrap: balance;
}
.v2 .hero-2024__title strong { font-weight: 800; }
.v2 .hero-2024__brand {
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.v2 .hero-2024 .notice--on-dark { margin-top: 2rem; }


/* ==========================================================================
   Summer Camp 2025 — la banda violeta de la edición original
   El original abre con un degradado violeta que cubre el hero, el video y los
   proyectos, y recién después pasa a blanco. Se respeta esa estructura.
   ========================================================================== */
.v2 .band-violet {
  background: linear-gradient(to bottom, #2c065e 0%, #6a17d4 42%, #9027ff 100%);
  color: #fff;
}
.v2 .band-violet h1,
.v2 .band-violet h2,
.v2 .band-violet h3,
.v2 .band-violet .section-title { color: #fff; }
.v2 .band-violet p,
.v2 .band-violet li { color: rgba(255, 255, 255, 0.86); }
.v2 .band-violet .lead { color: rgba(255, 255, 255, 0.92); }
.v2 .band-violet .kicker { color: #ffd6f4; }
.v2 .band-violet .section-title::after { background: rgba(255, 255, 255, 0.28); }
.v2 .band-violet .link,
.v2 .band-violet .prose a { color: #ffd6f4; }

/* Tarjetas dentro de la banda: vidrio esmerilado en vez de blanco sólido */
.v2 .band-violet .card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}
.v2 .band-violet .card__title { color: #fff; }
.v2 .band-violet .card__text { color: rgba(255, 255, 255, 0.86); }

/* El aviso de edición cerrada, sobre violeta */
.v2 .band-violet .notice--archive {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.v2 .band-violet .notice--archive strong { color: #fff; }

/* Los iconos 3D del hero llevan sombra propia, no necesitan caja */
.v2 .band-violet .hero img { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35)); }

/* Dentro de la banda, las secciones no pintan su propio fondo: taparían el
   degradado y dejarían el texto blanco sobre gris. */
.v2 .band-violet .section--alt,
.v2 .band-violet .section--accent-soft,
.v2 .band-violet .section--ink { background: transparent; }

/* Franja de cierre de 2025: la original usa un lila claro, no negro. */
.v2 .band-lila { background: #c38bff; color: #22004a; }
.v2 .band-lila h2, .v2 .band-lila h3 { color: #22004a; }
.v2 .band-lila img { filter: brightness(0) saturate(100%) invert(6%) sepia(60%) saturate(3000%) hue-rotate(266deg); }

/* --------------------------------------------------------------------------
   Summer Camp 2025 — componentes que la edición original resolvía mejor
   -------------------------------------------------------------------------- */

/* "2 experiences for you": título a la izquierda, los dos ítems compactos al
   lado. Antes eran dos tarjetas grandes que ocupaban media pantalla. */
.v2 .two-exp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.v2 .two-exp__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  max-width: 12ch;
}
.v2 .two-exp__item { display: flex; align-items: center; gap: 1rem; }
.v2 .two-exp__item img { width: 68px; height: auto; flex-shrink: 0; }
.v2 .two-exp__name {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v2 .two-exp__meta { margin: 0; font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 900px) {
  .v2 .two-exp { grid-template-columns: 1fr; }
  .v2 .two-exp__title { max-width: none; }
}

/* Campers: seis por fila y avatar chico, como la original. Antes eran cuatro
   fotos grandes que se comían la página. */
.v2 .people--compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
/* Los retratos de origen van de 100 a 460 px de ancho (la más chica es
   dylan.jpeg, 100×100). Mostrándolos a ~183 px se ampliaban y se pixelaban, así
   que se topean a 88 px: la más chica queda casi a escala 1:1 y el resto entra
   con densidad de sobra. */
.v2 .people--compact .person__photo {
  /* .person__photo es un <a>, o sea inline: sin display:block el max-width se
     ignora y la foto se estira al ancho de la columna. */
  display: block;
  border-radius: var(--radius);
  margin: 0 auto 0.7rem;
  max-width: 88px;
}
.v2 .people--compact .person__photo img { aspect-ratio: 1 / 1; }
.v2 .people--compact .person__name { font-size: 0.85rem; line-height: 1.3; }
.v2 .people--compact .person__role { font-size: 0.78rem; }
@media (max-width: 1080px) { .v2 .people--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .v2 .people--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .v2 .people--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Testimonios: columnas anchas y altura pareja. Antes eran tres columnas
   angostas con textos de largo muy distinto. */
.v2 .quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}

/* ==========================================================================
   Summer Camp 2026 — componentes de la edición original
   Acá no se rediseña: se replica. Colores muestreados de la original:
     banda gris #E5E5E5 · morado #2C0450 · celeste #49B4F9
     magenta #F21990 · rosa de titulares #F44579 · amarillo #F9C739
   Todo vive bajo .sc26, que va en el mismo <body> que .v2: por eso el selector
   es compuesto (.v2.sc26) y no descendiente.
   ========================================================================== */
.v2.sc26 { --pink: #F44579; --band: #E5E5E5; }

/* Kicker en píldora con borde.
   Va sobre `p.pill` y no sobre `.pill` porque site.css ya usa `.pill` para los
   chips de metadatos (`li.pill`, `span.pill`), y en about-summer-project
   conviven los dos usos en la misma página. */
.v2.sc26 p.pill {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  padding: 0.4rem 0.95rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 1.25rem;
}
.v2.sc26 p.pill--ink { color: var(--purple); }

/* Titulares rosados, alineados a la izquierda y a dos tonos */
.v2.sc26 .h26 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--purple);
  text-wrap: balance;
}
.v2.sc26 .h26 .pink { color: var(--pink); }
.v2.sc26 .h26--pink { color: var(--pink); }

/* Banda con esquinas muy redondeadas */
.v2.sc26 .band26 {
  background: var(--band);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}

/* --------------------------------------------------------------------------
   Acordeón: filas finas con botón circular amarillo y flecha magenta
   -------------------------------------------------------------------------- */
.v2.sc26 .faq { gap: 0; }
.v2.sc26 .faq details {
  border: 0;
  border-top: 1px solid rgba(44, 4, 80, 0.14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.v2.sc26 .faq details:last-of-type { border-bottom: 1px solid rgba(44, 4, 80, 0.14); }
.v2.sc26 .faq details[open] { border-color: rgba(44, 4, 80, 0.14); box-shadow: none; }

.v2.sc26 .faq__group-title {
  color: var(--blue);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 400;
  margin: 0 0 1.1rem;
}
.v2.sc26 .faq summary {
  padding: 1.15rem 0;
  gap: 1.5rem;
  align-items: center;
  color: var(--purple);
  font-weight: 400;
  font-size: 1rem;
}
/* el chevron de site.css se reemplaza por el círculo amarillo */
.v2.sc26 .faq summary::after {
  content: "↗";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 0;
  rotate: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--magenta);
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.v2.sc26 .faq details[open] summary::after {
  rotate: none;
  transform: rotate(90deg);
  background: var(--magenta);
  color: var(--yellow);
}
.v2.sc26 .faq summary:hover { color: var(--magenta); }
.v2.sc26 .faq__answer { padding: 0 4rem 1.3rem 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Tarjeta de testimonio morada
   -------------------------------------------------------------------------- */
.v2.sc26 .testi26 {
  background: var(--purple);
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
}
.v2.sc26 .testi26__mark {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7vw, 6rem);
  line-height: 0.62;
  color: var(--magenta);
  height: 2.4rem;
}
.v2.sc26 .testi26 blockquote { margin: 0; line-height: 1.62; color: rgba(255, 255, 255, 0.92); }
.v2.sc26 .testi26 blockquote p { margin: 0 0 0.9rem; }
.v2.sc26 .testi26 blockquote p:last-child { margin-bottom: 0; }
.v2.sc26 .testi26__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}
.v2.sc26 .testi26__avatar { flex: 0 0 58px; border-radius: 50%; overflow: hidden; }
.v2.sc26 .testi26__avatar img { width: 58px; height: 58px; object-fit: cover; }
.v2.sc26 .testi26__name { display: block; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--blue); }
.v2.sc26 .testi26__role {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.v2.sc26 .testi26__nav { display: flex; gap: 0.6rem; margin-left: auto; }
.v2.sc26 .testi26__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--purple);
  font-size: 1.1rem;
  transition: background 0.2s var(--ease);
}
.v2.sc26 .testi26__btn:hover { background: #fff; }
.v2.sc26 .testi26__btn[disabled] { opacity: 0.35; pointer-events: none; }

/* --------------------------------------------------------------------------
   Bloque de contacto amarillo
   -------------------------------------------------------------------------- */
.v2.sc26 .contact26 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
/* La foto era un bloque vertical de 736px que le ganaba al formulario.
   Ahora es apaisada y la nota deja de estar encima: se lee. */
.v2.sc26 .contact26__aside {
  display: flex;
  flex-direction: column;
  /* centrada: en 2027 no hay nota debajo, y con el tope de alto de la foto el
     sobrante quedaba todo junto abajo. Repartido arriba y abajo se lee como aire. */
  justify-content: center;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  min-width: 0;
}
.v2.sc26 .contact26__form {
  background: var(--yellow);
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--purple);
}
.v2.sc26 .contact26__form p.pill { color: var(--purple); }
.v2.sc26 .contact26__form .h26 { color: var(--pink); }
.v2.sc26 .contact26__intro { margin: 0.9rem 0 1.35rem; line-height: 1.55; }
.v2.sc26 .field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.v2.sc26 .field label,
.v2.sc26 .checks__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: rgba(44, 4, 80, 0.72);
}
.v2.sc26 .field .req { color: #d3282f; }
.v2.sc26 .field input,
.v2.sc26 .field textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  color: var(--purple);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.v2.sc26 .field input:hover,
.v2.sc26 .field textarea:hover { background: #fff; }
.v2.sc26 .field input:focus-visible,
.v2.sc26 .field textarea:focus-visible {
  outline: 0;
  background: #fff;
  border-color: var(--magenta);
}
.v2.sc26 .field textarea { min-height: 96px; resize: vertical; }
.v2.sc26 .field input::placeholder,
.v2.sc26 .field textarea::placeholder { color: rgba(44, 4, 80, 0.45); }
.v2.sc26 .checks { margin-bottom: 1.15rem; border: 0; padding: 0; }
.v2.sc26 .checks__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Ficha seleccionable: la casilla nativa sigue ahí, encima y transparente,
   así el teclado y los lectores de pantalla la siguen viendo. */
.v2.sc26 .chk { position: relative; display: inline-flex; }
.v2.sc26 .chk input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.v2.sc26 .chk__t {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(44, 4, 80, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--purple);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.v2.sc26 .chk:hover .chk__t { background: #fff; border-color: rgba(44, 4, 80, 0.4); }
.v2.sc26 .chk input:checked + .chk__t {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.v2.sc26 .chk input:checked + .chk__t::before { content: "\2713\00a0"; }
.v2.sc26 .chk input:focus-visible + .chk__t {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.v2.sc26 .contact26__send { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.v2.sc26 .btn--sky { background: var(--blue); color: #fff; border-color: transparent; }
.v2.sc26 .btn--sky:hover { background: #2fa2ee; }

/* Foto con la píldora flotante */
.v2.sc26 .contact26__photo {
  position: relative;
  flex: 1 1 auto;
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
  overflow: hidden;
  min-height: clamp(260px, 30vw, 420px);
}
/* El tope solo hace falta cuando debajo va la nota del corazón (2026 y las demás):
   ahí sin tope la foto se estiraba y quedaba más alta que ancha. En 2027 no hay nota,
   así que la foto llena la columna y queda del mismo alto que el formulario. */
.v2.sc26 .contact26__aside:has(.floating-note) .contact26__photo { max-height: 620px; }
.v2.sc26 .contact26__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2.sc26 .floating-note {
  margin-top: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.35rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.v2.sc26 .floating-note__ico {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--purple);
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .v2.sc26 .contact26 { grid-template-columns: 1fr; }
  .v2.sc26 .field-row { grid-template-columns: 1fr; }
  .v2.sc26 .faq__answer { padding-right: 0; }
}

/* Intro de la página de FAQs: texto a la izquierda y el CTA al costado */
.v2.sc26 .intro26 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: 1.5rem;
}
.v2.sc26 .intro26 > p { margin: 0; color: var(--ink-soft); line-height: 1.65; max-width: 52ch; }
.v2.sc26 .intro26__cta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.v2.sc26 .intro26__cta p { margin: 0; color: var(--purple); }
@media (max-width: 820px) { .v2.sc26 .intro26 { grid-template-columns: 1fr; } }

/* Banda de testimonios: encabezado a la izquierda, tarjeta morada a la derecha */
.v2.sc26 .testi26-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.v2.sc26 .testi26-band__deck { position: relative; }
.v2.sc26 .testi26-track {
  display: flex;
  /* Sin esto los ítems de flex se estiran al alto del más alto: la tarjeta de
     James quedaba con media caja morada vacía porque la de David es larga. Ahora
     cada recuadro mide lo que mide su testimonio. */
  align-items: flex-start;
  min-width: 0;
  /* El alto lo maneja testi26.js, que lo ajusta a la tarjeta a la vista. `hidden`
     y no `auto` para que no aparezca una barra vertical mientras la transición
     achica el alto. */
  transition: height 0.25s var(--ease);
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: clamp(1rem, 2vw, 1.5rem);
  scrollbar-width: none;
}
.v2.sc26 .testi26-track::-webkit-scrollbar { display: none; }
.v2.sc26 .testi26-track .testi26 {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding-bottom: clamp(4.5rem, 7vw, 5.5rem);
}
/* la navegación flota sobre la esquina inferior derecha de la tarjeta visible */
/* Los botones iban flotando en la esquina de la tarjeta, con el `bottom` medido
   contra el deck. Desde que cada tarjeta mide lo que mide su testimonio, el deck
   ya no termina donde termina la tarjeta visible: con una cita corta los botones
   quedaban montados sobre su borde inferior. Y no hay `bottom` que sirva, porque
   cada tarjeta del carrusel tiene un alto distinto. Van debajo, alineados a la
   derecha, igual que los del carrusel de fotos (`.shots__after`). */
.v2.sc26 .testi26-band__deck > .testi26__nav {
  position: static;
  justify-content: flex-end;
  margin: 1.1rem 0 0;
}
@media (max-width: 900px) {
  /* minmax(0,1fr) y no 1fr: el mínimo de 1fr es min-content, y el track del
     carrusel lo empuja a 853px aunque tenga overflow-x:auto. */
  .v2.sc26 .testi26-band { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .v2.sc26 .testi26-track { scroll-behavior: auto; transition: none; } }

/* Navegación del carrusel de fotos cuando va debajo, no en el encabezado */
.v2.sc26 .shots__after { display: flex; justify-content: flex-end; margin-top: 1.1rem; }

/* El <fieldset> trae borde y padding propios del navegador; la original no los tiene */
.v2.sc26 .checks { border: 0; padding: 0; margin-inline: 0; }
.v2.sc26 .checks__title { padding: 0; }
.v2.sc26 .checks__list input[type="checkbox"] { accent-color: var(--magenta); }

/* --------------------------------------------------------------------------
   summercamp2026 — la banda morada y las tarjetas de color de la original
   Degradado muestreado del original: arranca casi blanco (#EDE7F3) y baja
   hasta el morado de marca (#2C0450).
   -------------------------------------------------------------------------- */
.v2.sc26 .band-morada26 {
  background: linear-gradient(to bottom, #EDE7F3 0%, #BFA7D4 12%, #8A6DA5 45%, #5C3D78 78%, #2C0450 100%);
  color: #fff;
}
.v2.sc26 .band-morada26 .section--alt,
.v2.sc26 .band-morada26 .section--accent-soft { background: transparent; }
.v2.sc26 .band-morada26 h2,
.v2.sc26 .band-morada26 h3 { color: #fff; }
.v2.sc26 .band-morada26 .h26 { color: #fff; }
.v2.sc26 .band-morada26 p { color: rgba(255, 255, 255, 0.9); }
.v2.sc26 .band-morada26 p.pill { color: #fff; }
/* arriba el degradado es casi blanco: ahí el texto tiene que ser oscuro */
.v2.sc26 .band-morada26 > .section:first-child p.pill { color: var(--purple); }
.v2.sc26 .band-morada26 > .section:first-child h2 { color: var(--purple); }
.v2.sc26 .band-morada26 > .section:first-child > .container > .container--narrow p { color: var(--ink-soft); }

/* Título del hero a dos tonos: violeta + magenta */
.v2.sc26 .hero26 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--violet);
}
.v2.sc26 .hero26 .pink { color: var(--magenta); }

/* Tarjetas de color */
.v2.sc26 .card26 { border: 0; overflow: hidden; }
.v2.sc26 .card26--magenta { background: var(--magenta); color: #fff; }
.v2.sc26 .card26--sky { background: var(--blue); color: #fff; }
.v2.sc26 .card26--magenta .card__title,
.v2.sc26 .card26--sky .card__title { color: #fff; }
.v2.sc26 .card26--magenta .card__text,
.v2.sc26 .card26--sky .card__text { color: rgba(255, 255, 255, 0.92); }

/* Tarjeta de vidrio sobre la banda, con el título en amarillo */
.v2.sc26 .card26--glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  color: #fff;
}
.v2.sc26 .card26__t { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 400; }
.v2.sc26 .card26__t a { color: var(--yellow); }
.v2.sc26 .card26__t strong { font-weight: 800; }
.v2.sc26 .card26--glass .lead {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.v2.sc26 .card26--glass .card__text { color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   Subpáginas de proyectos 2025 — la página entera va sobre el violeta
   La edición original no usa una banda: el degradado cubre todo el documento,
   de #2C065E arriba a #9027FF, y aclara al final.
   ========================================================================== */
.v2.page-violeta25 {
  background: linear-gradient(to bottom, #2c065e 0%, #7a1ce4 18%, #9027ff 45%, #9027ff 78%, #a558ff 100%);
  color: #fff;
}
.v2.page-violeta25 main { background: transparent; }
.v2.page-violeta25 .section--alt,
.v2.page-violeta25 .section--accent-soft { background: transparent; }
.v2.page-violeta25 h1,
.v2.page-violeta25 h2,
.v2.page-violeta25 h3,
.v2.page-violeta25 h4 { color: #fff; }
.v2.page-violeta25 p,
.v2.page-violeta25 li { color: rgba(255, 255, 255, 0.88); }
.v2.page-violeta25 .lead { color: rgba(255, 255, 255, 0.94); }
.v2.page-violeta25 .kicker,
.v2.page-violeta25 .eyebrow { color: #ffd6f4; }
.v2.page-violeta25 .section-title::after { background: rgba(255, 255, 255, 0.26); }
.v2.page-violeta25 .link,
.v2.page-violeta25 .prose a { color: #ffd6f4; }

/* Tarjetas en vidrio esmerilado en lugar de blanco sólido */
.v2.page-violeta25 .card {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}
.v2.page-violeta25 .card__title { color: #fff; }
.v2.page-violeta25 .card__text { color: rgba(255, 255, 255, 0.88); }
.v2.page-violeta25 .person__name { color: #fff; }
.v2.page-violeta25 .person__role { color: rgba(255, 255, 255, 0.72); }

/* Píldoras de metadatos */
.v2.page-violeta25 .chip,
.v2.page-violeta25 .tag {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

/* El header blanco sobre violeta necesita su propio fondo */
.v2.page-violeta25 .site-header { background: rgba(255, 255, 255, 0.96); }
.v2.page-violeta25 .site-header h1,
.v2.page-violeta25 .site-header h2 { color: var(--purple); }

/* Franja de cierre en lila claro, como la original */
.v2.page-violeta25 .band-lila { background: #c38bff; color: #22004a; }
.v2.page-violeta25 .band-lila h2,
.v2.page-violeta25 .band-lila h3 { color: #22004a; }
.v2.page-violeta25 .band-lila p { color: #22004a; }

/* En la página violeta, `.pill` viene de site.css como chip de metadatos y la
   regla de `li` en blanco le tapaba el texto. Se le da su propio par de colores. */
.v2.page-violeta25 li.pill,
.v2.page-violeta25 span.pill,
.v2.page-violeta25 .pill {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ==========================================================================
   Valores del home — secuencia de pasos
   Réplica de "Understand the flow" (aeye-saas): grilla con divisores verticales,
   la barra de progreso cruzando el medio de cada tarjeta con riel punteado, y
   los pasos apagados en gris hasta que el barrido los alcanza.
   ========================================================================== */
/* Tarjetas con esquinas redondeadas, como el resto de la página. Antes eran
   una grilla con divisores rectos y desentonaba con todo lo demás. */
.v2 .flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}
.v2 .flow-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.25s var(--ease);
  /* apagado hasta que el barrido llega */
  --paso: var(--ink-muted);
  transition: none;
}
.v2 .flow-card:hover { border-color: var(--accent); }
.v2 .flow-card.is-on { --paso: var(--accent); }

.v2 .flow-card__n {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--paso);
  transition: color 0.35s var(--ease);
}
.v2 .flow-card__d {
  margin: 0 0 1.75rem;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.v2 .flow-card.is-off .flow-card__d { color: var(--ink-muted); }

/* La barra: riel punteado + relleno. Al estar después del bloque flexible,
   queda a la misma altura en las cuatro tarjetas. */
.v2 .flow-card__bar {
  position: relative;
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  margin: 0 0 1.75rem;
  background-color: var(--surface-alt);
  background-image: radial-gradient(rgba(21, 21, 21, 0.16) 1px, transparent 1px);
  background-size: 5px 5px;
  overflow: hidden;
}
/* El ancho lo maneja el scroll vía --p (0 a 1), así que no lleva transición:
   cada cuadro ya viene del scroll y una transición encima lo haría arrastrar. */
.v2 .flow-card { --p: 0; }
.v2 .flow-card__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
/* el cuadradito que marca la punta del barrido */
.v2 .flow-card.is-running .flow-card__fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 10px;
  height: 10px;
  background: var(--accent);
}

.v2 .flow-card__t {
  margin: 0 0 1.5rem;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paso);
  transition: color 0.35s var(--ease);
}
.v2 .flow-card__ico {
  display: block;
  margin-top: auto;
  color: var(--paso);
  opacity: 0.9;
  transition: color 0.35s var(--ease);
}

@media (max-width: 1000px) { .v2 .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .v2 .flow-grid { grid-template-columns: minmax(0, 1fr); } }
/* Sin movimiento: los cuatro pasos quedan encendidos y completos */
@media (prefers-reduced-motion: reduce) {
  .v2 .flow-card { --paso: var(--accent); --p: 1; }
}

/* ==========================================================================
   Barra flotante de comunidad
   El patrón que se ve en aeline.webflow.io: una tarjeta compacta fija abajo,
   no un modal. Acá lleva la suscripción (el mismo Google Form del footer) y se
   puede cerrar. Aparece recién después del primer scroll y no vuelve en la
   misma sesión si se cierra.
   ========================================================================== */
.v2 .join-bar {
  position: fixed;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 60;
  width: min(300px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.v2 .join-bar.is-in { opacity: 1; transform: none; }
.v2 .join-bar[hidden] { display: none; }

.v2 .join-bar__x {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.v2 .join-bar__x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.v2 .join-bar__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
}
.v2 .join-bar__title {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
}
.v2 .join-bar__actions { display: grid; gap: 0.6rem; }
.v2 .join-bar__actions .btn { width: 100%; }
.v2 .join-bar__alt {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.v2 .join-bar__alt:hover { color: #fff; }

/* En pantallas chicas ocupa el ancho y se apoya abajo */
@media (max-width: 560px) {
  .v2 .join-bar {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .join-bar { transition: none; }
}

/* ==========================================================================
   Proyectos del home — tarjetas tipo "plan"
   Estructura tomada de "Simple pricing" de aeye-saas: una línea horizontal parte
   la tarjeta en dos. Los bordes sí van redondeados, para no romper con el resto
   de la página. La duración va chica arriba a la derecha, no como cifra grande.
   ========================================================================== */
.v2 .plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.v2 .plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .plan:hover { border-color: var(--accent); transform: translateY(-2px); }

.v2 .plan__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
}
/* número y duración en la misma fila, uno a cada lado */
.v2 .plan__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.v2 .plan__n,
.v2 .plan__dur {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}
.v2 .plan__n { color: var(--accent); }
.v2 .plan__dur { color: var(--ink-muted); }

.v2 .plan__head { margin-top: -0.5rem; }
.v2 .plan__t {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.v2 .plan__sub {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* CTA largo: el relleno barre de izquierda a derecha al pasar el mouse */
.v2 .plan__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1.35rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.v2 .plan__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.v2 .plan__cta::after {
  content: "→";
  font-size: 1.05rem;
  transition: transform 0.35s var(--ease);
}
.v2 .plan__cta:hover,
.v2 .plan__cta:focus-visible { color: #fff; border-color: var(--ink); }
.v2 .plan__cta:hover::before,
.v2 .plan__cta:focus-visible::before { transform: scaleX(1); }
.v2 .plan__cta:hover::after,
.v2 .plan__cta:focus-visible::after { transform: translateX(4px); }

.v2 .plan__bottom { padding: clamp(1.5rem, 2.4vw, 2rem); }
.v2 .plan__d { margin: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); }
.v2 .plan__incl { margin: 0 0 0.9rem; font-size: 0.9rem; font-weight: 700; }
.v2 .plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.v2 .plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.v2 .plan__list svg { flex: 0 0 16px; margin-top: 0.25rem; color: var(--accent); }

@media (max-width: 820px) { .v2 .plan-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .v2 .plan__cta::before { transition: none; }
  .v2 .plan:hover { transform: none; }
}

/* ==========================================================================
   Summer Camp 2027 — landing de anuncio
   Lenguaje tomado de aeline (home-v2): display grande en peso 500 con
   interletrado muy cerrado (−0.05em), botones píldora, tarjetas de 16px y
   paneles gris claro. Todo en Manrope, variando pesos. Sin monoespaciada.
   ========================================================================== */
.v2.sc27 { --gris27: #F2F2F2; --tinta27: #131313; }

/* Display: el rasgo de la referencia es peso medio + tracking muy cerrado */
.v2.sc27 .h27 {
  margin: 0 0 2rem;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: var(--tinta27);
  text-wrap: balance;
}
.v2.sc27 .h27--light { color: #fff; }
/* En el call for pains el titular tiene todo el ancho de la tarjeta */
.v2.sc27 .pregunta27 .h27 { max-width: 24ch; }

/* Botones píldora */
.v2.sc27 .btn27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.v2.sc27 .btn27--solid { background: var(--magenta); color: #fff; }
.v2.sc27 .btn27--solid:hover { background: var(--magenta-dark); }
.v2.sc27 .btn27--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.v2.sc27 .btn27--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.v2.sc27 .btn27--yellow { background: var(--yellow); color: var(--purple); }
.v2.sc27 .btn27--yellow:hover { background: #f7bb12; }

/* --------------------------------------------------------------------------
   Hero — el marco encajado de aeline home-v2
   Medido del original: sección con 12 px de margen y 24 px de radio, H1 en peso
   500 con tracking −0.06em, y una franja de tarjetas montada sobre el borde
   inferior. El CTA es píldora con la flecha en un círculo oscuro.
   -------------------------------------------------------------------------- */
.v2.sc27 .hero27 { padding: 12px 12px 0; }
.v2.sc27 .hero27__frame {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(96svh, 900px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--purple);
}
.v2.sc27 .hero27__bg { position: absolute; inset: 0; z-index: -2; }
.v2.sc27 .hero27__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.v2.sc27 .hero27__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(16, 2, 30, 0.92) 0%, rgba(16, 2, 30, 0.78) 42%, rgba(24, 4, 46, 0.4) 75%, rgba(24, 4, 46, 0.25) 100%),
    linear-gradient(to bottom, rgba(16, 2, 30, 0.4) 0%, rgba(16, 2, 30, 0.1) 40%, rgba(16, 2, 30, 0.55) 100%);
}
/* El padding inferior tiene que superar el margen negativo de la franja, o el
   collage se le monta encima al texto del hero. */
.v2.sc27 .hero27__inner {
  padding: clamp(2.5rem, 5vw, 4rem);
  /* Piso FIJO, no en vh: el carrusel se monta 286px (alto de tarjeta + 40) y con un
     padding en vh la holgura se encogía justo en las ventanas bajas, donde el
     collage terminaba tapando la línea del "5th edition". */
  /* 21rem = 336px: el solape del carrusel es fijo (286px) más 50px de aire. Sin vh
     acá: entre 760 y 1080 de alto el término en vh nunca llegaba a los 336 y en las
     capturas de página completa se disparaba a miles de px. */
  padding-bottom: 21rem;
  max-width: 62ch;
}

.v2.sc27 .tag27 {
  display: inline-block;
  /* la barra flota fija arriba: sin este aire la etiqueta le queda pegada */
  margin: clamp(1.5rem, 3.5vw, 2.75rem) 0 1.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Titular: se revela palabra por palabra al entrar en pantalla */
.v2.sc27 .hero27__title {
  margin: 0;
  font-size: clamp(2.3rem, 5.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.06em;
  color: #fff;
}
.v2.sc27 .hero27__title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.v2.sc27 .hero27__title.is-in span { opacity: 1; transform: none; }

/* CTA píldora con la flecha en círculo */
.v2.sc27 .cta27 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
  padding: 5px 5px 5px 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--purple);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  transition: background 0.25s var(--ease);
}
.v2.sc27 .cta27:hover { background: #ffd970; }
.v2.sc27 .cta27__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--yellow);
  transition: transform 0.25s var(--ease);
}
.v2.sc27 .cta27:hover .cta27__ico { transform: rotate(45deg); }

/* Línea del hero: mira hacia adelante. Las cifras de las ediciones pasadas
   viven más abajo, en su propia sección y bien etiquetadas: en el hero de 2027
   daban a entender que eran datos de 2027. */
.v2.sc27 .proof27 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 1.6rem 0 0;
  max-width: 52ch;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
.v2.sc27 .proof27__n {
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--magenta);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Franja de tarjetas montada sobre el hero
   -------------------------------------------------------------------------- */
.v2.sc27 .strip27 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: -72px 12px 0;
  position: relative;
  z-index: 2;
}
.v2.sc27 .strip27__card {
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 12px 32px rgba(16, 2, 30, 0.12);
}
.v2.sc27 .strip27__card--ink { background: var(--purple); border-color: transparent; color: #fff; }
.v2.sc27 .strip27__card--accent { background: var(--yellow); border-color: transparent; color: var(--purple); }
.v2.sc27 .strip27__card--wide { grid-column: span 1; }
.v2.sc27 .strip27__k {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--magenta);
}
.v2.sc27 .strip27__card--ink .strip27__k { color: var(--yellow); }
.v2.sc27 .strip27__card--accent .strip27__k { color: var(--purple); }
.v2.sc27 .strip27__v {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.v2.sc27 .strip27__v span { display: block; font-size: 0.8rem; font-weight: 300; color: var(--ink-muted); }
.v2.sc27 .strip27__card--ink .strip27__v span,
.v2.sc27 .strip27__card--accent .strip27__v span { color: inherit; opacity: 0.72; }
.v2.sc27 .strip27__n { margin: 0; font-size: 0.8rem; font-weight: 300; color: var(--ink-muted); }
.v2.sc27 .strip27__card--ink .strip27__n { color: rgba(255, 255, 255, 0.7); }
.v2.sc27 .strip27__card--accent .strip27__n { color: rgba(44, 4, 80, 0.72); }

@media (max-width: 1100px) {
  .v2.sc27 .strip27 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -48px; }
  .v2.sc27 .strip27__card--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .v2.sc27 .strip27 { grid-template-columns: 1fr; margin-top: 1rem; }
  .v2.sc27 .strip27__card--wide { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v2.sc27 .hero27__title span { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Call for pains
   -------------------------------------------------------------------------- */
/* Una sola columna: la versión anterior tenía una nota al costado y ya no está,
   así que la mitad derecha quedaba vacía. El texto se acota por medida de lectura,
   no por columnas. */
/* La pregunta es el titular; el texto que la explica es corto a propósito. En un
   bloque corrido dejaba media tarjeta vacía, así que van lado a lado: pregunta a
   la izquierda, explicación a la derecha. `align-items: start` para que ninguna
   de las dos columnas se estire hasta el alto de la otra. */
.v2.sc27 .pregunta27 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: 24px;
  background: var(--purple);
  color: #fff;
}
.v2.sc27 .pill--on-dark { color: var(--yellow); }
.v2.sc27 .pregunta27__cab .h27 { margin-bottom: 0; }
.v2.sc27 .pregunta27__text { padding-top: 0.35rem; }
/* Sin el párrafo de cierre el botón quedaba pegado al último párrafo. */
.v2.sc27 .pregunta27__text .hero27__actions { margin-top: 0.75rem; }
.v2.sc27 .pregunta27__p {
  margin: 0 0 1.1rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
.v2.sc27 .pregunta27__p strong { font-weight: 700; color: #fff; }
.v2.sc27 .pregunta27__note {
  margin: 0;
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 860px) { .v2.sc27 .pregunta27 { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* --------------------------------------------------------------------------
   Los dos tracks
   -------------------------------------------------------------------------- */
.v2.sc27 .tracks27 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.v2.sc27 .track27 { padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 16px; background: #fff; }
.v2.sc27 .track27__k {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.v2.sc27 .track27__v {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
}
.v2.sc27 .track27__p { margin: 0; font-weight: 300; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 700px) { .v2.sc27 .tracks27 { grid-template-columns: 1fr; } }

/* El h27 dentro de bloques que ya traen su propio color no debe forzar tinta */
.v2.sc27 .contact26__form .h27 { color: var(--pink); margin-bottom: 0; }

.v2.sc27 .testi26-band .h27 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contribuciones del home — tarjetas deslizables
   Reusa la mecánica de `.shots` (scroll-snap + botones) pero con tarjetas de
   contenido en vez de fotos. Orden: 2025, 2024, 2023.
   -------------------------------------------------------------------------- */
.v2 .shots__item.work { flex: 0 0 clamp(280px, 32vw, 400px); }
.v2 .work__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.v2 .work__card:hover { border-color: var(--accent); transform: translateY(-3px); }
.v2 .work__year {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1.1rem;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.v2 .work__t {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.v2 .work__d {
  flex: 1;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.v2 .work__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent);
}
.v2 .work__go svg { transition: transform 0.25s var(--ease); }
.v2 .work__card:hover .work__go svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   2027 — video del hero, franja deslizable, testimonio en video y su footer
   -------------------------------------------------------------------------- */
/* El video entra sobre el póster, igual que en el home */
.v2.sc27 .hero27__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.v2.sc27 .hero27__bg video.is-ready { opacity: 1; }

/* --------------------------------------------------------------------------
   Collage deslizable sobre el borde del hero
   En la referencia no son tarjetas iguales: son piezas de distinto ancho y
   distinto contenido, todas de la misma altura, cortadas en los dos bordes.
   -------------------------------------------------------------------------- */
/* El carrusel se monta ENTERO sobre el hero: se sube el alto de una tarjeta (246px)
   más 40px, así el hero termina un poco más abajo que el collage. */
.v2.sc27 .strip27 { display: block; position: relative; z-index: 2; margin: -286px 0 0; }
.v2.sc27 .strip27 .shots { padding-inline: 12px; scroll-padding-inline: 12px; }
/* La fecha, reafirmada debajo del carrusel */
.v2.sc27 .strip27__date {
  margin: 1.1rem 0 0;
  padding-inline: 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
/* Sin degradado en los bordes: recortaba las tarjetas de las puntas y, sumado a
   la sombra de cada una, se veía como una mancha rara y no como un desvanecido. */

.v2.sc27 .tile {
  display: flex;
  flex-direction: column;
  height: 246px;
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 26px rgba(16, 2, 30, 0.1);
  overflow: hidden;
}
/* Todas del mismo ancho: con el carrusel moviéndose solo, parejas se leen
   mejor y el avance es predecible. */
.v2.sc27 .tile { flex: 0 0 clamp(212px, 19vw, 252px); }

.v2.sc27 .tile__k {
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--magenta);
}
.v2.sc27 .tile__big {
  margin: auto 0 0.4rem;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.v2.sc27 .tile__big span { color: var(--ink-muted); margin: 0 0.1em; }
.v2.sc27 .tile__v {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.v2.sc27 .tile__v span { display: block; font-size: 0.78rem; font-weight: 300; color: var(--ink-muted); }
/* El mes no puede ir en la línea chica: es el dato que la gente busca. Va debajo
   del 25–30, en su propio tamaño, y el lugar queda en la línea menor. */
.v2.sc27 .tile__mes {
  margin: 0 0 0.3rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta27);
}
.v2.sc27 .tile__n { margin: 0; font-size: 0.76rem; font-weight: 300; color: var(--ink-muted); }

/* pieza oscura: manda la cifra, el resto en chico. Antes era un párrafo grande
   que nadie lee de paso. */
.v2.sc27 .tile--dark { background: #131313; border-color: transparent; color: #fff; }
.v2.sc27 .tile--dark .tile__k { color: var(--yellow); }
.v2.sc27 .tile__stat {
  margin: auto 0 0.2rem;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.v2.sc27 .tile__statl { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 400; color: rgba(255, 255, 255, 0.86); }
.v2.sc27 .tile__n--dark { color: rgba(255, 255, 255, 0.55); }

/* pieza morada con las caras confirmadas */
.v2.sc27 .tile--ink { background: var(--purple); border-color: transparent; color: #fff; }
.v2.sc27 .tile--ink .tile__k { color: var(--yellow); }
.v2.sc27 .tile--ink .tile__n { color: rgba(255, 255, 255, 0.66); }
.v2.sc27 .faces { display: flex; margin: auto 0 0.8rem; }
.v2.sc27 .faces__i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--purple);
  margin-left: -10px;
  background: var(--purple-soft);
}
.v2.sc27 .faces__i:first-child { margin-left: 0; }
.v2.sc27 .faces__i img { width: 100%; height: 100%; object-fit: cover; }
.v2.sc27 .tile__names { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }

/* pieza amarilla */
.v2.sc27 .tile--accent { background: var(--yellow); border-color: transparent; color: var(--purple); }
.v2.sc27 .tile--accent .tile__k { color: var(--purple); opacity: 0.7; }
.v2.sc27 .tile__pills { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 0.35rem; }
.v2.sc27 .tile__pills li {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(44, 4, 80, 0.12);
  font-size: 0.76rem;
  font-weight: 600;
  justify-self: start;
}

/* pieza con foto y su etiqueta flotante */
.v2.sc27 .tile--photo { position: relative; padding: 0; }
/* Sin radio propio: la tarjeta ya recorta con sus 16px (`overflow: hidden`). Con
   los 24px que hereda de `.shots__item img` la esquina de la foto caía por dentro
   de la de la tarjeta y asomaba un filo blanco. */
.v2.sc27 .tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.v2.sc27 .tile__badge {
  position: relative;
  margin: auto 0.8rem 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
}
.v2.sc27 .tile__badge .tile__k { margin-bottom: 0.25rem; display: block; }
.v2.sc27 .tile__badge .tile__v { margin: 0; font-size: 0.88rem; }

@media (max-width: 720px) { .v2.sc27 .strip27 { margin-top: -170px; } }
/* En teléfono la píldora del menú mide 76px + 12 de margen: el hero necesita ese
   aire arriba o la etiqueta de fechas queda debajo de la barra. */
@media (max-width: 620px) {
  .v2.sc27 .hero27__inner { padding-top: 7rem; }
}

/* --------------------------------------------------------------------------
   Las ediciones en números
   -------------------------------------------------------------------------- */
.v2.sc27 .num27 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.v2.sc27 .num27__i { padding: 1.4rem 1.25rem; border-radius: 16px; background: #fff; }
.v2.sc27 .num27__n {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--magenta);
}
.v2.sc27 .num27__l { margin: 0; font-size: 0.85rem; font-weight: 300; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 900px) { .v2.sc27 .num27 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .v2.sc27 .num27 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   About Uruguay — tarjetas al estilo de la sección Services de la referencia
   (blancas, radio 12, título en peso 500), pero más chicas
   -------------------------------------------------------------------------- */
.v2.sc27 .uru27 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.v2.sc27 .uru27__card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.25rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.v2.sc27 .uru27__card:hover { transform: translateY(-3px); border-color: var(--magenta); }
.v2.sc27 .uru27__ico { font-size: 1.5rem; margin-bottom: 0.9rem; }
.v2.sc27 .uru27__t {
  margin: 0 0 0.6rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.v2.sc27 .uru27__p { margin: 0; font-size: 0.85rem; font-weight: 300; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 1050px) { .v2.sc27 .uru27 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .v2.sc27 .uru27 { grid-template-columns: 1fr; } }

/* Testimonio en video */
.v2.sc27 .vtesti27 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.v2.sc27 .vtesti27__player { border-radius: 24px; overflow: hidden; background: var(--purple); }
.v2.sc27 .vtesti27__player video { width: 100%; height: auto; display: block; }
.v2.sc27 .vtesti27__name {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.v2.sc27 .vtesti27__role {
  margin: 0.2rem 0 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--magenta);
}
.v2.sc27 .vtesti27__q {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.v2.sc27 .vtesti27__n { margin: 0; font-size: 0.85rem; font-weight: 300; color: var(--ink-muted); }
@media (max-width: 860px) { .v2.sc27 .vtesti27 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer propio de 2027
   El genérico de MonteVIDEO Tech queda para las ediciones que ya pasaron: esta
   página todavía no ocurrió y su pie tiene que empujar a anotarse.
   -------------------------------------------------------------------------- */
.v2.sc27 .foot27 {
  margin: 0 12px 12px;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-radius: 24px;
  background: var(--purple);
  color: #fff;
}
.v2.sc27 .foot27__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.v2.sc27 .foot27__k {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.v2.sc27 .foot27__claim {
  margin: 0 0 1.75rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.v2.sc27 .foot27 .cta27 { margin-top: 0; }
.v2.sc27 .foot27__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.v2.sc27 .foot27__nav a {
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s var(--ease);
}
.v2.sc27 .foot27__nav a:hover { color: var(--yellow); }
.v2.sc27 .foot27__legal {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 820px) { .v2.sc27 .foot27__top { grid-template-columns: 1fr; } }

/* El carrusel que avanza solo NO puede tener snap obligatorio: cada píxel de
   avance se devolvía al punto de encaje y el scroll quedaba clavado en cero. */
.v2 .shots[data-autoscroll] { scroll-snap-type: none; scroll-behavior: auto; }
.v2 .shots[data-autoscroll] .shots__item { scroll-snap-align: none; }


/* El recap no necesita ocupar todo el ancho: se lee mejor acotado y centrado. */
.v2 .recap-media {
  max-width: 880px;
  margin: 1.25rem auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.v2 .recap-media video { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Tarjeta del próximo evento
   La escribe `_build/scripts/proximo-evento.py` desde el feed iCal de Meetup.
   Se monta sobre el banner; si no hay evento futuro, el banner queda solo.
   -------------------------------------------------------------------------- */
.v2 .feature__media[data-next-event] { position: relative; }
.v2 .evcard {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  padding: clamp(0.8rem, 1.6vw, 1.1rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s var(--ease);
}
.v2 .evcard:hover { transform: translateY(-2px); }
.v2 .evcard__date {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  padding: 0.45rem 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  line-height: 1;
}
.v2 .evcard__d { font-size: 1.35rem; font-weight: 800; }
.v2 .evcard__m { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v2 .evcard__body { flex: 1; min-width: 0; }
.v2 .evcard__k {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.15rem;
}
.v2 .evcard__t {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  /* los títulos de Meetup pueden ser larguísimos */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.v2 .evcard__when { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--ink-muted); }
.v2 .evcard__go { flex: 0 0 auto; font-size: 1.2rem; color: var(--accent); }
@media (max-width: 560px) {
  .v2 .evcard { position: static; margin-top: 0.75rem; box-shadow: none; border: 1px solid var(--line); }
}

/* El hero de 2025 lleva el velo en violeta, para no cortar con la banda de la
   edición que arranca justo debajo. */
.v2 .hero-v2--violeta .hero-v2__scrim {
  background:
    linear-gradient(to bottom, rgba(26, 3, 56, 0.82) 0%, rgba(44, 6, 94, 0.6) 40%,
      rgba(44, 6, 94, 0.72) 72%, rgba(44, 6, 94, 0.94) 100%),
    radial-gradient(120% 80% at 12% 85%, rgba(144, 39, 255, 0.34), transparent 62%);
}

/* --------------------------------------------------------------------------
   Texto recortado con "read more"
   Donde conviven textos de largo muy distinto (los testimonios de 2025 van de
   430 a 828 caracteres), estirar todas las tarjetas a la más alta deja huecos
   blancos. Se recortan a una altura común y se expanden a pedido.
   -------------------------------------------------------------------------- */
.v2 [data-expand] {
  position: relative;
  max-height: 11.5em;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.v2 [data-expand]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.v2 [data-expand].is-open { max-height: none; }
.v2 [data-expand].is-open::after { opacity: 0; }
/* dentro de una sección gris el degradado tiene que fundir contra ese gris */
.v2 .section--alt [data-expand]::after { background: linear-gradient(transparent, var(--surface-alt)); }
.v2 .quote [data-expand]::after,
.v2 .card [data-expand]::after { background: linear-gradient(transparent, var(--surface)); }

.v2 .expand-btn {
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v2 .expand-btn:hover { color: var(--accent-dark); }

/* Las tarjetas de testimonio quedan parejas y el pie alineado abajo */
.v2 .quote-grid { align-items: stretch; }
.v2 .quote { display: flex; flex-direction: column; }
.v2 .quote .card__foot { margin-top: auto; padding-top: 1.25rem; }

/* Los títulos de los valores van de una a dos líneas ("Video talks" contra
   "Engaging with Respect"). Sin una altura mínima común, lo que va debajo
   corre y las barras quedan a distinta altura entre tarjetas. */
.v2 .flow-card__t { min-height: 2.4em; }

/* ==========================================================================
   Menú del header (solo MonteVIDEO Tech)
   Mismo comportamiento que un NavigationMenu de Radix, sin dependencias:
   disparador <button>, panel con aria-controls, cierre con Escape y por click
   afuera. El header va sobre el hero, así que en reposo es blanco translúcido.
   ========================================================================== */
.v2 .site-header__inner { gap: clamp(1rem, 3vw, 2.5rem); }

.v2 .mainnav { margin-right: auto; }
.v2 .mainnav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2 .mainnav__item { position: relative; }

.v2 .mainnav__trigger,
.v2 .mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 38px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.v2 .mainnav__trigger:hover,
.v2 .mainnav__link:hover,
.v2 .mainnav__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.v2 .mainnav__chev { transition: transform 0.25s var(--ease); }
.v2 .mainnav__trigger[aria-expanded="true"] .mainnav__chev { transform: rotate(180deg); }

/* Panel */
.v2 .mainnav__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 40;
  width: min(440px, calc(100vw - 2rem));
  padding: 0.6rem;
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}
.v2 .mainnav__panel[hidden] { display: none; }
.v2 .mainnav__panel--editions { width: min(320px, calc(100vw - 2rem)); }

.v2 .navcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.v2 .navcards a {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  transition: background 0.18s var(--ease);
}
.v2 .navcards a:hover,
.v2 .navcards a:focus-visible { background: rgba(255, 255, 255, 0.1); }
.v2 .navcards__t { display: block; font-size: 0.95rem; font-weight: 700; color: #fff; }
.v2 .navcards__d {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
.v2 .navcards__t em {
  font-style: normal;
  margin-left: 0.4rem;
  padding: 0.08rem 0.42rem;
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: #08312b;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.v2 .navcards__k {
  margin: 0.35rem 0 0.5rem;
  padding-inline: 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.v2 .navcards--years a { display: flex; align-items: baseline; gap: 0.8rem; }
.v2 .navcards__y {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* Hamburguesa: solo en pantallas chicas */
.v2 .mainnav__burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  padding: 0;
}
.v2 .mainnav__burger span {
  display: block;
  width: 17px;
  height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.v2 .mainnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.v2 .mainnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v2 .mainnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .v2 .mainnav__burger { display: block; }
  .v2 .mainnav {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    padding: 0.6rem;
    border-radius: var(--radius-lg);
    background: rgba(14, 14, 14, 0.97);
    backdrop-filter: saturate(140%) blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    display: none;
  }
  .v2 .mainnav.is-open { display: block; }
  .v2 .mainnav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .v2 .mainnav__trigger,
  .v2 .mainnav__link { width: 100%; justify-content: space-between; height: 44px; }
  /* dentro del panel móvil los desplegables van en flujo, no flotando */
  .v2 .mainnav__panel {
    position: static;
    width: auto;
    margin: 0.15rem 0 0.5rem;
    box-shadow: none;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   Quiénes somos — dos columnas: el titular a la izquierda, el texto a la derecha
   -------------------------------------------------------------------------- */
.v2 .about-mvt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
/* CTA de speaker, debajo del titular */
.v2 .speak {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.v2 .speak__t { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.v2 .speak__a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.v2 .speak__a svg { transition: transform 0.25s var(--ease); }
.v2 .speak__a:hover svg { transform: translate(2px, -2px); }
.v2 .about-mvt__body p { color: var(--ink-soft); line-height: 1.7; }
.v2 .about-mvt__body p strong { color: var(--ink); }
.v2 .about-mvt__k {
  margin: 1.75rem 0 0.9rem !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
/* Los temas, como lista numerada en dos columnas: se leen mejor que un montón
   de píldoras sueltas y le dan estructura a la sección. */
.v2 .topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.v2 .topics li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.v2 .topics li:hover { color: var(--accent-dark); }
.v2 .topics__n {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .v2 .topics { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .v2 .about-mvt { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   summercamp2026 — piezas medidas contra el original en vivo
   Geometría y color tomados del DOM de montevideotech.dev/summercamp2026/,
   no a ojo: tarjetas de 413×528 con radio 24, chips de cifras #E5E4E4,
   píldoras de 5/20 con radio 16.
   -------------------------------------------------------------------------- */

/* Hero: el original usa 55px/600 en el título, 20px en la fecha y 46px en el
   claim. Antes la fecha pesaba más que el claim, al revés que en la original. */
.v2.sc26 .hero26 { font-weight: 600; font-size: clamp(2rem, 3.9vw, 3.4375rem); }
.v2.sc26 .hero26__fecha {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--purple);
}
.v2.sc26 .hero26__fecha strong { font-weight: 700; }
.v2.sc26 .hero26__claim {
  margin-top: 2rem;
  font-size: clamp(1.5rem, 3.2vw, 2.875rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--purple);
}
.v2.sc26 .hero26__claim .typewriter { color: var(--magenta); font-weight: 600; }

/* Píldora con borde: el kicker de la original */
.v2.sc26 .pill26 {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin: 0;
  padding: 5px 20px;
  border: 1px solid currentColor;
  border-radius: 16px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  line-height: 1.8;
}
.v2.sc26 .pill26--tenue {
  border-color: rgba(0, 0, 0, 0.1);
  color: #3A3A3A;
}
.v2.sc26 .pill26--tenue strong { font-weight: 700; }

/* ---- Las tres tarjetas de "More than an event" ---- */
.v2.sc26 .trio26 { padding-block: 50px 0; }
.v2.sc26 .trio26__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.v2.sc26 .tri26 {
  display: flex;
  flex-direction: column;
  min-height: 528px;
  padding: 45px 30px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.v2.sc26 .tri26--magenta { background: var(--magenta); }
.v2.sc26 .tri26--violeta { background: var(--violet); }
.v2.sc26 .tri26--celeste { background: var(--blue); }
.v2.sc26 .tri26__t {
  margin: 1.75rem 0 0;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.v2.sc26 .tri26 .pill26 { color: #fff; }

/* La foto se apoya en el borde inferior y solo redondea arriba */
.v2.sc26 .tri26__foto { margin-top: auto; padding-top: 2rem; }
.v2.sc26 .tri26__foto img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* La violeta invierte el orden: foto arriba, texto abajo */
.v2.sc26 .tri26--invertida { padding: 0 30px 30px; }
.v2.sc26 .tri26--invertida .tri26__foto {
  margin: 0 7px 0;
  padding-top: 0;
  order: -1;
}
.v2.sc26 .tri26--invertida .tri26__foto img {
  height: 254px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.v2.sc26 .tri26--invertida .pill26 { margin-top: 26px; }

/* Las dos que enlazan levantan un poco al pasar por encima */
.v2.sc26 a.tri26 { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.v2.sc26 a.tri26:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(44, 4, 80, 0.28); }

@media (max-width: 900px) {
  .v2.sc26 .trio26__row { grid-template-columns: minmax(0, 1fr); }
  .v2.sc26 .tri26 { min-height: 0; }
}

/* ---- Las dos columnas de cifras, lado a lado ---- */
.v2.sc26 .cifras26 { padding-block: 60px 0; }
.v2.sc26 .cifras26__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
}
.v2.sc26 .cifras26__col {
  padding: 0 20px 5px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.v2.sc26 .cifras26__t {
  margin: 2rem 0 0;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--purple);
}
.v2.sc26 .cifras26__s {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--purple);
}
.v2.sc26 .cifras26__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
}
/* La original separa las dos filas con una línea que cruza las dos columnas:
   por eso el gap horizontal es 0, así los dos bordes se tocan y forman una sola. */
.v2.sc26 .dato26 { padding-bottom: 1.5rem; }
.v2.sc26 .dato26:nth-child(-n+2) {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.v2.sc26 .dato26__n {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 8px;
  background: #E5E4E4;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
}
.v2.sc26 .dato26__n--azul { color: var(--blue); }
.v2.sc26 .dato26__n--violeta { color: var(--violet); }
.v2.sc26 .dato26__l {
  margin: 1.1rem 0 0;
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
}
.v2.sc26 .dato26__l strong { font-weight: 700; }

@media (max-width: 860px) {
  .v2.sc26 .cifras26__row { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

/* ---- "Our last Summer Camp 2025": banda con foto ---- */
.v2.sc26 .section--flush { padding-block: 0; }
.v2.sc26 .foto26 {
  position: relative;
  margin: 60px 30px 0;
  min-height: clamp(320px, 65vh, 640px);
  padding: 50px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #2C0450 image-set(url("/wp-content/uploads/2025/07/IMG_9992.webp") type("image/webp"), url("/wp-content/uploads/2025/07/IMG_9992.jpg") type("image/jpeg")) center / cover no-repeat;
}
.v2.sc26 .foto26::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
}
.v2.sc26 .foto26__cab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.v2.sc26 .foto26__t {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  color: #fff;
}

@media (max-width: 700px) {
  .v2.sc26 .foto26 { margin-inline: var(--gutter); padding: 2rem 1.5rem; min-height: 46vh; }
}

/* --------------------------------------------------------------------------
   Propuestas 2026 — acordeón
   Antes eran nueve tarjetas en dos columnas, cada una con Overview, Goal,
   Technologies y Why it matters abiertos: 4.000px de texto corrido y tarjetas
   de alturas desparejas. Ahora la lista se lee de un vistazo y cada propuesta
   se abre si interesa. Es <details>, así que funciona sin JS.
   -------------------------------------------------------------------------- */
.v2.sc26 .prop26__ayuda {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.v2.sc26 .props26 { margin-top: 2rem; }

.v2.sc26 .prop26 {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.v2.sc26 .prop26 + .prop26 { margin-top: 0.75rem; }
.v2.sc26 .prop26:hover { border-color: rgba(242, 25, 144, 0.35); }
.v2.sc26 .prop26[open] {
  border-color: rgba(242, 25, 144, 0.35);
  box-shadow: 0 14px 34px rgba(44, 4, 80, 0.08);
}

.v2.sc26 .prop26 > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem clamp(1rem, 2.5vw, 1.6rem);
  cursor: pointer;
  list-style: none;
}
.v2.sc26 .prop26 > summary::-webkit-details-marker { display: none; }
.v2.sc26 .prop26 > summary:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.v2.sc26 .prop26__n {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--magenta);
}
.v2.sc26 .prop26__cab { display: grid; gap: 0.4rem; min-width: 0; }
.v2.sc26 .prop26__t {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--purple);
}
.v2.sc26 .prop26__t strong { font-weight: 700; }
.v2.sc26 .prop26__by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.v2.sc26 .prop26__by .avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.v2.sc26 .prop26__by .avatars img + img,
.v2.sc26 .prop26__by .avatars picture + picture img { margin-left: -10px; }

/* La cruz que gira: el mismo gesto que el FAQ */
.v2.sc26 .prop26 > summary::after {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
  color: var(--purple);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.v2.sc26 .prop26[open] > summary::after {
  transform: rotate(135deg);
  background-color: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

.v2.sc26 .prop26__cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 0 clamp(1rem, 2.5vw, 1.6rem) 1.6rem clamp(3.1rem, 5vw, 4.1rem);
  border-top: 1px solid var(--line-soft);
  margin-top: 0.25rem;
  padding-top: 1.4rem;
}
.v2.sc26 .prop26__bloque h4 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
}
.v2.sc26 .prop26__bloque p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .v2.sc26 .prop26 > summary::after { transition: none; }
}
@media (max-width: 720px) {
  .v2.sc26 .prop26__cuerpo {
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(1rem, 2.5vw, 1.6rem);
  }
  .v2.sc26 .prop26 > summary { gap: 0.75rem; padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   Revisión de UX/UI — correcciones de alineación, escala y tratamiento
   -------------------------------------------------------------------------- */

/* El carrusel de fotos calcula su sangrado contra --container-wide. Cuando está
   dentro de un .container normal ese cálculo sobra: las fotos arrancaban 40px a
   la derecha del texto de la misma sección. */
.v2 .container > .shots {
  padding-inline: 0;
  scroll-padding-inline: 0;
}

/* Titular que en realidad es una frase larga: a 44px ocupaba siete renglones y
   le ganaba al texto que tenía al lado. */
.v2 .h-frase {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.25;
}

/* Video suelto con controles nativos: mismo tratamiento que el resto de los medios */
.v2 .section video:not([class]) {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--ink);
}

/* Tarjetas de frases cortas: eran h3 de 19px dentro de 169px útiles y cada una
   cortaba en cuatro renglones. */
.v2 .card--flat .card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.v2 .card--flat { padding: 1.5rem 1.35rem; }

/* --------------------------------------------------------------------------
   Separaciones que faltaban
   Varios titulares y carruseles quedaban pegados al bloque siguiente porque
   ni el título traía margen inferior ni la grilla margen superior.
   -------------------------------------------------------------------------- */
.v2 h2 + .grid,
.v2 h2 + .shots,
.v2 h2 + .props26,
.v2 .prose + .grid,
.v2 .prose + .shots,
.v2 .measure + .grid,
.v2 .measure + .shots,
.v2 .grid + .shots,
.v2 p + .shots {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Muro de testimonios
   En grilla de dos columnas las tarjetas de una misma fila comparten alto, así
   que al lado de un testimonio largo queda medio recuadro vacío. En columnas
   cada tarjeta ocupa lo suyo y el muro se cierra solo.
   -------------------------------------------------------------------------- */
.v2 .muro-testi {
  columns: 2;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
.v2 .muro-testi > .card {
  display: block;
  height: auto;
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.v2 .muro-testi > .card .card__foot {
  margin-top: 1.25rem;
  padding-top: 0;
}
@media (max-width: 760px) {
  .v2 .muro-testi { columns: 1; }
}


/* --------------------------------------------------------------------------
   Barra de navegación de 2026 — arriba
   2023–2025 son landings de una sola página: ahí la barra flotante de abajo
   hace bien su trabajo. 2026 es una sección de ocho páginas, y ahí la barra de
   abajo tenía dos problemas: quedaba al final del DOM (con teclado se llegaba a
   la navegación después de recorrer toda la página) y con los nombres
   desplegados tapaba el diseño. Acá va arriba, y el logo hace de "Overview".
   -------------------------------------------------------------------------- */
.v2 .barra26 {
  position: fixed;
  top: clamp(0.75rem, 1.6vw, 1.25rem);
  left: 0;
  right: 0;
  z-index: 70;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  /* Fuera del flujo: el hero arranca en el borde de la ventana y la píldora le
     queda encima. El hueco a los costados no debe interceptar clics. */
  pointer-events: none;
}
/* Suelta y redondeada, con el mismo vidrio que la barra de las ediciones pasadas:
   no es una franja pegada al borde, es una píldora que flota sobre el contenido. */
.v2 .barra26__in {
  pointer-events: auto;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  padding: 7px 8px 7px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 38px rgba(21, 21, 21, 0.2);
}

/* El logo es el enlace a la portada: cumple el rol que tenía "Overview" */
.v2 .barra26__marca {
  flex: 0 0 auto;
  display: block;
  border-radius: 6px;
  transition: opacity 0.2s var(--ease);
}
.v2 .barra26__marca:hover { opacity: 0.75; }
.v2 .barra26__marca img {
  display: block;
  width: clamp(128px, 12vw, 158px);
  height: auto;
}

.v2 .barra26__nav { min-width: 0; }
.v2 .barra26__nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2 .barra26__item { position: relative; }

.v2 .barra26__b {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--purple);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.v2 .barra26__b > svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  opacity: 0.75;
}
.v2 .barra26__b:hover { background: rgba(44, 4, 80, 0.07); }
.v2 .barra26__b:hover > svg { opacity: 1; }
.v2 .barra26__b[aria-current="page"] {
  background: rgba(44, 4, 80, 0.1);
}
.v2 .barra26__b:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}
.v2 .barra26__caret {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-left: 0.1rem;
  opacity: 0.6;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.v2 .barra26__b:hover .barra26__caret,
.v2 .barra26__b[aria-expanded="true"] .barra26__caret { opacity: 1; }
.v2 .barra26__b[aria-expanded="true"] .barra26__caret { transform: rotate(180deg); }
.v2 .barra26__b[aria-expanded="true"] { background: rgba(44, 4, 80, 0.1); }

/* La vuelta a MonteVIDEO Tech se separa: no es una sección más de Summer Camp */
.v2 .barra26__sep {
  position: relative;
  margin-left: 0.55rem;
  padding-left: 0.55rem;
}
.v2 .barra26__sep::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(44, 4, 80, 0.16);
}
/* #2A7F72 y no el teal de marca (#4CBCAC): sobre el fondo claro el de marca da
   2.3:1 de contraste, muy por debajo del mínimo. Este llega a 4.8:1. */
.v2 .barra26__b--salida { color: #2a7f72; }
.v2 .barra26__b--salida:hover { background: var(--teal); color: #fff; }
.v2 .barra26__b--salida:hover > svg { opacity: 1; }

.v2 .barra26__b--cta {
  margin-left: 0.35rem;
  background: var(--purple);
  color: #fff;
}
.v2 .barra26__b--cta:hover { background: #40086f; color: #fff; }
.v2 .barra26__b--cta > svg { opacity: 0.9; }

/* Desplegable de proyectos */
.v2 .barra26__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 268px;
  padding: 0.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 44px rgba(21, 21, 21, 0.16);
}
.v2 .barra26__pop ul { list-style: none; margin: 0; padding: 0; }
.v2 .barra26__pop a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  color: var(--purple);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.v2 .barra26__pop a:hover { background: var(--surface-alt); }
.v2 .barra26__pop a[aria-current="page"] { background: var(--purple); color: #fff; }

/* Hamburguesa: solo aparece cuando la barra pasa a modo panel */
.v2 .barra26__burger {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--purple);
  cursor: pointer;
}
.v2 .barra26__burger:hover { background: rgba(44, 4, 80, 0.07); }
.v2 .barra26__burger:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
/* Tres líneas: la del medio es el span, las otras dos sus pseudo-elementos. Al
   abrir, la del medio se desvanece y las otras se cruzan. */
.v2 .barra26__burger-i,
.v2 .barra26__burger-i::before,
.v2 .barra26__burger-i::after {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), background 0.2s var(--ease);
}
.v2 .barra26__burger-i { top: 50%; left: 50%; margin: -1px 0 0 -10px; }
.v2 .barra26__burger-i::before { content: ""; top: -7px; left: 0; }
.v2 .barra26__burger-i::after { content: ""; top: 7px; left: 0; }
.v2 .barra26__burger[aria-expanded="true"] .barra26__burger-i { background: transparent; }
.v2 .barra26__burger[aria-expanded="true"] .barra26__burger-i::before { transform: translateY(7px) rotate(45deg); }
.v2 .barra26__burger[aria-expanded="true"] .barra26__burger-i::after { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Barra en pantallas angostas: de punta a punta, con hamburguesa
   La píldora suelta con la fila deslizable no servía: a 375px se veía el 58%
   del menú y "Go to MonteVIDEO Tech" quedaba fuera de pantalla. Por debajo de
   900px la barra se pega a los bordes, con el logo a la izquierda y una
   hamburguesa a la derecha que despliega todo.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .v2 .barra26__in {
    /* Misma píldora del escritorio —suelta, redondeada, con el vidrio
       translúcido—, solo que acá ocupa el ancho disponible y en vez de la fila
       de enlaces lleva la hamburguesa. */
    background: rgba(255, 255, 255, 0.86);
    width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .v2 .barra26__in .barra26__marca { margin-inline: 0; }
  .v2 .barra26__marca img { width: 128px; }
  .v2 .barra26__burger { display: block; position: relative; }

  /* El menú deja de ser una fila y pasa a ser un panel que baja de la barra */
  /* El panel baja de la píldora como una segunda pieza, con el mismo vidrio.
     Translúcido pero con desenfoque fuerte: es lo que lo hace legible sobre el
     hero sin necesidad de un fondo opaco. */
  .v2 .barra26__nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 76svh;
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem;
    border-radius: 22px;
    /* La píldora va a 0.72 como en escritorio, pero el panel es mucho más grande
       y cae sobre la parte más cargada del hero. Con el desenfoque alcanzaría
       menos opacidad; el problema es que `backdrop-filter` no está en todos los
       navegadores, y sin él el texto de atrás dejaba el menú ilegible. A 0.96
       sigue leyéndose el color de lo que hay debajo, y el nombre de la sección
       siempre gana. */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(26px);
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 18px 44px rgba(21, 21, 21, 0.22);
    mask-image: none;
    -webkit-mask-image: none;
  }
  .v2 .barra26__nav[hidden] { display: none; }
  .v2 .barra26__nav > ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 0; }
  .v2 .barra26__b {
    width: 100%;
    justify-content: flex-start;
    height: 46px;
    padding-inline: 0.85rem;
    border-radius: 12px;
    font-size: 0.95rem;
  }
  .v2 .barra26__b--cta { margin: 0.5rem 0 0; justify-content: center; }

  /* La separación antes de la salida pasa a ser una línea horizontal */
  .v2 .barra26__sep { margin: 0.5rem 0 0; padding: 0.5rem 0 0; }
  .v2 .barra26__sep::before {
    top: 0;
    left: 0.85rem;
    right: 0.85rem;
    width: auto;
    height: 1px;
    transform: none;
  }

  /* Los desplegables se abren EN LÍNEA. Flotando quedaban fuera de la vista, y
     era justo el síntoma: se abría el menú y no se veía nada. */
  .v2 .barra26__item { position: static; }
  .v2 .barra26__pop {
    position: static;
    inset: auto;
    width: auto;
    transform: none;
    margin: 2px 0 0.35rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: rgba(44, 4, 80, 0.06);
    border-color: rgba(44, 4, 80, 0.08);
    box-shadow: none;
  }
  .v2 .barra26__pop a { padding-block: 0.6rem; }

  /* Flota sobre el contenido, igual que en escritorio: las primeras secciones que
     no son un hero con foto necesitan el aire de la píldora (60px) más su margen. */
  .v2 .barra26 + main > .section:first-child:not(.hero-v2):not(.hero27) {
    padding-top: max(var(--section-y), 7rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .barra26__burger-i,
  .v2 .barra26__burger-i::before,
  .v2 .barra26__burger-i::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .barra26__caret { transition: none; }
}

/* Los heroes con foto a sangre (.hero-v2 en 2023–2025, .hero27) arrancan en el borde
   y la píldora les queda encima a propósito. Cualquier otra primera sección —incluido
   el hero de texto de 2026— necesita aire para que la barra no lo tape. */
.v2 .barra26 + main > .section:first-child:not(.hero-v2):not(.hero27) {
  padding-top: max(var(--section-y), 6.75rem);
}

/* Logo sin enlace: en las landings de una sola página no hay portada de sección
   a la que volver, así que es solo la marca. */
.v2 .barra26__marca--fija { margin: 0; }

/* El desplegable de ediciones lleva el año adelante */
.v2 .barra26__pop--anios a { display: flex; align-items: baseline; gap: 0.6rem; }
.v2 .barra26__y {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--magenta);
}
.v2 .barra26__pop--anios a[aria-current="page"] .barra26__y { color: rgba(255, 255, 255, 0.8); }

/* Hover: el ícono se levanta un poco y el fondo entra. Nada más que eso. */
.v2 .barra26__b > svg { transition: transform 0.28s var(--ease), opacity 0.2s var(--ease); }
.v2 .barra26__b:hover > svg,
.v2 .barra26__b:focus-visible > svg { transform: translateY(-2px) scale(1.12); }
.v2 .barra26__b > span { transition: transform 0.28s var(--ease); }
.v2 .barra26__b:hover > span { transform: translateX(1px); }

@media (prefers-reduced-motion: reduce) {
  .v2 .barra26__b > svg,
  .v2 .barra26__b > span { transition: none; }
  .v2 .barra26__b:hover > svg,
  .v2 .barra26__b:focus-visible > svg,
  .v2 .barra26__b:hover > span { transform: none; }
}

/* --------------------------------------------------------------------------
   2027 — banda de "todavía en construcción"
   Es una landing de "guardá la fecha": conviene decir de frente qué está
   definido y qué no, en vez de dejarlo insinuado.
   -------------------------------------------------------------------------- */
/* Pegada a lo que sigue: el mensaje y el "call for pains" son parte del mismo
   momento de lectura, no dos secciones separadas. */
.v2.sc27 .obra27 { padding-bottom: clamp(2.25rem, 3.5vw, 2.75rem); }
.v2.sc27 .obra27 + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.v2.sc27 .obra27__caja {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(249, 199, 57, 0.75);
  background: linear-gradient(120deg, rgba(249, 199, 57, 0.14), rgba(249, 199, 57, 0.05));
}
.v2.sc27 .obra27__ico {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  line-height: 1;
}
.v2.sc27 .obra27__t {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* la segunda mitad de la frase es la que da la noticia: va en magenta */
.v2.sc27 .obra27__t span { color: var(--magenta); }
/* Cuatro líneas y no un bloque: cada dato se lee solo. Entre ellas el aire es más
   corto que entre párrafos, porque son partes del mismo aviso. */
.v2.sc27 .obra27__lineas .obra27__p { margin-top: 0.35rem; }
.v2.sc27 .obra27__p {
  margin: 0.6rem 0 0;
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* Los dos bloques de testimonios se leen como uno: el de video y el de citas
   escritas no necesitan la separación completa entre secciones. */
.v2.sc27 .vtesti27-sec { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.v2.sc27 .vtesti27-sec + .section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Los dos testimonios en video, lado a lado */
.v2.sc27 .vtesti27-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.v2.sc27 .vtesti27__uno { margin: 0; }
.v2.sc27 .vtesti27__uno .vtesti27__player {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}
.v2.sc27 .vtesti27__uno video { display: block; width: 100%; height: auto; }
.v2.sc27 .vtesti27__uno figcaption { margin-top: 1.1rem; }
.v2.sc27 .vtesti27__uno .vtesti27__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.v2.sc27 .vtesti27__uno .vtesti27__q {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 780px) {
  .v2.sc27 .vtesti27-par { grid-template-columns: minmax(0, 1fr); }
}

/* LinkedIn con su ícono al lado del nombre */
.v2.sc27 .foot27__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.v2.sc27 .foot27__social svg { flex: 0 0 16px; width: 16px; height: 16px; opacity: 0.85; }
.v2.sc27 .foot27__social:hover svg { opacity: 1; }

/* ── Formularios de contacto ─────────────────────────────────────────────────
   El honeypot tiene que existir en el DOM y ser invisible para las personas, pero
   sin `display:none` ni `hidden`: los bots ignoran los campos ocultos así, y la
   trampa deja de funcionar. Fuera de pantalla es lo que sí muerden. */
.v2 .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v2 .form-msg {
  margin: 1.1rem 0 0;
  font-weight: 600;
  line-height: 1.55;
}
.v2 .form-msg--ok { color: var(--teal-dark); }
.v2 .form-msg--err { color: #c0392b; }
.v2 .form-msg a { color: inherit; text-decoration: underline; }
.v2 .form-msg[hidden] { display: none; }

/* `hidden` es el display:none del navegador y pierde contra cualquier `display` de autor.
   .contact26__send es display:flex, así que al ocultar el formulario tras un envío correcto
   el botón sobrevivía y se quedaba en «Sending…» para siempre. Misma solución que ya usan
   .join-bar[hidden] y .mainnav__panel[hidden]; la especificidad alcanza para ganarle a
   `.v2.sc26 .contact26__send` sin depender del orden de las reglas. */
.v2 .contact26__fields .contact26__send[hidden] { display: none; }
/* --------------------------------------------------------------------------
   2027 — el hilo de la edición y el cierre del call for pains
   -------------------------------------------------------------------------- */
.v2.sc27 .prosa27 { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.v2.sc27 .prosa27 p {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-soft);
}
.v2.sc27 .prosa27 p:last-child { margin-bottom: 0; }

/* La última línea del call for pains: corta, sola, con peso */