/* ===========================================================================
   SMARTCLINIC 3.0 — hoja de estilos de la landing
   ===========================================================================
   Todo bajo .sc26, con reset local y sin !important. Se encola con prioridad 200
   para cargarse despues de las siete hojas globales del theme (cursos.css,
   clinica.css, digital.css...), que se cargan en todas las paginas del sitio.

   --sc-header es la altura del header sticky real de sepes.org (topbar + nav),
   medida sobre el sitio en produccion. La usan los anclas para no quedar tapados.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

.sc26 {
  /* Altura del header sticky del sitio: los anclas la descuentan */
  --sc-header: 150px;

  /* Paleta muestreada del visual oficial del evento */
  --indigo-950: #0d0a2a;
  --indigo-900: #12103a;
  --indigo-850: #171545;
  --indigo-800: #1c1a4c;
  --indigo-700: #221777;
  --violeta-600: #3b2293;
  --violeta-500: #4d45ae;
  --azul-400: #6471b2;
  --lavanda-300: #adb9d6;
  --lavanda-200: #cdd4e8;

  /* Acento cálido: La Rioja, la bodega, la Wine & AI Experience.
     Propuesta de diseño, no dato de marca. Revertir = cambiar estas dos. */
  --oro: #f2c14e;
  --oro-claro: #f8daa0;
  --granate: #5e1128;

  /* Neutros tintados hacia el índigo. Nunca blanco ni negro puros. */
  --papel: #f6f4fb;
  --papel-2: #ece9f6;
  --tinta: #14123b;

  /* Tipografía */
  --display: "Archivo", "Archivo Expanded", system-ui, sans-serif;
  --texto: "Poppins", system-ui, sans-serif;

  --fs-hero: clamp(2.6rem, 1.1rem + 6vw, 6.75rem);
  --fs-h2:   clamp(1.9rem, 1.1rem + 3.1vw, 3.9rem);
  --fs-h3:   clamp(1.15rem, 1rem + .85vw, 1.65rem);
  --fs-lead: clamp(1.02rem, .95rem + .5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .875rem;
  --fs-xs:   .75rem;

  /* Ritmo espacial: no el mismo padding en todas partes */
  --sp-sec:   clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
  --sp-gutter: clamp(1.25rem, .5rem + 3vw, 4rem);
  --ancho:    1320px;
  --ancho-texto: 62ch;

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Semánticos — los redefine cada superficie */
  --bg: var(--indigo-900);
  --fg: #ffffff;
  --fg-2: var(--lavanda-300);
  --regla: rgba(255, 255, 255, .16);
  --regla-fuerte: rgba(255, 255, 255, .34);
  --realce: rgba(255, 255, 255, .05);

  /* El oro solo tiene contraste suficiente sobre superficies oscuras. En claro
     se sustituye por un ámbar oscuro; el relleno de los botones no cambia. */
  --acento-txt: var(--oro);
}

/* Superficies. El tema decide qué significa cada una. */
.sc26 [data-sup="profunda"] { --bg: var(--indigo-900); --fg: #fff; --fg-2: var(--lavanda-300);
  --regla: rgba(255,255,255,.16); --regla-fuerte: rgba(255,255,255,.34); --realce: rgba(255,255,255,.05);
  --acento-txt: var(--oro); }
.sc26 [data-sup="granate"]  { --bg: var(--granate); --fg: #fff; --fg-2: #e6c3ce;
  --regla: rgba(255,255,255,.2); --regla-fuerte: rgba(255,255,255,.4); --realce: rgba(255,255,255,.07);
  --acento-txt: var(--oro); }

