/* ==========================================================================
   ATF3D.COM — Gestor de la Tienda
   Estilos de los bloques de portada. Pensados para convivir con el tema del
   usuario: usan sus mismos colores y no tocan nada del tema.
   ========================================================================== */

.aft-estrella,.aft-seccion,.aft-final,.aft-cinta{
  --aft-cian:#00f2ff;
  --aft-rosa:#ff00d4;
  --aft-borde:rgba(255,255,255,.08);
  --aft-panel:rgba(20,20,22,.85);
  --aft-texto:#e5e1e4;
  --aft-suave:#b9cacb;
  --aft-mono:"JetBrains Mono",ui-monospace,monospace;
  --aft-display:"Space Grotesk","Inter",sans-serif;
}

/* ==========================================================================
   EL MARCO DE IMAGEN — la pieza clave: todas las fotos ocupan lo mismo
   La proporcion la fija --aft-proporcion y la foto se ajusta con object-fit,
   asi da igual el tamaño con el que se suba: nunca descuadra.
   ========================================================================== */
.aft-marco{
  position:relative;display:block;width:100%;
  aspect-ratio:var(--aft-proporcion,16/10);
  background:#000;border:1px solid var(--aft-borde);
  overflow:hidden;
}
.aft-marco img{
  width:100%;height:100%;display:block;
  object-fit:var(--aft-ajuste,contain);
  object-position:center;
  transition:transform .5s ease;
}
.aft-tarjeta:hover .aft-marco img{transform:scale(1.04)}
.aft-sin-imagen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--aft-mono);font-size:11px;color:#4b5563;letter-spacing:.1em;
}
/* El mismo marco para las tarjetas normales de WooCommerce */
.aft-marco-loop{margin-bottom:.9rem}
.aft-marco-loop img{margin:0 !important;border:none !important}

/* Esquinas HUD */
.aft-hud{position:absolute;width:14px;height:14px;z-index:5;pointer-events:none}
.aft-hud-tl{top:0;left:0;border-top:2px solid var(--aft-cian);border-left:2px solid var(--aft-cian)}
.aft-hud-tr{top:0;right:0;border-top:2px solid var(--aft-cian);border-right:2px solid var(--aft-cian)}
.aft-hud-bl{bottom:0;left:0;border-bottom:2px solid var(--aft-cian);border-left:2px solid var(--aft-cian)}
.aft-hud-br{bottom:0;right:0;border-bottom:2px solid var(--aft-cian);border-right:2px solid var(--aft-cian)}

/* ==========================================================================
   1. PRODUCTO ESTRELLA
   ========================================================================== */
