/*
Theme Name: DiNomad
Theme URI: https://dinomad.co
Description: DiNomad Child Theme — Nómada digital en curso
Author: Giuliana Simonetti
Author URI: https://dinomad.co
Template: hello-elementor
Version: 1.0.0
Text Domain: dinomad
*/

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

/* ============================================
   VARIABLES
============================================ */
:root {
  --navy:    #0E2344;
  --navy2:   #1A3A6B;
  --navy3:   #2A5298;
  --gold:    #C9A84C;
  --gold-lt: #F0DFA0;
  --cream:   #F8F5EE;
  --cream2:  #EDE8DC;
  --muted:   #6B7A9A;
  --white:   #FFFFFF;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'DM Sans', sans-serif;
}

/* ============================================
   BASE
============================================ */
body {
  font-family: var(--sans);
  background-color: var(--cream);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
}

h1 { font-size: clamp(44px, 5.5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.5vw, 46px); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; }

p { font-family: var(--sans); color: var(--muted); line-height: 1.75; font-weight: 300; }

a { color: var(--navy); transition: color 0.2s; }
a:hover { color: var(--gold); }

/* ============================================
   HEADER / NAV
============================================ */
.site-header,
.elementor-location-header {
  background: rgba(248, 245, 238, 0.96) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14, 35, 68, 0.08) !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 48px !important;
}

.site-header .site-branding img,
.elementor-location-header img.custom-logo {
  max-height: 52px !important;
  width: auto !important;
}

.main-navigation a,
.elementor-nav-menu a {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  letter-spacing: 0.03em !important;
  padding: 8px 20px !important;
  border-radius: 100px !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s !important;
}

.main-navigation a:hover,
.elementor-nav-menu a:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
}

/* ============================================
   BUTTONS
============================================ */
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"] {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 100px !important;
  transition: all 0.25s !important;
}

/* Primary button — navy */
.elementor-button-primary,
.btn-primary {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 14px 32px !important;
}

.elementor-button-primary:hover {
  background: var(--navy2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14, 35, 68, 0.25) !important;
}

/* Gold button */
.btn-gold,
.elementor-button-secondary {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border: none !important;
  padding: 13px 28px !important;
}

.btn-gold:hover,
.elementor-button-secondary:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-1px) !important;
}

/* Ghost button */
.btn-ghost {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
}

.btn-ghost:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* ============================================
   ELEMENTOR SECTIONS
============================================ */

/* Hero section */
.e-con.hero-section,
.elementor-section.hero-section {
  min-height: 100vh;
  padding-top: 80px;
}

/* Dark navy background sections */
.section-navy,
.e-con.section-navy,
.elementor-section.section-navy > .elementor-container {
  background: var(--navy) !important;
}

/* Cream background */
.section-cream,
.e-con.section-cream {
  background: var(--cream2) !important;
}

/* Gold accent line */
.gold-line {
  border-top: 2px solid var(--gold);
}

/* ============================================
   HEADINGS INSIDE ELEMENTOR
============================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--serif) !important;
  color: var(--navy) !important;
}

.elementor-widget-heading .elementor-heading-title.size-xl {
  font-size: clamp(48px, 6vw, 76px) !important;
  font-weight: 600 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
}

.elementor-widget-heading .elementor-heading-title em,
.elementor-widget-heading .elementor-heading-title i {
  font-style: italic !important;
  color: var(--navy3) !important;
}

/* Headings on dark bg */
.section-navy .elementor-widget-heading .elementor-heading-title {
  color: var(--white) !important;
}

.section-navy .elementor-widget-heading .elementor-heading-title em {
  color: var(--gold-lt) !important;
}

/* ============================================
   TEXT WIDGET
============================================ */
.elementor-widget-text-editor p {
  font-family: var(--sans) !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

.section-navy .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================
   GOLD EYEBROW / LABEL
============================================ */
.gold-eyebrow,
.elementor-widget-heading .elementor-heading-title.gold-label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--gold) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.gold-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ============================================
   CATEGORY CARDS
============================================ */
.cat-card {
  background: var(--cream) !important;
  border: 1px solid rgba(14, 35, 68, 0.08) !important;
  padding: 32px 24px !important;
  transition: all 0.25s !important;
  border-top: 3px solid transparent !important;
}

.cat-card:hover {
  background: var(--white) !important;
  border-top-color: var(--gold) !important;
  transform: translateY(-3px) !important;
}

.cat-number {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-style: italic !important;
  color: var(--gold) !important;
  margin-bottom: 14px !important;
}

