/* ════════════════════════════════════════════
   TORNEO.CSS — Estilos exclusivos de la página
   Mar del Plata Tiene Tango (torneo).
   Se carga DESPUÉS de base.css y subpaginas.css.
   Tono más formal y competitivo que los encuentros.
   ════════════════════════════════════════════ */


/* Scroll suave solo en esta página, para el botón flotante de Inscripción */
html { scroll-behavior: smooth; }

/* ── BOTÓN FLOTANTE "INSCRIPCIÓN" ─────────────
   Mismo lenguaje visual que .back-btn (subpaginas.css)
   pero espejado a la derecha, ancla a #tr-cta.
   ─────────────────────────────────────────── */

.tr-float-inscripcion {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  text-decoration: none;
  z-index: 999;
}

.tr-float-text {
  background: var(--orange);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.tr-float-arrow {
  background: var(--black);
  color: var(--white);
  font-size: var(--text-base);
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}

.tr-float-inscripcion:hover .tr-float-text  { background: var(--black); color: var(--white); }
.tr-float-inscripcion:hover .tr-float-arrow { background: var(--orange); }

/* Estado cerrado: fuera del rango inicio_inscripcion/cierre_inscripcion de la edición */
.tr-float-inscripcion--cerrado { opacity: 0.5; }
.tr-float-inscripcion--cerrado:hover .tr-float-text  { background: var(--orange); color: var(--white); }
.tr-float-inscripcion--cerrado:hover .tr-float-arrow { background: var(--black); }

/* ── CONTENEDOR PRINCIPAL ─────────────────────
   Sigue el --max-w global. Gap cero: los bloques
   se apilan sin separación, el diseño usa
   fondos alternados para separar secciones.
   ─────────────────────────────────────────── */

.tr-container {
  width: 100%;
  max-width: var(--max-w);
  padding: 0 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ── ETIQUETA DE SECCIÓN ──────────────────────
   Reutilizada en cronograma, condiciones y CTA.
   Naranja, uppercase, pequeña.
   ─────────────────────────────────────────── */

.tr-section-tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 0.2rem;
}

/* Título de sección — Outfit 900 */
.tr-section-title {
  font-family: var(--font);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
}


/* ── DECLARACIÓN ──────────────────────────────
   Bloque de apertura. Fondo negro, texto grande.
   Presenta el torneo como hecho histórico.
   ─────────────────────────────────────────── */

.tr-declaration {
  background: var(--black);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* "Por primera vez" — etiqueta naranja */
.tr-dec-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
}

/* Texto de presentación — grande, blanco */
.tr-dec-text {
  font-family: var(--font);
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  max-width: 600px;
}


/* ── CATEGORÍAS ───────────────────────────────
   Dos tarjetas lado a lado.
   Profesionales: fondo negro / texto celeste.
   Amateurs: fondo blanco / texto negro.
   ─────────────────────────────────────────── */

.tr-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.6rem 0;              /* Separación visual mínima entre secciones */
  background: var(--bg);          /* Celeste asoma entre las tarjetas */
}

.tr-cat-card {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 220px;
}

/* Etiqueta "Categoría" — naranja en ambas */
.tr-cat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
}

/* Nombre de categoría — Outfit 900 */
.tr-cat-title {
  font-family: var(--font);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Descripción de categoría */
.tr-cat-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  font-weight: 300;
}


/* Listado de categoría */
.tr-cat-list {
  /* margin-top: 0.5rem;
  margin-bottom: 0; */
  padding-left: 10%;
}

.tr-cat-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.6;
}





/* Profesionales — negro con texto celeste */
.tr-cat-pro                { background: var(--black); }
.tr-cat-pro .tr-cat-title  { color: var(--bg); }
.tr-cat-pro .tr-cat-desc   { color: rgba(255,255,255,0.75); }
.tr-cat-pro .tr-cat-list li { color: rgba(255,255,255,0.75); }

