/*
Theme Name:   Storefront Child Sio&Co
Theme URI:    https://sioallariz.es/
Description:  Tema hijo personalizado de Storefront para Sío&Co. Incorpora la paleta de colores artesanal en tonos tierra y verde salvia, tipografías premium y soporte para la agenda de talleres e integración de Calendly.
Author:       Antigravity AI
Author URI:   https://sioallariz.es/
Template:     storefront
Version:      1.0.0
Text Domain:  storefront-sioco
*/

/* 
 * ==========================================================================
 * SISTEMA DE DISEÑO Y VARIABLES SÍO&CO
 * ==========================================================================
 */

:root {
  --sioco-primary: #8c7355;          /* Arcilla / Marrón cuero suave */
  --sioco-primary-hover: #755f45;
  --sioco-primary-light: #f2ede4;
  --sioco-accent: #5e7060;           /* Verde salvia */
  --sioco-accent-hover: #4c5c4e;
  --sioco-accent-light: #eff3f0;
  
  --sioco-bg-warm: #fcfbfa;          /* Blanco lino */
  --sioco-text-dark: #2b2e2a;        /* Pizarra */
  --sioco-text-muted: #6e726d;       /* Gris medio natural */
  --sioco-border: #e5dfd5;
  --sioco-radius: 12px;
}

/* 
 * ==========================================================================
 * TIPOGRAFÍA Y ESTILOS BASE
 * ==========================================================================
 */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sioco-text-dark);
  background-color: var(--sioco-bg-warm);
}

h1, h2, h3, h4, h5, h6,
.site-title, 
.site-title a,
.onload-payment-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600;
  color: var(--sioco-text-dark);
}

/* 
 * ==========================================================================
 * PERSONALIZACIÓN DE LA NAVEGACIÓN Y CABECERA (STOREFRONT)
 * ==========================================================================
 */

.site-header {
  background-color: rgba(252, 251, 250, 0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sioco-border) !important;
}

.site-branding {
  margin-bottom: 0 !important;
  padding: 0.5rem 0;
}