.cat-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
}

/* ============================================
   FEATURED POST CARD
============================================ */
.featured-card {
  background: var(--navy) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.featured-card .post-category {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--gold) !important;
}

.featured-card .post-title {
  font-family: var(--serif) !important;
  color: var(--white) !important;
}

/* ============================================
   DIVIDER / STRIP
============================================ */
.gold-strip {
  background: var(--navy) !important;
  border-top: 2px solid var(--gold) !important;
  padding: 12px 0 !important;
}

.gold-strip span {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   FORMS / NEWSLETTER
============================================ */
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.wpcf7-text,
.wpcf7-email {
  font-family: var(--sans) !important;
  background: var(--white) !important;
  border: 1px solid rgba(14, 35, 68, 0.15) !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: var(--navy) !important;
  transition: border-color 0.2s !important;
}

.elementor-form input:focus,
.wpcf7-text:focus,
.wpcf7-email:focus {
  border-color: var(--navy) !important;
  outline: none !important;
}

/* ============================================
   FOOTER
============================================ */
.site-footer,
.elementor-location-footer {
  background: var(--navy) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
  padding: 28px 48px !important;
}

.site-footer p,
.site-footer a,
.elementor-location-footer p,
.elementor-location-footer a {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 12px !important;
}

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

/* ============================================
   BLOG POSTS
============================================ */
.post-title,
.entry-title {
  font-family: var(--serif) !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
}

.post-meta,
.entry-meta {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 0.06em !important;
}

.post-excerpt,
.entry-summary {
  font-family: var(--sans) !important;
  color: var(--muted) !important;
  line-height: 1.75 !important;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 768px) {
  .site-header,
  .elementor-location-header {
    padding: 12px 20px !important;
  }

  h1 { font-size: clamp(36px, 8vw, 52px); }
  h2 { font-size: clamp(24px, 6vw, 36px); }

  .site-footer,
  .elementor-location-footer {
    padding: 24px 20px !important;
  }
}


/* ============================================
   DiNomad — Blog, Sobre Mí, Contacto Styles
   ============================================ */

/* ── BLOG ARCHIVE PAGE ── */
body.blog .page-header,
body.archive .page-header {
  text-align: center !important;
  padding: 120px 6% 40px !important;
  background: linear-gradient(130deg, rgba(27,58,107,0.04) 0%, rgba(107,47,217,0.04) 100%) !important;
  margin-bottom: 48px !important;
  border-bottom: 1px solid rgba(37,99,235,0.08) !important;
  display: block !important;
}
body.blog .page-header h1.entry-title,
body.archive .page-header h1.entry-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  margin-bottom: 8px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
body.blog .page-header h1.entry-title::after {
  content: "Blog" !important;
  font-size: 3rem !important;
  line-height: 1.2 !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
}
body.blog .page-content,
body.archive .page-content {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 6% 60px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 32px !important;
}
body.blog article.post,
body.archive article.post {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,27,61,0.08) !important;
  box-shadow: 0 2px 20px rgba(15,27,61,0.07) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
body.blog article.post:hover,
body.archive article.post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(15,27,61,0.13) !important;
}
body.blog article.post::before,
body.archive article.post::before {
  content: '' !important;
  display: block !important;
  height: 200px !important;
  background: linear-gradient(130deg, rgba(27,58,107,0.08) 0%, rgba(107,47,217,0.12) 100%) !important;
  border-bottom: 1px solid rgba(37,99,235,0.06) !important;
}
body.blog article.post .post-thumbnail img,
body.archive article.post .post-thumbnail img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}
body.blog article.post h2.entry-title,
body.archive article.post h2.entry-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  line-height: 1.35 !important;
  padding: 24px 28px 8px !important;
  margin: 0 !important;
}
body.blog article.post h2.entry-title a,
body.archive article.post h2.entry-title a {
  color: #1B3A6B !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
body.blog article.post h2.entry-title a:hover,
body.archive article.post h2.entry-title a:hover {
  color: #6B2FD9 !important;
}
body.blog article.post > p,
body.blog article.post .entry-summary,
body.archive article.post > p,
body.archive article.post .entry-summary {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: #3D5480 !important;
  line-height: 1.65 !important;
  padding: 0 28px 24px !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* ── BLOG SINGLE POST ── */
body.single-post .page-header,
body.single .page-header {
  text-align: center !important;
  padding: 120px 6% 48px !important;
  background: linear-gradient(130deg, rgba(27,58,107,0.05) 0%, rgba(107,47,217,0.05) 100%) !important;
  margin-bottom: 48px !important;
  border-bottom: 1px solid rgba(37,99,235,0.08) !important;
  display: block !important;
}
body.single-post .page-header h1.entry-title,
body.single .page-header h1.entry-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  color: #1B3A6B !important;
  line-height: 1.2 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}
body.single-post .page-content,
body.single-post .site-main > .page-content {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 6% 60px !important;
  font-family: 'Inter', sans-serif !important;
}
body.single-post .page-content p {
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  color: #1A2A4A !important;
  margin-bottom: 1.5em !important;
}
body.single-post .page-content h2,
body.single-post .page-content h3 {
  font-family: 'Playfair Display', serif !important;
  color: #1B3A6B !important;
  margin-top: 2em !important;
  margin-bottom: 0.8em !important;
  line-height: 1.3 !important;
}
body.single-post .page-content h2 { font-size: 1.8rem !important; }
body.single-post .page-content h3 { font-size: 1.4rem !important; }
body.single-post .page-content hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(107,47,217,0.2), transparent) !important;
  margin: 2.5em 0 !important;
}
body.single-post .page-content strong {
  color: #1B3A6B !important;
  font-weight: 600 !important;
}
body.single-post .page-content blockquote {
  border-left: 3px solid #6B2FD9 !important;
  padding: 16px 24px !important;
  margin: 2em 0 !important;
  background: rgba(107,47,217,0.04) !important;
  border-radius: 0 12px 12px 0 !important;
  font-style: italic !important;
  color: #3D5480 !important;
}
body.single-post .page-content a {
  color: #6B2FD9 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(107,47,217,0.3) !important;
  transition: border-color 0.2s !important;
}
body.single-post .page-content a:hover {
  border-bottom-color: #6B2FD9 !important;
}