/* Tema OSCURO: todo el documento en índigo. */
.sc26[data-tema="oscuro"] [data-sup="papel"] {
  --bg: var(--indigo-850); --fg: #fff; --fg-2: var(--lavanda-300);
  --regla: rgba(255,255,255,.14); --regla-fuerte: rgba(255,255,255,.32); --realce: rgba(255,255,255,.045);
  --acento-txt: var(--oro);
}
.sc26[data-tema="oscuro"] [data-sup="papel-2"] {
  --bg: var(--indigo-800); --fg: #fff; --fg-2: var(--lavanda-300);
  --regla: rgba(255,255,255,.14); --regla-fuerte: rgba(255,255,255,.32); --realce: rgba(255,255,255,.045);
  --acento-txt: var(--oro);
}

/* Tema HÍBRIDO: hero oscuro, cuerpo claro. */
.sc26[data-tema="hibrido"] [data-sup="papel"] {
  --bg: var(--papel); --fg: var(--tinta); --fg-2: #545177;
  --regla: rgba(20,18,59,.14); --regla-fuerte: rgba(20,18,59,.38); --realce: rgba(34,23,119,.045);
  --acento-txt: #7a5104;
}
.sc26[data-tema="hibrido"] [data-sup="papel-2"] {
  --bg: var(--papel-2); --fg: var(--tinta); --fg-2: #545177;
  --regla: rgba(20,18,59,.14); --regla-fuerte: rgba(20,18,59,.38); --realce: rgba(34,23,119,.05);
  --acento-txt: #7a5104;
}

/* ------------------------------------------------------- 2. Reset local */