/* Amateurs — blanco con texto negro */
.tr-cat-am                 { background: var(--white); }
.tr-cat-am .tr-cat-title   { color: var(--black); }
.tr-cat-am .tr-cat-desc    { color: rgba(0,0,0,0.65); }
.tr-cat-am .tr-cat-list li { color: rgba(0,0,0,0.65); }


/* Link "Saber más +" — alineado al fondo de la tarjeta */
.tr-btn-link{
  font-family: var(--font);
  font-size: 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  border-bottom: 2px solid rgba(255,255,255,0.3);  /* Subrayado sutil */
  transition: opacity 0.2s;
  text-align: right;
}

.tr-btn-link:hover { opacity: 0.6; }



/* ── CRONOGRAMA ───────────────────────────────
   Dos bloques de fecha apilados.
   Cada bloque: número de día grande a la izq,
   descripción al centro, badge a la derecha.
   El bloque de la final tiene acento naranja.
   ─────────────────────────────────────────── */

.tr-schedule {
  background: var(--white);
  padding: 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tr-schedule-header {
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Bloque de día — flex horizontal */
.tr-day-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--grey);
  transition: background 0.2s;
}

.tr-day-block:hover { background: var(--black); }
.tr-day-block:hover .tr-day-name  { color: var(--white); }
.tr-day-block:hover .tr-day-desc  { color: rgba(255,255,255,0.7); }
.tr-day-block:hover .tr-day-num   { color: var(--bg); }
.tr-day-block:hover .tr-day-month { color: var(--orange); }

/* Bloque de la final — acento naranja en el borde izquierdo */
.tr-day-final { border-left: 5px solid var(--orange); }

/* Fecha — número grande + mes pequeño apilados */
.tr-day-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  flex-shrink: 0;
}

.tr-day-num {
  font-family: var(--font);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--black);
  transition: color 0.2s;
}

.tr-day-month {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.5);
  transition: color 0.2s;
}

/* Contenido central — nombre del día y descripción */
.tr-day-content { flex: 1; }

.tr-day-name {
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.2rem;
  transition: color 0.2s;
}

.tr-day-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(0,0,0,0.6);
  line-height: 1.4;
  transition: color 0.2s;
}

/* Badge derecho — etiqueta del tipo de jornada */
.tr-day-badge {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--black);
  color: var(--white);
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
}

/* Badge especial para la final — naranja */
.tr-badge-final {
  background: var(--orange);
  color: var(--white);
}


/* ── CONDICIONES ──────────────────────────────
   Grilla de 2 columnas con ícono + texto.
   Fondo celeste (mismo que el fondo global).
   ─────────────────────────────────────────── */

.tr-rules {
  background: var(--bg);
  padding: 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tr-rules-header {
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Grilla de ítems — 2 columnas */
.tr-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Ítem individual — fondo blanco, ícono + texto */
.tr-rule-item {
  background: var(--white);
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Ícono naranja — Font Awesome */
.tr-rule-item i {
  color: var(--orange);
  font-size: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Título de la regla — Outfit pequeño */
.tr-rule-item strong {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 0.25rem;
}

/* Descripción de la regla */
.tr-rule-item p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(0,0,0,0.65);
}

/* Ícono-link al reglamento en PDF, dentro del texto de una regla.
   Sólo el ícono es clickeable; la palabra "reglamento" es texto resaltado, no vínculo. */
.tr-reglamento-link {
  display: inline-flex;
  vertical-align: middle;
  color: var(--orange);
  font-size: 1.1rem;
  transition: opacity 0.2s;
}
.tr-reglamento-link:hover {
  opacity: 0.6;
}
.tr-reglamento-word {
  color: var(--orange);
  font-weight: 700;
}

/* Jurado — lista compacta: foto + nombre + íconos (IG / CV) */
.tr-jurado-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tr-jurado-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tr-jurado-foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tr-jurado-nombre {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--black);
  flex: 1;
}

.tr-jurado-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.tr-jurado-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s;
}

.tr-jurado-links a:hover { opacity: 0.6; }

/* Ícono del CV — imagen propia (no Font Awesome), el color lo define
   la imagen misma, así queda visualmente distinto del ícono de Instagram */
.tr-jurado-cv-icon { height: 1rem; width: 1rem; object-fit: contain; display: block; }


/* Modal del CV — se abre sobre la página, sin navegar a otra pestaña */
.tr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 2rem;
}

