/*
Theme Name: Excelltia Divi Child
Theme URI: https://premiumspanishproducts.nl
Description: Child theme for Excelltia — Premium Spanish Products. All custom CSS and overrides live here. Never edit the parent Divi theme.
Author: Excelltia
Author URI: https://premiumspanishproducts.nl
Template: Divi
Version: 3.4.0
Text Domain: excelltia-divi-child
*/

/* ============================================================
   EXCELLTIA — Premium Design System v3
   B2B Gastronomy · Spain → Netherlands
   Colors: #1A1A1A · #C8932B · #F2EBDC
   Fonts:  Cormorant Garamond (display) · DM Sans (body)
   ============================================================ */

/* 1. DESIGN TOKENS
-------------------------------------------------- */
:root {
  /* Neutrals */
  --ex-charcoal:     #1A1A1A;
  --ex-charcoal-deep:#111111;
  --ex-brown:        #6B5E4A;

  /* Cream family */
  --ex-cream:        #F2EBDC;
  --ex-bone:         #E8DFCB;
  --ex-cream-warm:   #E8E0CE;
  --ex-cream-dim:    rgba(242,235,220,0.75);
  --ex-cream-faint:  rgba(242,235,220,0.15);

  /* Ochre / amber */
  --ex-amber:        #C8932B;
  --ex-amber-dark:   #A87824;
  --ex-amber-dim:    rgba(200,147,43,0.4);
  --ex-amber-faint:  rgba(200,147,43,0.12);

  /* Extended palette (from mockup) */
  --ex-red:          #7B2D26;
  --ex-olive:        #5C6B3A;

  /* Typography */
  --ex-font-display: 'Cormorant Garamond', Georgia, serif;
  --ex-font-body:    'DM Sans', 'Inter', system-ui, sans-serif;

  /* Motion */
  --ex-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ex-trans:        0.3s var(--ex-ease);
  --ex-trans-slow:   0.6s var(--ex-ease);
}

/* 2. GLOBAL RENDERING
-------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

/* 3. HEADER — Divi Classic Header Premium Treatment
-------------------------------------------------- */
#main-header,
#main-header.et-fixed-header {
  background-color: var(--ex-charcoal) !important;
  border-bottom: 1px solid rgba(200,147,43,0.18) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Sticky header — backdrop blur when scrolled */
#main-header.et-fixed-header {
  background-color: rgba(26,26,26,0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Logo — left-aligned, image only */
#main-header #logo {
  max-height: 48px !important;
  height: 48px !important;
}

/* Header left-style: ensure logo is not center-forced */
.et_header_style_left #logo,
.et_header_style_left #main-header #logo {
  float: left !important;
  margin: 0 !important;
}

/* Tighten the header container height */
#main-header .container {
  max-width: 100% !important;
  padding: 0 48px !important;
}

#main-header.et-fixed-header .container {
  padding: 0 48px !important;
}

/* Top-level nav link color */
#et-top-navigation .nav ul li a,
#et-top-navigation .nav > ul > li > a {
  color: rgba(242,235,220,0.72) !important;
}

#et-top-navigation .nav > ul > li > a:hover {
  color: var(--ex-cream) !important;
}

/* 4. NAVIGATION — Premium Dropdown
-------------------------------------------------- */
#et-top-navigation .nav ul li a {
  font-family: var(--ex-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--ex-trans);
}

/* Dropdown container */
#et-top-navigation .nav ul.sub-menu,
#et-top-navigation nav > ul ul {
  background: var(--ex-charcoal-deep) !important;
  border-top: 2px solid var(--ex-amber) !important;
  border-bottom: 0 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3) !important;
  min-width: 230px !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
}

/* Dropdown items */
#et-top-navigation .nav ul.sub-menu li a,
#et-top-navigation nav > ul ul li a {
  font-family: var(--ex-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(242,235,220,0.72) !important;
  padding: 11px 20px !important;
  border-left: 2px solid transparent !important;
  border-bottom: 0 !important;
  transition: color var(--ex-trans), border-color var(--ex-trans),
              padding-left var(--ex-trans), background var(--ex-trans) !important;
  display: block !important;
}

/* Dropdown hover + active */
#et-top-navigation .nav ul.sub-menu li a:hover,
#et-top-navigation nav > ul ul li a:hover,
#et-top-navigation .nav ul.sub-menu li.current-menu-item > a {
  color: var(--ex-cream) !important;
  border-left-color: var(--ex-amber) !important;
  padding-left: 26px !important;
  background: var(--ex-amber-faint) !important;
}