.sc26 { color: var(--fg); font-family: var(--texto); font-size: var(--fs-body); line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.sc26 *, .sc26 *::before, .sc26 *::after { box-sizing: border-box; }
.sc26 h1, .sc26 h2, .sc26 h3, .sc26 h4, .sc26 p, .sc26 ul, .sc26 ol, .sc26 figure, .sc26 blockquote { margin: 0; }
.sc26 .hero__in > h1 { animation-delay: .16s; }
.sc26 ul, .sc26 ol { padding: 0; list-style: none; }
.sc26 img, .sc26 svg { display: block; max-width: 100%; }
.sc26 a { color: inherit; }
.sc26 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sc26 :focus-visible { outline: 2px solid var(--acento-txt); outline-offset: 3px; border-radius: 2px; }
.sc26 [id] { scroll-margin-top: calc(var(--sc-header) + 24px); }

/* ------------------------------------------------------- 3. Estructura */

.sc26 section { background: var(--bg); color: var(--fg); position: relative; }
.sc26 .env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--sp-gutter); }
.sc26 .sec { padding-block: var(--sp-sec); }
.sc26 .sec--franja { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Cabecera de sección. El numeral suelto en columna aparte quedaba diminuto y no se
   entendía: ahora es un índice con nombre, encima del título y a su misma sangría. */
.sc26 .sec-head { margin-bottom: clamp(2.25rem, 1rem + 3.5vw, 4rem); }

.sc26 .sec-head__k { display: flex; align-items: center; gap: .85em;
  margin-bottom: clamp(1rem, .5rem + 1.2vw, 1.75rem);
  font-family: var(--display); font-variation-settings: "wdth" 84; font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.sc26 .sec-head__k b { font-weight: 600; color: var(--acento-txt); font-variant-numeric: tabular-nums; }
.sc26 .sec-head__k::after { content: ""; flex: 1 1 auto; max-width: 5.5rem;
  height: 1px; background: var(--regla-fuerte); }

.sc26 .sec-head__t { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600;
  font-size: var(--fs-h2); line-height: .98; letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.sc26 .sec-head__s { margin-top: clamp(1rem, .6rem + .9vw, 1.6rem); color: var(--fg-2);
  font-size: var(--fs-lead); max-width: 52ch; }

.sc26 .eyebrow { font-family: var(--display); font-variation-settings: "wdth" 82; font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .26em; text-transform: uppercase; color: var(--acento-txt); }

/* ------------------------------------------------------- 4. Botones */

.sc26 .btn { display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 2.1em;
  font-family: var(--display); font-variation-settings: "wdth" 88; font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.sc26 .btn--primario { background: var(--oro); color: var(--indigo-950); }
.sc26 .btn--primario:hover { background: var(--oro-claro); transform: translateY(-2px); }
.sc26 .btn--fantasma { border: 1px solid var(--regla-fuerte); }
.sc26 .btn--fantasma:hover { border-color: var(--fg); transform: translateY(-2px); }
.sc26 .btn svg { transition: transform .4s var(--ease); }
.sc26 .btn:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------- 5. Hero */

.sc26 .hero { --bg: var(--indigo-950); overflow: clip; isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 7vw, 8rem) clamp(2.5rem, 1rem + 4vw, 5rem); }

/* Blob oficial del .ai, descompuesto en formas que flotan por separado.
   La escena mantiene la proporción 16:9 del original y cubre el hero, para que las
   posiciones porcentuales de las burbujas sigan cuadrando con la base sea cual sea
   el alto. Se resuelve con consultas de contenedor, no con object-fit. */
.sc26 .hero__luz { position: absolute; inset: 0; z-index: -1; overflow: clip;
  pointer-events: none; container-type: size; }

.sc26 .escena {
  position: absolute; top: 50%; left: 50%;
  width:  max(100%, calc(100cqh * 16 / 9));
  height: max(100%, calc(100cqw *  9 / 16));
  transform: translate(-50%, -50%) scaleX(-1);
}
.sc26 .escena { isolation: isolate; }
.sc26 .escena__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El .ai aplica /BM /Screen a tres de las formas, pero dentro de un grupo de
   transparencia con máscara suave. A plena fuerza mix-blend-mode: screen sobreexpone
   el hero; atenuado devuelve la luz del núcleo sin lavarlo. */
.sc26 .b--screen { mix-blend-mode: screen; opacity: .5; }

.sc26 .burbuja {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto;
  will-change: transform;
  animation: var(--flota, sc-flota-a) var(--dur, 32s) ease-in-out var(--d, 0s) infinite;
}
.sc26 .b--a { --flota: sc-flota-a; }
.sc26 .b--b { --flota: sc-flota-b; }
.sc26 .b--c { --flota: sc-flota-c; }

/* En vertical la escena se centra y la masa luminosa queda fuera de cuadro: se
   desplaza para traerla a la vista, y se atenúa para no restarle legibilidad al
   titular, que es lo que sostiene el LCP. */
@media (max-width: 900px) {
  .sc26 .escena { transform: translate(-66%, -46%) scaleX(-1); opacity: .7; }
}
/* Velo bajo la columna de texto: el borde del blob la cruza y sin esto el claim
   pierde contraste. Va en el mismo pseudo-elemento que el fundido inferior. */
.sc26 .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 58%, var(--indigo-950)),
    linear-gradient(100deg,
      color-mix(in oklab, var(--indigo-950) 88%, transparent) 0%,
      color-mix(in oklab, var(--indigo-950) 62%, transparent) 34%,
      transparent 58%);
}
@media (max-width: 900px) {
  .sc26 .hero::after {
    background:
      linear-gradient(to bottom, transparent 64%, var(--indigo-950)),
      color-mix(in oklab, var(--indigo-950) 45%, transparent);
  }
}

.sc26 .hero__in { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 60ch; }
.sc26 .hero__titulo { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
.sc26 .hero__logo { width: clamp(230px, 34vw, 430px); height: auto; }
.sc26 .hero__claim { font-family: var(--display); font-variation-settings: "wdth" 104; font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em;
  max-width: 22ch; text-wrap: balance; }
.sc26 .hero__claim em { font-style: normal; color: var(--oro); }
.sc26 .hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Franja de datos: los tres días como recurso tipográfico, no como tarjetas */
/* La línea divisoria vive en el padding, no pegada al texto: por eso .dato lleva
   aire simétrico a los dos lados, no solo a la derecha. */
.sc26 .hero__datos { margin-top: clamp(3rem, 1.5rem + 5vw, 6.5rem); border-top: 1px solid var(--regla);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sc26 .dato { padding: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) clamp(1.25rem, .75rem + 2vw, 2.25rem);
  border-right: 1px solid var(--regla); }
.sc26 .dato:first-child { padding-left: 0; }
.sc26 .dato:last-child { padding-right: 0; border-right: 0; }
.sc26 .dato__k { display: block; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: .85em; }
.sc26 .dato__v { font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 500;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem); line-height: 1.15; letter-spacing: -.01em; }
.sc26 .dato__v small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--fg-2);
  letter-spacing: 0; margin-top: .35em; }

