/* Electro Habana — site-wide UX/UI consolidation, 2026-10-02.
   Loaded after the exported Next.js styles and previous refinements. */

:root {
  --eh3-forest: #0d281e;
  --eh3-forest-2: #183c31;
  --eh3-energy: #e5a910;
  --eh3-energy-soft: #fff1bd;
  --eh3-paper: #fbfbf9;
  --eh3-sand: #f2f0e9;
  --eh3-white: #ffffff;
  --eh3-ink: #15241f;
  --eh3-muted: #52645d;
  --eh3-line: #ccd6d1;
  --eh3-whatsapp: #1fce67;
  --eh3-whatsapp-dark: #14934a;
  --eh3-container: 80rem;
  --eh3-reading: 50rem;
  --eh3-gutter: clamp(1rem, 3vw, 2rem);
  --eh3-section: clamp(3rem, 6vw, 5rem);
  --eh3-shadow: 0 18px 45px rgba(13, 40, 30, .09);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--eh3-paper) !important;
  color: var(--eh3-ink) !important;
  overflow-x: hidden;
}

body [hidden] { display: none !important; }

body :is(h1, h2, h3, h4) {
  color: var(--eh3-forest) !important;
  text-wrap: balance;
}

body :is(p, li) { text-wrap: pretty; }

body :is(a, button, input, select, textarea) {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--eh3-energy) !important;
  outline-offset: 3px;
}

/* Header and approved logo */
.site-chrome {
  background: var(--eh3-paper) !important;
  border-bottom: 1px solid var(--eh3-line) !important;
  box-shadow: none !important;
}

body .site-header {
  background: var(--eh3-paper) !important;
  gap: clamp(.75rem, 2vw, 1.5rem) !important;
  margin-inline: auto !important;
  max-width: var(--eh3-container) !important;
  min-height: 5.5rem !important;
  padding: .75rem var(--eh3-gutter) !important;
  width: 100% !important;
}

body .brand {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  line-height: 0;
  min-width: 0;
}

.brand-picture { display: block; line-height: 0; }

body .brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
  width: clamp(12rem, 19vw, 15.75rem);
}

body .site-nav { align-items: center; gap: .2rem !important; }

body .site-nav a,
body .nav-dropdown-toggle {
  color: var(--eh3-ink) !important;
  min-height: 44px;
}

body .site-nav a:hover,
body .site-nav a:focus-visible,
body .nav-dropdown-toggle:hover,
body .nav-dropdown-toggle:focus-visible {
  background: var(--eh3-sand) !important;
  color: var(--eh3-forest) !important;
}

body .header-cta {
  background: var(--eh3-whatsapp) !important;
  border: 1px solid var(--eh3-whatsapp) !important;
  color: var(--eh3-forest) !important;
  min-height: 48px;
}

body .header-cta:hover,
body .header-cta:focus-visible {
  background: #42dc7e !important;
  border-color: var(--eh3-whatsapp-dark) !important;
  color: var(--eh3-forest) !important;
  transform: translateY(-1px);
}

body .dropdown {
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-line) !important;
  box-shadow: var(--eh3-shadow) !important;
}

/* Shared page frame: every exported page follows one centered grid. */
body main#contenido-principal {
  margin-inline: auto !important;
  max-width: none !important;
  padding: 0 0 var(--eh3-section) !important;
  width: 100% !important;
}

body main#contenido-principal > :is(section, article, aside, div, nav) {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--eh3-container) !important;
  width: min(calc(100% - 2 * var(--eh3-gutter)), var(--eh3-container)) !important;
}

body main#contenido-principal > .breadcrumbs {
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
}

