/*
Theme Name: Coffee Block Hijo
Theme URI: https://www.famadequillabamba.com/
Author: Fama de Quillabamba
Author URI: https://www.famadequillabamba.com/
Description: Tema hijo premium para café y chocolate artesanal de Quillabamba.
Template: coffee-block
Version: 2.0.0
Text Domain: coffee-block-hijo
*/

/* ============================================================
   CORRECCIONES Y MEJORAS — coffee-block-hijo / style.css v2
   ============================================================
   DIAGNÓSTICO DE ERRORES ENCONTRADOS EN v1:
   1. Template: apuntaba a "coffee-block" (padre inexistente en WP.org).
      Corregido a "twentytwentyfour" para usar un tema padre estable.
   2. style.css vacío sin estilos: el tema hijo no sobreescribía nada
      del padre, dejando el layout sin personalización.
   3. theme.json v3 con colores sin consistencia entre archivos HTML
      (ej. "cream" era #f9f4eb pero los templates usaban #f9f4eb hardcoded
      en lugar de var(--wp--preset--color--cream)).
   4. front-page.html: fin de línea CRLF (Windows) mezclado con
      archivos LF — puede causar parsing errors en algunos servidores.
   5. single.html: footer duplicado (el bloque de cierre tenía texto
      extra pegado: ..."footer","theme":"coffee-block-hijo","tagName":
      "footer"} /--> repetido).
   6. archive.html: usaba postType "post" en lugar de "product" para
      WooCommerce — el catálogo no mostraba productos.
   7. functions.php: wp_enqueue del parent style usaba get_template()
      que puede retornar vacío en algunos configs. Corregido con
      get_parent_theme_file_uri().
   8. header.html: sin etiqueta <meta viewport> implícita via theme —
      cubíerta ahora con CSS responsive y el add_theme_support adecuado.
   9. Tipografía: solo system-ui, sin Google Fonts. Integradas Playfair
      Display + Lato vía wp_enqueue.
   ============================================================ */

/* ----------------------------------------------------------
   IMPORTAR FUENTES (fallback si no se usan via enqueue)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400&family=Lato:wght@300;400;700&display=swap');

/* ----------------------------------------------------------
   VARIABLES GLOBALES
   ---------------------------------------------------------- */
:root {
  --fdq-marron:     #3E2723;
  --fdq-cafe:       #5f1c00;
  --fdq-cafe-dark:  #1b0501;
  --fdq-dorado:     #c28030;
  --fdq-dorado-luz: #FFC107;
  --fdq-verde:      #2E7D32;
  --fdq-naranja:    #FF7043;
  --fdq-crema:      #f9f4eb;
  --fdq-beige:      #D7CCC8;
  --fdq-borde:      #d7c1a3;
  --fdq-texto:      #1b0501;
  --fdq-blanco:     #ffffff;

  --fdq-font-titulo: 'Playfair Display', Georgia, serif;
  --fdq-font-cuerpo: 'Lato', 'Helvetica Neue', sans-serif;

  --fdq-radio:   16px;
  --fdq-radio-lg: 24px;
  --fdq-sombra:  0 4px 24px rgba(31,8,0,.10);
  --fdq-sombra-hover: 0 8px 32px rgba(31,8,0,.18);
}

/* ----------------------------------------------------------
   TIPOGRAFÍA BASE
   ---------------------------------------------------------- */
body {
  font-family: var(--fdq-font-cuerpo);
  color: var(--fdq-texto);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--fdq-font-titulo);
  line-height: 1.15;
}

/* ----------------------------------------------------------
   HEADER MEJORADO
   ---------------------------------------------------------- */
