/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
Description: Rediseño estilo lujo para Deira - Carteras de cuero
*/

/* ============================================================
   FUENTES DE GOOGLE — pegá esto primero si no lo tenés ya
   ============================================================
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap');
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap');

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
  --deira-black:      #0a0a0a;
  --deira-black-soft: #0d0d0d;
  --deira-surface:    #111111;
  --deira-border:     #1e1e1e;
  --deira-border-mid: #2a2a2a;
  --deira-gold:       #c9a96e;
  --deira-gold-dim:   #8a7048;
  --deira-cream:      #f0e8d8;
  --deira-text:       #e8e0d0;
  --deira-muted:      #888880;
  --deira-faint:      #444440;
  --font-display:     'Cormorant Garamond', Georgia, serif;
  --font-body:        'Montserrat', sans-serif;
}

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

html {
  background-color: var(--deira-black);
  scroll-behavior: smooth;
}

body {
  background-color: var(--deira-black) !important;
  color: var(--deira-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TIPOGRAFÍA GLOBAL
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--deira-cream) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
}

h1 { font-size: clamp(32px, 5vw, 52px) !important; }
h2 { font-size: clamp(24px, 4vw, 38px) !important; }
h3 { font-size: clamp(18px, 3vw, 26px) !important; }
h4 { font-size: 18px !important; }

p {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--deira-muted) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.4px;
}

strong, b {
  font-weight: 500 !important;
  color: var(--deira-text) !important;
}

em {
  font-style: italic;
  color: var(--deira-gold) !important;
}

a {
  color: var(--deira-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  color: var(--deira-cream) !important;
  opacity: 0.85;
}

ul, ol {
  color: var(--deira-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 2 !important;
}

li {
  color: var(--deira-muted) !important;
  margin-bottom: 6px;
}

li strong {
  color: var(--deira-text) !important;
}

/* ============================================================
   HEADER Y NAVEGACIÓN
   ============================================================ */
.site-header,
#site-header,
.header-inner {
  background-color: var(--deira-black) !important;
  border-bottom: 0.5px solid var(--deira-border-mid) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.main-navigation,
.main-nav,
nav {
  background-color: transparent !important;
}

/* Logo */
.site-logo img,
.custom-logo,
.site-branding img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  max-height: 48px !important;
}

.site-logo img:hover,
.custom-logo:hover {
  opacity: 1;
}

/* Links del menú */
.main-navigation a,
.main-nav ul li a,
nav.main-navigation li a {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--deira-muted) !important;
  padding: 8px 16px !important;
  transition: color 0.3s ease !important;
  background: transparent !important;
}

.main-navigation a:hover,
.main-nav ul li a:hover,
nav.main-navigation li a:hover,
.main-navigation .current-menu-item > a {
  color: var(--deira-gold) !important;
  background: transparent !important;
}

/* Dropdown menú */
.main-navigation ul ul,
.main-nav ul ul {
  background-color: var(--deira-surface) !important;
  border: 0.5px solid var(--deira-border-mid) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

.main-navigation ul ul a,
.main-nav ul ul li a {
  color: var(--deira-muted) !important;
  border-bottom: 0.5px solid var(--deira-border) !important;
}

/* Menú móvil */
.menu-toggle,
button.menu-toggle {
  background: transparent !important;
  border: 0.5px solid var(--deira-border-mid) !important;
  color: var(--deira-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  border-color: var(--deira-gold) !important;
  color: var(--deira-gold) !important;
}

/* ============================================================
   CONTENIDO PRINCIPAL Y SECCIONES
   ============================================================ */
.site-content,
#content,
.content-area,
main {
  background-color: var(--deira-black) !important;
}

/* Secciones de Elementor */
.elementor-section,
.elementor-top-section,
.e-con,
.e-con-inner {
  background-color: var(--deira-black) !important;
}

/* Secciones alternadas para dar ritmo */
.elementor-section:nth-child(even) {
  background-color: var(--deira-black-soft) !important;
}

/* Separadores decorativos entre secciones */
.elementor-section::after {
  content: '';
  display: block;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--deira-border-mid) 30%, var(--deira-border-mid) 70%, transparent);
  margin: 0 auto;
  width: 80%;
}

/* Columnas */
.elementor-column-wrap,
.elementor-widget-wrap {
  background-color: transparent !important;
}

/* ============================================================
   HERO — PRIMERA SECCIÓN
   ============================================================ */
