/*
 Theme Name:   Divi Care Caca
 Theme URI:    https://carecaca.com
 Description:  Child theme de Divi para Care Caca - Juego de Cartas
 Author:       Team La Carretilla
 Author URI:   https://carecaca.com
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-carecaca
 Tags:         divi, child-theme, woocommerce, care-caca
*/

/* =============================================================
   CARE CACA — Variables y Reset Global
   ============================================================= */
:root {
  --cc-orange:      #F36B12;
  --cc-orange-dark: #C85400;
  --cc-orange-light:#ff8c3a;
  --cc-green:       #00C244;
  --cc-green-dark:  #009933;
  --cc-red:         #FF3131;
  --cc-black:       #000000;
  --cc-near-black:  #111111;
  --cc-black-mid:   #1a1a1a;
  --cc-white:       #FFFFFF;
  --cc-dark:        #0D0D0D;
  --cc-gray-light:  #F5F5F5;
  --cc-gray-mid:    #e0e0e0;
  --cc-text-dark:   #111111;
  --cc-text-mid:    #555555;
  --cc-radius:      16px;
  --cc-radius-lg:   24px;
  --cc-shadow:      0 8px 30px rgba(0,0,0,0.12);
  --cc-shadow-lg:   0 20px 60px rgba(0,0,0,0.2);
  --cc-transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --cc-font-main:   'League Spartan', sans-serif;
  --cc-font-title:  'League Spartan', sans-serif;
}

/* =============================================================
   TIPOGRAFÍA GLOBAL
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700;800;900&display=swap');

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
body {
  font-family: var(--cc-font-main) !important;
  color: var(--cc-text-dark) !important;
  background: var(--cc-white);
}

h1, h2, h3, .et_pb_slide_title, .et_pb_module_header {
  font-family: var(--cc-font-title) !important;
  font-weight: 800 !important;
}

/* =============================================================
   NAVBAR / HEADER DE DIVI
   ============================================================= */
#main-header,
#main-header .et-fixed-header {
  background: rgba(13, 13, 26, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  transition: var(--cc-transition) !important;
}

#main-header .et_pb_menu__wrap a,
#main-header .et_pb_menu__icon,
.et_pb_header_scrolled .et_pb_menu__wrap a {
  color: #fff !important;
  font-family: var(--cc-font-main) !important;
  font-weight: 700 !important;
}

#main-header .et_pb_menu__wrap a:hover {
  color: var(--cc-orange) !important;
}

#et-top-navigation .logo_container img,
.et_pb_section .et_pb_image img {
  max-height: 50px !important;
}

.nav-cta-btn, #main-header a.nav-cta {
  background: linear-gradient(135deg, var(--cc-orange), #e55a00) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  font-weight: 800 !important;
  transition: var(--cc-transition) !important;
}

/* =============================================================
   BOTONES GLOBALES
   ============================================================= */
.et_pb_button, .button, button[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(135deg, var(--cc-orange), #e55a00) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: var(--cc-font-main) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 14px 32px !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--cc-transition) !important;
  box-shadow: 0 4px 15px rgba(243,107,18,0.4) !important;
}

.et_pb_button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(243,107,18,0.55) !important;
  background: linear-gradient(135deg, #ff7a20, var(--cc-orange)) !important;
}

/* =============================================================
   SIDEBAR — ocultar
   ============================================================= */
#sidebar, #secondary,
.et_pb_widget_area_right,
.et_pb_extra_column_sidebar {
  display: none !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

body.et_no_sidebar #left-area,
body.et_no_sidebar #content-area,
body.et_no_sidebar .et_pb_column_3_4 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

body #page-container {
  padding-top: 70px !important;
}

/* =============================================================
   SECCIONES DIVI
   ============================================================= */
.et_pb_section.cc-hero-section {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 60%, #2a1400 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
}

.et_pb_section.cc-light-section {
  background: var(--cc-gray-light) !important;
}

.et_pb_section.cc-dark-section {
  background: linear-gradient(135deg, var(--cc-black), var(--cc-black-mid)) !important;
}

.cc-section-tag {
  display: inline-block !important;
  background: rgba(243,107,18,0.12) !important;
  color: var(--cc-orange) !important;
  border: 1px solid rgba(243,107,18,0.3) !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  font-family: var(--cc-font-main) !important;
}

.cc-title-highlight {
  color: var(--cc-orange) !important;
}

/* =============================================================
   FAQ ACCORDION (Toggle de Divi)
   ============================================================= */
.et_pb_toggle {
  border-radius: var(--cc-radius) !important;
  border: 2px solid #eee !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: var(--cc-transition) !important;
  box-shadow: none !important;
}

.et_pb_toggle:hover,
.et_pb_toggle.et_pb_toggle_open {
  border-color: var(--cc-orange) !important;
  box-shadow: 0 4px 20px rgba(243,107,18,0.15) !important;
}

.et_pb_toggle_title {
  font-family: var(--cc-font-main) !important;
  font-weight: 800 !important;
  color: var(--cc-text-dark) !important;
  padding: 18px 24px !important;
}

.et_pb_toggle_content {
  padding: 0 24px 18px !important;
  color: var(--cc-text-mid) !important;
  font-family: var(--cc-font-main) !important;
}

/* =============================================================
   FORMULARIO DE CONTACTO
   ============================================================= */
.et_pb_contact_form_container .et_pb_contact_field input,
.et_pb_contact_form_container .et_pb_contact_field select,
.et_pb_contact_form_container .et_pb_contact_field textarea {
  border-radius: 12px !important;
  border: 2px solid #e0e0e0 !important;
  padding: 14px 18px !important;
  font-family: var(--cc-font-main) !important;
  font-size: 0.95rem !important;
  transition: var(--cc-transition) !important;
}

.et_pb_contact_form_container .et_pb_contact_field input:focus,
.et_pb_contact_form_container .et_pb_contact_field textarea:focus {
  border-color: var(--cc-orange) !important;
  box-shadow: 0 0 0 3px rgba(243,107,18,0.18) !important;
  outline: none !important;
}

/* =============================================================
   FOOTER
   ============================================================= */
#main-footer {
  background: var(--cc-dark) !important;
  color: rgba(255,255,255,0.8) !important;
  font-family: var(--cc-font-main) !important;
}

#main-footer a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s !important;
}

#main-footer a:hover {
  color: var(--cc-orange) !important;
}

#main-footer .et_pb_widget_title,
#main-footer h4 {
  font-family: var(--cc-font-title) !important;
  color: var(--cc-white) !important;
}

#footer-bottom {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

#footer-bottom #footer-info {
  color: rgba(255,255,255,0.5) !important;
  font-family: var(--cc-font-main) !important;
}

/* =============================================================
   SCROLL PROGRESS BAR
   ============================================================= */
#cc-scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cc-orange), var(--cc-red));
  z-index: 99999;
  transition: width 0.1s;
  border-radius: 0 2px 2px 0;
}

/* =============================================================
   MENSAJES WOOCOMMERCE (mantener solo estilos básicos)
   ============================================================= */
.woocommerce-message {
  border-top-color: var(--cc-orange) !important;
  font-family: var(--cc-font-main) !important;
  font-weight: 700 !important;
}

.woocommerce-error {
  border-top-color: var(--cc-red) !important;
  font-family: var(--cc-font-main) !important;
}

.woocommerce-info {
  border-top-color: var(--cc-orange) !important;
  font-family: var(--cc-font-main) !important;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}