body :is(.hero, .article-hero, .productos-hub-hero, .product-detail-hero) {
  background: var(--eh3-sand) !important;
  border: 1px solid var(--eh3-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body :is(.hero, .article-hero, .productos-hub-hero, .product-detail-hero) h1 {
  color: var(--eh3-forest) !important;
  font-size: clamp(2.35rem, 5vw, 4.75rem) !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
}

body :is(.hero, .article-hero, .productos-hub-hero, .product-detail-hero) p {
  color: var(--eh3-muted) !important;
  line-height: 1.7;
}

body .kicker {
  color: #7f5c00 !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Buttons: explicit foregrounds prevent inherited dark text on dark surfaces. */
body :is(.btn, .header-cta, .product-detail-link, .silk-sheet-trigger) {
  align-items: center;
  border-radius: 4px !important;
  display: inline-flex;
  font-weight: 750 !important;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  text-decoration: none;
}

body :is(.btn-primary, .btn-dark, .product-detail-link, .footer-wa, .sticky-checklist),
body :is(.section-cta, .lead-magnet, .final-cta, .whatsapp-group-lead) :is(.btn-primary, .btn-dark) {
  background: var(--eh3-forest) !important;
  border: 1px solid var(--eh3-forest) !important;
  color: #fff !important;
}

body :is(.btn-primary, .btn-dark, .product-detail-link, .footer-wa, .sticky-checklist):hover,
body :is(.btn-primary, .btn-dark, .product-detail-link, .footer-wa, .sticky-checklist):focus-visible {
  background: var(--eh3-forest-2) !important;
  border-color: var(--eh3-forest-2) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

body .btn-light,
body :is(.section-cta, .lead-magnet, .final-cta) .btn-light {
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-forest) !important;
  color: var(--eh3-forest) !important;
}

body .btn-light:hover,
body .btn-light:focus-visible {
  background: var(--eh3-energy-soft) !important;
  color: var(--eh3-forest) !important;
}

body :is(.btn-whatsapp, .sticky-wa),
body :is(.lead-magnet, .section-cta, .final-cta, .whatsapp-group-lead) .btn-whatsapp {
  background: var(--eh3-whatsapp) !important;
  border: 1px solid var(--eh3-whatsapp-dark) !important;
  color: var(--eh3-forest) !important;
}

body :is(.btn-whatsapp, .sticky-wa):hover,
body :is(.btn-whatsapp, .sticky-wa):focus-visible {
  background: #42dc7e !important;
  color: var(--eh3-forest) !important;
}

body :is(.btn, button):active { transform: translateY(1px); }

/* Catalog: controls and filtering */
body .productos-hub-hero {
  padding: clamp(2.5rem, 6vw, 4.75rem) var(--eh3-gutter) !important;
  text-align: center;
}

body .productos-hub-hero > * { margin-left: auto; margin-right: auto; }
body .productos-hub-hero h1 { max-width: 16ch; }
body .productos-hub-hero > p { max-width: 60rem; }
body .productos-hub-hero .hero-actions { justify-content: center !important; }

body .productos-hub {
  background: transparent !important;
  border: 0 !important;
  padding-top: 1.5rem;
}

body .productos-controls {
  align-items: end;
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-line) !important;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(14rem, 1fr) minmax(12rem, .7fr) auto !important;
  padding: 1.25rem !important;
}

body .productos-controls > * { min-width: 0; }

body .productos-controls :is(input, select) {
  background: var(--eh3-white) !important;
  border: 1px solid #94a59e !important;
  border-radius: 3px !important;
  color: var(--eh3-ink) !important;
  min-height: 48px;
  width: 100%;
}

body .productos-controls :is(input, select):focus {
  border-color: var(--eh3-forest) !important;
  box-shadow: 0 0 0 3px rgba(229, 169, 16, .25) !important;
}

body [data-catalog-reset] {
  background: var(--eh3-sand) !important;
  border: 1px solid var(--eh3-line) !important;
  color: var(--eh3-forest) !important;
  min-width: 10rem;
}

body [data-catalog-reset]:hover,
body [data-catalog-reset]:focus-visible {
  background: var(--eh3-energy-soft) !important;
  border-color: var(--eh3-energy) !important;
}

body .productos-results-info {
  color: var(--eh3-muted) !important;
  margin: 1rem auto !important;
  text-align: center;
}

body .productos-results-info strong { color: var(--eh3-forest); }

body .productos-empty {
  background: var(--eh3-energy-soft);
  border: 1px solid var(--eh3-energy);
  padding: 2rem;
  text-align: center;
}

body .productos-grid > .product-card[hidden] { display: none !important; }

/* Cards and section rhythm */
body :is(.product-card, .pillar-card, .related-card, .guide-card, .new-guide-card, .blog-index-row, .detail-card, .info-card, .article-product-card) {
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body :is(.product-card, .pillar-card, .related-card, .guide-card, .new-guide-card, .blog-index-row):hover {
  border-color: var(--eh3-forest) !important;
  box-shadow: var(--eh3-shadow) !important;
  transform: translateY(-2px);
}

body .product-card { min-width: 0; }
body .product-card-body { min-width: 0; padding: 1rem !important; }
body .product-card h3 { line-height: 1.25 !important; }
body .product-card h3 a { color: var(--eh3-forest) !important; }
body .product-image-wrap { background: var(--eh3-sand) !important; }
body .product-image { object-fit: contain !important; }

/* Lead magnets and CTAs: centered content, readable actions. */
body :is(.lead-magnet, .section-cta:not(.inbound-links), .final-cta, .scroll-depth-cta, .whatsapp-group-lead) {
  background: var(--eh3-energy-soft) !important;
  border: 1px solid var(--eh3-energy) !important;
  border-radius: 0 !important;
  color: var(--eh3-ink) !important;
  gap: 1.5rem 2rem !important;
  margin-bottom: 2rem !important;
  margin-top: 2rem !important;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
}

body :is(.lead-magnet, .section-cta:not(.inbound-links), .final-cta, .whatsapp-group-lead) :is(h2, h3, p, li) {
  color: var(--eh3-ink) !important;
}

body :is(.lead-magnet, .section-cta, .final-cta, .whatsapp-group-lead) :is(.lead-actions, .hero-actions) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

body .whatsapp-group-lead {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body .whatsapp-group-lead-copy,
body .whatsapp-group-lead-heading,
body .whatsapp-group-lead-heading > div { min-width: 0; }

body .whatsapp-group-lead h2 {
  font-size: clamp(1.65rem, 3vw, 2.75rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: normal;
}

body .whatsapp-group-lead-copy > p {
  max-width: 60rem;
  overflow-wrap: anywhere;
}

body .whatsapp-group-lead-mark img {
  display: block;
  height: 3rem;
  width: 3rem;
}

body .section-cta:not(.inbound-links) {
  align-items: center;
  display: flex !important;
  justify-content: space-between;
}

body .section-cta:not(.inbound-links) > p {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  margin: 0;
}

/* About/editorial pages: eliminate the empty phantom sidebar. */
body .article-shell {
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem) !important;
  margin-bottom: 2rem !important;
  margin-top: 2rem !important;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}

body .article-shell:has(> .article-content:only-child) {
  display: grid !important;
  grid-template-columns: minmax(0, var(--eh3-reading)) !important;
  justify-content: center !important;
}

body .article-shell > .article-content:only-child {
  margin-inline: auto !important;
  max-width: var(--eh3-reading) !important;
  width: 100% !important;
}

body .article-content {
  color: var(--eh3-ink) !important;
  line-height: 1.75 !important;
  min-width: 0;
}

body .article-content h2 {
  border-top: 1px solid var(--eh3-line);
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  margin-top: 2.75rem !important;
  padding-top: 1.5rem;
}

body .article-content h2:first-child { border-top: 0; margin-top: 0 !important; padding-top: 0; }
body .article-content :is(p, ul, ol) { max-width: 68ch; }
body .article-content a { color: var(--eh3-forest); text-underline-offset: .2em; }

/* Blog index: modern editorial grid using the same brand system. */
body .blog-index-hero {
  align-items: center !important;
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr) !important;
  margin-top: 1.5rem !important;
  padding: clamp(2rem, 5vw, 4rem) !important;
}

body .blog-index-hero > * { min-width: 0; }
body .blog-index-hero h1 { max-width: 13ch; }
body .blog-index-hero .article-hero-image-card {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-line) !important;
  display: flex;
  justify-content: center;
  min-height: 0 !important;
  padding: 1.5rem;
}

body .blog-index-hero .article-hero-image { height: 100% !important; object-fit: contain !important; width: 100% !important; }

body main:has(.blog-index-hero) > section:not([class]) {
  background: var(--eh3-white);
  border: 1px solid var(--eh3-line);
  padding: clamp(2rem, 5vw, 3.5rem);
}

body main:has(.blog-index-hero) :is(.new-guides, .blog-index-grid, section:not([class])) {
  margin-bottom: 2rem !important;
  margin-top: 2rem !important;
}

body .new-guides-grid,
body main:has(.blog-index-hero) .pillar-grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body .new-guides { background: var(--eh3-sand) !important; border: 1px solid var(--eh3-line); padding: clamp(2rem, 5vw, 3.5rem) !important; }

body .blog-index-grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body .blog-index-row {
  align-items: center;
  display: grid !important;
  gap: 1.25rem !important;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) !important;
  min-width: 0;
  padding: 1rem !important;
}

body .blog-index-row .blog-card-image {
  aspect-ratio: 4 / 3;
  height: auto !important;
  object-fit: contain !important;
  width: 100% !important;
}

body .blog-index-row > * { min-width: 0; }

/* Main guide: balanced hero and compact information panel. */
body main:has(.seo-decision-grid) > .hero {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr) !important;
  padding: clamp(2rem, 5vw, 4rem) !important;
}