.elementor-section:first-of-type,
.elementor-top-section:first-of-type {
  background-color: var(--deira-black-soft) !important;
  padding: 80px 0 80px !important;
  position: relative;
  overflow: hidden;
}

/* Brillo sutil dorado en el hero */
.elementor-section:first-of-type::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(201,169,110,0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   WIDGETS DE ELEMENTOR — TÍTULOS
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--deira-cream) !important;
  letter-spacing: 0.5px;
}

/* Subtítulos (H3, H4) más pequeños */
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
  font-size: clamp(14px, 2vw, 18px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--deira-gold) !important;
  font-family: var(--font-body) !important;
}

/* Texto de los widgets */
.elementor-widget-text-editor p,
.elementor-text-editor p {
  color: var(--deira-muted) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* ============================================================
   BOTONES CTA
   ============================================================ */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
  background: transparent !important;
  border: 0.5px solid var(--deira-gold) !important;
  color: var(--deira-gold) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.4s ease !important;
  position: relative;
  overflow: hidden;
}

.elementor-button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 100%; bottom: 0;
  background: var(--deira-gold);
  opacity: 0.08;
  transition: all 0.4s ease;
  z-index: 0;
}

.elementor-button:hover::before {
  left: 0;
  right: 0;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover {
  background: transparent !important;
  border-color: var(--deira-cream) !important;
  color: var(--deira-cream) !important;
  box-shadow: 0 0 24px rgba(201,169,110,0.1) !important;
}

/* Botón secundario/ghost */
.elementor-button.elementor-size-sm {
  border-color: var(--deira-border-mid) !important;
  color: var(--deira-faint) !important;
  font-size: 9px !important;
}

/* ============================================================
   IMÁGENES
   ============================================================ */
.elementor-widget-image img,
.elementor-image img,
img {
  border-radius: 0 !important;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.elementor-widget-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Frame sutil dorado en imágenes destacadas */
.elementor-widget-image img {
  border: 0.5px solid var(--deira-border) !important;
}

/* ============================================================
   LISTAS DE ICONOS (features bullets)
   ============================================================ */
.elementor-icon-list-items,
.elementor-icon-list-item {
  color: var(--deira-muted) !important;
}

.elementor-icon-list-text {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: var(--deira-muted) !important;
  letter-spacing: 0.3px;
  line-height: 1.8 !important;
}

.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  color: var(--deira-gold) !important;
  fill: var(--deira-gold) !important;
}

/* ============================================================
   TESTIMONIOS / SLIDER
   ============================================================ */
.elementor-testimonial,
.elementor-widget-testimonial,
blockquote {
  background: var(--deira-surface) !important;
  border-left: 1px solid var(--deira-gold) !important;
  padding: 32px 40px !important;
  margin: 0 !important;
}

.elementor-testimonial-content,
blockquote p {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--deira-cream) !important;
  line-height: 1.6 !important;
}

.elementor-testimonial-name,
.elementor-slide-heading {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--deira-gold) !important;
  font-weight: 400 !important;
}

.elementor-testimonial-job,
.elementor-slide-description {
  font-size: 11px !important;
  color: var(--deira-faint) !important;
  letter-spacing: 2px !important;
}

