/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0.0
*/

/* =========================================================
   ZIREL - BASE GLOBAL
========================================================= */
:root{
  --zirel-bg: #f7f5f2;
  --zirel-surface: #ffffff;
  --zirel-text: #1f2740;
  --zirel-text-soft: #5f6b7a;
  --zirel-line: #e7e2db;
  --zirel-accent: #4f7f74;
  --zirel-accent-dark: #3f695f;
  --zirel-radius: 18px;
  --zirel-shadow: 0 10px 30px rgba(31,39,64,.07);
  --zirel-container: 1380px;
}

/* =========================================================
   BODY
========================================================= */
body{
  background: var(--zirel-bg);
  color: var(--zirel-text);
}

/* =========================================================
   CONTENEDOR GENERAL
========================================================= */
.site-container,
.content-container,
.site-main-header-wrap .site-header-row-container-inner,
.site-footer-row-container-inner,
.entry-hero-container-inner,
.content-wrap,
.woocommerce-page .content-wrap,
.woocommerce .content-wrap{
  max-width: var(--zirel-container);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(231,226,219,.8);
}

.site-branding a{
  color: var(--zirel-text) !important;
  text-decoration: none;
}

.site-branding .site-title{
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--zirel-text);
}

.site-header-row-container-inner{
  min-height: 88px;
}

/* =========================================================
   MENÚ PRINCIPAL
========================================================= */
.primary-navigation .primary-menu-container > ul > li > a{
  color: var(--zirel-text) !important;
  font-size: 16px;
  font-weight: 500;
  padding-left: 16px;
  padding-right: 16px;
}

.primary-navigation .primary-menu-container > ul > li > a:hover,
.primary-navigation .primary-menu-container > ul > li.current-menu-item > a{
  color: var(--zirel-accent) !important;
}

/* =========================================================
   BOTONES GENERALES
========================================================= */
button,
input[type="button"],
input[type="submit"],
.button,
.wp-element-button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.add_to_cart_button{
  border-radius: 999px !important;
  background: var(--zirel-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(79,127,116,.18) !important;
  transition: all .25s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-element-button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.add_to_cart_button:hover{
  background: var(--zirel-accent-dark) !important;
  transform: translateY(-1px);
}

/* =========================================================
   TARJETAS / SUPERFICIES
========================================================= */
.entry,
.site-main .entry-content,
.woocommerce-page .site-main,
.woocommerce .site-main{
  border-radius: 0;
}

.zirel-card,
.woocommerce-page .woocommerce-notices-wrapper + *{
  background: var(--zirel-surface);
  border-radius: var(--zirel-radius);
  box-shadow: var(--zirel-shadow);
}

/* =========================================================
   TITULOS
========================================================= */
h1, h2, h3, h4, h5, h6{
  color: var(--zirel-text);
  letter-spacing: -.3px;
}

h1{
  font-size: 44px;
  line-height: 1.08;
}

h2{
  font-size: 34px;
  line-height: 1.12;
}

h3{
  font-size: 26px;
  line-height: 1.18;
}

/* =========================================================
   PÁRRAFOS Y TEXTO SUAVE
========================================================= */
p,
li,
span,
label,
input,
select,
textarea{
  color: var(--zirel-text);
}

.site-footer,
.site-info{
  color: var(--zirel-text-soft);
}

/* =========================================================
   CAMPOS
========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea{
  min-height: 52px;
  border: 1px solid var(--zirel-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

textarea{
  min-height: 120px;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  border-top: 1px solid rgba(231,226,219,.9);
  background: #fbfaf8;
}

.site-footer-row-container-inner{
  padding-top: 26px;
  padding-bottom: 26px;
}

/* =========================================================
   WOOCOMMERCE BASE
========================================================= */
.woocommerce-page .content-area,
.woocommerce .content-area{
  padding-top: 34px;
  padding-bottom: 34px;
}

.woocommerce-page .entry-content-wrap,
.woocommerce .entry-content-wrap{
  background: transparent;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius: 14px !important;
  border: 1px solid var(--zirel-line) !important;
  background: #fff !important;
  color: var(--zirel-text) !important;
  box-shadow: var(--zirel-shadow);
}

/* =========================================================
   TABLAS
========================================================= */
table,
.woocommerce table.shop_table{
  border-radius: 16px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .site-header-row-container-inner{
    min-height: 76px;
  }

  h1{
    font-size: 36px;
  }

  h2{
    font-size: 30px;
  }

  h3{
    font-size: 24px;
  }
}

@media (max-width: 767px){
  :root{
    --zirel-radius: 14px;
  }

  .site-header-row-container-inner{
    min-height: 68px;
  }

  .site-branding .site-title{
    font-size: 28px;
  }

  h1{
    font-size: 30px;
  }

  h2{
    font-size: 26px;
  }

  h3{
    font-size: 22px;
  }

  .woocommerce-page .content-area,
  .woocommerce .content-area{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}