/*
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; }
}

/* ==========================================================================
   8. PÁGINA DE INICIO (front-page.php)
   ========================================================================== */

/* --- Hero --- */
.sumaq-hero{
  background: linear-gradient(135deg, var(--sumaq-piedra) 0%, #55493f 100%);
  color: var(--sumaq-arena);
  padding: 110px 24px;
  text-align: center;
}

.sumaq-hero-inner{
  max-width: 680px;
  margin: 0 auto;
}

.sumaq-hero-eyebrow{
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sumaq-dorado);
  margin-bottom: 18px;
}

.sumaq-hero h1{
  color: var(--sumaq-arena);
  font-size: 3.2rem;
  line-height: 1.1;
  margin: 0 0 20px;
}

.sumaq-hero-sub{
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sumaq-gris-alpaca);
  margin-bottom: 34px;
}

.sumaq-hero-cta{
  background: var(--sumaq-terracota);
  padding: 16px 36px;
  font-size: 0.85rem;
}

/* --- Categorías destacadas --- */
.sumaq-categories{
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

.sumaq-section-title{
  text-align: center;
  margin-bottom: 48px;
}

.sumaq-category-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sumaq-category-tile{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 24px;
  background: var(--sumaq-arena);
  border: 1px solid var(--sumaq-borde);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sumaq-category-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(58,53,50,0.12);
}

.sumaq-category-tile-name{
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sumaq-piedra);
  margin-bottom: 6px;
}

.sumaq-category-tile-tagline{
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  color: var(--sumaq-gris-alpaca);
}

/* --- Historia de marca --- */
.sumaq-story{
  background: var(--sumaq-arena);
  padding: 90px 24px;
}

.sumaq-story-inner{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.sumaq-story-inner h2{
  margin: 16px 0 20px;
}

.sumaq-story-inner p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sumaq-piedra);
  margin-bottom: 24px;
}

.sumaq-story-link{
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--sumaq-terracota);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.sumaq-story-link:hover{
  color: var(--sumaq-piedra);
}

/* --- Newsletter --- */
.sumaq-newsletter{
  text-align: center;
  padding: 90px 24px;
  max-width: 520px;
  margin: 0 auto;
}

.sumaq-newsletter p{
  color: var(--sumaq-gris-alpaca);
  margin-bottom: 28px;
}

.sumaq-newsletter-form{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sumaq-newsletter-form input[type="email"]{
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border: 1px solid var(--sumaq-borde);
  border-radius: var(--sumaq-radius);
  font-family: 'Manrope', sans-serif;
}

.sumaq-newsletter-note{
  font-size: 0.75rem;
  color: var(--sumaq-gris-alpaca);
  margin-top: 12px;
  font-style: italic;
}

@media (max-width: 900px){
  .sumaq-category-grid{ grid-template-columns: repeat(2, 1fr); }
  .sumaq-hero h1{ font-size: 2.2rem; }
  .sumaq-hero{ padding: 70px 20px; }
}