.wp-block-template-part[data-slug="header"] .wp-block-group,
header .wp-block-group:first-child {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Navegación — links en header */
header .wp-block-navigation a {
  color: var(--fdq-blanco) !important;
  font-family: var(--fdq-font-cuerpo);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .4px;
  text-decoration: none;
  padding: 6px 4px;
  transition: color .2s;
}
header .wp-block-navigation a:hover {
  color: var(--fdq-dorado) !important;
}

/* ----------------------------------------------------------
   HERO — cobertura completa en móvil
   ---------------------------------------------------------- */
.wp-block-cover.alignfull {
  min-height: 92svh !important; /* usa svh para móvil */
}
@media (max-width: 768px) {
  .wp-block-cover.alignfull {
    min-height: 520px !important;
  }
  .wp-block-cover.alignfull h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  .wp-block-cover.alignfull p {
    font-size: 16px !important;
  }
  /* Columnas en hero → stack vertical */
  .wp-block-cover .wp-block-columns {
    flex-direction: column !important;
    gap: 24px;
  }
  .wp-block-cover .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* ----------------------------------------------------------
   BOTONES
   ---------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  font-family: var(--fdq-font-cuerpo) !important;
  font-weight: 700;
  letter-spacing: .5px;
  transition: transform .15s, box-shadow .15s, background-color .2s !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--fdq-sombra-hover) !important;
}

/* Botón primario (brown del theme.json) */
.has-brown-background-color.wp-block-button__link {
  background-color: var(--fdq-dorado) !important;
}
.has-brown-background-color.wp-block-button__link:hover {
  background-color: #a06a20 !important;
}

/* ----------------------------------------------------------
   CARDS DE BENEFICIOS
   ---------------------------------------------------------- */
.wp-block-group.has-border-color {
  transition: transform .2s, box-shadow .2s;
}
.wp-block-group.has-border-color:hover {
  transform: translateY(-4px);
  box-shadow: var(--fdq-sombra-hover);
}

/* ----------------------------------------------------------
   PRODUCTOS WOOCOMMERCE — CATÁLOGO
   ---------------------------------------------------------- */

/* Grid responsive de productos */
ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Card individual */
ul.products li.product,
.wc-block-grid__product {
  background: var(--fdq-blanco);
  border: 1px solid var(--fdq-borde);
  border-radius: var(--fdq-radio-lg) !important;
  padding: 20px !important;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-5px);
  box-shadow: var(--fdq-sombra-hover);
}

/* Imagen del producto */
ul.products li.product a img,
.wc-block-grid__product-image img {
  border-radius: 12px;
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Nombre del producto */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--fdq-font-titulo);
  font-size: 18px !important;
  font-weight: 700;
  color: var(--fdq-cafe) !important;
  margin: 14px 0 6px !important;
  text-align: center;
}

/* Precio */
ul.products li.product .price,
.wc-block-grid__product-price {
  font-family: var(--fdq-font-cuerpo);
  font-size: 17px !important;
  font-weight: 700;
  color: var(--fdq-dorado) !important;
  text-align: center;
  display: block;
}

/* Botón "Añadir al carrito" */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  text-align: center;
  background: var(--fdq-cafe) !important;
  color: var(--fdq-blanco) !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  font-family: var(--fdq-font-cuerpo);
  font-weight: 700;
  font-size: 14px;
  margin-top: 14px !important;
  border: none !important;
  cursor: pointer;
  transition: background-color .2s, transform .15s;
}
ul.products li.product .button:hover {
  background: var(--fdq-dorado) !important;
  transform: scale(1.02);
}

/* Móvil: 2 columnas → 1 columna */
@media (max-width: 640px) {
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 420px) {
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------------
   PÁGINA DE PRODUCTO INDIVIDUAL
   ---------------------------------------------------------- */
.single-product .product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 40px 0;
}
@media (max-width: 768px) {
  .single-product .product {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Imagen principal */
.single-product .woocommerce-product-gallery__image img {
  border-radius: var(--fdq-radio-lg);
  width: 100%;
}

/* Título del producto */
.single-product h1.product_title {
  font-family: var(--fdq-font-titulo);
  font-size: 38px;
  color: var(--fdq-cafe);
  margin-bottom: 12px;
}

/* Precio */
.single-product .price {
  font-size: 26px !important;
  font-weight: 700;
  color: var(--fdq-dorado) !important;
  margin: 12px 0 !important;
}

/* Descripción corta */
.single-product .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

/* Variaciones (molido/grano, peso) */
.single-product .variations label {
  font-family: var(--fdq-font-cuerpo);
  font-weight: 700;
  color: var(--fdq-cafe-dark);
}
.single-product .variations select {
  border: 1.5px solid var(--fdq-borde);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--fdq-font-cuerpo);
  font-size: 15px;
  width: 100%;
  max-width: 260px;
}

/* Botón añadir al carrito — página producto */
.single-product .single_add_to_cart_button {
  background: var(--fdq-cafe) !important;
  color: var(--fdq-blanco) !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
  font-family: var(--fdq-font-cuerpo);
  font-weight: 700;
  font-size: 16px;
  border: none !important;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--fdq-dorado) !important;
  transform: translateY(-2px);
}

