/*
Theme Name:   Aromaterapia & Salud
Theme URI:    https://aromaterapiasalud.cl
Description:  Divi Child Theme para Valeria Piraino, Consultora Swiss Just Chile. Botánica refinada — Cormorant Garamond + Jost, paleta verde / crema / ámbar.
Author:       Aromaterapia & Salud
Author URI:   https://aromaterapiasalud.cl
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
Tags:         wellness, aromatherapy, swiss-just, consultora
Text Domain:  aromaterapiasalud
*/

/* ═══════════════════════════════════════════════════
   VARIABLES GLOBALES — Design Tokens del sitio
   ═══════════════════════════════════════════════════ */
:root {
  --verde:        #2C4A35;
  --verde-medio:  #4A7358;
  --salvia:       #7A9E7E;
  --salvia-claro: #B8CDB9;
  --crema:        #F5EFE6;
  --crema-oscuro: #EDE4D6;
  --amber:        #C4763A;
  --amber-claro:  #E8A96A;
  --texto:        #1E2E23;
  --texto-suave:  #4A5C4E;
  --blanco:       #FDFAF6;
  --verde-rgb:    44, 74, 53;
}

/* ═══════════════════════════════════════════════════
   RESET Y BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body,
body.et_fixed_nav {
  font-family: 'Jost', Helvetica, sans-serif;
  font-weight: 300;
  background-color: var(--blanco);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a   { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }

/* ═══════════════════════════════════════════════════
   TIPOGRAFÍA — Headings con serif
   ═══════════════════════════════════════════════════ */
h1, h2, h3,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_blurb_title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.1;
  color: var(--verde);
}

h1, .et_pb_text h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.01em; }
h2, .et_pb_text h2 { font-size: clamp(28px, 4vw, 52px); }
h3, .et_pb_text h3 { font-size: clamp(20px, 3vw, 36px); }
h4, .et_pb_text h4 { font-size: 20px; font-family: 'Jost', sans-serif; font-weight: 500; }

p, li { line-height: 1.75; }

/* ═══════════════════════════════════════════════════
   GRAIN OVERLAY — Textura sutil sobre todo el sitio
   ═══════════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

/* ═══════════════════════════════════════════════════
   DIVI HEADER — Nav fijo translúcido
   ═══════════════════════════════════════════════════ */
#main-header,
#main-header.et-fixed-header {
  background-color: rgba(253, 250, 246, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(44, 74, 53, 0.08) !important;
  box-shadow: none !important;
  transition: height 0.3s;
}

#main-header .et_pb_row { max-width: 100%; padding: 0 40px; }

/* Logo */
#main-header .logo_container a { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 20px; color: var(--verde) !important; letter-spacing: 0.02em; text-decoration: none; }

/* Nav links */
#main-header #top-menu > li > a {
  font-family: 'Jost', sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  color: var(--texto-suave) !important;
  padding: 0 14px !important;
}
#main-header #top-menu > li > a:hover { color: var(--verde) !important; }

/* CTA nav button */
#main-header #top-menu > li.et_pb_button_module > a,
#main-header .et_pb_button {
  background-color: var(--amber) !important;
  color: white !important;
  border-radius: 2px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  border: none !important;
}
#main-header .et_pb_button:hover { background-color: #A85E2A !important; }

/* ═══════════════════════════════════════════════════
   BOTONES GLOBALES
   ═══════════════════════════════════════════════════ */
.et_pb_button {
  border-radius: 2px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s, transform 0.15s !important;
}
.et_pb_button:hover { transform: translateY(-1px); }

