/* 
 Theme Name: Astra Child Psiconauta 
 Template: astra 
 Version: 1.0.0 
*/

:root {
  --ink: #0d0c0a; 
  --ink-mid: #1a1814; 
  --ink-card: #141210;
  --gold: #b8923a; 
  --gold-light: #d4aa58; 
  --gold-glow: rgba(184,146,58,0.08);
  --cream: #e8dfc8; 
  --cream-dim: #a89880; 
  --border: rgba(184,146,58,0.18);
  --border-mid: rgba(184,146,58,0.35); 
}

/* Base Body WooCommerce */
body.woocommerce, body.woocommerce-page {
    background-color: var(--ink) !important;
    color: var(--cream-dim) !important;
}

/* Titles and Headers */
.woocommerce div.product .product_title,
.woocommerce-loop-product__title,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce-billing-fields h3,
#order_review_heading {
    color: var(--cream) !important;
    font-family: 'Cinzel', serif !important;
}

/* Prices */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--gold) !important;
    font-size: 1.5rem !important;
    font-weight: bold;
}

/* Add to Cart Button */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    background-color: var(--gold) !important;
    color: var(--ink) !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--gold-light) !important;
    box-shadow: 0 0 15px var(--gold-glow) !important;
}

/* Product Images */
.woocommerce div.product div.images img {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Tabs and Tables */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: var(--ink-mid) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px 4px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--ink-card) !important;
    border-bottom-color: transparent !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background-color: var(--ink-card) !important;
    border: 1px solid var(--border) !important;
    padding: 20px !important;
    border-radius: 0 4px 4px 4px;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
    border-bottom: 1px solid var(--border) !important;
    color: var(--cream-dim) !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
    background-color: var(--ink-mid) !important;
    color: var(--cream) !important;
    border: 1px solid var(--border) !important;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
    color: var(--cream-dim) !important;
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--gold) !important;
}

/* Notices */
.woocommerce-message, .woocommerce-info {
    background-color: var(--ink-mid) !important;
    border-top-color: var(--gold) !important;
    color: var(--cream) !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: var(--gold) !important;
}

/* ============================================================
   ESTILOS PREMIUM DE CAPTACIÓN: BOTÓN PSICONAUTA PRO
============================================================ */
.boton-psiconauta-pro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold) !important;
    color: var(--ink) !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.85rem 2rem !important;
    border-radius: 50px !important; /* Esquinas totalmente redondeadas premium */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(184, 146, 58, 0.2) !important; /* Sombra sutil dorada */
}

.boton-psiconauta-pro:hover {
    background: var(--gold-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(184, 146, 58, 0.38) !important; /* Elevación en hover */
    color: var(--ink) !important;
}

.boton-psiconauta-pro:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(184, 146, 58, 0.15) !important;
}

/* Anulación de Fluent Forms para que coincida con la estética dorada y redonda */
.fluentform_form_container .ff-btn-submit,
.fluentform_form_container button[type="submit"],
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"],
button.ff-btn-submit,
div.fluentform button.ff-btn-submit {
    background: var(--gold) !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--ink) !important;
    border-radius: 50px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.85rem 2.2rem !important;
    box-shadow: 0 4px 14px rgba(184, 146, 58, 0.2) !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fluentform_form_container .ff-btn-submit:hover,
.fluentform_form_container button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover,
button.ff-btn-submit:hover,
div.fluentform button.ff-btn-submit:hover {
    background: var(--gold-light) !important;
    background-color: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
    color: var(--ink) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(184, 146, 58, 0.38) !important;
}

.fluentform_form_container input[type="email"],
.fluentform input[type="email"],
.frm-fluent-form input[type="email"],
div.fluentform input[type="email"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--cream) !important;
    border-radius: 50px !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.95rem !important;
    height: auto !important;
}

.fluentform_form_container input[type="email"]:focus,
.fluentform input[type="email"]:focus,
.frm-fluent-form input[type="email"]:focus,
div.fluentform input[type="email"]:focus {
    border-color: var(--gold) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(184, 146, 58, 0.15) !important;
}







