/*
Theme Name: Sumaq Child
Template: storefront
Description: Tema hijo personalizado para Sumaq — moda de alpaca peruana para el mercado alemán/europeo.
Version: 1.0.0
Text Domain: sumaq-child
*/

/* ==========================================================================
   1. VARIABLES DE MARCA — SUMAQ
   Paleta distinta a Kuna: en vez de tonos "lujo oscuro", usamos tonos
   cálidos "tierra andina" con acento terracota, para diferenciarnos.
   ========================================================================== */
:root{
  --sumaq-terracota: #B5603C;   /* acento principal */
  --sumaq-arena:     #F4EDE4;   /* fondo claro cálido */
  --sumaq-piedra:    #3A3532;   /* texto principal — "piedra" del brand book */
  --sumaq-gris-alpaca: #A9A29A; /* "gris alpaca" del brand book, para textos secundarios */
  --sumaq-dorado:    #C9A227;   /* "dorado inca" — acento puntual, usar con moderación */
  --sumaq-blanco:    #FFFFFF;
  --sumaq-borde:     #E4D9C8;
  --sumaq-radius:    2px;
}

/* ==========================================================================
   2. TIPOGRAFÍA
   Kuna usa tipografía serif clásica de lujo. Para Sumaq usamos una
   combinación serif moderna (titulares) + sans geométrica (cuerpo),
   con más peso y personalidad, para diferenciarnos claramente.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

body, button, input, select, textarea{
  font-family: 'Manrope', -apple-system, sans-serif;
  color: var(--sumaq-piedra);
  background: var(--sumaq-blanco);
}

h1, h2, h3, h4, h5, h6,
.site-title, .storefront-product-section .section-title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sumaq-piedra);
}

h1{ font-size: 2.6rem; }
h2{ font-size: 2rem; }

/* ==========================================================================
   3. HEADER — orden distinto al de Kuna
   Kuna: logo centrado arriba, menú debajo centrado.
   Sumaq: logo a la izquierda, menú a la derecha, barra de anuncio arriba.
   ========================================================================== */
.sumaq-announcement-bar{
  background: var(--sumaq-piedra);
  color: var(--sumaq-arena);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
}

.site-header{
  background: var(--sumaq-blanco);
  border-bottom: 1px solid var(--sumaq-borde);
}

.site-branding{
  float: left;
}

.main-navigation{
  float: right;
}

.main-navigation ul li a{
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sumaq-piedra);
}

.main-navigation ul li a:hover{
  color: var(--sumaq-terracota);
}

/* ==========================================================================
   4. BOTONES — forma y color distintos (rectos, terracota, sin sombras)
   ========================================================================== */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button{
  background: var(--sumaq-terracota);
  border: none;
  border-radius: var(--sumaq-radius);
  color: var(--sumaq-blanco);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 14px 28px;
  box-shadow: none;
  transition: background 0.2s ease;
}

.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
  background: var(--sumaq-piedra);
}

/* ==========================================================================
   5. GRID DE PRODUCTOS — Kuna usa 4 columnas con imagen grande + hover.
   Sumaq usa 3 columnas, más espaciado, con la ficha técnica de fibra visible.
   ========================================================================== */
ul.products{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

ul.products li.product{
  text-align: left;
  background: var(--sumaq-arena);
  padding: 16px;
}

ul.products li.product .woocommerce-loop-product__title{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  margin-top: 12px;
}

ul.products li.product .price{
  color: var(--sumaq-terracota);
  font-weight: 700;
}

/* ==========================================================================
   6. FOOTER — franja informativa de fibra + sostenibilidad (diferenciador
   frente a Kuna, apela directamente al comprador alemán/europeo)
   ========================================================================== */
.sumaq-trust-strip{
  background: var(--sumaq-piedra);
  color: var(--sumaq-dorado);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 28px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.site-footer{
  background: var(--sumaq-piedra);
  color: var(--sumaq-arena);
}

.site-footer a{
  color: var(--sumaq-arena);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px){
  ul.products{ grid-template-columns: repeat(2, 1fr); }
  .sumaq-trust-strip{ grid-template-columns: repeat(2, 1fr); }
  .site-branding, .main-navigation{ float: none; text-align: center; }
}