.site-branding img.custom-logo {
  max-width: 160px !important;
  height: auto !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-branding img.custom-logo:hover {
  transform: scale(1.04) rotate(-1deg);
}

.main-navigation ul li a,
.site-header-cart .cart-contents {
  color: var(--sioco-text-dark) !important;
  font-weight: 500;
  transition: all 0.25s ease;
}

.main-navigation ul li a:hover,
.site-header-cart .cart-contents:hover {
  color: var(--sioco-accent) !important;
}

/* Badge del carrito de Storefront */
.site-header-cart .cart-contents .count {
  background-color: var(--sioco-primary) !important;
  color: #fff !important;
}

/* 
 * Cláusula Informativa RGPD
 */
.sioco-rgpd-notice {
  margin-top: 1.2rem;
  font-size: 0.75rem;
  color: var(--sioco-text-muted);
  line-height: 1.5;
  border: 1px solid var(--sioco-border);
  padding: 1rem;
  border-radius: 10px;
  background-color: #faf9f6;
  transition: all 0.3s ease;
}

.sioco-rgpd-notice:hover {
  border-color: var(--sioco-accent);
  box-shadow: 0 4px 12px rgba(94, 112, 96, 0.04);
}

/* 
 * ==========================================================================
 * BOTONES Y ELEMENTOS DE WOOCOMMERCE
 * ==========================================================================
 */

/* Botones principales de WooCommerce (Añadir al carrito, Checkout, etc.) */
.button.primary,
.woocommerce-button,
button.button,
input.button,
a.button,
.btn-sioco {
  background-color: var(--sioco-primary) !important;
  color: #ffffff !important;
  border-radius: var(--sioco-radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.button.primary:hover,
.woocommerce-button:hover,
button.button:hover,
input.button:hover,
a.button:hover,
.btn-sioco:hover {
  background-color: var(--sioco-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 115, 85, 0.2) !important;
}

/* Botones de acción / acento (como botones de reserva o llamada a la acción) */
.button.alt,
.btn-sioco-accent {
  background-color: var(--sioco-accent) !important;
  color: #ffffff !important;
  border-radius: var(--sioco-radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.button.alt:hover,
.btn-sioco-accent:hover {
  background-color: var(--sioco-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(94, 112, 96, 0.2) !important;
}

/* Tarjetas de Producto de WooCommerce */
ul.products li.product {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  padding: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(140, 115, 85, 0.04);
  border: 1px solid rgba(229, 223, 213, 0.4);
  transition: all 0.3s ease;
}

ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(140, 115, 85, 0.08);
  border-color: var(--sioco-primary);
}

ul.products li.product img {
  border-radius: 8px;
  margin-bottom: 1rem !important;
  transition: transform 0.3s ease;
}

ul.products li.product:hover img {
  transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  color: var(--sioco-text-dark) !important;
  margin-bottom: 0.5rem !important;
}

ul.products li.product .price {
  color: var(--sioco-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem !important;
  margin-bottom: 1rem !important;
}

/* 
 * ==========================================================================
 * ESTILOS DE LA PÁGINA DE TALLERES (PLANTILLA WORDPRESS)
 * ==========================================================================
 */

.sioco-talleres-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 3rem;
  margin: 3rem auto;
}

.sioco-talleres-hero {
  background: linear-gradient(135deg, var(--sioco-accent-light) 0%, var(--sioco-primary-light) 100%);
  padding: 4rem 2rem;
  border-radius: 18px;
  text-align: center;
  margin-bottom: 3rem;
}

.sioco-talleres-hero h1 {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  letter-spacing: -1px;
}

.sioco-talleres-hero p {
  font-size: 1.15rem;
  color: var(--sioco-text-muted);
  max-width: 700px;
  margin: 0 auto;
}

.sioco-events-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sioco-event-card {
  background-color: #ffffff;
  border: 1px solid var(--sioco-border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  gap: 1.5rem;
  box-shadow: 0 4px 12px rgba(140, 115, 85, 0.03);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sioco-event-card:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 24px rgba(140, 115, 85, 0.08);
  border-color: var(--sioco-accent);
}

.sioco-event-date-box {
  background-color: var(--sioco-accent-light);
  color: var(--sioco-accent);
  width: 75px;
  height: 75px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(94, 112, 96, 0.15);
}

.sioco-event-day {
  font-size: 1.8rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  line-height: 1;
}

.sioco-event-month {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.sioco-event-details {
  flex-grow: 1;
}

.sioco-event-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--sioco-text-muted);
  margin-bottom: 0.5rem;
}

.sioco-event-title {
  font-size: 1.3rem !important;
  margin: 0 0 0.5rem 0 !important;
}

.sioco-event-desc {
  font-size: 0.9rem;
  color: var(--sioco-text-muted);
  margin-bottom: 1rem;
}

.sioco-event-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--sioco-accent);
  font-size: 1.2rem;
}

/* Sidebar de la página de talleres */
.sioco-talleres-sidebar {
  background-color: #ffffff;
  border: 1px solid var(--sioco-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(140, 115, 85, 0.05);
  height: fit-content;
  position: sticky;
  top: 100px;
}

.sioco-calendly-container {
  margin-top: 1rem;
  border: 1px solid var(--sioco-border);
  border-radius: 12px;
  overflow: hidden;
  height: 520px;
}

/* Responsividad para la página de talleres */
@media (max-width: 992px) {
  .sioco-talleres-layout {
    grid-template-columns: 1fr;
  }
  .sioco-talleres-sidebar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 576px) {
  .sioco-event-card {
    flex-direction: column;
    gap: 1rem;
  }
  .sioco-event-date-box {
    width: 60px;
    height: 60px;
  }
  .sioco-event-day {
    font-size: 1.4rem;
  }
}

/* 
 * ==========================================================================
 * FOOTER REDISEÑADO SÍO&CO — VERSIÓN 1.1
 * Reemplaza el footer oscuro genérico de Storefront por uno cálido y artesanal
 * en tonos lino, tierra y salvia, coherente con el resto de la web.
 * ==========================================================================
 */

/* Contenedor principal del footer */
.site-footer {
  background-color: #f4ede4 !important;          /* Lino cálido, armoniza con la home */
  color: var(--sioco-text-dark) !important;
  border-top: 1px solid var(--sioco-border) !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* Zona superior del footer (columnas de contenido) */
.site-footer .col-full,
.site-footer > .col-full {
  padding: 4rem 2rem 3rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Anular colores de texto oscuros del footer por defecto */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer address,
.site-footer span {
  color: var(--sioco-text-muted) !important;
}

/* Títulos de las columnas del footer */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
  font-family: 'Outfit', sans-serif !important;
  color: var(--sioco-text-dark) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 1.2rem !important;
}

/* Links del footer */
.site-footer a,
.site-footer .widget a {
  color: var(--sioco-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-size: 0.9rem !important;
}

.site-footer a:hover,
.site-footer .widget a:hover {
  color: var(--sioco-accent) !important;
  text-decoration: none !important;
}

/* Listas de widgets en el footer */
.site-footer .widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .widget ul li {
  padding: 0.35rem 0 !important;
  border-bottom: none !important;
}

.site-footer .widget ul li::before {
  content: none !important;
}

/* Barra inferior del footer (copyright) */
.site-footer .storefront-handheld-footer-bar,
.storefront-handheld-footer-bar {
  background-color: #ecddd0 !important;
  border-top: 1px solid var(--sioco-border) !important;
}

/* Zona del copyright */
.site-info {
  background-color: #ecddd0 !important;
  border-top: 1px solid var(--sioco-border) !important;
  padding: 1.2rem 2rem !important;
  text-align: center !important;
}

.site-info,
.site-info p,
.site-info a,
.site-info span {
  color: var(--sioco-text-muted) !important;
  font-size: 0.82rem !important;
}

.site-info a:hover {
  color: var(--sioco-accent) !important;
}

/* Ocultar el enlace "Construido con WooCommerce" */
.site-info .credit {
  display: none !important;
}

/* Logo del footer — si se usa el título del sitio */
.site-footer .site-title a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--sioco-primary) !important;
  text-decoration: none !important;
}

/* Separador decorativo entre la web y el footer */
.site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--sioco-primary-light), var(--sioco-accent-light), var(--sioco-primary-light));
}

/* Iconos y emojis de contacto en el footer */
.sioco-footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

/* Horarios en el footer */
.sioco-footer-hours strong {
  color: var(--sioco-text-dark) !important;
}

/* Responsive footer */
@media (max-width: 768px) {
  .site-footer .col-full {
    padding: 3rem 1.5rem 2rem !important;
  }

  .site-footer .widget {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 480px) {
  .site-footer .col-full {
    padding: 2rem 1.2rem 1.5rem !important;
  }
}