/* =========================================================
   FAST NUTRITION — Hoja de estilos principal
   Direccion: HARDCORE AMERICANO (Redcon1 / Ghost / military)
   Negro + rojo alto contraste, tipografia ultra-condensada,
   texturas rasgadas, badges tipo sello militar.
   ========================================================= */

:root {
  --negro: #0a0a0a;
  --negro-suave: #131313;
  --carbon: #1c1c1c;
  --carbon-claro: #292929;
  --blanco: #fafafa;
  --rojo: #e0121f;
  --rojo-oscuro: #9c0a14;
  --dorado: #c9a227;
  --dorado-claro: #e6c75a;
  --gris-texto: #6b6b6b;
  --gris-claro: #9a9a92;
  --gris-borde: #d9d6cc;
  --crema: #efece2;

  --fuente-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --fuente-cuerpo: 'Barlow', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --radio: 3px;
  --sombra: 0 14px 34px rgba(0, 0, 0, 0.35);
  --contenedor: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 0 0 0.5em;
  line-height: 0.98;
}

p { margin: 0 0 1em; }

.contenedor {
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Badge tipo sello militar ---------- */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1.5px solid currentColor;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 400;
  padding: 15px 30px 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.boton:active { transform: scale(0.97); }

.boton-rojo {
  background: var(--rojo);
  color: var(--blanco);
}
.boton-rojo:hover { background: var(--rojo-oscuro); }

.boton-contorno {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.boton-contorno:hover { background: var(--blanco); color: var(--negro); }

.boton-contorno-oscuro {
  background: transparent;
  border-color: var(--negro);
  color: var(--negro);
}
.boton-contorno-oscuro:hover { background: var(--negro); color: var(--blanco); }

.boton-dorado {
  background: var(--dorado);
  color: var(--negro);
}
.boton-dorado:hover { background: var(--dorado-claro); }

.boton-bloque { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--negro);
  border-bottom: 3px solid var(--rojo);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.cabecera__logo img { height: 38px; }
.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.cabecera__nav a {
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.15s, color 0.15s;
  position: relative;
}
.cabecera__nav a:hover { opacity: 1; color: var(--rojo); }
.cabecera__acciones { display: flex; align-items: center; gap: 12px; }
.cabecera__usuario {
  color: var(--dorado-claro);
  font-size: 13px;
  margin-right: 8px;
  font-family: var(--fuente-cuerpo);
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .cabecera__nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--negro);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 18px;
    display: none;
    border-bottom: 3px solid var(--rojo);
  }
  .cabecera__nav.abierto { display: flex; }
  .menu-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--negro);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
  padding: 80px 0 90px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(224,18,31,0.22), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dorado-claro);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero__eyebrow .rayo { color: var(--rojo); font-size: 16px; }
.hero h1 {
  font-size: clamp(42px, 5.6vw, 68px);
  margin-bottom: 22px;
  letter-spacing: 0;
}
.hero h1 em {
  font-style: normal;
  color: var(--rojo);
  -webkit-text-stroke: 0;
}
.hero p.lead {
  font-size: 18px;
  font-weight: 500;
  color: rgba(250,250,250,0.78);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__stats {
  display: flex;
  gap: 32px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__stat strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: 34px;
  color: var(--blanco);
}
.hero__stat span {
  font-size: 12px;
  color: rgba(250,250,250,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--fuente-display);
}
.hero__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hero__visual img {
  width: 100%;
  background: var(--blanco);
  border: 1px solid rgba(255,255,255,0.08);
}
.hero__visual .grande { grid-column: span 2; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 420px; margin: 0 auto; }
  .hero__stats { flex-wrap: wrap; gap: 24px; }
}

/* ---------- Franja de sellos (vernacular del packaging) ---------- */
.franja-sellos {
  background: var(--negro);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0;
}
.franja-sellos__lista {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0; padding: 0;
}
.franja-sellos__lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blanco);
}
.franja-sellos__lista li::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--rojo);
  display: inline-block;
}