/* Botones del slider */
.elementor-swiper-button,
.swiper-button-prev,
.swiper-button-next {
  color: var(--deira-gold) !important;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.elementor-swiper-button:hover {
  opacity: 1;
}

/* Dots del slider */
.swiper-pagination-bullet {
  background: var(--deira-border-mid) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background: var(--deira-gold) !important;
}

/* ============================================================
   FORMULARIOS Y POPUPS (captación de guía)
   ============================================================ */
.elementor-form-fields-wrapper input,
.elementor-form-fields-wrapper input[type="text"],
.elementor-form-fields-wrapper input[type="email"],
.elementor-field-type-text input,
.elementor-field-type-email input {
  background: var(--deira-surface) !important;
  border: 0.5px solid var(--deira-border-mid) !important;
  border-radius: 0 !important;
  color: var(--deira-text) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 1px;
  padding: 14px 18px !important;
  transition: border-color 0.3s ease;
}

.elementor-form-fields-wrapper input:focus,
.elementor-field-type-email input:focus {
  border-color: var(--deira-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(201,169,110,0.15) !important;
}

.elementor-form-fields-wrapper input::placeholder {
  color: var(--deira-faint) !important;
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
}

/* Labels de formulario */
.elementor-field-label {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--deira-muted) !important;
  font-weight: 400 !important;
}

/* Submit del formulario */
.elementor-button[type="submit"],
.elementor-form .elementor-button {
  background: var(--deira-gold) !important;
  border-color: var(--deira-gold) !important;
  color: var(--deira-black) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  font-weight: 500 !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: 0 !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

.elementor-button[type="submit"]:hover {
  background: var(--deira-cream) !important;
  border-color: var(--deira-cream) !important;
  color: var(--deira-black) !important;
}

/* Popup / dialog de la guía */
.elementor-popup-modal .dialog-widget-content,
.elementor-location-popup .elementor-section {
  background: var(--deira-surface) !important;
  border: 0.5px solid var(--deira-border-mid) !important;
}

/* ============================================================
   SEPARADORES DECORATIVOS
   ============================================================ */
.elementor-divider-separator,
hr {
  border-color: var(--deira-border-mid) !important;
  border-width: 0.5px !important;
}

/* Divisor decorativo con diamante */
.elementor-widget-divider .elementor-divider-separator::before,
.elementor-widget-divider .elementor-divider-separator::after {
  background-color: var(--deira-border-mid) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#site-footer,
footer {
  background-color: var(--deira-black) !important;
  border-top: 0.5px solid var(--deira-border-mid) !important;
  color: var(--deira-faint) !important;
  padding: 32px 0 !important;
}

.site-footer p,
footer p {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--deira-faint) !important;
  text-transform: uppercase;
}

.site-footer a,
footer a {
  color: var(--deira-faint) !important;
  transition: color 0.3s ease;
}

.site-footer a:hover,
footer a:hover {
  color: var(--deira-gold) !important;
}

/* ============================================================
   SCROLLBAR PERSONALIZADA
   ============================================================ */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--deira-black);
}

::-webkit-scrollbar-thumb {
  background: var(--deira-border-mid);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--deira-gold-dim);
}

/* ============================================================
   SELECCIÓN DE TEXTO
   ============================================================ */
::selection {
  background: rgba(201,169,110,0.2);
  color: var(--deira-cream);
}

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

.elementor-widget {
  animation: fadeInUp 0.6s ease both;
}

.elementor-widget:nth-child(2) { animation-delay: 0.1s; }
.elementor-widget:nth-child(3) { animation-delay: 0.2s; }
.elementor-widget:nth-child(4) { animation-delay: 0.3s; }

/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }

  .elementor-button {
    padding: 14px 28px !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
  }

  .elementor-section:first-of-type {
    padding: 48px 0 !important;
  }

  .elementor-testimonial,
  blockquote {
    padding: 24px !important;
  }
}

/* ============================================================
   AJUSTES FINOS — IMAGEN DATAWEB / AFIP
   (el logo de AFIP que aparece en el footer)
   ============================================================ */
footer img[src*="DATAWEB"],
footer img[src*="afip"],
footer a img {
  filter: brightness(0) invert(0.3) !important;
  opacity: 0.5;
  transition: opacity 0.3s;
}

footer img[src*="DATAWEB"]:hover,
footer a img:hover {
  opacity: 0.8;
}
</style>

/* Logo más grande */
.site-logo img,
.custom-logo-link img,
.site-branding img {
  filter: drop-shadow(0 0 8px rgba(201,169,110,0.4)) brightness(1.2) !important;
  min-width: 120px !important;
  max-height: 60px !important;
  width: auto !important;
}

/* Header con más altura para que respire */
.site-header,
#site-header {
  padding: 12px 0 !important;
}

img.header-image.is-logo-image {
  filter: drop-shadow(0 0 6px rgba(201,169,110,0.5)) brightness(1.3) !important;
  max-height: 150px !important;
  width: auto !important;
}

@media (max-width: 768px) {
  img.header-image.is-logo-image {
    max-height: 45px !important;
    width: auto !important;
  }

  /* Header mobile más compacto */
  .site-header,
  #site-header {
    padding: 8px 16px !important;
  }

  /* Botón MENU */
  .menu-toggle {
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
    color: var(--deira-muted) !important;
    background: transparent !important;
    border: 0.5px solid var(--deira-border-mid) !important;
    padding: 8px 16px !important;
  }
}

.site-logo.mobile-header-logo img.is-logo-image {
  filter: drop-shadow(0 0 6px rgba(201,169,110,0.5)) brightness(1.3) !important;
  max-height: 100px !important;
  width: auto !important;
}