/* Mar del Plata Tech Week 2026: lo propio de este sitio. La base (base.css) es la misma de ATICMA Awards, Emprende y
   ATICMA; acá van los colores de la Tech Week (del magenta al naranja), la portada con quienes organizan, las
   actividades, el cronograma por día y lo que el diseño cambia de la base. */

.techweek {
  --tw-magenta: #e5489a;
  --tw-naranja: #f7a51c;
  --tw-violeta: #7a3df0;
  --tw-azul: #1f52f5;
}

/* ---------- La marca de la barra (isotipo con el degradé de la Tech Week y el nombre en tres renglones) ---------- */

.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--fuerte); }
.marca__isotipo { width: calc(var(--alto-barra) * .56); height: calc(var(--alto-barra) * .52); transition: width .4s var(--suave), height .4s var(--suave); filter: drop-shadow(0 0 10px rgba(229, 72, 154, .35)); }
.marca__texto { display: grid; font-family: var(--cuerpo); line-height: .98; letter-spacing: .04em; font-size: clamp(.78rem, .7rem + .3vw, .95rem); }
.marca__texto b { font-weight: 700; }
.marca__texto i { font-style: normal; font-weight: 400; letter-spacing: .13em; }
.pie__isotipo { width: 4.2rem; height: 3.9rem; }

/* ---------- Entradas animadas (las mismas de ATICMA Emprende: kit.js pone .cargado y .visto) ---------- */

/* Entradas: lo de la portada aparece al cargar, en orden; el resto, al llegar a la vista. */
.js [data-intro] { transform: translateY(22px); }
.cargado [data-intro] { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--suave); transition-delay: calc(.75s + var(--orden, 0) * .13s); }
.cargado .portada__linea { opacity: 1; }
.cargado .portada__linea .letra { animation: letra 1.05s var(--suave) both; animation-delay: calc(.1s + var(--orden, 0) * .04s); }
.portada__linea + .portada__linea .letra { --retraso: .28s; animation-delay: calc(.38s + var(--orden, 0) * .04s); }
@keyframes letra { from { opacity: 0; transform: translateY(80%) rotateX(-75deg); filter: blur(10px); } }
.js .palabra { opacity: 0; }
.cargado .palabra { opacity: 1; transition: opacity 1.6s ease .5s; animation: flotar-palabra 7s ease-in-out infinite alternate; }
.palabra:nth-child(even) { animation-direction: alternate-reverse; animation-duration: 9s; }
@keyframes flotar-palabra { from { transform: translate3d(-3%, 14%, 0); } to { transform: translate3d(3%, -14%, 0); } }
.pausado .palabra { animation-play-state: paused; }

.js [data-aparece], .js [data-escalonado] > * { opacity: 0; transform: translateY(40px); }
.js [data-aparece].visto, .js [data-escalonado] > .visto { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.05s var(--suave); }
.js [data-escalonado] > .visto { transition-delay: calc(var(--orden, 0) * .08s); }
/* las tarjetas que se inclinan ya usan transform: una vez adentro, se les devuelve el control */
.js .inclina.visto { transition: opacity .9s ease, transform .6s var(--suave), box-shadow .45s, border-color .3s; }
.sin-anim [data-aparece], .sin-anim [data-escalonado] > *, .sin-anim .palabra { opacity: 1 !important; transform: none !important; }
.sin-anim .portada__linea .letra { animation: none; }
/* Red de seguridad: si el script no llega (un corte, un bloqueo), a los 4 segundos lo escondido aparece igual. */
.js:not(.cargado):not(.sin-anim) :is([data-aparece], [data-escalonado] > *, .palabra) { animation: aparecer-igual .5s 4s both; }
@media (prefers-reduced-motion: reduce) {
  .palabra, .portada__linea .letra { animation: none !important; }
}

/* ---------- Portada ---------- */