/* Dropdown chevron */
#et-top-navigation .nav ul li.menu-item-has-children > a::after {
  color: var(--ex-amber) !important;
  opacity: 0.8;
}

/* Active top-level items */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a {
  color: var(--ex-amber) !important;
}

/* 4. BUTTONS — All variants
-------------------------------------------------- */
/* Base transitions */
.et_pb_button,
a.et_pb_button {
  font-family: var(--ex-font-body) !important;
  letter-spacing: 0.12em !important;
  border-radius: 0 !important;
  transition: background var(--ex-trans),
              color var(--ex-trans),
              border-color var(--ex-trans),
              transform var(--ex-trans),
              box-shadow var(--ex-trans) !important;
}

/* Primary — amber background */
.et_pb_button[style*="background:#C9922A"],
.et_pb_button[style*="background: #C9922A"],
a.et_pb_button[style*="background:#C9922A"] {
  position: relative;
  overflow: hidden;
}

.et_pb_button[style*="background:#C9922A"]:hover,
.et_pb_button[style*="background: #C9922A"]:hover,
a.et_pb_button[style*="background:#C9922A"]:hover {
  background: var(--ex-amber-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(200,147,43,0.35) !important;
  color: var(--ex-charcoal) !important;
}

/* Ghost — cream/transparent border on dark */
.et_pb_button[style*="border:1px solid rgba(245"],
.et_pb_button[style*="border: 1px solid rgba(245"] {
  transition: background var(--ex-trans), transform var(--ex-trans) !important;
}

.et_pb_button[style*="border:1px solid rgba(245"]:hover,
.et_pb_button[style*="border: 1px solid rgba(245"]:hover {
  background: var(--ex-cream-faint) !important;
  transform: translateY(-2px) !important;
  border-color: var(--ex-cream) !important;
}

/* Underline links — amber treatment */
a[style*="border-bottom:1px solid #C9922A"],
a[style*="border-bottom: 1px solid #C9922A"] {
  transition: color var(--ex-trans), letter-spacing var(--ex-trans) !important;
}

a[style*="border-bottom:1px solid #C9922A"]:hover,
a[style*="border-bottom: 1px solid #C9922A"]:hover {
  color: var(--ex-amber) !important;
  letter-spacing: 0.13em !important;
}

a[style*="border-bottom:1px solid rgba(201"]:hover {
  border-bottom-color: var(--ex-amber) !important;
  color: var(--ex-amber) !important;
}

/* 5. PRODUCT CARDS — Hover System
-------------------------------------------------- */
/* Image hover: subtle scale + luminosity shift */
.et_pb_image {
  overflow: hidden;
}

.et_pb_image a,
.et_pb_image > span {
  display: block;
  overflow: hidden;
}

.et_pb_image img {
  transition: transform 0.5s var(--ex-ease), filter 0.5s var(--ex-ease) !important;
  will-change: transform;
  display: block;
  width: 100%;
}

.et_pb_column:hover .et_pb_image img {
  transform: scale(1.04) !important;
  filter: brightness(0.88) saturate(1.1) !important;
}

/* Amber reveal line at image bottom on hover */
.et_pb_image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--ex-amber);
  transition: width 0.45s var(--ex-ease);
  z-index: 2;
}

.et_pb_column:hover .et_pb_image::after {
  width: 100%;
}

/* Column hover: smooth cursor feedback */
.et_pb_column {
  transition: transform 0.3s var(--ex-ease) !important;
}

.et_pb_column:hover {
  transform: translateY(-2px) !important;
}

/* 6. SCROLL REVEAL — CSS entry animations
   Class added via JS IntersectionObserver
-------------------------------------------------- */
.ex-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ex-ease),
              transform 0.75s var(--ex-ease);
}

.ex-reveal.ex-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for sibling cards */
.ex-reveal:nth-child(1) { transition-delay: 0s; }
.ex-reveal:nth-child(2) { transition-delay: 0.12s; }
.ex-reveal:nth-child(3) { transition-delay: 0.24s; }
.ex-reveal:nth-child(4) { transition-delay: 0.36s; }

