/* ===========================================================
   Re:Cycla — la página de gorras personalizadas (/promocionales/gorras-personalizadas)
   El mismo sistema del sitio principal (estilo.css): hojas, menú, tarjetas .tela, .ficha,
   la hoja de atención y la de cierre, .btn-nar, .btn-wa y .btn-verde. Aquí solo los ajustes
   de esta página (Alan, 6 nov 2026: «Usa el mismo sistema que usaste en la página de
   México»; 13:30: «Las fotos de IA en fondo blanco»; tarde: las tres calidades).
   Teléfono primero. Generada por scripts/generar-promocionales.py
   =========================================================== */

/* menú: «Cotizar» (WhatsApp) también en teléfono, junto a la hamburguesa */
.gc .nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;margin-left:auto;border-radius:999px;
  background:var(--naranja);color:var(--fondo);font-weight:700;font-size:15px;text-decoration:none}

/* portada: la foto (fondo blanco) en un bloque claro arriba del título */
.gc-clara{margin:0;background:#FFFFFF;border-radius:14px;overflow:hidden}
.gc-clara img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* los tipos: la tarjeta lleva su botón de WhatsApp abajo */
.gc-lista .tela .sub{margin-bottom:10px}
.gc-lista .gc-cotiza{margin-top:auto;min-height:44px;font-size:15px}

/* las tres calidades: las tarjetas .tela con chips, «para quién» y abajo su botón de WhatsApp */
.gc-niveles .gc-cotiza{margin-top:12px;min-height:44px;font-size:15px}
.gc-niveles .tela img{background:#FFFFFF}

/* cierre: donde el sitio tiene el formulario, las cinco gorras (Alan, 13:15) y el botón verde */
.gc-cierre .cierre-in{grid-template-areas:"texto" "forma" "contacto"}
.gc-pila{display:flex;margin-bottom:16px}
.gc-pila img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:#FFFFFF;border:3px solid var(--panel);margin-left:-12px}
.gc-pila img:first-child{margin-left:0}
.gc-forma-t{font-size:15px;line-height:1.45;color:var(--texto)}
.gc-forma-t b{display:block;margin-bottom:2px;font-size:17px;color:var(--blanco)}
.gc-forma .btn-verde{margin-top:4px}

/* ===================== TELÉFONO Y TABLETA ===================== */
@media (max-width:1023px){
  .gc-portada{padding-top:calc(var(--nav) + 16px + env(safe-area-inset-top))}
  .gc-portada .gc-clara{max-width:680px;margin:0 auto}
  .gc-portada .texto{margin-top:24px}
}
@media (min-width:600px) and (max-width:1023px){
  .gc-fichas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  /* teléfono: como en atención, foto a la izquierda; la gorra entera sobre su fondo blanco */
  .gc-niveles .tela img{object-fit:contain}
}
@media (min-width:600px){
  .gc-calidades .tit span{display:inline}
}

/* ===================== COMPUTADORA ===================== */
@media (min-width:1024px){
  .gc .nav-cta{margin-left:0}
  .gc-portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;
    padding-top:calc(var(--nav) + 40px);padding-bottom:56px}
  .gc-portada .gc-clara{order:2}
  .gc-portada .texto{order:1}
  .gc-lista{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;width:100%}
  .gc-fichas{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
  .gc-tipos{min-height:0;padding-top:72px}
  .gc-calidades{padding-top:calc(var(--nav) + 24px);padding-bottom:40px}
  .gc-cierre .cierre-in{grid-template-rows:1fr auto;grid-template-areas:"texto forma" "contacto forma"}
  .gc-pila img{width:68px;height:68px}
}