/**
 * tema.css — la identidad de ESTA tienda.
 *
 * Vive en medios/, que está fuera de Git: cada sitio tiene el suyo y el
 * despliegue no lo pisa. estilo.css queda neutro y compartido; acá solo se
 * cambian colores. Para una tienda nueva se copia este archivo y se cambian
 * los cinco valores de arriba.
 *
 * CLUB CAP — verde bosque, crema y mostaza.
 */

:root {
  --cc-verde:   #124036;  /* el verde del logo */
  --cc-crema:   #F9F3DB;
  --cc-mostaza: #F9B73F;
  --cc-menta:   #15AF8D;
  --cc-negro:   #1A1A1A;

  --tinta:  var(--cc-negro);
  --papel:  #FBF8EE;       /* crema apenas lavado: el crema puro cansa la vista */
  --blanco: #FFFFFF;
  --linea:  #E3DCC4;
  --gris:   #6E6A5E;
  --acento: var(--cc-verde);
  --alerta: #B3261E;
}

/* ---------- Cabecera oscura ---------------------------------------- */

.cabecera {
  background: var(--cc-verde);
  border-bottom: 0;
}

.cabecera .marca { color: var(--cc-crema); }

.marca-tienda img { height: 34px; max-width: 240px; }

.cabecera .carrito-enlace {
  color: var(--cc-crema);
  border-color: rgba(249, 243, 219, .35);
}
.cabecera .carrito-enlace:hover {
  background: rgba(249, 243, 219, .12);
  border-color: var(--cc-crema);
  color: var(--cc-crema);
}
.cabecera .carrito-enlace--lleno {
  background: var(--cc-mostaza);
  border-color: var(--cc-mostaza);
  color: var(--cc-verde);
  font-weight: 600;
}

.buscador input {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(249, 243, 219, .3);
  color: var(--cc-crema);
}
.buscador input::placeholder { color: rgba(249, 243, 219, .55); }
.buscador input:focus {
  background: var(--blanco);
  color: var(--tinta);
  outline-color: var(--cc-mostaza);
}
.buscador button { background: var(--cc-mostaza); color: var(--cc-verde); border-color: var(--cc-mostaza); }

/* Barra de categorías, dentro de la cabecera oscura */

.familias {
  background: var(--cc-verde);
  border-top: 1px solid rgba(249, 243, 219, .18);
}
.familia { color: rgba(249, 243, 219, .78); }
.familia:hover { color: var(--cc-crema); }
.familia--activa {
  color: var(--cc-mostaza);
  border-bottom-color: var(--cc-mostaza);
}

/* ---------- Botones y acentos --------------------------------------- */

.comprar {
  background: var(--cc-mostaza);
  color: var(--cc-verde);
  font-weight: 600;
}
.comprar:hover { background: #FFC964; }

.hero__boton { background: var(--cc-mostaza); color: var(--cc-verde); }

.chip--activo {
  background: var(--cc-verde);
  border-color: var(--cc-verde);
  color: var(--cc-crema);
}
.chip--activo .chip__cuenta { color: rgba(249, 243, 219, .65); }

.wa { background: var(--cc-menta); }

/* Las ofertas usan la mostaza: destaca sobre el verde sin gritar rojo */

.badge-oferta { background: var(--cc-mostaza); color: var(--cc-verde); }
.precio--oferta { color: #A8321F; }

/* ---------- Pie ------------------------------------------------------ */

.pie {
  background: var(--cc-verde);
  border-top: 0;
  color: var(--cc-crema);
}
.pie__columnas strong { color: var(--cc-crema); }
.pie__columnas a,
.pie__columnas p { color: rgba(249, 243, 219, .72); }
.pie__columnas a:hover { color: var(--cc-mostaza); }
.pie__fila {
  border-top-color: rgba(249, 243, 219, .18);
  color: rgba(249, 243, 219, .6);
}