/* 7. HOMEPAGE HERO — D5 FullwidthHeader layout support
   Background image is set natively in the D5 block JSON (multiply blend).
   CSS only adds min-height and amber glow — no duplicate background.
-------------------------------------------------- */
.page-id-68 .et_pb_fullwidth_section,
.home .et_pb_fullwidth_section {
  position: relative !important;
}

/* Amber ambient bottom edge glow on the fullwidth section */
.page-id-68 .et_pb_fullwidth_section::after,
.home .et_pb_fullwidth_section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--ex-amber-dim) 30%,
    var(--ex-amber-dim) 70%,
    transparent
  );
  z-index: 1;
  pointer-events: none;
}

/* FullwidthHeader module: ensure generous min-height */
.page-id-68 .et_pb_fullwidth_header,
.home .et_pb_fullwidth_header {
  min-height: 88vh !important;
}

/* 8. ABOUT PAGE HERO — Ocean depth
-------------------------------------------------- */
.page-id-114 .et_pb_section_0 {
  position: relative !important;
  background-image: url('https://excelltia-web.local/wp-content/uploads/2023/08/BB-001434-SECADEROS.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-blend-mode: luminosity !important;
  background-color: rgba(26,26,26,0.80) !important;
}

.page-id-114 .et_pb_section_0::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.82);
  z-index: 0;
  pointer-events: none;
}

.page-id-114 .et_pb_section_0 .et_pb_row {
  position: relative !important;
  z-index: 1 !important;
}

/* 9. CONTACT PAGE HERO
-------------------------------------------------- */
.page-id-124 .et_pb_section_0 {
  position: relative !important;
  background-image: url('https://excelltia-web.local/wp-content/uploads/2023/08/PULPO-BANNER-web.jpg') !important;
  background-size: cover !important;
  background-position: center 40% !important;
  background-blend-mode: luminosity !important;
  background-color: rgba(26,26,26,0.78) !important;
}

.page-id-124 .et_pb_section_0::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.80);
  z-index: 0;
  pointer-events: none;
}

.page-id-124 .et_pb_section_0 .et_pb_row {
  position: relative !important;
  z-index: 1 !important;
}

/* 10. CONTACT FORM — Premium Styling
-------------------------------------------------- */
.et_pb_contact_form_container {
  max-width: 100%;
}

/* Field inputs */
.et_pb_contact_form_container input[type="text"],
.et_pb_contact_form_container input[type="email"],
.et_pb_contact_form_container input[type="tel"],
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select {
  font-family: var(--ex-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--ex-charcoal) !important;
  border: 1px solid rgba(26,26,26,0.18) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  background: rgba(242,235,220,0.25) !important;
  transition: border-color var(--ex-trans), background var(--ex-trans) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.et_pb_contact_form_container input:focus,
.et_pb_contact_form_container textarea:focus {
  border-color: var(--ex-amber) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ex-amber-faint) !important;
}

/* Field labels */
.et_pb_contact_form_container label,
.et_pb_contact_form_container .et_pb_contact_field label {
  font-family: var(--ex-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ex-brown) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Submit button */
.et_pb_contact_submit,
input.et_pb_contact_submit {
  font-family: var(--ex-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: var(--ex-charcoal) !important;
  color: var(--ex-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 44px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: background var(--ex-trans), transform var(--ex-trans),
              box-shadow var(--ex-trans) !important;
}

.et_pb_contact_submit:hover,
input.et_pb_contact_submit:hover {
  background: var(--ex-amber) !important;
  color: var(--ex-charcoal) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200,147,43,0.3) !important;
}

/* Checkbox / consent */
.et_pb_contact_form_container .et_pb_contact_field_checkbox label {
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--ex-brown) !important;
  display: inline !important;
}

/* 11. SECTION UTILITY CLASSES
-------------------------------------------------- */
/* Amber horizontal rule */
.ex-rule::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--ex-amber);
  margin-bottom: 22px;
}