/* Botón primario */
.et_pb_button.btn-primary,
.aroma-btn-primary {
  background-color: var(--verde) !important;
  color: white !important;
  border: none !important;
  padding: 14px 28px !important;
  font-size: 13px !important;
}
.et_pb_button.btn-primary:hover,
.aroma-btn-primary:hover { background-color: #1E3526 !important; }

/* Botón ámbar / CTA */
.et_pb_button.btn-amber,
.aroma-btn-amber {
  background-color: var(--amber) !important;
  color: white !important;
  border: none !important;
  padding: 14px 28px !important;
}
.et_pb_button.btn-amber:hover { background-color: #A85E2A !important; }

/* Botón light (sobre fondo oscuro) */
.et_pb_button.btn-light,
.aroma-btn-light {
  background-color: white !important;
  color: var(--verde) !important;
  border: none !important;
  padding: 14px 28px !important;
}
.et_pb_button.btn-light:hover { background-color: var(--crema) !important; }

/* ═══════════════════════════════════════════════════
   TEXTURAS DE SECCIÓN
   ═══════════════════════════════════════════════════ */

/* Textura lino — para el hero left y secciones crema */
.aroma-texture-lino {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg opacity='0.04' stroke='%232C4A35' stroke-width='0.4'%3E%3Cline x1='0' y1='10' x2='60' y2='10'/%3E%3Cline x1='0' y1='20' x2='60' y2='20'/%3E%3Cline x1='0' y1='30' x2='60' y2='30'/%3E%3Cline x1='0' y1='40' x2='60' y2='40'/%3E%3Cline x1='0' y1='50' x2='60' y2='50'/%3E%3Cline x1='10' y1='0' x2='10' y2='60'/%3E%3Cline x1='20' y1='0' x2='20' y2='60'/%3E%3Cline x1='30' y1='0' x2='30' y2='60'/%3E%3Cline x1='40' y1='0' x2='40' y2='60'/%3E%3Cline x1='50' y1='0' x2='50' y2='60'/%3E%3C/g%3E%3C/svg%3E");
}

/* Textura puntos — trust bar, testimonios */
.aroma-texture-dots {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1' fill='%232C4A35' opacity='0.06'/%3E%3C/svg%3E");
}

/* Textura diagonal — blog */
.aroma-texture-diagonal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='%232C4A35' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E");
}

/* Textura cruzada — cómo comprar */
.aroma-texture-cross {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='0' y1='0' x2='32' y2='32' stroke='%232C4A35' stroke-width='0.3' opacity='0.04'/%3E%3Cline x1='32' y1='0' x2='0' y2='32' stroke='%232C4A35' stroke-width='0.3' opacity='0.04'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
   ═══════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aroma-fade-1 { animation: fadeInUp 0.6s ease 0.0s both; }
.aroma-fade-2 { animation: fadeInUp 0.6s ease 0.1s both; }
.aroma-fade-3 { animation: fadeInUp 0.6s ease 0.2s both; }
.aroma-fade-4 { animation: fadeInUp 0.6s ease 0.3s both; }

@media (prefers-reduced-motion: reduce) {
  .aroma-fade-1, .aroma-fade-2, .aroma-fade-3, .aroma-fade-4 { animation: none; }
}

/* ═══════════════════════════════════════════════════
   EYEBROWS — etiquetas pequeñas sobre títulos
   ═══════════════════════════════════════════════════ */
.aroma-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 12px;
}
.aroma-eyebrow-salvia { color: var(--salvia); }

/* ═══════════════════════════════════════════════════
   PILLS — etiquetas de uso / categorías de blog
   ═══════════════════════════════════════════════════ */
.aroma-pill {
  display: inline-block;
  background: white;
  border: 1px solid var(--crema-oscuro);
  color: var(--texto-suave);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 40px;
  margin: 0 4px 8px 0;
}

.aroma-pill-cat {
  display: inline-block;
  background: var(--crema);
  border: 1px solid var(--crema-oscuro);
  color: var(--texto-suave);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  margin: 0 5px 5px 0;
}
.aroma-pill-cat:hover,
.aroma-pill-cat.active {
  background: var(--verde);
  border-color: var(--verde);
  color: white;
}

/* ═══════════════════════════════════════════════════
   PRODUCT CARDS — cards de producto en grilla
   ═══════════════════════════════════════════════════ */
.aroma-product-card {
  background: var(--crema);
  border: 1px solid var(--crema-oscuro);
  overflow: hidden;
  transition: transform 0.2s;
}
.aroma-product-card:hover { transform: translateY(-3px); }

.aroma-product-card .card-img {
  background-size: cover;
  background-position: center;
  height: 200px;
  position: relative;
}
.aroma-product-card .card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(44, 74, 53, 0.18);
}

.aroma-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--verde);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════ */
.aroma-trust-bar {
  background-color: var(--crema-oscuro);
  padding: 20px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════
   BADGE CIRCULAR — "7 años"
   ═══════════════════════════════════════════════════ */
.aroma-badge-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--verde);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.aroma-badge-circle .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.aroma-badge-circle .label {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.3;
  opacity: 0.85;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   BLOG CARDS
   ═══════════════════════════════════════════════════ */
.et_pb_post .post-thumbnail,
.aroma-blog-img {
  background-size: cover;
  background-position: center;
  position: relative;
}
.aroma-blog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 74, 53, 0.5);
}
.aroma-blog-category-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--amber);
  color: white;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 2;
}

/* Blog post titles */
.et_pb_post h2 a,
.aroma-blog-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--verde);
  line-height: 1.25;
}
.et_pb_post h2 a:hover { color: var(--amber); }

/* ═══════════════════════════════════════════════════
   TESTIMONIOS
   ═══════════════════════════════════════════════════ */
.et_pb_testimonial {
  background: var(--crema) !important;
  border: 1px solid var(--crema-oscuro) !important;
  padding: 32px !important;
}
.et_pb_testimonial_quote {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--texto) !important;
}
.et_pb_testimonial_author {
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--texto-suave) !important;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
#footer-bottom,
#main-footer {
  background-color: var(--texto) !important;
}
#main-footer .et_pb_widget_area,
#main-footer p,
#main-footer a {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}
#main-footer a:hover { color: white; }
#main-footer h4 {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}
#footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06) !important; }
#footer-bottom p { font-size: 11px; color: rgba(255, 255, 255, 0.25) !important; }

/* ═══════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════════════ */
.aroma-wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  text-decoration: none;
  transition: transform 0.2s;
}
.aroma-wa-float:hover { transform: scale(1.08); }

/* ═══════════════════════════════════════════════════
   SEPARADOR DECORATIVO
   ═══════════════════════════════════════════════════ */
.aroma-divider-amber {
  width: 48px;
  height: 1px;
  background: var(--amber);
  margin: 16px 0;
}

/* ═══════════════════════════════════════════════════
   CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--crema); }
::-webkit-scrollbar-thumb { background: var(--salvia-claro); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--salvia); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile First
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #main-header .et_pb_row { padding: 0 20px; }
  .aroma-trust-bar { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
  .aroma-wa-float { bottom: 20px; right: 20px; width: 48px; height: 48px; }
  .aroma-wa-float svg { width: 24px; height: 24px; }
  h1, .et_pb_text h1 { font-size: clamp(32px, 8vw, 48px); }
  h2, .et_pb_text h2 { font-size: clamp(26px, 7vw, 40px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #main-header .et_pb_row { padding: 0 28px; }
  h1, .et_pb_text h1 { font-size: clamp(36px, 5vw, 52px); }
}

@media (min-width: 1400px) {
  #main-header .et_pb_row { max-width: 1400px; padding: 0 60px; }
}