.tr-modal-overlay.activo { display: flex; }

.tr-modal-box {
  position: relative;
  background: var(--white);
  width: 100%;
  max-width: 700px;
  height: 85vh;
}

.tr-modal-box iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.tr-modal-cerrar {
  position: absolute;
  top: -2.4rem;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.3rem;
}

.tr-modal-cerrar:hover { color: var(--orange); }


/* ── CTA — INSCRIPCIONES ──────────────────────
   Bloque final. Fondo negro dividido en dos:
   izquierda: título + precio. Derecha: botones.
   Guarda diagonal de cierre.
   ─────────────────────────────────────────── */

.tr-cta { background: var(--black); margin-top: 2rem; }

.tr-cta-inner {
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Lado izquierdo: info de inscripción */
.tr-cta-info { display: flex; flex-direction: column; gap: 1rem; }

/* Título "Inscripciones Abiertas" — Outfit grande, celeste */
.tr-cta-title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--bg);
}

/* Bloque de precio */
.tr-cta-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tr-price-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}
.tr-price-descrip {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}

/* Monto — Outfit 900, blanco, grande */
.tr-price-amount {
  font-family: var(--font);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* Bloque destacado del reglamento oficial, dentro del CTA */
.tr-cta-reglamento {
  background: rgba(255,122,0,0.12);
  border: 1px solid rgba(255,122,0,0.3);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tr-cta-reglamento-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 0.2rem;
}
.tr-cta-reglamento-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.tr-cta-reglamento-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--orange);
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
}
.tr-cta-reglamento-icon:hover {
  background: var(--orange);
  color: var(--black);
}

/* Lado derecho: botones de acción apilados */
.tr-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Base compartida de botones */
.tr-btn-form, .tr-btn-wsp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

/* Formulario — blanco, hover naranja */
.tr-btn-form                { background: var(--white); color: var(--black); }
.tr-btn-form:hover          { background: var(--orange); color: var(--white); }
.tr-btn-form--cerrado       { opacity: 0.5; cursor: default; }
.tr-btn-form--cerrado:hover { background: var(--white); color: var(--black); }

/* WhatsApp — naranja, hover blanco con texto naranja */
.tr-btn-wsp        { background: var(--orange); color: var(--white); }
.tr-btn-wsp:hover  { background: var(--white); color: var(--orange); }

/* Guarda diagonal de cierre — igual que PrimaCosa */
.tr-guarda {
  height: 20px;
  background: repeating-linear-gradient(
    45deg,
    var(--black), var(--black) 10px,
    var(--orange) 10px, var(--orange) 20px
  );
}


/* ── RESPONSIVE ───────────────────────────────
   768px: categorías y reglas a 1 columna,
          CTA apila info y botones verticalmente.
   520px: ajustes de padding y tamaños.
   ─────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
  .tr-categories  { grid-template-columns: 1fr; gap: 0.5rem; }
  .tr-rules-grid  { grid-template-columns: 1fr; }
  .tr-cta-inner   { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .tr-cta-actions { width: 100%; }
  .tr-btn-form, .tr-btn-wsp { justify-content: center; }
  .tr-day-block   { flex-wrap: wrap; }
  .tr-day-badge   { flex-basis: 100%; margin-top: 0.5rem; }
}

/* Móvil */
@media (max-width: 520px) {
  .tr-declaration { padding: 2rem 1.25rem; }
  .tr-schedule    { padding: 1.5rem 1.25rem 2rem; }
  .tr-rules       { padding: 1.5rem 1.25rem 2rem; }
  .tr-cta-inner   { padding: 2rem 1.25rem; }
  .tr-day-num     { font-size: 2rem; }
}