/* Los brillos de la portada, con los colores de la Tech Week. */
.techweek .portada .mancha--verde { background: radial-gradient(closest-side, rgba(122, 61, 240, .55), rgba(90, 40, 200, .18) 58%, transparent 76%); }
.techweek .portada .mancha--lima { background: radial-gradient(closest-side, rgba(247, 140, 40, .42), rgba(229, 72, 154, .14) 58%, transparent 76%); }
.techweek .portada__sobre { text-transform: none; letter-spacing: .06em; color: var(--fuerte); font-size: clamp(.9rem, .8rem + .4vw, 1.15rem); }
/* El título tiene dos renglones largos ("MAR DEL PLATA" / "TECHWEEK 2026"): un poco más chico que el de los Awards. */
.techweek .portada__marco { font-size: clamp(1.55rem, .55rem + 5vw, 4.9rem); }
@media (min-width: 48.01rem) { .techweek .portada__marco { font-size: clamp(1.55rem, min(.55rem + 5vw, 9.4vh), 4.9rem); } }
/* Las palabras de fondo, pegadas a los bordes del título (la caja del título se ajusta al texto): tres a cada lado. */
.techweek .portada__marco { width: fit-content; max-width: 94vw; margin-inline: auto; }
.techweek :is(.palabra--1, .palabra--2, .palabra--3) { left: auto; right: calc(100% - .35em); }
.techweek :is(.palabra--4, .palabra--5, .palabra--6) { right: auto; left: calc(100% - .35em); }
.techweek .palabra--1 { top: -4%; margin-right: .2em; }
.techweek .palabra--2 { top: 20%; margin-right: -.4em; }
.techweek .palabra--3 { top: 44%; margin-right: .5em; }
.techweek .palabra--4 { top: 44%; margin-left: -.2em; }
.techweek .palabra--5 { top: 68%; margin-left: .5em; }
.techweek .palabra--6 { top: 92%; margin-left: 0; }
/* Si la pantalla no deja lugar a los costados del título, no van. */
@media (max-width: 70rem) { .techweek .portada__palabras { display: none; } }

/* "Organiza:" ATICMA, grande y al centro debajo del título; "Apoyan esta iniciativa:" el INCAA y Desarrollo Local e
   Inversiones, más chicos y debajo del lema (pedido de Francisco, 2026-10-21). */
.organiza { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: clamp(1rem, 3vh, 2.2rem); }
.organiza img { width: auto; height: clamp(3.4rem, 11vh, 6rem); }
:is(.organiza, .acompanan) a { display: block; transition: transform .35s var(--suave); }
:is(.organiza, .acompanan) a:hover { transform: translateY(-3px); }
.acompanan { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem clamp(1.2rem, 2.8vw, 2.2rem); margin-top: clamp(1rem, 2.8vh, 1.9rem); }
:is(.organiza, .acompanan) span { font-size: .8rem; color: var(--tenue); }
.acompanan__incaa { width: auto; height: clamp(1.15rem, 2.9vh, 1.5rem); }
.acompanan__desarrollo { width: auto; height: clamp(1.35rem, 3.3vh, 1.8rem); }
.lema-tw { margin-top: clamp(1rem, 3vh, 2.2rem); font-family: var(--titulos); font-weight: 600; font-size: clamp(1rem, .9rem + .55vw, 1.35rem); color: var(--fuerte); }
.lema-tw span { padding-bottom: .12em; background: linear-gradient(var(--tw-azul), var(--tw-azul)) left bottom / 100% 3px no-repeat; }
[data-modo="claro"] :is(.organiza img, .acompanan img, .actividad__marca--logo img) { filter: invert(1) hue-rotate(180deg); }

/* ---------- Actividades ---------- */

