/* ============================================================
   COQUITOS WEAR — Variables de marca
   Paleta extraída del logotipo oficial
   ============================================================ */

:root {
  /* ---- Colores principales ---- */
  --cw-coco-oscuro: #4B2E1B;   /* Marrón coco — texto, logo, trazos */
  --cw-cascara:     #7E4E36;   /* Marrón cáscara — secundario, hovers */
  --cw-arena:       #E5D5C7;   /* Arena — fondos suaves, tarjetas */
  --cw-crema:       #FAF4EA;   /* Crema — fondo principal del sitio */

  /* ---- Acentos (hoja del logo) ---- */
  --cw-hoja:        #5A8F29;   /* Verde hoja — CTAs, precios, éxito */
  --cw-lima:        #93B733;   /* Verde lima — detalles, badges, iconos */

  /* ---- Neutros de apoyo ---- */
  --cw-blanco:      #FFFFFF;
  --cw-tinta:       #2E1C10;   /* Marrón casi negro — texto largo */
  --cw-linea:       #E8DCCE;   /* Bordes y separadores */

  /* ---- Tintes derivados ---- */
  --cw-crema-90:  #FBF6EF;
  --cw-arena-50:  #F2E9DF;
  --cw-hoja-10:   #EEF4E3;     /* Fondo de mensajes de éxito */
  --cw-coco-10:   #EFE7E0;     /* Fondo de etiquetas neutras */

  /* ---- Tipografía ---- */
  --cw-font-display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cw-font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --cw-font-accent:  'Pacifico', cursive;   /* Solo detalles puntuales */

  /* ---- Radios y sombras (estética redondeada del logo) ---- */
  --cw-radius-sm: 10px;
  --cw-radius-md: 18px;
  --cw-radius-lg: 28px;
  --cw-radius-pill: 999px;
  --cw-shadow: 0 6px 24px rgba(75, 46, 27, 0.10);
}

/* ---- Base ---- */
body {
  background: var(--cw-crema);
  color: var(--cw-tinta);
  font-family: var(--cw-font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, .cw-display {
  font-family: var(--cw-font-display);
  color: var(--cw-coco-oscuro);
  font-weight: 700;
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }

a { color: var(--cw-hoja); }

/* ---- Botones ---- */
.cw-btn {
  display: inline-block;
  font-family: var(--cw-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.8em 1.9em;
  border-radius: var(--cw-radius-pill);
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cw-btn:hover { transform: translateY(-2px); box-shadow: var(--cw-shadow); }

.cw-btn--primario   { background: var(--cw-hoja);        color: var(--cw-blanco); }
.cw-btn--secundario { background: var(--cw-coco-oscuro); color: var(--cw-crema);  }
.cw-btn--suave      { background: var(--cw-arena);       color: var(--cw-coco-oscuro); }

/* ---- Tarjetas de producto ---- */
.cw-card {
  background: var(--cw-blanco);
  border: 1px solid var(--cw-linea);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow);
  overflow: hidden;
}

/* ---- Badges ---- */
.cw-badge {
  display: inline-block;
  font-family: var(--cw-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25em 0.9em;
  border-radius: var(--cw-radius-pill);
}
.cw-badge--nuevo   { background: var(--cw-lima);    color: var(--cw-coco-oscuro); }
.cw-badge--oferta  { background: var(--cw-cascara); color: var(--cw-blanco); }
.cw-badge--eco     { background: var(--cw-hoja-10); color: var(--cw-hoja); }