/* ===========================================================
   Re:Cycla — las páginas por deporte y evento (6 nov 2026)
   /uniformes-de-basquetbol, /uniformes-de-voleibol, /uniformes-de-futbol,
   /kit-para-carreras, /playeras-de-graduacion, /playeras-de-pesca
   El mismo sistema de la página de gorras (estilo.css + promocionales.css: .gc-*);
   aquí solo lo propio: el precio de la portada, la tabla de precios, el número de
   corredor, el precio de patrocinio y la galería de trabajos reales.
   Teléfono primero. Generadas por scripts/generar-deportes.py
   =========================================================== */

/* portada: las fotos reales sobre blanco */
.dp .gc-clara img{aspect-ratio:auto;object-fit:contain;background:#FFFFFF}
.dp-desde{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;color:var(--texto)}
.dp-desde b{padding:5px 14px;border-radius:999px;background:var(--naranja);color:var(--fondo);font-size:18px}

/* qué incluye: las tarjetas de atención del sitio (foto a la izquierda en teléfono) */
.dp-lista .tela img{background:#FFFFFF}
.dp-lista .tela img.dp-muestra{object-fit:contain;background:#000;padding:4%}
.dp-nota{margin-top:6px;font-size:12px !important;color:var(--gris) !important}

/* el número de corredor: un dorsal dibujado (no es foto) */
.dp-dorsal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  aspect-ratio:1/1;width:100%;background:#FFFFFF;color:#0B0B0C;text-align:center;padding:10%}
.dp-dorsal b{font-family:"Excon",system-ui,sans-serif;font-weight:700;font-size:clamp(30px,9vw,64px);line-height:1;letter-spacing:.02em}
.dp-dorsal small{font-size:clamp(8px,2.2vw,13px);font-weight:700;letter-spacing:.12em;color:var(--naranja)}
.dp-dorsal small:last-child{color:#55555C;letter-spacing:.04em;font-weight:500}
.dp-dorsal::before,.dp-dorsal::after,.dp-hoyos::before,.dp-hoyos::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--panel)}
.dp-dorsal::before{top:8%;left:8%}
.dp-dorsal::after{top:8%;right:8%}
.dp-hoyos::before{bottom:8%;left:8%}
.dp-hoyos::after{bottom:8%;right:8%}
.dp-lista .tela .dp-dorsal{width:38%;flex:none}

/* precio de patrocinio (carreras) */
.dp-patrocinio{max-width:680px;margin:20px auto 0;display:grid;gap:14px;padding:18px;border-radius:14px;
  background:var(--panel);border:1.5px solid var(--naranja)}
.dp-patrocinio p{font-size:15px;line-height:1.5;color:var(--texto)}
.dp-patrocinio b{display:block;margin-bottom:4px;font-size:18px;color:var(--blanco)}
.dp-patrocinio .btn-wa{min-height:46px;font-size:15px}

/* precios (fútbol) */
.dp-tabla-caja{max-width:680px;margin:24px auto 0}
.dp-tabla{width:100%;border-collapse:collapse;background:var(--panel);border-radius:14px;overflow:hidden}
.dp-tabla th,.dp-tabla td{padding:14px 16px;text-align:left;font-size:16px;border-bottom:1px solid var(--linea)}
.dp-tabla thead th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.dp-tabla tbody th{font-weight:500;color:var(--texto)}
.dp-tabla td{text-align:right;font-weight:700;font-size:20px;color:var(--blanco);white-space:nowrap}
.dp-tabla td small{font-size:12px;font-weight:500;color:var(--gris)}
.dp-tabla tbody tr:last-child th,.dp-tabla tbody tr:last-child td{border-bottom:0}
.dp-tabla tbody tr:last-child td{color:var(--naranja)}
.dp-notas{margin-top:14px;display:grid;gap:8px}
.dp-notas p{font-size:14px;line-height:1.5;color:var(--texto)}
.dp-cotiza{margin-top:20px}

/* trabajos reales: la galería aprobada, sobre blanco como /fotos-de-playeras */
.dp-galeria{max-width:680px;margin:24px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dp-galeria li{aspect-ratio:1/1;background:#FFFFFF;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dp-galeria img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}

/* ===================== COMPUTADORA ===================== */
@media (min-width:1024px){
  .dp-lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%}
  .dp-lista .tela .dp-dorsal{width:100%}
  .dp-patrocinio{max-width:none;grid-template-columns:1fr auto;align-items:center;margin:24px 0 0;padding:20px 24px}
  .dp-precios{min-height:0;padding-top:calc(var(--nav) + 24px)}
  .dp-tabla-caja{max-width:760px;margin:24px 0 0}
  .dp-trabajos{min-height:0;padding-top:calc(var(--nav) + 24px);padding-bottom:56px}
  .dp-galeria{max-width:none;margin:24px 0 0;grid-template-columns:repeat(6,1fr);gap:10px}
  .dp-galeria li{border-radius:12px}
  .dp-galeria img{padding:6px}
}