/* Label text (overline) */
.ex-label {
  font-family: var(--ex-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Premium section separator */
.ex-sep {
  display: block;
  width: 1px;
  height: 60px;
  background: var(--ex-amber-dim);
  margin: 0 auto 32px;
}

/* 12. GLOBAL FOOTER — Premium Treatment
   Root fix: background must be on #main-footer (full-width), not on
   #footer-widgets which is nested inside a .container (constrained).
-------------------------------------------------- */

/* #main-footer is full-width — this is where the dark bg lives */
#main-footer {
  background: var(--ex-charcoal-deep) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* The outer .container Divi inserts inside #main-footer must not constrain the bg */
#main-footer > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer widget area — transparent (bg from #main-footer), inner max-width for content */
#footer-widgets {
  background: transparent !important;
  border-top: 1px solid rgba(242,235,220,0.06) !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 56px 48px 48px !important;
  box-sizing: border-box !important;
  /* Restore 3-column layout — Divi floats break when outer .container loses padding */
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  align-items: flex-start !important;
}

#footer-widgets .footer-widget {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Last column (nav links) sits right — give it a bit less flex */
#footer-widgets .footer-widget:last-child {
  flex: 0 0 200px !important;
}

@media (max-width: 768px) {
  #footer-widgets {
    flex-wrap: wrap !important;
    padding: 40px 24px 32px !important;
  }
  #footer-widgets .footer-widget,
  #footer-widgets .footer-widget:last-child {
    flex: 0 0 100% !important;
  }
}

/* Footer bottom bar */
#footer-bottom {
  background: transparent !important;
  border-top: 1px solid rgba(200,147,43,0.2) !important;
  padding: 20px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#footer-bottom > .container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

#footer-bottom p,
#footer-bottom a,
#footer-info {
  font-family: var(--ex-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: rgba(242,235,220,0.45) !important;
}

#footer-bottom a:hover {
  color: var(--ex-amber) !important;
}

#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget h5 {
  font-family: var(--ex-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ex-amber) !important;
  margin-bottom: 18px !important;
}

#footer-widgets .footer-widget a {
  font-family: var(--ex-font-body) !important;
  font-size: 13px !important;
  color: rgba(242,235,220,0.6) !important;
  text-decoration: none !important;
  transition: color var(--ex-trans) !important;
}

#footer-widgets .footer-widget a:hover {
  color: var(--ex-amber) !important;
}

/* 13. SOCIAL MEDIA ICONS
-------------------------------------------------- */
.et_pb_social_media_follow_network a {
  transition: transform var(--ex-trans), opacity var(--ex-trans) !important;
}

.et_pb_social_media_follow_network a:hover {
  transform: scale(1.12) !important;
  opacity: 1 !important;
}

/* 14. MOBILE REFINEMENTS
-------------------------------------------------- */
@media only screen and (max-width: 980px) {
  /* Hero minimum height on tablet */
  .page-id-68 .et_pb_section_0,
  .home .et_pb_section_0 {
    min-height: 75vh !important;
  }

  /* Navigation mobile */
  #et_mobile_nav_menu {
    background: var(--ex-charcoal-deep) !important;
  }

  .mobile_menu_bar::before {
    color: var(--ex-cream) !important;
  }
}

@media only screen and (max-width: 767px) {
  /* Hero on phone */
  .page-id-68 .et_pb_section_0,
  .home .et_pb_section_0 {
    min-height: 70vh !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }

  /* Disable column hover on touch */
  .et_pb_column:hover {
    transform: none !important;
  }

  .et_pb_column:hover .et_pb_image img {
    transform: none !important;
    filter: none !important;
  }

  /* Section padding reduction mobile */
  .et_pb_section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Product cards full-width stacking */
  .et_pb_row_1col .et_pb_column,
  .et_pb_row .et_pb_column.et_pb_column_1_3 {
    margin-bottom: 36px !important;
  }

  /* Typography mobile scaling */
  .et_pb_text h1[style*="font-size:56px"],
  .et_pb_text h1[style*="font-size:58px"] {
    font-size: 38px !important;
    line-height: 1.1em !important;
  }

  .et_pb_text h2[style*="font-size:38px"] {
    font-size: 28px !important;
  }

  .et_pb_text h2[style*="font-size:36px"] {
    font-size: 26px !important;
  }
}

/* 15. ANTI-GENERIC OVERRIDES
-------------------------------------------------- */
/* Remove default Divi button arrows */
.et_pb_button::after {
  display: none !important;
}

/* Smoother section backgrounds */
.et_pb_section {
  background-attachment: fixed;
}

/* Exception: hero sections should have fixed attachment */
.page-id-68 .et_pb_section_0,
.page-id-114 .et_pb_section_0,
.page-id-124 .et_pb_section_0 {
  background-attachment: fixed !important;
}

/* Better image loading */
.et_pb_image img,
.et_pb_section img {
  max-width: 100%;
  height: auto;
}