/* ============================================================
   ESTILOS SOCIALES PREMIUM (REDES SOCIALES)
============================================================ */
.nav-social-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.5rem;
}
.nav-social-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim) !important;
  transition: all 0.25s ease;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(184, 146, 58, 0.15);
  background: rgba(184, 146, 58, 0.02);
}
.nav-social-item a:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: rgba(184, 146, 58, 0.08);
  transform: translateY(-2px);
}
.nav-social-item svg {
  width: 16px;
  height: 16px;
}

/* Mobile Menu Socials */
.mobile-socials {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.mobile-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim) !important;
  border: 1px solid rgba(184, 146, 58, 0.25) !important;
  background: rgba(184, 146, 58, 0.03) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.mobile-socials a:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: rgba(184, 146, 58, 0.1) !important;
  transform: scale(1.05) !important;
}
.mobile-socials svg {
  width: 20px;
  height: 20px;
}

/* Footer Socials Top */
.footer-socials-top {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.footer-socials-top a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim) !important;
  border: 1px solid var(--border) !important;
  background: rgba(184, 146, 58, 0.02) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.footer-socials-top a:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: var(--gold-glow) !important;
  transform: translateY(-2px) !important;
}
.footer-socials-top svg {
  width: 18px;
  height: 18px;
}

/* Footer Socials Bottom */
.footer-socials-bottom {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}
.footer-socials-bottom a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim) !important;
  transition: color 0.2s, transform 0.2s !important;
}
.footer-socials-bottom a:hover {
  color: var(--gold) !important;
  transform: translateY(-1px) !important;
}
.footer-socials-bottom svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   ESTILOS PREMIUM DE CAJAS Y TABLAS DE CONTENIDO
============================================================ */
/* Tablas de Contenido Premium */
.psiconauta-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
table.psiconauta-table {
  width: 100%;
  border-collapse: collapse !important;
  font-family: inherit;
  color: var(--cream) !important;
  background: var(--ink-card) !important;
  margin: 0 !important;
}
table.psiconauta-table th {
  background: var(--ink-mid) !important;
  color: var(--gold) !important;
  border-bottom: 2px solid var(--gold) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.95rem !important;
}
table.psiconauta-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.9rem !important;
  color: var(--cream-dim) !important;
}
table.psiconauta-table tr:last-child td {
  border-bottom: none !important;
}
table.psiconauta-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* Envoltorio para graficos SVG responsivos */
.psiconauta-svg-container {
  width: 100%;
  max-width: 680px;
  margin: 32px auto;
  padding: 24px;
  background: var(--ink-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(184, 146, 58, 0.03);
  box-sizing: border-box;
}
.psiconauta-svg-container svg {
  display: block;
  width: 100%;
  height: auto;
}
.psiconauta-svg-title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Cajas de Aviso, Conclusion e Informacion Cientifica */
.psiconauta-safety-box {
  border-left: 4px solid var(--gold) !important;
  background: var(--ink-card) !important;
  border: 1px solid var(--border);
  border-left-width: 4px !important;
  padding: 20px 24px !important;
  border-radius: 4px 8px 8px 4px !important;
  margin: 24px 0 !important;
  color: var(--cream-dim) !important;
}
.psiconauta-safety-box strong {
  color: var(--gold) !important;
  font-size: 1rem;
}

.psiconauta-takeaway-box {
  border-left: 4px solid var(--gold) !important;
  background: var(--ink-card) !important;
  border: 1px solid var(--border);
  border-left-width: 4px !important;
  padding: 20px 24px !important;
  border-radius: 4px 8px 8px 4px !important;
  margin: 24px 0 !important;
  color: var(--cream) !important;
}
.psiconauta-takeaway-box strong {
  color: var(--gold) !important;
}

.psiconauta-science-box {
  border-left: 4px solid #3a7db8 !important;
  background: var(--ink-card) !important;
  border: 1px solid var(--border);
  border-left-width: 4px !important;
  padding: 20px 24px !important;
  border-radius: 4px 8px 8px 4px !important;
  margin: 24px 0 !important;
  color: var(--cream-dim) !important;
}
.psiconauta-science-box strong {
  color: #5da0db !important;
}

/* Banner de Llamada a la Accion (CTA) de Tres Botones */
.psiconauta-cta-banner {
  background: var(--ink-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 32px 24px !important;
  margin: 48px 0 24px 0 !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  clear: both !important;
}
.psiconauta-cta-title {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.psiconauta-cta-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
}
.psiconauta-cta-buttons a {
  min-width: 200px !important;
}