/* ---------- Secciones generales ---------- */
.seccion { padding: 88px 0; }
.seccion--oscura { background: var(--negro); color: var(--blanco); }
.seccion--crema { background: var(--crema); }
.seccion__cabecera { max-width: 640px; margin-bottom: 48px; }
.seccion__eyebrow {
  display: block;
  color: var(--rojo);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.seccion__cabecera h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.seccion__cabecera p { color: var(--gris-texto); font-size: 17px; }
.seccion--oscura .seccion__cabecera p { color: rgba(250,250,250,0.72); }

/* ---------- Nosotros / por que trabajar con nosotros ---------- */
.razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.razon {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--rojo);
  padding: 28px 24px;
}
.seccion--oscura .razon {
  background: var(--carbon);
  border-color: rgba(255,255,255,0.08);
  border-top: 3px solid var(--rojo);
}
.razon__numero {
  font-family: var(--fuente-display);
  font-size: 12px;
  color: var(--rojo);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: block;
}
.razon h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: 0; }
.razon p { color: var(--gris-texto); font-size: 15px; margin: 0; font-weight: 400; }
.seccion--oscura .razon p { color: rgba(250,250,250,0.68); }

/* ---------- Catalogo ---------- */
.categoria-bloque { margin-bottom: 64px; }
.categoria-bloque__titulo {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--negro);
}
.categoria-bloque__titulo h2 {
  font-size: 26px;
  margin: 0;
}
.categoria-bloque__titulo span {
  font-size: 14px;
  color: var(--gris-texto);
  font-family: var(--fuente-cuerpo);
  text-transform: none;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}

.tarjeta-producto {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.tarjeta-producto:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  border-color: var(--negro);
}
.tarjeta-producto__imagen {
  background: var(--crema);
  padding: 20px;
  text-align: center;
  position: relative;
}
.tarjeta-producto__imagen img {
  margin: 0 auto;
  max-height: 220px;
  width: auto;
  mix-blend-mode: multiply;
}
.tarjeta-producto__cuerpo {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tarjeta-producto__categoria {
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 6px;
}
.tarjeta-producto h3 {
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  margin-bottom: 8px;
}
.tarjeta-producto__formato {
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 12px;
  font-weight: 400;
}
.tarjeta-producto__destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tarjeta-producto__destacados span {
  font-size: 11px;
  font-family: var(--fuente-display);
  letter-spacing: 0.02em;
  background: var(--negro);
  color: var(--blanco);
  padding: 4px 9px;
}
.tarjeta-producto__sabores {
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 16px;
  font-weight: 400;
}
.tarjeta-producto__pie {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gris-borde);
  padding-top: 16px;
}
.precio-pvp { line-height: 1.2; }
.precio-pvp__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texto);
  font-family: var(--fuente-display);
}
.precio-pvp__valor {
  font-family: var(--fuente-display);
  font-size: 20px;
  color: var(--negro);
}
.precio-mayorista-tag {
  display: block;
  font-size: 11px;
  color: var(--rojo);
  font-family: var(--fuente-display);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.precio-bloqueado-tag {
  display: block;
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}
.tarjeta-producto__pie a.boton {
  padding: 10px 18px 9px;
  font-size: 11px;
}

/* CTA de precios bloqueados */
.cta-registro-inline {
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 40px;
  text-align: center;
  margin-top: 8px;
}
.cta-registro-inline h3 { color: var(--blanco); margin-bottom: 10px; }
.cta-registro-inline p { color: rgba(250,250,250,0.7); margin-bottom: 24px; }

/* ---------- Pasos / como funciona ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.paso { position: relative; padding-left: 4px; }
.paso__numero {
  font-family: var(--fuente-display);
  font-size: 42px;
  color: var(--rojo);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.paso h3 { font-size: 18px; margin-bottom: 8px; }
.paso p { color: var(--gris-texto); font-size: 15px; margin: 0; }

/* ---------- Formularios ---------- */
.formulario {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--sombra);
}
.formulario--angosto { max-width: 560px; margin: 0 auto; }
.campo { margin-bottom: 20px; }
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--negro);
}
.campo .opcional { color: var(--gris-texto); font-weight: 400; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: 5px;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  background: var(--blanco);
  color: var(--negro);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(216,30,44,0.12);
}
.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .campo-fila { grid-template-columns: 1fr; }
}
.mensaje-alerta {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 24px;
}
.mensaje-alerta--error {
  background: #fdeceb;
  border: 1px solid #f3b9b4;
  color: #a3141f;
}
.mensaje-alerta--exito {
  background: #eaf3de;
  border: 1px solid #c0dd97;
  color: #27500a;
}
.formulario__pie {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--gris-texto);
}
.formulario__pie a { color: var(--rojo); font-weight: 600; }