/* 16. PREMIUM HIGHLIGHT — amber text accent class
-------------------------------------------------- */
.ex-amber-text {
  color: var(--ex-amber) !important;
}

.ex-cream-text {
  color: var(--ex-cream) !important;
}

/* 17. B2B CONTACT PATHS — styled blocks
   Used in contact page custom HTML
-------------------------------------------------- */
.ex-contact-path {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(26,26,26,0.10);
  cursor: default;
  transition: padding-left var(--ex-trans);
}

.ex-contact-path:last-child {
  border-bottom: none;
}

.ex-contact-path:hover {
  padding-left: 8px;
}

.ex-contact-path-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--ex-amber-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.ex-contact-path-icon::before {
  content: '—';
  color: var(--ex-amber);
  font-family: var(--ex-font-body);
  font-size: 14px;
}

.ex-contact-path-content h4 {
  font-family: var(--ex-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ex-charcoal) !important;
  margin: 0 0 6px 0 !important;
}

.ex-contact-path-content p {
  font-family: var(--ex-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.65em !important;
  color: var(--ex-brown) !important;
  margin: 0 !important;
}

/* ——— STICKY STORYTELLING (Homepage Section 5) ——— */
.ex-sticky-col {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

.ex-story-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ex-story-panel {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 48px;
  border-top: 1px solid rgba(200, 147, 43, 0.2);
}

.ex-story-panel:first-child {
  border-top: none;
}

@media (max-width: 980px) {
  .ex-sticky-col {
    position: relative;
    top: 0;
  }
  .ex-story-panel {
    min-height: auto;
    padding: 40px 24px;
  }
}

/* 18. EDITORIAL UTILITY CLASSES (mockup system)
-------------------------------------------------- */

/* Eyebrow — ochre overline label */
.eyebrow {
  font-family: var(--ex-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ex-amber);
  display: block;
  margin-bottom: 14px;
}

/* Underline CTA link — animating amber bottom border */
.ul-link {
  font-family: var(--ex-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ex-amber);
  padding-bottom: 3px;
  display: inline-block;
  transition: color var(--ex-trans), letter-spacing var(--ex-trans),
              border-color var(--ex-trans);
}

.ul-link:hover {
  color: var(--ex-amber);
  letter-spacing: 0.18em;
  border-color: var(--ex-amber);
}

/* Chapter marker — Roman numeral section divider */
.chapter {
  font-family: var(--ex-font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ex-amber-dark);
  opacity: 0.55;
  display: block;
  margin-bottom: 10px;
}

/* Endorsement horizontal rule line */
.endorsement-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ex-amber);
  margin: 20px 0;
}

/* Numbered marker — Nº 01 style */
.ex-num {
  font-family: var(--ex-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ex-amber);
  display: block;
  margin-bottom: 8px;
}

/* 19. HERO SCROLL CAROUSEL — Slide indicators
   Vertical 2px lines, right edge, grow + turn ochre on active
-------------------------------------------------- */
.slide-indicators {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  transition: opacity 0.4s var(--ex-ease);
}

.slide-indicators.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.slide-indicator {
  display: block;
  width: 2px;
  height: 28px;
  background: var(--ex-cream);
  opacity: 0.35;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.4s var(--ex-ease),
              opacity 0.4s var(--ex-ease),
              height 0.4s var(--ex-ease);
}

.slide-indicator:hover {
  opacity: 0.8;
}

.slide-indicator.is-active {
  background: var(--ex-amber);
  opacity: 1;
  height: 36px;
}

/* Ken Burns keyframe for hero slide backgrounds */
@keyframes ken-burns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

/* 20. COLLECTIONS GRID CARDS
-------------------------------------------------- */
.col-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--ex-charcoal-deep);
}

.col-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ex-ease), filter 0.7s var(--ex-ease);
}

.col-card:hover .col-card__img {
  transform: scale(1.06);
  filter: brightness(0.75);
}

.col-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,10,8,0.85) 0%, rgba(15,10,8,0.15) 60%, transparent 100%);
  pointer-events: none;
}

.col-card__label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.col-card__label .eyebrow {
  color: var(--ex-amber);
  margin-bottom: 4px;
}

.col-card__label h3 {
  font-family: var(--ex-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ex-cream);
  margin: 0;
  line-height: 1.2em;
}

@media (max-width: 880px) {
  .slide-indicators {
    display: none;
  }
}