@media (max-width: 640px) {
  .sc26 .dato { border-right: 0; border-bottom: 1px solid var(--regla); }
  .sc26 .dato:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------- 6. Programa */

.sc26 .dias { display: flex; gap: clamp(1.5rem, 4vw, 4rem); border-bottom: 1px solid var(--regla);
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); overflow-x: auto; scrollbar-width: none; }
.sc26 .dias::-webkit-scrollbar { display: none; }
.sc26 .dia-btn { display: grid; gap: .3rem; padding: 0 0 1.4rem; text-align: left; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: border-color .35s, color .35s; }
.sc26 .dia-btn__n { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); line-height: .9; letter-spacing: -.03em;
  color: var(--fg-2); transition: color .35s; }
.sc26 .dia-btn__d { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.sc26 .dia-btn[aria-selected="true"] { border-bottom-color: var(--acento-txt); }
.sc26 .dia-btn[aria-selected="true"] .dia-btn__n { color: var(--fg); }
.sc26 .dia-btn[aria-selected="true"] .dia-btn__d { color: var(--acento-txt); }
.sc26 .dia-btn:hover .dia-btn__n { color: var(--fg); }

.sc26 .dia-resumen { font-size: var(--fs-lead); color: var(--fg-2); max-width: 46ch;
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }

/* Sesión: la hora es la espina dorsal tipográfica de la sección */
.sc26 .ses { display: grid; grid-template-columns: minmax(84px, 116px) 1fr;
  gap: clamp(1.1rem, 3vw, 3rem); padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  border-top: 1px solid var(--regla); }
.sc26 .ses:first-child { border-top: 0; }
.sc26 .ses__hora { font-family: var(--display); font-variation-settings: "wdth" 92; font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1.25; }
.sc26 .ses__fin { display: block; font-size: calc(var(--fs-sm) * 1.05); color: var(--fg-2);
  font-weight: 400; margin-top: .15em; }
.sc26 .ses__titulo { font-family: var(--display); font-variation-settings: "wdth" 104; font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.018em; text-wrap: pretty; max-width: 36ch; }
.sc26 .ses__desc { margin-top: .85rem; color: var(--fg-2); max-width: var(--ancho-texto); }
.sc26 .ses__lista { margin-top: 1rem; display: grid; gap: .6rem; max-width: var(--ancho-texto); }
.sc26 .ses__lista li { position: relative; padding-left: 1.5rem; color: var(--fg-2); }
.sc26 .ses__lista li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: currentColor; opacity: .6; }
.sc26 .ses__gente { margin-top: 1.1rem; display: grid; gap: .35rem; }
.sc26 .ses__gente b { font-weight: 600; letter-spacing: .01em; }
.sc26 .ses__gente span { color: var(--fg-2); font-size: var(--fs-sm); }
.sc26 .ses__colabora { margin-top: .9rem; font-size: var(--fs-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-2); }
.sc26 .ses__colabora b { color: var(--fg); font-weight: 600; }
.sc26 .ses__cont { margin-top: .5rem; font-size: var(--fs-sm); color: var(--fg-2); font-style: italic; }

/* Etiqueta de tipo: solo donde aporta información, no en cada fila */
.sc26 .ses__tipo { display: inline-block; margin-bottom: .7rem; font-family: var(--display);
  font-variation-settings: "wdth" 82; font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--acento-txt); }