/* ---------- Footer ---------- */
.pie {
  background: var(--negro);
  color: rgba(250,250,250,0.7);
  padding: 64px 0 28px;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.pie__marca img { height: 34px; margin-bottom: 16px; }
.pie__marca p { font-size: 14px; max-width: 280px; }
.pie h4 {
  color: var(--blanco);
  font-size: 14px;
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; font-size: 14px; }
.pie a:hover { color: var(--rojo); }
.pie__base {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(250,250,250,0.5);
}
@media (max-width: 880px) {
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .pie__grid { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: #25D366;
  color: #fff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  font-size: 28px;
  transition: transform 0.2s;
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* ---------- Pagina de detalle de producto ---------- */
.detalle-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .detalle-producto { grid-template-columns: 1fr; }
}
.detalle-producto__galeria-principal {
  background: var(--crema);
  border-radius: var(--radio);
  padding: 32px;
  text-align: center;
  margin-bottom: 16px;
}
.detalle-producto__galeria-principal img {
  margin: 0 auto;
  max-height: 380px;
  mix-blend-mode: multiply;
}
.miniaturas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.miniaturas button {
  background: var(--crema);
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  width: 64px;
  height: 64px;
}
.miniaturas button.activa { border-color: var(--rojo); }
.miniaturas img { mix-blend-mode: multiply; }

.migas {
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 28px;
}
.migas a:hover { color: var(--rojo); }

.detalle-producto__categoria {
  color: var(--rojo);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.detalle-producto h1 { font-size: 32px; margin: 8px 0 6px; }
.detalle-producto__formato { color: var(--gris-texto); margin-bottom: 24px; }
.detalle-producto__destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
}
.detalle-producto__destacados span {
  font-size: 12px;
  background: var(--crema);
  border: 1px solid var(--gris-borde);
  padding: 6px 12px;
  border-radius: 20px;
}
.detalle-producto__precio-box {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 28px;
}
.detalle-producto__sabores label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.selector-sabores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.selector-sabores button {
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
}
.selector-sabores button.activa {
  border-color: var(--rojo);
  background: #fdeceb;
  color: var(--rojo-oscuro);
  font-weight: 600;
}

/* ---------- Tablas admin ---------- */
.panel-admin { padding: 40px 0 80px; }
.panel-admin table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.panel-admin th, .panel-admin td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
}
.panel-admin th {
  background: var(--crema);
  font-family: var(--fuente-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.etiqueta-estado {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.etiqueta-estado--pendiente { background: #faeeda; color: #854f0b; }
.etiqueta-estado--aprobado { background: #eaf3de; color: #27500a; }
.etiqueta-estado--rechazado { background: #fdeceb; color: #a3141f; }
.acciones-fila { display: flex; gap: 8px; }
.acciones-fila button, .acciones-fila a {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--gris-borde);
  cursor: pointer;
  background: var(--blanco);
}
.boton-aprobar { color: #27500a !important; border-color: #c0dd97 !important; }
.boton-rechazar { color: #a3141f !important; border-color: #f3b9b4 !important; }

.barra-admin {
  background: var(--negro);
  color: var(--blanco);
  padding: 18px 0;
}
.barra-admin .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.barra-admin a { font-size: 14px; }
.barra-admin a:hover { color: var(--rojo); }

.vacio-tabla {
  text-align: center;
  padding: 48px 24px;
  color: var(--gris-texto);
}