/* ============================================================
   Curso intermedio Seffiller · Dra. Gimena de los Ríos (14/11/2026)
   Estilos propios de la página, sobre ../styles.css (que aporta fuentes,
   paleta, cabecera flotante, cuenta regresiva y motor de motion). Acá viven
   los acentos del evento: etiquetas en IBM Plex Mono, dorado y la Venus de
   Botticelli bajo un velo petróleo en la cabecera.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  --gold:      #C9892F;
  --gold-2:    #A86E1F;
  --font-mono: 'IBM Plex Mono', monospace;
  --gradient-dark: radial-gradient(120% 140% at 30% 0%, #0a4a63 0%, #04364A 55%, #022734 100%);
}

.curso :focus-visible { outline-color: var(--gold); }
.col { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* Etiquetas en mono, el acento tipográfico del evento */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mono.dorada { color: var(--gold-2); }
.mono.lima { color: var(--lime); }
.mono.tenue { color: var(--cream-60); }
.etq-linea { display: inline-flex; align-items: center; gap: 10px; }
.etq-linea::before { content: ''; width: 16px; height: 7px; border-radius: 999px; background: var(--gold); }
.etq-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(230, 232, 95, 0.1);
  padding: 8px 16px 8px 12px;
}
.etq-mono::before { background: var(--lime); }

/* ---------- Cabecera: invitación sobre la Venus velada ---------- */
.cabecera {
  position: relative;
  overflow: hidden;
  background: var(--gradient-dark);
  color: var(--cream);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.cabecera-fondo { position: absolute; inset: 0; pointer-events: none; }
.cabecera-fondo img {
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.22;
  filter: saturate(0.85);
}
.cabecera-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 39, 52, 0.55) 0%, rgba(4, 54, 74, 0.35) 45%, rgba(2, 39, 52, 0.92) 100%); }
.cabecera-inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  padding-top: clamp(120px, 14vh, 150px);
  padding-bottom: clamp(56px, 8vh, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}
.portada { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px clamp(32px, 5vw, 64px); }
.portada-texto { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.intro { max-width: 30ch; font-size: clamp(17px, 2vw, 20px); color: var(--cream-85); }
.titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.8vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.titulo .mask { padding-bottom: 0.06em; margin-bottom: -0.06em; }
.subtitulo { margin-top: 4px; max-width: 34ch; font-style: italic; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.4; color: var(--lime); }
.nb { white-space: nowrap; }

.invitado { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.invitado-foto { position: relative; width: 176px; height: 232px; }
.invitado-foto .pulso { position: absolute; inset: -10px; border-radius: 98px 98px 14px 14px; box-shadow: 0 0 0 2px var(--lime); }
.invitado-foto img {
  position: relative;
  width: 176px; height: 232px;
  border-radius: 88px 88px 8px 8px;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--lime), 0 0 0 9px rgba(230, 232, 95, 0.16);
}
.invitado figcaption { display: flex; flex-direction: column; gap: 8px; }
.invitado-nombre { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.invitado .mono { font-size: 10.5px; }

/* Cuenta regresiva grande, en fila */
.cuenta-curso { flex-wrap: wrap; align-items: center; gap: 10px; }
.cuenta-curso .cuenta-etq { margin-right: 8px; min-width: 0; padding: 0; background: none; flex-direction: row; }
.cuenta-curso > span { flex-direction: row; align-items: baseline; gap: 8px; padding: 14px 20px; border-radius: 20px; }
.cuenta-curso b { font-stretch: 80%; font-size: clamp(30px, 4vw, 44px); line-height: 1; }
.cuenta-curso small { font-size: 13px; }

/* ---------- Cuerpo ---------- */
.cuerpo { padding: clamp(56px, 8vw, 96px) 0; }
.cuerpo .col { display: flex; flex-direction: column; }
.parrafo { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; text-wrap: pretty; }
.parrafo + .parrafo { margin-top: 20px; }
.parrafo strong { font-weight: 600; }

.recuadro {
  margin-top: 40px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recuadro p { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.6; text-wrap: pretty; }
.recuadro a { box-shadow: inset 0 -1px 0 var(--gold); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .recuadro a:hover { color: var(--gold-2); } }

.datos { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.dato {
  padding: 26px;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 1px 0 rgba(4, 54, 74, 0.06), 0 18px 40px -30px rgba(4, 54, 74, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dato .mono { margin-bottom: 8px; }
.dato-valor { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.015em; line-height: 1.15; }
.dato-sub { font-size: 16px; color: var(--ink-60); }
.datos-acciones { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.datos-acciones a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(201, 137, 47, 0.5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 250ms ease;
}
.datos-acciones svg { color: var(--gold); flex: none; }
@media (hover: hover) and (pointer: fine) { .datos-acciones a:hover { background: rgba(201, 137, 47, 0.1); } }

.inscripcion {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  padding: clamp(30px, 4.4vw, 52px);
  border-radius: 32px;
  background: var(--gradient-dark);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 90px;
}
.inscripcion::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  right: -120px; top: -140px;
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 230, 0.14);
  pointer-events: none;
}
.inscripcion > * { position: relative; }
.inscripcion-titulo { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; }
.inscripcion-texto { max-width: 52ch; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.55; color: var(--cream-85); }
.btn-reservar {
  margin-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 250ms ease, transform 160ms var(--ease-out);
}
.btn-reservar svg { flex: none; transition: transform 300ms var(--ease-out); }
.btn-reservar:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-reservar:hover { background: var(--cream); }
  .btn-reservar:hover svg { transform: translateX(4px); }
}
.inscripcion-nota { margin-top: 6px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: none; color: var(--cream-70); }
.inscripcion-nota a { box-shadow: inset 0 -1px 0 rgba(242, 239, 230, 0.25); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .inscripcion-nota a:hover { color: var(--lime); } }
.despedida { margin-top: 36px; font-style: italic; font-size: clamp(18px, 2vw, 21px); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--ink-15); padding: clamp(32px, 5vw, 48px) 0 clamp(96px, 10vw, 48px); }
.pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px 32px; align-items: start; }
.pie-grid > div { display: flex; flex-direction: column; gap: 10px; }
.pie-org { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.5; }
.pie-sub { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--ink-60); }
.pie-links { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: none; }
.pie-links a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pie-links a:hover { color: var(--gold-2); } }
.pie-legal { margin-top: 36px; font-size: 11px; letter-spacing: 0.15em; color: var(--ink-60); }

/* ---------- Barra fija de reserva (móvil): aparece pasada la portada ---------- */
.barra-fija {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
  transition: opacity 300ms ease, transform 450ms var(--ease-out);
}
.barra-fija.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.barra-fija a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 20px 40px -16px rgba(2, 39, 52, 0.7);
}
.barra-fija-texto { display: flex; flex-direction: column; line-height: 1.2; }
.barra-fija-texto b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.barra-fija-texto small { font-size: 13.5px; color: var(--cream-70); }
.barra-fija-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
@media (max-width: 759px) {
  .barra-fija { display: block; }
}