/* 21. PHASE 3 — GLOBAL TYPOGRAPHY NORMALIZATION
   Ensure all inner pages inherit the design system fonts
-------------------------------------------------- */
body,
.et_pb_text,
.et_pb_text p,
.et_pb_module p {
  font-family: var(--ex-font-body) !important;
}

h1, h2, h3,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
  font-family: var(--ex-font-display) !important;
}

h4, h5, h6,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6 {
  font-family: var(--ex-font-body) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* 22. GLOBAL BUTTON → UNDERLINE LINK CONVERSION
   Kill all Divi filled buttons site-wide, replace with underline pattern
   Exception: homepage hero CTAs which are inline HTML (not .et_pb_button)
-------------------------------------------------- */
.et_pb_button,
a.et_pb_button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ex-amber) !important;
  border-radius: 0 !important;
  color: var(--ex-charcoal) !important;
  font-family: var(--ex-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 0 0 4px 0 !important;
  display: inline-block !important;
  transition: color var(--ex-trans), letter-spacing var(--ex-trans) !important;
  box-shadow: none !important;
}

.et_pb_button:hover,
a.et_pb_button:hover {
  background: transparent !important;
  color: var(--ex-amber) !important;
  letter-spacing: 0.20em !important;
  border-bottom-color: var(--ex-amber) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Dark section buttons: cream text + amber underline */
.et_pb_section[style*="background:#1A1A1A"] .et_pb_button,
.et_pb_section[style*="background: #1A1A1A"] .et_pb_button,
.et_pb_section[style*="background:#111"] .et_pb_button,
.et_pb_section[style*="background: #111"] .et_pb_button {
  color: var(--ex-cream) !important;
}
.et_pb_section[style*="background:#1A1A1A"] .et_pb_button:hover,
.et_pb_section[style*="background:#111"] .et_pb_button:hover {
  color: var(--ex-amber) !important;
}

/* 23. NUESTROS PRODUCTOS page — first section positioning for overlay
-------------------------------------------------- */
.page-id-30501 .et_pb_section:first-of-type {
  position: relative !important;
}

/* 24. INLINE CTA BUTTON LINKS — old ghost/filled pattern → underline
   These are inline HTML anchors with inline styles, not Divi button modules.
   Target the amber-background ones and cream-border ghost ones.
   Use attribute selectors where possible.
-------------------------------------------------- */

/* Old cream ghost buttons on dark sections → underline cream */
a[style*="border:1px solid rgba(245,237,214"],
a[style*="border: 1px solid rgba(245,237,214"],
a[style*="border:1px solid rgba(242,235,220"],
a[style*="border: 1px solid rgba(242,235,220"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ex-cream) !important;
  padding: 0 0 4px 0 !important;
  display: inline-block !important;
  transition: color var(--ex-trans), letter-spacing var(--ex-trans) !important;
}
a[style*="border:1px solid rgba(245,237,214"]:hover,
a[style*="border: 1px solid rgba(245,237,214"]:hover,
a[style*="border:1px solid rgba(242,235,220"]:hover,
a[style*="border: 1px solid rgba(242,235,220"]:hover {
  color: var(--ex-amber) !important;
  border-bottom-color: var(--ex-amber) !important;
  letter-spacing: 0.14em !important;
}

/* Old amber-filled buttons → underline amber */
a[style*="background:#C9922A"],
a[style*="background: #C9922A"],
a[style*="background:#C8932B"],
a[style*="background: #C8932B"] {
  background: transparent !important;
  color: var(--ex-charcoal) !important;
  border: none !important;
  border-bottom: 1px solid var(--ex-amber) !important;
  padding: 0 0 4px 0 !important;
  display: inline-block !important;
  transition: color var(--ex-trans), letter-spacing var(--ex-trans) !important;
}
a[style*="background:#C9922A"]:hover,
a[style*="background: #C9922A"]:hover,
a[style*="background:#C8932B"]:hover,
a[style*="background: #C8932B"]:hover {
  color: var(--ex-amber) !important;
  letter-spacing: 0.18em !important;
}

/* Dark section amber buttons → underline cream */
.et_pb_section[style*="background:#1A1A1A"] a[style*="background:#C9922A"],
.et_pb_section[style*="background:#1A1A1A"] a[style*="background:#C8932B"] {
  color: var(--ex-cream) !important;
}