body main:has(.seo-decision-grid) > .hero > * { min-width: 0; }
body main:has(.seo-decision-grid) > .hero h1 { max-width: 12ch; }

body main:has(.seo-decision-grid) .comfort-panel {
  align-content: center;
  align-self: stretch;
  background: var(--eh3-white) !important;
  border: 1px solid var(--eh3-line) !important;
  display: grid;
  min-height: 0 !important;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}

body main:has(.seo-decision-grid) .comfort-panel h2 {
  color: #8a6200 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

body .content-grid {
  align-items: stretch;
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body .seo-decision-grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body :is(.faq-block, .seo-answer-block, .seo-cluster-nav, .related-guides-section, .related-products, .product-detail-section) {
  margin-bottom: 2rem !important;
  margin-top: 2rem !important;
}

/* Footer */
body .footer {
  background: var(--eh3-forest) !important;
  border-top: 4px solid var(--eh3-energy);
  color: #fff !important;
  margin-top: 0 !important;
  padding-left: var(--eh3-gutter) !important;
  padding-right: var(--eh3-gutter) !important;
}

body .footer :is(a, p, strong, .footer-title, .footer-meta, .footer-disclosure) { color: rgba(255,255,255,.86) !important; }
body .footer a:hover, body .footer a:focus-visible { color: var(--eh3-energy) !important; }

@media (max-width: 1023px) {
  body .site-header { min-height: 4.5rem !important; }
  body .brand-logo { width: clamp(10.5rem, 28vw, 13rem); }

  body .productos-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  body .blog-index-hero,
  body main:has(.seo-decision-grid) > .hero { grid-template-columns: 1fr !important; }

  body .blog-index-hero .article-hero-image-card { max-height: 24rem; }
  body main:has(.seo-decision-grid) > .hero h1 { max-width: 16ch; }
}

@media (max-width: 767px) {
  :root { --eh3-gutter: 1rem; --eh3-section: 3rem; }

  body .site-header { gap: .5rem !important; padding: .6rem 1rem !important; }
  body .brand-logo { width: 10.5rem; }
  body .header-cta { min-height: 42px; padding: .6rem .7rem !important; }

  body main#contenido-principal > :is(section, article, aside, div, nav) {
    width: min(calc(100% - 2rem), var(--eh3-container)) !important;
  }

  body :is(.hero, .article-hero, .productos-hub-hero, .product-detail-hero) h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  body .productos-controls,
  body .new-guides-grid,
  body main:has(.blog-index-hero) .pillar-grid,
  body .blog-index-grid,
  body .content-grid,
  body .seo-decision-grid { grid-template-columns: 1fr !important; }

  body [data-catalog-reset] { width: 100%; }

  body .whatsapp-group-lead { grid-template-columns: 1fr !important; }
  body .whatsapp-group-lead-action { align-items: stretch !important; display: grid !important; }
  body .whatsapp-group-lead-button { width: 100%; }

  body .section-cta:not(.inbound-links) {
    align-items: stretch;
    display: grid !important;
  }

  body .section-cta:not(.inbound-links) .btn { width: 100%; }

  body .article-shell { padding: 1.25rem !important; }
  body .article-content :is(p, ul, ol) { max-width: none; }

  body .blog-index-hero { padding: 1.5rem !important; }
  body .blog-index-row { grid-template-columns: 7rem minmax(0, 1fr) !important; }

  body main:has(.seo-decision-grid) > .hero { padding: 1.5rem !important; }

  body .hero-actions,
  body .lead-actions { align-items: stretch !important; display: grid !important; }

  body .hero-actions .btn,
  body .lead-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  body .brand-logo { width: 9.25rem; }
  body .blog-index-row { grid-template-columns: 1fr !important; }
  body .blog-index-row .blog-card-image { max-height: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}