/* Pausas, comidas y logística: presencia mínima, no compiten con el contenido */
.sc26 .ses--menor { padding-block: clamp(.85rem, .6rem + .5vw, 1.15rem); align-items: baseline; }
.sc26 .ses--menor .ses__hora { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 400; }
.sc26 .ses--menor .ses__titulo { font-family: var(--texto); font-size: var(--fs-sm); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.sc26 .ses--menor .ses__desc { margin-top: .3rem; font-size: var(--fs-sm); }

.sc26 .ses--pendiente .ses__titulo { color: var(--fg-2); font-style: italic; }

@media (max-width: 560px) {
  .sc26 .ses { grid-template-columns: 1fr; gap: .5rem; }
  .sc26 .ses__hora { display: flex; gap: .6rem; align-items: baseline; }
  .sc26 .ses__fin { display: inline; }
}

/* ------------------------------------------------------- 7. Wine & AI */

.sc26 .wine { position: relative; overflow: clip; }
.sc26 .wine__foto { position: absolute; inset: 0; z-index: 0; }
.sc26 .wine__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
/* Velo desde la izquierda, donde vive el texto, hacia la derecha, donde la propia
   foto ya reserva su franja índigo. Doble capa: sube el contraste cerca del texto
   y tiñe el conjunto de granate para que no desentone del resto de la página. */
.sc26 .wine::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--granate) 94%, black) 0%,
      color-mix(in oklab, var(--granate) 78%, transparent) 38%,
      color-mix(in oklab, var(--granate) 25%, transparent) 62%,
      transparent 85%),
    color-mix(in oklab, var(--granate) 55%, transparent); }
.sc26 .wine .env { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.sc26 .wine__in { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 56ch; }
.sc26 .wine__t { font-family: var(--display); font-variation-settings: "wdth" 118; font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); line-height: .95; letter-spacing: -.035em; }
.sc26 .wine__t span { display: block; color: var(--oro); }
.sc26 .wine__d { font-size: var(--fs-lead); color: var(--fg-2); }
.sc26 .wine__meta { font-family: var(--display); font-variation-settings: "wdth" 82; font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; }

/* ------------------------------------------------------- 8. Tarifas */

.sc26 .precios { display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
@media (max-width: 900px) { .sc26 .precios { grid-template-columns: 1fr; } }

.sc26 .tarifa { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-top: 1px solid var(--regla); }
.sc26 .tarifa:first-child { border-top: 1px solid var(--regla-fuerte); }
.sc26 .tarifa__c { font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 500;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem); letter-spacing: -.01em; }
.sc26 .tarifa__p { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600;
  font-size: clamp(1.65rem, 1.1rem + 2vw, 2.9rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El oro es el color de "recomendado"; una tarifa con condición de acceso no lo es,
   así que va en tono neutro — no queremos que parezca la opción preferente. */
.sc26 .tarifa__n { display: block; font-family: var(--texto); font-size: var(--fs-xs); font-weight: 400;
  font-style: italic; letter-spacing: .02em; color: var(--fg-2); margin-top: .5em;
  text-align: right; max-width: 22ch; margin-left: auto; }
.sc26 .precios__nota { margin-top: 1.75rem; color: var(--fg-2); font-size: var(--fs-sm); max-width: 44ch; }

.sc26 .incluye { padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--realce);
  border: 1px solid var(--regla); border-radius: 4px; }
.sc26 .incluye h3 { font-family: var(--display); font-variation-settings: "wdth" 88; font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1.5rem; }
.sc26 .incluye ul { display: grid; gap: 1.1rem; }
.sc26 .incluye li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  font-size: var(--fs-sm); line-height: 1.55; }
.sc26 .incluye li::before { content: ""; width: 7px; height: 7px; margin-top: .55em;
  border-radius: 50%; background: var(--acento-txt); }

.sc26 .cierre { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--regla); display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem); }
.sc26 .cierre__t { font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem); line-height: 1.05; letter-spacing: -.025em;
  max-width: 20ch; margin-right: auto; }