/* 25. INNER PAGE SECTION RHYTHM
   Ensure all inner pages have consistent vertical rhythm
-------------------------------------------------- */
.page-id-114 .et_pb_section,
.page-id-30501 .et_pb_section,
.page-id-124 .et_pb_section,
.page-id-30828 .et_pb_section {
  background-attachment: scroll !important;
}

/* About/Contact hero: fixed parallax (these use et_pb_section_0 which is not
   overridden by Divi, so background-attachment:fixed works) */
.page-id-114 .et_pb_section_0,
.page-id-124 .et_pb_section_0 {
  background-attachment: fixed !important;
}

/* ============================================================
   PRODUCT PAGE PREMIUM — Pulpo & Ibendra
   Cards, image zoom, hover interactions
   ============================================================ */

/* Premium card hover lift */
.excl-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.excl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}

/* Image hover zoom */
.excl-img-zoom {
  overflow: hidden;
  display: block;
}
.excl-img-zoom img {
  transition: transform 0.55s ease;
  width: 100%;
  display: block;
}
.excl-img-zoom:hover img {
  transform: scale(1.04);
}

/* Full-bleed image section */
.excl-fullbleed img {
  width: 100%;
  max-height: 580px;
  object-fit: cover;
  display: block;
}

/* Product family card image */
.excl-product-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* Stat number large display */
.excl-stat {
  font-family: 'Cormorant Garamond', serif;
  font-size: 120px;
  font-weight: 300;
  color: #C9922A;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
}

/* Comparison table */
.excl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
}
.excl-table thead tr {
  border-bottom: 2px solid #C9922A;
}
.excl-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1A1A1A;
}
.excl-table thead th:first-child {
  color: #C9922A;
}
.excl-table tbody tr {
  border-bottom: 1px solid rgba(26,26,26,0.12);
}
.excl-table tbody td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.55em;
  color: #1A1A1A;
}
.excl-table tbody td:first-child {
  font-weight: 600;
}

/* Tag pill for product attributes */
.excl-tag {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: rgba(201,146,42,0.15);
  border: 1px solid rgba(201,146,42,0.4);
  padding: 3px 10px;
  margin: 3px 3px 3px 0;
  border-radius: 2px;
}

/* Reveal delay helpers */
.ex-d1 { transition-delay: 0.12s !important; }
.ex-d2 { transition-delay: 0.24s !important; }
.ex-d3 { transition-delay: 0.36s !important; }


/* ── Pulpo v2: icon list + accordion ─────────────────── */
.excl-icon-list{display:grid;grid-template-columns:1fr 1fr;gap:0;list-style:none;padding:0;margin:0;}
.excl-icon-list li{font-family:Montserrat,sans-serif;font-size:13px;color:#1A1A1A;padding:14px 20px 14px 0;border-bottom:1px solid rgba(26,26,26,0.10);display:flex;align-items:flex-start;gap:12px;}
.excl-icon-list li:nth-last-child(-n+2){border-bottom:none;}
.excl-icon-list .ico{color:#C9922A;font-size:16px;flex-shrink:0;margin-top:1px;}
@media(max-width:600px){.excl-icon-list{grid-template-columns:1fr;}.excl-icon-list li:last-child{border-bottom:none;}}
.excl-accordion{border-top:1px solid rgba(245,237,214,0.15);}
.excl-accordion details{border-bottom:1px solid rgba(245,237,214,0.15);}
.excl-accordion summary{font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#F5EDD6;padding:22px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.excl-accordion summary::-webkit-details-marker{display:none;}
.excl-accordion summary::after{content:'＋';font-size:18px;color:#C9922A;font-weight:300;}
.excl-accordion details[open] summary::after{content:'－';}
.excl-accordion details[open] summary{color:#C9922A;}
.excl-accordion .acc-body{padding:0 0 28px;}
.excl-accordion .acc-body p{font-family:Montserrat,sans-serif;font-size:14px;color:rgba(245,237,214,0.75);line-height:1.8em;margin:0 0 12px;}
.excl-accordion .acc-body ul{list-style:none;padding:0;margin:0;}
.excl-accordion .acc-body li{font-family:Montserrat,sans-serif;font-size:13px;color:rgba(245,237,214,0.70);padding:7px 0;border-bottom:1px solid rgba(245,237,214,0.08);display:flex;gap:12px;}
.excl-accordion .acc-body li::before{content:'→';color:#C9922A;flex-shrink:0;}