.aft-estrella{
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
  max-width:1280px;margin:0 auto;padding:3.5rem 1.5rem;
}
@media(min-width:1024px){.aft-estrella{grid-template-columns:1fr 1fr;padding:4.5rem 2rem;gap:4rem}}
.aft-etiqueta{
  display:inline-block;font-family:var(--aft-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--aft-cian);margin-bottom:1rem;
}
.aft-etiqueta-rosa{color:var(--aft-rosa)}
.aft-estrella-titulo{
  font-family:var(--aft-display);font-weight:700;
  font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.05;
  text-transform:uppercase;color:#fff;margin:0 0 1.2rem;
}
.aft-precios{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.4rem}
.aft-precio{font-family:var(--aft-display);font-size:2rem;font-weight:700;color:var(--aft-cian)}
.aft-precio .amount{color:var(--aft-cian)}
.aft-precio-viejo{font-family:var(--aft-mono);font-size:1rem;color:#6b7280;text-decoration:line-through}
.aft-badge-oferta{
  border:1px solid rgba(255,0,212,.5);background:rgba(255,0,212,.12);color:var(--aft-rosa);
  font-family:var(--aft-mono);font-size:10px;letter-spacing:.12em;
  padding:.25rem .65rem;text-transform:uppercase;
}
.aft-ventajas{list-style:none;padding:0;margin:0 0 1.8rem}
.aft-ventajas li{
  display:flex;gap:.6rem;align-items:flex-start;
  color:var(--aft-suave);font-size:.94rem;margin-bottom:.6rem;
}
.aft-ventajas li::before{content:"\2714";color:var(--aft-cian);flex:none}
.aft-botones{display:flex;gap:.9rem;flex-wrap:wrap}
.aft-boton{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--aft-cian);color:#05070c !important;
  font-family:var(--aft-mono);font-weight:700;font-size:.82rem;letter-spacing:.04em;
  padding:.85rem 1.5rem;border:none;text-decoration:none;
  transition:box-shadow .2s,background .2s;
}
.aft-boton:hover{background:#00d7e2;box-shadow:0 0 18px rgba(0,242,255,.5)}
.aft-boton-borde{
  background:transparent;color:var(--aft-cian) !important;
  border:1px solid var(--aft-cian);
}
.aft-boton-borde:hover{background:rgba(0,242,255,.12);box-shadow:none}
.aft-boton-rosa{background:var(--aft-rosa);color:#fff !important}
.aft-boton-rosa:hover{background:#e600bd;box-shadow:0 0 18px rgba(255,0,212,.5)}
.aft-boton-peq{font-size:.72rem;padding:.6rem 1rem;margin-top:.7rem}

/* ==========================================================================
   SECCIONES Y REJILLA
   ========================================================================== */
.aft-seccion{max-width:1280px;margin:0 auto;padding:3rem 1.5rem}
@media(min-width:1024px){.aft-seccion{padding:4rem 2rem}}
.aft-cabecera-seccion{text-align:center;margin-bottom:2.5rem}
.aft-cabecera-seccion.aft-izquierda{text-align:left}
.aft-titulo-seccion{
  font-family:var(--aft-display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.3rem);text-transform:uppercase;color:#fff;margin:0 0 .7rem;
}
.aft-subrayado{width:80px;height:3px;background:var(--aft-cian);margin:0 auto 1.1rem}
.aft-cabecera-seccion.aft-izquierda .aft-subrayado{margin-left:0}
.aft-desc-seccion{color:var(--aft-suave);max-width:640px;margin:0 auto;font-size:.95rem}
.aft-desc-seccion.aft-izquierda{margin-left:0}

.aft-rejilla{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
@media(min-width:900px){
  .aft-rejilla{grid-template-columns:repeat(var(--aft-columnas,3),minmax(0,1fr))}
}

/* Tarjetas: todas de la misma altura y alineadas */
.aft-tarjeta{
  background:var(--aft-panel);border:1px solid var(--aft-borde);
  padding:.85rem;display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s;
}
.aft-tarjeta:hover{border-color:rgba(0,242,255,.4);transform:translateY(-3px)}
.aft-tarjeta-titulo{
  font-family:var(--aft-display);font-size:.88rem;font-weight:700;
  color:#fff;margin:.8rem 0 .45rem;line-height:1.3;text-transform:uppercase;
}
.aft-tarjeta-titulo a{color:#fff;text-decoration:none}
.aft-tarjeta-titulo a:hover{color:var(--aft-cian)}
.aft-tarjeta-precio{
  font-family:var(--aft-display);font-weight:700;color:var(--aft-cian);
  font-size:1.05rem;margin-top:auto;
}
.aft-tarjeta-precio del{color:#6b7280;font-size:.8rem;font-weight:400;margin-right:.4rem}
.aft-tarjeta-precio ins{background:none;color:var(--aft-cian);text-decoration:none}
.aft-tarjeta .aft-boton{justify-content:center;text-align:center}

/* ==========================================================================
   3. CINTA DE MENSAJES
   ========================================================================== */
.aft-cinta{
  position:relative;overflow:hidden;width:100%;
  border-top:1px solid var(--aft-borde);border-bottom:1px solid var(--aft-borde);
  background:linear-gradient(90deg,rgba(255,0,212,.06),rgba(0,242,255,.06));
  padding:.85rem 0;
}
.aft-cinta-pista{
  display:flex;gap:3rem;white-space:nowrap;width:max-content;
  animation:aft-desliza var(--aft-velocidad,40s) linear infinite;
}
.aft-cinta-item{
  font-family:var(--aft-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--aft-suave);
}
.aft-cinta-destacado{color:var(--aft-cian)}
@keyframes aft-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.aft-cinta:hover .aft-cinta-pista{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.aft-cinta-pista{animation:none}}

/* ==========================================================================
   5. BLOQUE FINAL
   ========================================================================== */
.aft-final{
  position:relative;max-width:1180px;margin:3rem auto 4rem;
  padding:3rem 2rem;text-align:center;
  border:1px solid rgba(255,0,212,.25);
  background:
    linear-gradient(rgba(255,0,212,.05),rgba(0,242,255,.03)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 32px);
}
.aft-final-titulo{
  font-family:var(--aft-display);font-weight:700;
  font-size:clamp(1.4rem,3.6vw,2.3rem);color:#fff;text-transform:uppercase;
  margin:0 0 1rem;
}
.aft-final-desc{color:var(--aft-suave);max-width:640px;margin:0 auto 1.8rem;font-size:.95rem}
.aft-final-producto{max-width:320px;margin:0 auto 1.6rem}
.aft-final-precio{
  font-family:var(--aft-display);font-weight:700;color:var(--aft-cian);
  font-size:1.3rem;margin-top:.7rem;
}
.aft-marco-peq{max-width:320px;margin:0 auto}

/* ==========================================================================
   PORTADA GESTIONABLE — se apoya en las clases del tema del usuario
   ========================================================================== */
.aft-portada .aft-precios{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:1rem 0 1.2rem}
.aft-portada .aft-precio{font-family:var(--aft-display,"Space Grotesk");font-size:2rem;font-weight:700;color:#00f2ff}
.aft-portada .aft-precio .amount{color:#00f2ff}
.aft-portada .aft-precio-viejo{font-family:"JetBrains Mono",monospace;font-size:1rem;color:#6b7280;text-decoration:line-through}

.aft-cabecera-seccion{text-align:center;margin-bottom:2.2rem}
.aft-cabecera-seccion.aft-izquierda{text-align:left}
.aft-titulo-seccion{
  font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.3rem);text-transform:uppercase;color:#fff;margin:.4rem 0 .7rem;
}
.aft-subrayado{width:80px;height:3px;background:#00f2ff;margin:0 auto 1rem}
.aft-cabecera-seccion.aft-izquierda .aft-subrayado{margin-left:0}
.aft-desc-seccion{color:#b9cacb;max-width:640px;margin:0 auto;font-size:.95rem}
.aft-desc-seccion.aft-izquierda{margin-left:0}
.aft-eyebrow-rosa{color:#ff00d4 !important}

.aft-rejilla{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(min-width:900px){.aft-rejilla{grid-template-columns:repeat(var(--aft-columnas,3),minmax(0,1fr))}}

.aft-tarjeta{
  background:rgba(20,20,22,.85);border:1px solid rgba(255,255,255,.08);
  padding:.8rem;display:flex;flex-direction:column;position:relative;
  transition:border-color .25s,transform .25s;
}
.aft-tarjeta:hover{border-color:rgba(0,242,255,.4);transform:translateY(-3px)}
.aft-tarjeta-enlace{display:block}
.aft-tarjeta-titulo{
  font-family:"Space Grotesk","Inter",sans-serif;font-size:.85rem;font-weight:700;
  color:#fff;margin:.75rem 0 .4rem;line-height:1.3;text-transform:uppercase;
}
.aft-tarjeta-titulo a{color:#fff;text-decoration:none}
.aft-tarjeta-titulo a:hover{color:#00f2ff}
.aft-tarjeta-precio{
  font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;color:#00f2ff;
  font-size:1rem;margin-top:auto;
}
.aft-tarjeta-precio del{color:#6b7280;font-size:.78rem;font-weight:400;margin-right:.35rem}
.aft-tarjeta-precio ins{background:none;color:#00f2ff;text-decoration:none}
.aft-tag-oferta{
  position:absolute;top:.9rem;right:.9rem;z-index:6;
  background:#ff00d4;color:#fff;font-family:"JetBrains Mono",monospace;
  font-size:9px;font-weight:700;letter-spacing:.08em;padding:.15rem .5rem;text-transform:uppercase;
}
.aft-tarjeta .aft-boton-peq{margin-top:.75rem;justify-content:center;text-align:center;font-size:.72rem;padding:.55rem .9rem}
.aft-centrado{text-align:center;margin-top:2rem}

.aft-cinta-destacado{color:#00f2ff;font-weight:700}
.aft-final{
  position:relative;padding:2.8rem 2rem;text-align:center;
  border:1px solid rgba(255,0,212,.25);
  background:linear-gradient(rgba(255,0,212,.05),rgba(0,242,255,.03));
}
.aft-final-titulo{
  font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2.2rem);color:#fff;text-transform:uppercase;margin:.5rem 0 1rem;
}
.aft-final-desc{color:#b9cacb;max-width:640px;margin:0 auto 1.6rem;font-size:.95rem}
.aft-final-producto{max-width:300px;margin:0 auto 1.4rem}
.aft-final-precio{font-family:"Space Grotesk";font-weight:700;color:#00f2ff;font-size:1.2rem;margin-top:.6rem}
.aft-boton-rosa{background:#ff00d4 !important;color:#fff !important;border-color:#ff00d4 !important}

/* Bloque de escenografias / piezas impresas */
.aft-subrayado-rosa{background:#ff00d4 !important}
.aft-seccion-impresos{
  background:linear-gradient(180deg,rgba(255,0,212,.05),transparent 60%);
}
.aft-seccion-impresos .aft-tarjeta:hover{border-color:rgba(255,0,212,.45)}
.aft-seccion-impresos .af-eyebrow{display:inline-flex;align-items:center;gap:.35rem}


/* ==========================================================================
   LA CINTA, PEGADA AL BANNER

   Al ir justo debajo del banner tiene que leerse como parte de el, no como
   una seccion suelta: sin hueco arriba y con una linea de separacion.
   ========================================================================== */
.aft-cinta-bajo-banner{
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-top:1px solid rgba(0,242,255,.18);
  border-bottom:1px solid rgba(0,242,255,.18);
  background:linear-gradient(90deg,rgba(0,242,255,.05),rgba(255,0,170,.05));
}