/* ------------------------------------------------------- 9. Intro */

/* Entradilla a la izquierda, desarrollo a la derecha: dos pesos de lectura en vez
   de un bloque uniforme. Con columnas simétricas el texto quedaba descompensado. */
.sc26 .intro { display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 860px) { .sc26 .intro { grid-template-columns: 1fr; } }

/* Pegajosa: la columna izquierda es mucho más corta que la derecha y dejaba un hueco
   muerto de varios cientos de píxeles. Así el vacío pasa a ser aire con intención. */
.sc26 .intro__entradilla { position: sticky;
  top: calc(var(--sc-header) + clamp(1.5rem, 4vw, 3rem));
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.8rem); line-height: 1.28; letter-spacing: -.02em;
  text-wrap: pretty; }
@media (max-width: 860px) { .sc26 .intro__entradilla { position: static; } }
.sc26 .intro__texto p { color: var(--fg-2); max-width: var(--ancho-texto); }
.sc26 .intro__texto p + p { margin-top: 1.35em; }

/* ------------------------------------------------------- 10. Ponentes */

.sc26 .ponentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem); }
.sc26 .ponente { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  align-items: start; padding-block: clamp(1.4rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--regla); }
.sc26 .ponente__retrato { width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--realce); border: 1px solid var(--regla); display: grid; place-items: center; }
.sc26 .ponente__retrato img { width: 100%; height: 100%; object-fit: cover; }
.sc26 .ponente__inicial { font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 500;
  font-size: 1.35rem; color: var(--fg-2); letter-spacing: -.02em; }
.sc26 .ponente__n { font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 600;
  font-size: 1.075rem; line-height: 1.25; letter-spacing: -.015em; }
.sc26 .ponente__c { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); }
.sc26 .ponente__s { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--regla);
  display: grid; gap: .6rem; }
.sc26 .ponente__s li { font-size: var(--fs-xs); line-height: 1.5; letter-spacing: .04em; color: var(--fg-2); }
.sc26 .ponente__s b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 11. Sede */

.sc26 .sede { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 900px) { .sc26 .sede { grid-template-columns: 1fr; } }

.sc26 .sede__d { font-size: var(--fs-lead); color: var(--fg-2); max-width: 46ch; }
.sc26 .sede__extras { margin-top: clamp(2rem, 1rem + 2vw, 3rem); }
.sc26 .sede__extras li { padding-block: clamp(1.15rem, 1rem + .6vw, 1.6rem); border-top: 1px solid var(--regla); }
.sc26 .sede__extras li:last-child { border-bottom: 1px solid var(--regla); }
.sc26 .sede__extras b { display: block; font-family: var(--display); font-variation-settings: "wdth" 92;
  font-weight: 600; font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); letter-spacing: -.015em;
  margin-bottom: .5rem; }
.sc26 .sede__extras span { font-size: var(--fs-body); line-height: 1.55; color: var(--fg-2); }

.sc26 .sede__figura { margin: 0; }
.sc26 .sede__img { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; position: relative;
  background:
    radial-gradient(70% 60% at 30% 20%, color-mix(in oklab, var(--violeta-500) 55%, transparent), transparent 70%),
    radial-gradient(60% 70% at 80% 75%, color-mix(in oklab, var(--indigo-700) 75%, transparent), transparent 70%),
    var(--indigo-850); }
.sc26 .sede__img img { width: 100%; height: 100%; object-fit: cover; }

/* Galería con fundido cruzado: todas apiladas, solo una opaca. */
.sc26 .sede__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.sc26 .sede__foto.visible { opacity: 1; }
.sc26 .sede__falta { position: absolute; inset: auto 0 0 0; padding: 1rem 1.25rem;
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--lavanda-300); }
.sc26 .sede__pie { margin-top: .85rem; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--fg-2); }

/* ------------------------------------------------------- 12. FAQ */