.actividades__lista { display: grid; max-width: 60rem; margin-inline: auto; }
.actividad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; padding-block: clamp(2rem, 5vw, 3.6rem); border-top: 1px solid rgba(31, 82, 245, .55); }
.actividad:first-child { border-top: 0; padding-top: 0; }
.actividad--invertida .actividad__foto { order: 2; }
.actividad__foto { border-radius: 20px; overflow: hidden; aspect-ratio: 468 / 369; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 26px 46px -22px #000; }
.actividad__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--suave); }
.actividad:hover .actividad__foto img { transform: scale(1.05); }
.actividad__texto { display: grid; gap: 1rem; justify-items: start; }
.actividad__texto > p:not(.actividad__marca) { font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.5; color: var(--fuerte); }
.actividad__marca { display: flex; align-items: center; gap: .8rem; }
.actividad__isotipo { width: 3.6rem; height: 3.35rem; flex: none; }
.actividad__marca span { display: grid; line-height: 1.02; font-family: var(--cuerpo); color: var(--fuerte); }
.actividad__marca b { font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; }
.actividad__marca i { font-style: normal; font-weight: 300; font-size: .98rem; letter-spacing: .06em; }
.actividad__marca--logo img { width: auto; height: clamp(2.8rem, 6vw, 3.6rem); }
/* Los logos de Awards, Emprende y el Festival llevan a sus sitios. */
a.actividad__marca { text-decoration: none; border-radius: 10px; transition: transform .35s var(--suave), filter .3s; }
a.actividad__marca:hover { transform: translateY(-3px); filter: drop-shadow(0 0 14px rgba(255, 255, 255, .25)); }
a.actividad__marca:focus-visible { outline: 2px solid var(--cian); outline-offset: 6px; }
.actividad__datos { display: grid; gap: .55rem; }
.actividad__datos li { display: flex; align-items: center; gap: .6rem; color: var(--fuerte); }
.actividad__datos .i { flex: none; width: 1.25rem; height: 1.25rem; color: var(--fuerte); }
/* Cada actividad con el color de su programa (con letra oscura donde el blanco no se leería). */
.actividad__boton { margin-top: .2rem; }
.actividad--b2b .actividad__boton { --canto: #075a6a; --resplandor: rgba(27, 179, 208, .55); background: linear-gradient(180deg, #45d0e8, #19b2cf 50%, #0e93ad); color: #02212a; text-shadow: none; }
.actividad--awards .actividad__boton { --canto: #4f6a00; --resplandor: rgba(166, 208, 14, .5); background: linear-gradient(180deg, #c6ec3a, #a6d00e 50%, #8ab407); color: #182100; text-shadow: none; }
.actividad--emprende .actividad__boton { --canto: #8a5400; --resplandor: rgba(247, 165, 28, .5); background: linear-gradient(180deg, #ffc456, #f7a51c 50%, #e08d0a); color: #261600; text-shadow: none; }
.actividad--festival .actividad__boton { --canto: #6e0f5c; --resplandor: rgba(198, 47, 168, .55); background: linear-gradient(180deg, #e04cc4, #c62fa8 50%, #a5208b); }

/* ---------- Cronograma ---------- */

.dias { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.dia {
  position: relative; padding: .5rem 1rem; border-radius: 5px; font-family: var(--titulos); font-weight: 600; font-size: clamp(.82rem, .75rem + .35vw, 1.05rem);
  color: #fff; background: #0b2c8f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #061a5c; transition: background .25s, transform .3s var(--suave);
}
.dia:hover { background: #1440c4; transform: translateY(-2px); }
.dia[aria-selected="true"] { background: var(--tw-azul); }
.dia[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; top: calc(100% + .45rem); translate: -50% 0; border: .38rem solid transparent; border-top-color: var(--fuerte); }
.dia:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.agenda[hidden] { display: none; }
.agenda__tabla { width: 100%; max-width: 54rem; margin-inline: auto; border-collapse: separate; border-spacing: 0; text-align: center; }
/* La cabecera: una caja por columna, separadas, como en el diseño. */
.agenda__tabla thead th { padding: 0 .45rem 1.1rem; font-weight: 400; }
.agenda__tabla thead th span { display: block; padding: .5rem .4rem; border: 2px solid var(--tw-azul); border-radius: 5px; font-family: var(--titulos); font-weight: 600; font-size: clamp(.8rem, .74rem + .3vw, 1rem); color: var(--fuerte); }
.agenda__tabla td { padding: 1.1rem .7rem; border-bottom: 1px solid rgba(31, 82, 245, .6); vertical-align: top; font-size: .95rem; line-height: 1.35; color: var(--fuerte); }
.agenda__hora { width: 18%; font-size: clamp(1rem, .9rem + .4vw, 1.2rem) !important; white-space: nowrap; }
.agenda__actividad { width: 40%; }
.agenda__ciclo { width: 22%; font-weight: 600; }
.agenda__aviso { color: var(--tenue); font-size: .85em; white-space: nowrap; }
.agenda__tabla tbody tr:hover td { background: rgba(31, 82, 245, .08); }
.agenda__nota { max-width: 54rem; margin: 1.6rem auto 0; text-align: center; font-size: .95rem; color: var(--tenue); }
.agenda__nota strong { color: var(--fuerte); font-weight: 600; }

/* ---------- Pantallas medianas y celulares ---------- */

@media (max-width: 48rem) {
  /* En el celular, sin las palabras de fondo de la portada (como en los Awards: quedaba cargada). */
  .techweek .portada__palabras { display: none; }
  .techweek .portada__centro { padding-top: clamp(2.4rem, 7vh, 4.4rem); }
  .marca__texto { font-size: .74rem; }
  .acompanan span { flex-basis: 100%; text-align: center; }      /* en el celular, el rótulo arriba y los logos debajo, centrados */
  .actividad { grid-template-columns: minmax(0, 1fr); }
  .actividad--invertida .actividad__foto { order: 0; }
}

/* En el celular, cada fila del cronograma es una tarjeta: la hora arriba, la actividad, y lugar y ciclo debajo. */
@media (max-width: 40rem) {
  .agenda__tabla, .agenda__tabla tbody, .agenda__tabla tr, .agenda__tabla td { display: block; width: auto; }
  .agenda__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .agenda__tabla tr { padding: 1rem 0; border-bottom: 1px solid rgba(31, 82, 245, .6); text-align: left; }
  .agenda__tabla td { padding: .1rem 0; border: 0; }
  .agenda__hora { color: var(--cian) !important; font-family: var(--titulos); font-size: .95rem !important; }
  .agenda__actividad { font-size: 1.02rem !important; font-weight: 500; margin-block: .2rem; }
  .agenda__tabla td:nth-child(3), .agenda__ciclo { display: inline !important; font-size: .86rem !important; color: var(--tenue); font-weight: 400; }
  .agenda__tabla td:nth-child(3)::after { content: " · "; }
  .agenda__tabla tbody tr:hover td { background: none; }
}