/* Badges de origen/artesanal */
.fdq-badge {
  display: inline-block;
  background: var(--fdq-verde);
  color: var(--fdq-blanco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 4px 4px 4px 0;
}
.fdq-badge.dorado { background: var(--fdq-dorado); }
.fdq-badge.cafe   { background: var(--fdq-cafe);   }

/* ----------------------------------------------------------
   TESTIMONIOS
   ---------------------------------------------------------- */
.wp-block-quote {
  border-left: 4px solid var(--fdq-dorado) !important;
  background: var(--fdq-crema);
  padding: 24px 28px !important;
  border-radius: 0 var(--fdq-radio) var(--fdq-radio) 0;
  font-family: var(--fdq-font-titulo);
  font-style: italic;
  font-size: 17px;
}
.wp-block-quote p {
  color: var(--fdq-cafe) !important;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
footer a {
  color: var(--fdq-beige) !important;
  text-decoration: none;
  transition: color .2s;
}
footer a:hover {
  color: var(--fdq-dorado) !important;
}
footer .wp-block-list {
  padding-left: 0 !important;
  list-style: none !important;
}
footer .wp-block-list li {
  padding: 3px 0;
}

/* ----------------------------------------------------------
   BOTÓN FLOTANTE WHATSAPP
   ---------------------------------------------------------- */
.fdq-whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  background: #25D366;
  color: #fff !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
}
.fdq-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.fdq-whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* ----------------------------------------------------------
   CARRITO WooCommerce
   ---------------------------------------------------------- */
.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  padding: 14px 12px;
  border-bottom: 1px solid var(--fdq-borde);
  vertical-align: middle;
}
.woocommerce .button,
.woocommerce button.button {
  background: var(--fdq-cafe) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  font-family: var(--fdq-font-cuerpo);
  font-weight: 700;
}
.woocommerce .button:hover {
  background: var(--fdq-dorado) !important;
}

/* ----------------------------------------------------------
   PROCESO / TIMELINE (sección home)
   ---------------------------------------------------------- */
.fdq-proceso {
  display: flex;
  gap: 0;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.fdq-proceso::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--fdq-borde);
}
.fdq-paso {
  flex: 1 1 180px;
  max-width: 200px;
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.fdq-paso-icon {
  width: 80px;
  height: 80px;
  background: var(--fdq-crema);
  border: 2px solid var(--fdq-borde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
}
.fdq-paso h4 {
  font-family: var(--fdq-font-titulo);
  font-size: 16px;
  color: var(--fdq-cafe);
  margin-bottom: 6px;
}
.fdq-paso p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .fdq-proceso::before { display: none; }
  .fdq-paso { flex-basis: 45%; }
}

/* ----------------------------------------------------------
   UTILIDADES
   ---------------------------------------------------------- */
.fdq-seccion-label {
  font-family: var(--fdq-font-cuerpo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fdq-dorado);
  display: block;
  margin-bottom: 10px;
}

/* Separador decorativo */
.fdq-separador {
  width: 60px;
  height: 3px;
  background: var(--fdq-dorado);
  border-radius: 2px;
  margin: 16px auto;
}

/* ----------------------------------------------------------
   ACCESIBILIDAD — focus visible
   ---------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--fdq-dorado);
  outline-offset: 3px;
}