.sc26 .faq { max-width: 82ch; }
.sc26 .faq__i { border-top: 1px solid var(--regla); }
.sc26 .faq__i:last-child { border-bottom: 1px solid var(--regla); }
.sc26 .faq__q { display: flex; align-items: baseline; gap: 1.25rem; width: 100%; text-align: left;
  padding-block: clamp(1.15rem, 1rem + .6vw, 1.6rem); cursor: pointer; list-style: none;
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 600;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem); letter-spacing: -.015em; }
.sc26 .faq__q::-webkit-details-marker { display: none; }
.sc26 .faq__q::after { content: ""; flex: none; margin-left: auto; align-self: center;
  width: 11px; height: 11px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ease); }
.sc26 .faq__i[open] .faq__q::after { transform: translateY(1px) rotate(225deg); }
.sc26 .faq__q:hover { color: var(--acento-txt); }
.sc26 .faq__a { padding-bottom: clamp(1.15rem, 1rem + .6vw, 1.6rem); padding-right: 3rem;
  color: var(--fg-2); max-width: var(--ancho-texto); }
.sc26 .faq__qt { flex: 1 1 auto; }
/* La etiqueta fluye dentro del texto de la pregunta, no como hermana en el flex:
   así en móvil se coloca sola al final en vez de partirse en dos líneas. */
.sc26 .faq__tag { display: inline-block; white-space: nowrap; font-family: var(--texto); font-weight: 400;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--regla); border-radius: 999px; padding: .25em .7em; vertical-align: middle; }

/* ------------------------------------------------------- 13. Colaboradores */

.sc26 .colabs { display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 1rem + 2.5vw, 3rem);
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); border-top: 1px solid var(--regla); }
.sc26 .colabs__k { font-family: var(--display); font-variation-settings: "wdth" 82; font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
.sc26 .colab { font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem); letter-spacing: -.01em; }
/* Los tres logos tienen proporciones muy distintas (Corus 4:1, AIVORIQ 6:1,
   Wedents 3:1). Con una altura común, el más apaisado gana el doble de presencia.
   Se iguala el ancho ocupado en vez de la altura, que es lo que percibe el ojo. */
.sc26 .colab img { width: auto; max-width: 170px; max-height: 46px;
  object-fit: contain; object-position: left center; }
.sc26 .colab--ancho img { max-width: 150px; }

/* ------------------------------------------------------- 14. Inscripción */

.sc26 .insc { display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 900px) { .sc26 .insc { grid-template-columns: 1fr; } }

.sc26 .insc__t { font-family: var(--display); font-variation-settings: "wdth" 114; font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); line-height: .95; letter-spacing: -.035em; max-width: 12ch; }
.sc26 .insc__d { margin-top: 1.5rem; color: var(--fg-2); max-width: 42ch; }

/* Bloque de acción de inscripción. El formulario de Helice se abre aparte, así que
   aquí solo va el resumen de precios y el botón. */
.sc26 .insc__accion { border: 1px solid var(--regla); border-radius: 4px; background: var(--realce);
  padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1.5rem; justify-items: start; }
.sc26 .insc__resumen { display: grid; gap: 0; width: 100%; }
.sc26 .insc__resumen li { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding-block: .85rem; border-bottom: 1px solid var(--regla); font-size: var(--fs-sm); }
.sc26 .insc__resumen li:last-child { border-bottom: 0; }
.sc26 .insc__resumen b { font-family: var(--display); font-variation-settings: "wdth" 104;
  font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.sc26 .btn--grande { padding: 1.2em 2.4em; font-size: var(--fs-body); }
.sc26 .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.sc26 .insc__aparte { font-size: var(--fs-xs); color: var(--fg-2); letter-spacing: .02em; }

/* ------------------------------------------------------- 15. CTA fijo en móvil */

.sc26 .cta-fijo { position: fixed; inset: auto 0 0 0; z-index: 60;
  padding: .75rem clamp(1rem, 4vw, 1.5rem) calc(.75rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--indigo-950) 92%, transparent);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: none; transform: translateY(110%); transition: transform .45s var(--ease); }