/* ── CONTACTO — Form Styling ── */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form textarea {
  font-family: 'Inter', sans-serif !important;
  border: 1.5px solid rgba(27,58,107,0.15) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  color: #1A2A4A !important;
  background: #FFFFFF !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.wpforms-container .wpforms-form input[type="text"]:focus,
.wpforms-container .wpforms-form input[type="email"]:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: #6B2FD9 !important;
  box-shadow: 0 0 0 3px rgba(107,47,217,0.1) !important;
  outline: none !important;
}
.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #1B3A6B !important;
  font-size: 0.9rem !important;
}
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
  font-family: 'Inter', sans-serif !important;
  background: linear-gradient(130deg, #1B3A6B 0%, #6B2FD9 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 32px !important;
  padding: 14px 36px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease, transform 0.2s ease !important;
}
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

/* ── Social Icons ── */
.elementor-social-icons-wrapper .elementor-icon {
  border-radius: 12px !important;
  transition: transform 0.2s ease !important;
}
.elementor-social-icons-wrapper .elementor-icon:hover {
  transform: translateY(-2px) !important;
}

/* ── Background for non-home pages ── */
body.blog .site-main,
body.archive .site-main,
body.single .site-main {
  background: #F5F7FF !important;
  min-height: 60vh !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  body.blog .page-content,
  body.archive .page-content {
    grid-template-columns: 1fr !important;
    padding: 0 5% 40px !important;
  }
  body.single-post .page-header h1.entry-title {
    font-size: 2rem !important;
  }
  body.blog .page-header .entry-title::after {
    font-size: 2.2rem !important;
  }
}


/* ── Imagen destacada en archivo (blog cards) ── */
article.post {
  display: flex;
  flex-direction: column;
}
/* Thumbnail nativo del tema: mover al top */
article.post > a:has(img.wp-post-image) {
  order: -2;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  display: block;
}
article.post > a > img.wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  will-change: transform;
}
/* Ocultar gradiente placeholder cuando hay thumbnail */
body.blog article.post:has(img.wp-post-image)::before,
body.archive article.post:has(img.wp-post-image)::before,
article.post:has(img.wp-post-image)::before {
  display: none !important;
}
/* Ocultar thumbnail duplicado de the_excerpt filter */
.dn-archive-thumb {
  display: none;
}
/* Mantener orden del titulo */
article.post .entry-title {
  order: -1;
}

/* ── Imagen destacada en post individual ── */
.dn-single-thumb {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 2rem;
}
.dn-single-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Contacto: social icons visibility ── */
.page-id-754 .elementor-social-icons-wrapper .elementor-icon {
  color: #1B2A4A !important;
}