.sc26 .cta-fijo.visible { transform: none; }
.sc26 .cta-fijo .btn { width: 100%; justify-content: center; }

@media (max-width: 860px) and (min-height: 480px) {
  .sc26 .cta-fijo { display: block; }
}

/* ------------------------------------------------------- 16. Movimiento */

/* El estado oculto solo existe si hay JavaScript: sin él, todo se ve. */
.sc-js .sc26 [data-revela] { opacity: 0; transform: translateY(22px); }
.sc-js .sc26 [data-revela].visto { opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--retardo, 0ms); }

/* Flotación de las burbujas. Amplitudes pequeñas y ciclos largos y desiguales:
   debe leerse como respiración, no como movimiento. Solo transform. */
@keyframes sc-flota-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(1.6%, -2.2%, 0) scale(1.035); }
}
@keyframes sc-flota-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2%, 1.4%, 0) scale(.972); }
}
@keyframes sc-flota-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(-1.4%, -1.8%, 0) scale(1.045); }
  70%      { transform: translate3d(1.9%, 1.2%, 0) scale(.98); }
}

@keyframes sc-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.sc26 .hero__in > * { animation: sc-entra .95s var(--ease) both; }
.sc26 .hero__in > :nth-child(1) { animation-delay: .05s; }
.sc26 .hero__in > :nth-child(2) { animation-delay: .16s; }
.sc26 .hero__in > :nth-child(3) { animation-delay: .27s; }
.sc26 .hero__datos { animation: sc-entra 1s var(--ease) .4s both; }

/* ------------------------------------------------------- 10. Móvil */

@media (max-width: 720px) {
  /* La numeración de sección pasa a línea propia: en columna robaba ancho al titular */
  .sc26 .sec-head { grid-template-columns: 1fr; gap: .9rem; }
  .sc26 .sec-head__n { padding-top: 0; }
  .sc26 .sec-head__t { max-width: none; }
  .sc26 .sec-head__s { grid-column: 1; margin-top: .25rem; }

  .sc26 .dias { gap: 1.75rem; }
  .sc26 .dia-btn { padding-bottom: 1rem; }

  .sc26 .hero__datos { margin-top: clamp(2.25rem, 1rem + 5vw, 3.5rem); }
  .sc26 .hero__acciones .btn { flex: 1 1 auto; justify-content: center; }

  .sc26 .cierre { flex-direction: column; align-items: stretch; }
  .sc26 .cierre__t { margin-right: 0; }
  .sc26 .cierre .btn { justify-content: center; }

  .sc26 .tarifa { flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; }
  .sc26 .tarifa__c { flex: 1 1 100%; }
  .sc26 .tarifa__n { text-align: left; }

  .sc26 .ponente { gap: .9rem; }
  .sc26 .ponente__retrato { width: 52px; height: 52px; }
  .sc26 .faq__a { padding-right: 1.5rem; }
  .sc26 .insc__t { max-width: none; }

  /* Deja aire bajo el último bloque para que el CTA fijo no tape contenido */
  .sc26 .sec:last-of-type { padding-bottom: calc(var(--sp-sec) + 4.5rem); }
}

/* Objetivo táctil mínimo de 44 px en todo lo pulsable */
@media (pointer: coarse) {
  .sc26 .btn { padding-block: 1.15em; }
  .sc26 .dia-btn { min-height: 44px; padding-right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sc26 .burbuja { animation: none; }
  .sc26 .hero__in > *, .sc26 .hero__datos { animation: none; }
  .sc-js .sc26 [data-revela] { opacity: 1; transform: none; transition: none; }
  .sc26 .btn, .sc26 .btn svg, .sc26 .faq__q::after { transition: none; }
  .sc26 .cta-fijo { transition: none; }
}


/* El header del sitio pierde la barra superior por debajo de 1080 px */
@media (max-width: 1080px) {
  .sc26 { --sc-header: 80px; }
}