/* ═══════════════════════════════════════════════════════
   DOMINO AZÚCAR MÉXICO — CSS Principal
   Réplica fiel de azucardominomex.com (Drupal → WordPress)
   v5.79.36 — checkbox label bold + color #464749 (PROD match)
   ═══════════════════════════════════════════════════════ */

/* ── Accessibility: screen-reader only ── */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── CSS VARIABLES (Paleta Azúcar México) ── */
:root {
    /* Blues (principal palette) */
    --az-navy-dark:    #1c386f;   /* Header background */
    --az-navy:         #0F3680;   /* Headings principales, CTAs */
    --az-blue-title:   #1f448e;   /* Títulos receta, cards, footer bg */
    --az-blue-medium:  #04559f;   /* Ingredientes legends, sub-headers */
    --az-blue-link:    #0079C0;   /* Links generales, bs-primary */
    --az-blue-hover:   #2fa8df;   /* Nav hover */
    --az-blue-light:   #5396d4;   /* Category hover */
    --az-footer-bg:    #20458d;   /* Footer background */
    --az-mobile-nav:   #142956;   /* Mobile nav bg */

    /* Browns / Warm tones */
    --az-recipe-accent:#66391c;   /* $muddy-waters-approx Drupal: título, categorías, headings, quick-tip */
    --az-brown:        #66391c;   /* CTAs hover, decorative — mismo que recipe-accent */
    --az-brown-dark:   #4a2510;   /* Darker brown for hover states */
    --az-beige:        #E7D0B2;   /* Hover buttons, CTA hover text */
    --az-cream:        #FFF6E1;   /* Dropdown bg, warm accent */

    /* Accents */
    --az-yellow:       #f8ea22;   /* Underlines, active dots, accent */
    --az-green:        #6cbc37;   /* Serving yield */
    --az-red:          #ef4043;   /* Errors, alerts */
    --az-secondary:    #ff4e2e;   /* Secondary accent */

    /* Neutrals */
    --az-body-text:    #464749;   /* Body text */
    --az-gray:         #8a8a8a;   /* Labels, meta text */
    --az-gray-border:  #cccccc;   /* Borders */
    --az-bg-ingr:      #f1f1f1;   /* Ingredientes background */
    --az-bg-light:     #f6f6f6;   /* Filter backgrounds */
    --az-white:        #ffffff;

    /* Spacing */
    --az-container:    1080px;
    --az-container-sm: 1030px;
    --az-gap:          1.875rem;  /* 30px */
    --az-gap-sm:       0.9375rem; /* 15px */
}

/* ═══════════════════════════════════════════════════════
   BASE RESETS & KADENCE OVERRIDES
   ═══════════════════════════════════════════════════════ */

body {
    font-family: "FFDINWebPro", "Trebuchet MS", "Gotham Light", Helvetica, Arial, sans-serif;
    font-size: 16px; /* PROD verified: 16px (Kadence may default to 17px) */
    color: var(--az-body-text);
    overflow-x: hidden; /* Evita scroll horizontal por 100vw en páginas con scrollbar */
    line-height: 1.5;
    background-color: #fff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Kadence global colors to Azucar palette */
body .site {
    --global-palette1: var(--az-blue-title);
    --global-palette2: var(--az-navy);
    --global-palette3: var(--az-body-text);
    --global-palette4: var(--az-gray);
    --global-palette5: var(--az-bg-light);
    --global-palette6: var(--az-bg-ingr);
    --global-palette7: var(--az-white);
    --global-palette8: var(--az-blue-title);
    --global-palette9: var(--az-navy-dark);
    --global-palette-highlight: var(--az-blue-link);
    --global-palette-highlight-alt: var(--az-blue-hover);
    --global-palette-highlight-alt2: var(--az-navy);
    --global-palette-btn: var(--az-white);
    --global-palette-btn-bg: var(--az-navy);
    --global-palette-btn-bg-hover: var(--az-blue-title);
}

a {
    color: var(--az-blue-link);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--az-blue-hover);
    text-decoration: none;
}
/* Only add underline to inline content links */
.recipe-detail-right a:hover,
.recipe-description a:hover,
.entry-content p a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "FFDINWebProBlack", "CenturyGothicStd", Arial, sans-serif;
    color: var(--az-body-text);
    letter-spacing: -0.015em;
}

/* ═══════════════════════════════════════════════════════
   CUSTOM HEADER
   ═══════════════════════════════════════════════════════ */

.site-header,
#masthead {
    background-color: var(--az-white) !important;
    border-bottom: 10px solid var(--az-recipe-accent) !important;
    min-height: 80px;
    position: relative;
}
.site-header .site-header-inner-wrap,
.site-header .site-header-wrap,
.header-navigation-wrap,
.site-header-row-container-inner,
.site-header .site-top-header-inner-wrap,
.site-header .site-main-header-inner-wrap {
    background-color: transparent !important;
}
.site-branding .site-title,
.site-branding .custom-logo-link img {
    max-width: 180px;
}

/* Header layout */
.site-header {
    padding: 0;
    border-bottom: 10px solid var(--az-recipe-accent);
}
.site-header .site-header-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px; /* PROD Bootstrap xxl; stepped down via @media */
    margin: 0 auto;
    padding: 0;
}
/* PROD Bootstrap stepped containers — header (base is 1320px, step down via max-width queries) */
@media (max-width: 1399px) { .site-header .site-header-inner-wrap { max-width: 1140px; } }
@media (max-width: 1199px) { .site-header .site-header-inner-wrap { max-width: none; } }
/* v5.11.2: Fix header layout - absolute positioning like PROD */
.site-header .site-header-wrap {
    display: block !important; /* NOT flex - logo is absolute */
    position: relative !important;
    width: 100% !important;
}
.site-header .site-branding {
    position: absolute !important; /* Match PROD absolute positioning */
    left: 0 !important;
    top: 10px !important;
    z-index: 10 !important;
}
.site-branding .site-logo-link img,
.site-branding .custom-logo {
    max-width: 180px !important; /* Match PROD: 180px */
    max-height: 103px !important; /* Match PROD: 103px */
    width: auto !important;
    height: auto !important;
    display: block !important;
}
/* v5.12.4: Nav left-aligned, search pushed far right (PROD gap ~535px) */
.site-header .header-navigation-wrap {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important; /* Nav left, search right */
    margin-left: 216px !important;
    margin-right: 0 !important;
    min-height: 131px !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    width: calc(100% - 216px) !important; /* Fill remaining width */
}
.site-header .header-menu-container .menu { display:flex; gap:0; list-style:none; margin:0; padding:0; }
.site-header .header-menu-container .menu > li > a {
    color: var(--az-recipe-accent) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 15px 14px; /* v5.12.1: PROD has 14px bottom padding */
    display: block;
    text-decoration: none !important;
    transition: font-weight 0.3s ease; /* v5.12.0: slower, smoother like PROD */
}
/* v5.12.0: Hover more subtle like PROD - weight 700 not 900, slower transition */
.site-header nav a:hover,
.site-header .primary-menu-container a:hover,
.site-header .header-menu-container a:hover,
.site-header .header-navigation-wrap a:hover,
.site-header .menu > li > a:hover {
    font-weight: 700 !important;
    color: var(--az-recipe-accent) !important;
    text-decoration: none !important;
}
.site-header .menu-toggle { display:none; background:none; border:1px solid transparent; color:var(--az-recipe-accent); padding:0; cursor:pointer; position:relative; width:37px; height:25px; }
/* v5.13.28: Animated 3-bar hamburger — container transparent, 3 bars via ::before/span/::after */
.hamburger-bars {
    display: block; width: 35px; height: 24px;
    position: absolute; left: 0; top: 0;
    background: transparent;
}
.hamburger-bars span,
.hamburger-bars::before,
.hamburger-bars::after {
    display: block; width: 35px; height: 4px; background-color: var(--az-recipe-accent);
    border-radius: 15px; transition: transform 0.2s, opacity 0.2s, top 0.2s;
    position: absolute; left: 0;
}
.hamburger-bars::before { content: ''; top: 0; }
.hamburger-bars span { top: 10px; }
.hamburger-bars::after { content: ''; top: 20px; }
/* Expanded: middle bar fades, top/bottom rotate to X */
.menu-toggle[aria-expanded="true"] .hamburger-bars span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .hamburger-bars::before { transform: rotate(-45deg); top: 10px; }
.menu-toggle[aria-expanded="true"] .hamburger-bars::after { transform: rotate(45deg); top: 10px; }

/* Header Search — v5.12.3: PROD expand animation (120px → 250px on hover, 0.5s) */
.header-search-wrap {
    margin-left: auto; /* Push search to far right like PROD */
    margin-bottom: 6px; /* PROD: search sits 6px above bottom of nav (y=81 vs navWrap bottom=131-10=121) */
}
.header-search-form {
    display: flex;
    align-items: center;
    position: relative; /* PROD: position:relative so icon can be absolute inside */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    float: right;
}
input.header-search-input { /* input prefix beats Kadence's input[type="search"] specificity */
    border: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 22px 0 11px; /* PROD: 0 vertical, right=22px (icon space), left=11px */
    font-size: 12px; /* PROD: 12px */
    font-family: sans-serif; /* PROD: sans-serif (not FFDINWebPro) */
    color: rgb(0, 0, 0); /* PROD: black */
    letter-spacing: 1px; /* PROD: 1px */
    width: 120px;
    height: 44px; /* PROD: 44px */
    background: transparent !important;
    transition: width 0.5s ease;
    box-sizing: border-box;
}
.header-search-wrap:hover input.header-search-input,
input.header-search-input:focus {
    width: 250px;
    padding-left: 0.5rem;
}
input.header-search-input::placeholder {
    color: rgb(117, 117, 117); /* PROD: gray #757575, not black */
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px; /* PROD: 1px */
}
.header-search-submit {
    background: none !important;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1; /* Prevent button from being taller than icon */
    color: var(--az-body-text) !important; /* PROD: #464749 — no change on hover */
    cursor: pointer;
    position: absolute; /* PROD: absolute inside form, overlays input right-padding */
    right: 5px;
    top: 11px; /* PROD: icon y=92, input y=81 → 11px from top (slightly above center) */
    transform: none;
    transition: none !important; /* Prevent Kadence button transition */
}
.header-search-submit .fa {
    font-size: 18px; /* PROD: 18px FA icon */
    display: block; /* Prevent inline extra spacing */
}
.header-search-submit:hover,
.header-search-submit:focus {
    background: none !important; /* Prevent Kadence blue button hover */
    color: var(--az-body-text) !important; /* PROD: icon stays grey, no color change */
    opacity: 1;
}

/* v5.13.17: Mobile search is hidden on desktop — only visible inside hamburger on mobile */
.mobile-menu-search {
    display: none;
}

@media (max-width: 1199px) {
  /* ── Header mobile: match PROD 84px total ── v5.82.08: breakpoint →1199px (PROD Bootstrap XL at 1200px) */
  .site-header { padding: 8px 12px !important; height: auto !important; position: relative !important; }
  .site-header .site-header-inner-wrap { padding: 0 12px !important; height: auto !important; min-height: auto !important; }

  /* Layout: logo left, hamburger right — flex row */
  .site-header .site-header-wrap { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; position: static !important; }

  /* Logo: scale down to ~100px wide (PROD: 100x57) — must use !important to beat desktop !important */
  .site-header .site-branding { position: relative !important; top: auto !important; left: auto !important; width: auto !important; flex-shrink: 0 !important; z-index: 10 !important; }
  .site-branding .site-logo-link img,
  .site-branding .custom-logo-link img,
  .site-branding .custom-logo,
  .site-branding img { max-height: 57px !important; width: auto !important; max-width: 100px !important; height: auto !important; }

  /* Reset desktop nav wrap — kill min-height, margin, width overrides */
  .site-header .header-navigation-wrap { margin-left: 0 !important; min-height: auto !important; height: auto !important; width: auto !important; align-items: center !important; flex-shrink: 0 !important; position: static !important; }

  /* Hamburger: show 3-bar icon */
  .site-header .menu-toggle { display: block !important; position: absolute; right: 20px; top: 20px; }
  .menu-toggle .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; }

  /* Hide desktop search on mobile — mobile search is inside hamburger dropdown */
  .header-search-wrap { display: none !important; }

  /* v5.13.20: Nav container = dropdown. Slide-down animation via max-height. */
  .site-header .header-menu-container {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #66391c;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .site-header .header-menu-container.open {
    max-height: 400px; /* enough for nav + search */
    overflow: visible;
  }
  /* Nav menu: hidden by default, column layout when open */
  .site-header .header-menu-container .menu {
    display: none !important;
    flex-direction: column;
    background: #66391c;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .site-header .header-menu-container.open .menu {
    display: flex !important;
    position: static !important;
  }
  .site-header .header-menu-container .menu > li > a {
    color: #fff !important;
    display: block;
    padding: 11px !important;
    border-bottom: 1px solid #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.28px;
    text-decoration: none !important;
  }
  .site-header .header-menu-container .menu > li > a:hover {
    color: #fff !important;
    background: rgba(0,0,0,0.1);
  }

  /* v5.13.27: Mobile search — BEFORE nav links (PROD order verified). White strip. */
  .mobile-menu-search {
    display: none;
  }
  .site-header .header-menu-container.open .mobile-menu-search {
    display: block !important;
  }
  .mobile-search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    width: 100%;
    height: 44px;
  }
  .mobile-search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 120px;
    height: 44px;
    padding: 22px 22px 22px 11px !important;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000;
    -webkit-appearance: none;
    transition: width 0.5s;
    float: right;
  }
  .mobile-search-input:focus {
    width: 250px;
  }
  .mobile-search-input::placeholder {
    color: #666;
    font-size: 12px;
    letter-spacing: 1px;
  }
  /* Search icon — magnifying glass matching PROD (fa-search style, 22px, white on brown would be wrong; icon sits on white bg so use brown) */
  .mobile-search-icon {
    position: absolute;
    top: 11px;
    right: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
  }
  .mobile-search-icon::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #66391c;
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
  }
  .mobile-search-icon::after {
    content: '';
    display: block;
    width: 2px;
    height: 8px;
    background: #66391c;
    position: absolute;
    bottom: 0; right: 2px;
    transform: rotate(-45deg);
  }

  /* .site-header is the positioning context for dropdown */
}

/* Home hero personalizado */
.home-hero {
    background-color: var(--az-recipe-accent); /* fallback cuando no hay imagen */
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 80px 0;
    color: #fff;
}
.home-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,24,56,0.55) 0%, rgba(0,24,56,0.6) 100%); }
.home-hero-inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:320px; }
.home-hero-content { max-width:1100px; text-align:center; padding:20px; }
.home-hero-title { font-size:40px; margin:0 0 12px; font-weight:700; color:var(--az-white); }
.home-hero-subtitle { font-size:18px; margin:0 0 18px; color:rgba(255,255,255,0.92); }
.home-hero-cta .btn-hero { background:var(--az-accent); color:#fff; padding:12px 20px; border-radius:6px; text-decoration:none; font-weight:700; }

@media (max-width: 768px) {
    .home-hero { padding:48px 0; }
    .home-hero-title { font-size:26px; }
    .home-hero-subtitle { font-size:15px; }
}

/* Recipes grid — data-cols attribute support (complements class selectors below) */
.recipes-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.recipes-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.recipes-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { text-decoration: none; }
@media (max-width: 900px) {
    .recipes-grid[data-cols="4"], .recipes-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .recipes-grid[data-cols] { grid-template-columns: 1fr !important; }
}

/* Sección recetas recientes (homepage) */
.home-recent-recipes {
    max-width: var(--az-container);
    margin: 3rem auto;
    padding: 0 var(--az-gap);
}
.home-recent-recipes h2 {
    font-family: "FFDINWebProBlack", Arial, sans-serif;
    font-size: 1.75rem;
    color: var(--az-recipe-accent);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Nav links — Kadence override (todo ya está en el bloque header de arriba) */
.mobile-header-navigation-wrap { background-color: var(--az-recipe-accent) !important; }
.mobile-header-navigation-wrap .menu > li > a { color: var(--az-white) !important; }

/* ═══════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════ */

.domino-breadcrumbs {
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--az-gray);
    max-width: var(--az-container);
    margin: 0 auto;
    padding-left: var(--az-gap);
    padding-right: var(--az-gap);
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
}
.domino-breadcrumbs a { color: var(--az-blue-link); text-decoration: none; }
.domino-breadcrumbs a:hover { color: var(--az-blue-hover); text-decoration: underline; }
.domino-breadcrumbs .sep { margin: 0 0.4rem; }
.domino-breadcrumbs .current { color: var(--az-body-text); }

/* ═══════════════════════════════════════════════════════
   SINGLE RECETA — Réplica estructura Drupal
   Título → Categorías → Imagen+Prep → 2col (Ingr|Instr)
   ═══════════════════════════════════════════════════════ */

.domino-single-recipe {
    max-width: var(--az-container);
    margin: 0 auto;
    padding: 0; /* PROD: no bottom padding — recipe section ends flush against footer */
}

/* Title block + categorías + share — no padding on container, no negative margin needed */
.recipe-title-block {
    margin: 2rem 0 1rem;
}
.recipe-categories-bar,
.recipe-share-row {
    margin-left: 0;
    margin-right: 0;
}
.recipe-title-block h1 {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif (system font, no custom) */
    font-size: 4.5rem; /* PROD: 72px — inner .field--name-title, NOT the H1 container (40px) */
    color: var(--az-recipe-accent); /* PROD: #66391c brown */
    letter-spacing: normal;
    font-weight: 500;
    line-height: 1.1; /* 72px * 1.1 ≈ 79px */
    margin: 0;
}

/* Description block */
/* Inside recipe-prep-info left col — no extra top margin needed (col has padding-top) */
.recipe-description {
    margin: 0 0 17px; /* PROD: margin-bottom collapses with p's 17px → 17px gap after block */
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif, NOT FFDINWebPro */
    font-size: 1rem;
    color: var(--az-body-text);
    line-height: 1.5; /* PROD: 24px/16px = 1.5 */
}
.recipe-description p {
    margin: 0 0 17px; /* PROD: margin-bottom 17px */
    padding-bottom: 17px; /* PROD: padding-bottom 17px (inside p box = visual space before prep) */
}

/* ── Banner image full-width (Main_1700x470) — breaks out of container ── */
.recipe-banner-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-height: 470px;
    overflow: hidden;
    margin: 0 0 2rem;
    display: block;
}
.recipe-banner-img {
    width: 100%;
    height: auto;
    max-height: 470px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
@media (max-width: 768px) {
    .recipe-banner-img { height: 220px; }
}

/* ── Banner Comparison Slider (before/after) ── */
.banner-comparison {
    position: relative;
    width: 100%;
    max-height: 500px; /* PROD: 500px */
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}
.banner-comparison-img {
    width: 100%;
    height: auto;
    max-height: 500px; /* PROD: 500px */
    object-fit: cover;
    object-position: center top;
    display: block;
}
.banner-comparison-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.banner-comparison-overlay img {
    /* JS sets exact px width via syncWidth(); CSS fallback = 200% of overlay (overlay starts at 50%) */
    width: 200%;
    max-height: 500px; /* PROD: 500px */
    object-fit: cover;
    object-position: center top;
    display: block;
}
.banner-comparison-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}
.banner-comparison-handle-line {
    flex: 1;
    width: 2px;
    background: rgba(255,255,255,0.2); /* PROD: semi-transparent white line */
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.banner-comparison-handle-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.banner-comparison-arrows {
    font-size: 16px;
    color: var(--az-recipe-accent);
    font-weight: 600; /* PROD: 600 */
    letter-spacing: normal; /* PROD: normal */
}
@media (max-width: 768px) {
    .banner-comparison { max-height: 250px; }
    .banner-comparison-img { max-height: 250px; }
    .banner-comparison-overlay img { max-height: 250px; }
    .banner-comparison-handle-circle { width: 32px; height: 32px; }
    .banner-comparison-arrows { font-size: 13px; letter-spacing: normal; }
}

/* ── YouTube video — top of instructions column (PROD: field-name-field-recipe-video) ── */
.recipe-video-hero {
    margin: 0 0 30px;
    max-width: 560px;
}
.recipe-video-hero iframe {
    width: 100%;
    height: 315px;
    display: block;
    border: none;
}
/* ── YouTube video inline in instructions (for recipes with embedded iframes in post_content) ── */
.recipe-youtube-wrap {
    margin: 1.5rem 0;
}
.recipe-youtube-wrap iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 439 / 300;
    display: block;
    border: none;
}

/* Categories bar — PROD: sans-serif 13px, 30px gap from H1 bottom to H4 text */
.recipe-categories-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: sans-serif;
    font-size: 0.8125rem;
    padding: 14px 0 6px; /* 14px top: title-block mb(16)+14 = 30px to H4 text (PROD match) */
    margin-bottom: 8px;
}
.recipe-categories-bar h4 {
    font-family: sans-serif; /* PROD: sans-serif (NOT FFDINWebProBold) */
    color: var(--az-gray);
    font-size: 0.8125rem;
    margin: 0 5px 0 0; /* PROD: marginRight 5px */
    font-weight: 500;
    line-height: 15.6px; /* PROD: 15.6px */
    letter-spacing: normal; /* PROD: normal (override global -0.015em) */
}
.recipe-cat-link {
    font-family: sans-serif; /* PROD: sans-serif (NOT FFDINWebProBold) */
    color: #000 !important;
    font-size: 0.8125rem;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    line-height: 15.6px; /* PROD: 15.99px ≈ 15.6px */
}
.recipe-cat-link:hover { text-decoration: underline; }
.recipe-cat-sep {
    font-family: sans-serif; /* PROD: sans-serif */
    font-size: 0.8125rem;
    color: var(--az-gray);
    padding: 0 0.3125rem;
}

/* Share row — social icons + print, below categories (PROD: Facebook, Pinterest, Email, Print) */
.recipe-share-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.5rem;
}

/* Social share icons — 35x35 brown squares, white SVG, matches PROD a2a style */
.recipe-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--az-recipe-accent); /* brown #66391c */
    border: none;
    border-radius: 6px; /* PROD: 6px */
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}
.recipe-share-icon:hover { opacity: 0.7; }

/* Print button — kept for backward compat, now also uses .recipe-share-icon */
.recipe-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--az-recipe-accent);
    border: none;
    border-radius: 6px; /* PROD: 6px */
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.recipe-print-btn:hover { opacity: 0.7; }
/* Print icon next to Instrucciones heading — same PROD a2a style */
.section-legend-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--az-recipe-accent);
    border-radius: 6px; /* PROD: 6px */
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}
.section-legend-print:hover {
    opacity: 0.7;
}

/* Prep + Image block */
.recipe-prep-block {
    display: flex;
    max-width: 100%;
    margin: 0 0 2rem; /* no top margin — padding-top on recipe-prep-info handles spacing after video */
    gap: 4rem; /* v5.80.64: ~64px gap matches PROD — needed for -55px arrow clearance */
    align-items: flex-start;
}
/* PROD: col-lg-5 (5/12) desc+prep | col-lg-7 (7/12) image */
.recipe-prep-info { width: 41.67%; padding: 50px 15px 30px 0; } /* PROD: padding-top 50px */
.recipe-image-col { width: 58.33%; }
.recipe-image-col img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
}

/* Prep time items — PROD: vertical stacked columns, side by side */
.prep-meta-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
}
.prep-meta-item {
    display: flex;
    flex-direction: column;
    margin-right: 35px;
}
.prep-meta-label {
    display: block;
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif (system font) */
    font-size: 18px; /* PROD: 18px, black */
    font-weight: 400;
    font-style: italic; /* PROD: italic */
    color: #000; /* PROD: #000000 */
    line-height: 24px;
}
.prep-meta-value {
    display: block;
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif (system font) */
    font-size: 13px;
    font-weight: 400;
    color: var(--az-body-text);
    line-height: 24px;
    margin: 15px 0; /* v5.80.61: PROD has 15px top+bottom margin on value */
}

/* ── Section legend icon (print icon next to "Instrucciones") ── */
.section-legend-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    vertical-align: middle;
}

/* ── 2-Column Body (detail-recipe) ── */
/* PROD: container-fluid (full viewport width). Bleed section to viewport edges. */
.recipe-detail-section {
    display: flex;
    gap: 0;
    margin-left: calc(-50vw + 50%);
    width: 100vw;
    /* PROD: overflow visible — no clipping on parent */
}
/* LEFT: Ingredientes — PROD col-lg-6 = 50% of container-fluid */
.recipe-detail-left {
    width: 50%;
    background: var(--az-bg-ingr); /* PROD: #f1f1f1 */
    padding: 0;
    flex-shrink: 0;
    position: relative;
}
/* Sticky wrapper — matches PROD <fieldset position:sticky;top:0> */
.recipe-ingredients-sticky {
    position: sticky;
    top: 0;
}
/* Tab nav bar — matches PROD div.recipe-ingredient-buttons.nav.nav-tabs (height 56px) */
.recipe-ingredient-tabs {
    display: flex;
    align-items: stretch;
    justify-content: flex-end; /* PROD: span.fieldset-legend has float:right → label RIGHT-aligned */
    width: 100%;
    height: 56px; /* PROD: 56px */
    background: #fff; /* PROD: legend has white bg — visual break above gray ingredients */
}
/* Ingredientes label — matches PROD span.fieldset-legend (30px, brown, auto-width) */
/* CLIENT CHANGE: font-weight 400→700 (bold) per client request */
.recipe-ingredient-tabs .fieldset-legend {
    display: block;
    font-family: Helvetica, Arial, sans-serif; /* PROD: system sans-serif */
    font-size: 30px; /* PROD: 30px */
    color: var(--az-recipe-accent); /* PROD: #66391c */
    background: var(--az-bg-ingr); /* PROD: #f1f1f1 on .fieldset-legend */
    padding: 16px 48px; /* PROD: 16px 48px */
    line-height: 24px; /* PROD: 24px */
    letter-spacing: normal;
    font-weight: 700; /* CLIENT CHANGE: bold */
    white-space: nowrap; /* auto-width like PROD — don't stretch full column */
}
/* Content wrapper — matches PROD .fieldset-wrapper */
.recipe-fieldset-wrapper {
    padding: 12px 12px 12px 124px; /* PROD: 12px 12px 12px 124px (exact match) */
    overflow-y: auto; /* PROD: overflow auto — scrollbar when content > 605px */
}
/* PROD: @media (min-width:62rem) .fieldset-wrapper { height:605px } — sticky fieldset 661px - 56px tabs = 605px */
@media (min-width: 62rem) {
    .recipe-fieldset-wrapper {
        height: 605px;
    }
}
/* Porciones — matches PROD .field--label-inline (display:flex, padding 40px 0 30px) */
.recipe-fieldset-wrapper .servings-info {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: 40px 0 30px; /* PROD: no left/right — indent from fieldset-wrapper */
    font-family: Helvetica, Arial, sans-serif; /* PROD: system sans-serif */
    color: var(--az-body-text);
    background: transparent;
    border: none;
    margin-bottom: 0;
}
/* PROD .field__label: 14px bold */
.recipe-fieldset-wrapper .servings-info .servings-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}
/* PROD .field__item: 13px, white bg, border-bottom, pill style */
.recipe-fieldset-wrapper .servings-info .servings-value {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    background: #fff;
    padding: 5px 15px 5px 10px;
    margin-left: 5px;
    border: 1px solid #ccc; /* PROD: 1px solid rgb(204,204,204) all sides */
}
/* Ingredients grouped wrapper — no extra padding (parent handles indent) */
.recipe-fieldset-wrapper .ingredients-grouped {
    padding: 0;
}
/* v5.80.55: indent list items to match PROD (~40px from group title) */
.recipe-fieldset-wrapper .ingredients-grouped ul {
    padding-left: 40px;
}
.recipe-fieldset-wrapper .ingredients-list {
    padding-left: 40px; /* v5.80.59: flat list indent matches PROD li_x */
}
.recipe-fieldset-wrapper .no-data-msg {
    padding: 1rem 0;
}
/* CLIENT CHANGE: font-weight 400→700 (bold) on ingredient group subtitles */
.recipe-detail-left .ingredient-group-title {
    font-family: Helvetica, Arial, sans-serif; /* PROD: system sans-serif */
    color: var(--az-recipe-accent);
    font-size: 18px; /* PROD: 18px */
    line-height: 24px; /* PROD: 24px */
    border-bottom: 1px solid var(--az-gray-border);
    padding: 6px 0; /* PROD: 6px top & bottom */
    margin: 46px 0 0; /* PROD: 46px visual gap from last ingredient to subheader */
    font-weight: 700; /* CLIENT CHANGE: bold */
    letter-spacing: normal; /* override Kadence -0.015em on h3 */
}
/* PROD: first group title starts right below porciones (0px gap) */
.ingredients-grouped .ingredient-group-title:first-child { margin-top: 0; }
.ingredients-list { list-style: none; padding: 0; margin: 0 0 16px; /* PROD: margin-bottom 16px */ }
/* PROD: 10px gap between section header border and first item */
.ingredients-grouped .ingredients-list { margin-top: 10px; }
.ingredients-list li {
    font-family: Helvetica, Arial, sans-serif; /* PROD: system sans-serif */
    font-size: 16px;
    color: var(--az-body-text);
    line-height: 1.5;
    padding: 0; /* PROD: 0px */
}

/* Ingredients: single column (matching PROD) */
.ingredient-group-divider {
    border: none;
    border-top: 1px solid var(--az-gray-border);
    margin: 1.25rem 0;
}

/* RIGHT: Instrucciones */
.recipe-detail-right {
    width: 50%; /* PROD: col-lg-6 = 50% */
    padding: 0 132px 20px 102px; /* PROD: 12px col + 120px inner right, 12px col + 90px inner left. 20px bottom = PROD paragraph margin */
}
/* CLIENT CHANGE: font-weight 400→700 (bold) on "Instrucciones" heading */
.recipe-detail-right .section-legend {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif */
    font-size: 32px; /* PROD: 32px */
    color: var(--az-recipe-accent); /* PROD: #66391c */
    line-height: 48px; /* PROD: 48px */
    letter-spacing: normal; /* PROD: normal */
    margin: 8px 5px 20px 0; /* PROD: 8px 5px 20px 0px */
    font-weight: 700; /* CLIENT CHANGE: bold */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: none;
    padding: 0;
}
/* CLIENT CHANGE: font-weight 400→700 (bold) on instruction group subtitles */
.recipe-detail-right .instruction-group-title {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif */
    font-size: 22px; /* PROD: 22px (field--name-field-instruction-sub-header) */
    line-height: 24px; /* PROD: 24px */
    color: var(--az-recipe-accent); /* PROD: #66391c (brown) */
    border-bottom: 1px solid #ccc; /* PROD: 1px solid rgb(204,204,204) */
    padding: 6px 0; /* PROD: 6px 0px */
    margin: 0 0 20px 0; /* PROD: 20px gap after divider line → first LI */
    font-weight: 700; /* CLIENT CHANGE: bold */
    letter-spacing: normal; /* override Kadence -0.015em on h3 */
}
.instructions-content {
    padding-left: 0; /* wrapper div — no extra indent (OL handles its own padding) */
    margin: 0 0 16px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--az-body-text);
    line-height: 1.5;
}
.instructions-list {
    list-style: decimal; /* PROD: list-style-type decimal */
    padding-left: 15px; /* PROD: 15px */
    margin: 0 0 16px; /* PROD: margin 0 0 16px */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--az-body-text);
    line-height: 1.5;
}
.instructions-content p,
.instructions-content li,
.instructions-list li {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif */
    font-size: 16px; /* PROD: 16px */
    color: var(--az-body-text);
    line-height: 1.5; /* PROD: 24px */
    margin-bottom: 20px; /* PROD: margin 0 0 20px */
}
/* v5.80.55: left indent on instruction paragraphs to match PROD (20px) */
.instructions-content p {
    padding-left: 20px;
}
/* Instruction <ol> inside .instructions-content — match PROD ol margins */
.instructions-content ol {
    margin: 0 0 16px 0; /* PROD: margin 0 0 16px, no margin-left */
    padding-left: 15px; /* PROD: 15px (numbered list indent) */
}
/* Video <p> inside instructions — reset Kadence <p> margin */
.instructions-content > p:first-child {
    margin-top: 0;  /* PROD: 0px */
    margin-bottom: 20px; /* PROD: 20px (video wrapper <p>) */
}
/* v5.80.54: extra top spacing before 2nd+ section headers ("Instrucciones para el atole") */
.instructions-content p.instr-section-header {
    margin-top: 44px !important;
}
/* YouTube iframes in instructions — match PROD 446x300 (aspect ~16:10.7) */
.instructions-content iframe {
    width: 100%;
    max-width: 438px; /* PROD: iframe measured 438.5x300 */
    height: auto;
    aspect-ratio: 438 / 300; /* PROD: 438.5x300 measured */
    margin: 0; /* PROD: iframe inside <p> with margin 0 0 20px — p handles spacing */
    display: block;
}

/* Quick Tip — PROD: plain body-text styling, no special decoration */
.recipe-quick-tip {
    border: none;
    padding: 0;
    text-align: left; /* PROD: textAlign start */
    margin-top: 0;
}
.recipe-quick-tip .tip-title {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif */
    font-size: 32px; /* PROD: 32px for Tip del chef */
    line-height: 35px; /* PROD: 35px */
    color: var(--az-recipe-accent); /* PROD: #66391c (brown) */
    font-weight: 400;
    border-bottom: 1px solid #ccc; /* PROD: 1px solid rgb(204,204,204) */
    padding: 6px 0; /* PROD: 6px 0px */
    margin: 0 0 20px; /* v5.80.59: 20px gap after divider line → body text (PROD match) */
}
/* v5.80.74: Presentación uses 22px/24px (PROD match), Tip del chef uses 32px/35px */
.recipe-presentation .tip-title {
    font-size: 22px;
    line-height: 24px;
}
.recipe-quick-tip .tip-text {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif */
    font-size: 16px;
    color: var(--az-body-text);
    margin-top: 0; /* PROD: 0px on <p> inside tip */
    padding-left: 20px; /* v5.80.60: match PROD indent (same as .instructions-content p) */
}
.recipe-quick-tip .tip-text p {
    margin-top: 0; /* PROD: 0px */
    margin-bottom: 20px; /* PROD: 20px */
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY TEMPLATE — vieja plantilla PROD (39 recetas IDs 1-40 + 786-787)
   Hero side-by-side, cols 25/75, Rinde con ★, UPPERCASE headings,
   instrucciones como párrafos numerados.
   Container: 1050px (PROD match).
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: imagen (46%) + título/social/desc (54%) ── */
.recipe-legacy .recipe-legacy-hero {
    display: flex;
    max-width: 1050px;
    margin: 0 auto 40px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px; /* PROD .banner-wrap shadow */
}
.recipe-legacy .recipe-legacy-hero-image {
    width: 46%;
    flex-shrink: 0;
}
.recipe-legacy .recipe-legacy-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
}
.recipe-legacy .recipe-legacy-hero-content {
    width: 54%;
    display: flex;
    flex-direction: column;
    padding: 60px 40px 20px;
}
.recipe-legacy .recipe-legacy-hero-content h1 {
    font-family: sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: var(--az-recipe-accent);
    line-height: 38px;
    letter-spacing: normal;
    margin: 0 0 8px;
    text-transform: none;
}
.recipe-legacy .recipe-legacy-desc {
    margin: 0;
}
.recipe-legacy .recipe-legacy-desc p {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--az-body-text);
    line-height: 24px;
    letter-spacing: normal;
    margin: 0 0 16px;
}

/* Override shared styles inside legacy hero */
.recipe-legacy .recipe-title-block {
    margin: 0;
}
.recipe-legacy .recipe-share-row {
    margin: 14px 0; /* PROD: 14px top (gap H1→social=22px), 0 bottom before desc */
}

/* ── Categories bar (below hero, 1050px container) ── */
.recipe-legacy .recipe-categories-bar {
    max-width: 1050px;
    margin: 0 auto 30px;
    padding: 20px 18px;
}

/* ── Detail section: 25% left + 75% right (Bootstrap col-lg-3 / col-lg-9 pattern) ── */
.recipe-legacy .recipe-legacy-detail {
    display: flex;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0; /* no padding — Bootstrap col-lg pattern: cols are % of full 1050 */
}
.recipe-legacy .recipe-legacy-left {
    width: 25%; /* 262.5px of 1050 — PROD col-lg-3 */
    flex-shrink: 0;
}
.recipe-legacy .recipe-legacy-right {
    width: 75%; /* 787.5px of 1050 — PROD col-lg-9 */
    padding: 0 12px 0 102px; /* PROD: 12px col-padding + 90px field indent = 102px left */
}

/* ── Rinde (serving) — bordered wrapper with ★ star ── */
.recipe-legacy .recipe-legacy-rinde {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 3px solid var(--az-recipe-accent);
    border-bottom: 3px solid var(--az-recipe-accent);
    padding: 0; /* PROD: inner field has the padding, wrapper just has borders */
    text-align: center;
}
.recipe-legacy .recipe-legacy-rinde-inner {
    padding: 62px 0 44px; /* PROD: .field--name-field-ingredients-serving-size padding */
}
.recipe-legacy .recipe-legacy-rinde-label {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--az-recipe-accent);
    line-height: 24px; /* PROD: 24px (was 27px causing 12px height diff) */
    display: grid; /* PROD: grid (centered) */
    justify-items: center;
    position: relative;
    margin-bottom: 10px; /* PROD: 10px */
}
.recipe-legacy .recipe-legacy-rinde-label::before {
    content: "★";
    display: block;
    font-size: 16px;
    color: var(--az-recipe-accent);
    margin-bottom: 2px;
    line-height: 1;
}
.recipe-legacy .recipe-legacy-rinde-value {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--az-body-text);
    background: #fff;
    padding: 5px 15px 5px 10px;
    margin-left: 5px; /* PROD: margin 0 0 0 5px */
}

/* ── Ingredientes (left column) ── */
/* CLIENT CHANGE: bold on legacy section titles too */
.recipe-legacy .recipe-legacy-section-title {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700; /* CLIENT CHANGE: bold */
    color: var(--az-recipe-accent);
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 24px;
    padding: 16px 0;
    margin: 0;
    border: none;
}
.recipe-legacy .recipe-legacy-fieldset {
    padding: 12px 12px 12px 0;
}
/* CLIENT CHANGE: bold on legacy ingredient group titles */
.recipe-legacy .recipe-legacy-group-title {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700; /* CLIENT CHANGE: bold */
    color: var(--az-body-text);
    line-height: 24px;
    letter-spacing: normal !important; /* reset Kadence -0.015em default */
    margin: 0; /* PROD: 0 */
    padding: 6px 0; /* PROD: 6px top/bottom */
    border: none;
}
.recipe-legacy .recipe-legacy-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 16px;
}
.recipe-legacy .recipe-legacy-list li {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--az-body-text);
    line-height: 24px;
}

/* ── Instrucciones (right column) ── */
.recipe-legacy .recipe-legacy-instr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px;
    margin: 8px 5px 30px 0; /* 30px bottom = PROD instruction_wrapper padding-bottom */
}
.recipe-legacy .recipe-legacy-instr-header .recipe-legacy-section-title {
    padding: 0;
    margin: 0;
    line-height: 27px;
}
/* CLIENT CHANGE: bold on legacy instruction group titles */
.recipe-legacy .recipe-legacy-instr-group-title {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700; /* CLIENT CHANGE: bold */
    color: var(--az-recipe-accent);
    line-height: 24px;
    border-bottom: 1px solid #ccc;
    padding: 6px 0; /* PROD: 6px top/bottom */
    margin: 0 0 10px; /* PROD: .field--name-field-instructions-description margin-top:10px */
    text-transform: none;
    letter-spacing: normal;
}
.recipe-legacy .recipe-legacy-steps {
    padding-left: 20px; /* PROD: .field--name-field-instructions-description padding-left: 20px */
}
.recipe-legacy .recipe-legacy-step {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--az-body-text);
    line-height: 24px;
    letter-spacing: normal;
    margin: 0 0 20px;
    padding: 0 20px;
}
/* Inline sub-heading inside steps (e.g., <strong>Relleno</strong>) — no number prefix */
.recipe-legacy .recipe-legacy-sublabel {
    font-weight: 400; /* <strong> inside handles the bold */
    padding: 0 20px;
    margin: 10px 0 5px;
}
.recipe-legacy .recipe-legacy-steps p {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--az-body-text);
    line-height: 24px;
    margin: 0 0 20px;
    padding: 0 20px;
}

/* ═══ LEGACY RESPONSIVE ═══ */
@media (max-width: 991px) {
    .recipe-legacy .recipe-legacy-hero {
        flex-direction: column;
    }
    .recipe-legacy .recipe-legacy-hero-image,
    .recipe-legacy .recipe-legacy-hero-content {
        width: 100%;
    }
    .recipe-legacy .recipe-legacy-hero-image img {
        max-height: 300px;
        object-fit: cover;
    }
    .recipe-legacy .recipe-legacy-hero-content {
        padding: 30px 20px 0;
    }
    .recipe-legacy .recipe-legacy-detail {
        flex-direction: column;
    }
    .recipe-legacy .recipe-legacy-left {
        width: 100%;
        padding: 0 30px; /* PROD mobile: 30px left/right padding on left col */
    }
    .recipe-legacy .recipe-legacy-right {
        width: 100%;
        padding: 0 12px; /* PROD mobile: 12px left/right on right col */
    }
    .recipe-legacy .recipe-legacy-steps {
        padding-left: 20px; /* PROD mobile: .field--name-field-instructions padding-left:20px → step x=32 */
    }
}
@media (max-width: 768px) {
    .recipe-legacy .recipe-legacy-hero-content h1 {
        font-size: 28px;
        line-height: 28px;
    }
    .recipe-legacy .recipe-legacy-desc p {
        font-size: 16px; /* PROD mobile: 16px (vs 18px desktop) */
    }
}

/* Social Sharing (AddToAny replica) */
.domino-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}
.domino-share-label {
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--az-gray);
}
.domino-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: var(--az-navy);
    color: var(--az-cream) !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    border: 1px solid var(--az-navy);
}
.domino-share a:hover {
    background: var(--az-white);
    color: var(--az-navy) !important;
}

/* Share icons style: circular with brand colors */
.domino-share a .icon { font-size: 0.95rem; display: inline-block; }
.domino-share .a2a_svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════
   IMAGE CAROUSEL
   ═══════════════════════════════════════════════════════ */

.domino-carousel { position: relative; overflow: visible; } /* visible so arrows can sit outside image */
.domino-carousel-track {
    display: flex;
    overflow: hidden; /* contain images — carousel JS handles slide switching */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.domino-carousel-track::-webkit-scrollbar { display: none; }
.domino-carousel-track > * { flex: 0 0 100%; scroll-snap-align: start; }
.domino-carousel-track img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 500px;
}
.domino-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    padding: 0; /* override Kadence default button padding */
    background: var(--az-recipe-accent);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    box-shadow: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* PROD: arrows always visible */
}
.domino-carousel-btn:hover,
.domino-carousel-btn:focus,
.domino-carousel-btn:active {
    opacity: 0.85;
    background: var(--az-recipe-accent) !important; /* block Kadence --global-palette-btn-bg */
    color: #fff !important;
    outline: none;
}
.domino-carousel-prev { left: -55px; } /* v5.80.64: PROD match — outside image, 64px gap provides clearance */
.domino-carousel-next { right: -55px; }
.domino-carousel-dots {
    display: none; /* PROD: sin bolitas debajo del carousel de receta */
}
.domino-carousel-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--az-gray-border);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    padding: 0;
}
.domino-carousel-dot.active {
    background: var(--az-yellow);
    transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════════
   ARCHIVE RECETAS — Grid con cards azul oscuro
   ═══════════════════════════════════════════════════════ */

/* PROD container: 1080px max-width, 15px side padding → 1050px inner (PROD match) */
.domino-archive-recipes {
    max-width: var(--az-container);
    margin: 0 auto;
    padding: 0 15px 3rem;
}
.domino-archive-products {
    max-width: var(--az-container);
    margin: 0 auto;
    padding: 0 var(--az-gap) 3rem;
}

.archive-header { text-align: center; margin-bottom: 2rem; }
.archive-title {
    font-family: "FFDINWebProBlack", Arial, sans-serif;
    font-size: 2.5rem;
    color: var(--az-recipe-accent);
    margin-bottom: 0.5rem;
}
.archive-description {
    color: var(--az-gray);
    font-size: 0.875rem;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
}

/* Filters */
.recipe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--az-gray-border);
    background: var(--az-bg-light);
    padding: 1rem;
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 6px 16px;
    border-radius: 0;
    border: 1px solid var(--az-recipe-accent);
    background: var(--az-white);
    color: var(--az-recipe-accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: "FFDINWebProBold", Arial, sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
    margin: 2px;
}
.filter-tag:hover,
.filter-tag.active {
    background: var(--az-recipe-accent);
    color: var(--az-white);
    border-color: var(--az-recipe-accent);
    text-decoration: none;
}
.filter-count { font-size: 0.7rem; opacity: 0.7; }

.archive-results-count {
    text-align: left;
    color: var(--az-gray);
    font-size: 13px; /* PROD: 13px */
    margin-bottom: 1rem;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   RECIPE FILTER PANEL — PROD match (azucardominomex.com)
   PROD measurements via Playwright (2026-03-14)
   ═══════════════════════════════════════════════════════ */

.recipe-filter-panel {
    /* .domino-archive-recipes already has 30px padding — no extra needed */
    width: 100%;
    box-sizing: border-box;
}

/* Buscador ------------------------------------------------ */
.rfp-search-wrap {
    display: flex;
    justify-content: center;
    padding: 42px 0 35px;  /* PROD: search input y=184, DEV base=172 → +12px */
}
.rfp-search-form { display: block; }
.rfp-input-group {
    display: flex;
    width: 400px;
    height: 37px;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    overflow: hidden;
}
.rfp-search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: sans-serif;
    color: #343a40;
    background: transparent;
    padding: 8px 10px 6px;
    border-radius: 0;
    box-sizing: border-box;
}
.rfp-search-btn {
    width: 32px;
    height: 35px;
    background: #66391c !important;  /* Kadence override */
    border: none;
    border-radius: 0 !important;     /* Kadence adds 3px */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.rfp-search-btn:hover { background: #7a4422 !important; }

/* Tabs ---------------------------------------------------- */
.rfp-tabs {
    display: flex;
    gap: 10px;
    margin: 30px 53px 0;
    justify-content: center;
    width: auto;
}
.rfp-tab {
    flex: 1;
    height: 40px;
    background: #66391c !important;  /* Kadence override: --global-palette-btn-bg */
    color: #fff !important;
    font-size: 15px;
    font-weight: 400;
    font-family: sans-serif;
    border: none;
    border-radius: 10px !important;
    cursor: pointer;
    padding: 8px 16px;
    text-align: center;
    line-height: 24px;
}
/* PROD: tabs sin hover effect */
/* Active tab: caret triangle pointing down (PROD ::after match) */
.rfp-tab--active {
    position: relative;
}
.rfp-tab--active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;     /* arrow top = tab_bottom+0 → toca el tab sin gap */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid #66391c;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    pointer-events: none;
    z-index: 1;
}

/* Contenido tabs — fondo gris PROD (.tab-content padding: 16px 40px) */
.rfp-tab-content {
    background: rgb(239, 239, 239);
    width: 100%;
    padding: 16px 40px;
    margin-top: 9px;   /* PROD gap = 9px (medido: tab.bottom→content.top exacto) */
    box-sizing: border-box;
}

/* Checkbox panels ---------------------------------------- */
.rfp-tab-panel        { display: none; }
.rfp-tab-panel--active{ display: block; }

.rfp-checkboxes {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
}
/* PROD Bootstrap form-check layout: block + padding-left para el checkbox absoluto */
.rfp-checkbox-item {
    display: block;
    position: relative;
    padding: 0 0 0 24px;  /* room for absolute checkbox (16px + 8px gap) */
    width: 25%;
    box-sizing: border-box;
    cursor: pointer;
}
/* Checkbox input: 22×22px, white box (PROD match — unchecked is also 22×22) */
.rfp-cb {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: -3px;   /* center 22px in 24px left padding: (22-16)/2=3px */
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid rgba(0,0,0,0.25);
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    transition: background-color 0.15s, border-color 0.15s;
}
/* Checked: marrón + X blanco + borderRadius 5px (PROD match) */
.rfp-cb:checked {
    background-color: #66391c !important;
    border-color: #66391c !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.5' d='M5 5L15 15M15 5L5 15'/%3e%3c/svg%3e") !important;
    border-radius: 5px !important;
}
/* Label text — PROD: ls 0.52px, tt:capitalize (DEV stores sentence-case, PROD title-case) */
.rfp-cb-label {
    display: block;
    padding: 15px;  /* PROD: 15px all sides */
    font-size: 13px;
    color: #8a8a8a;
    font-family: sans-serif;
    line-height: 24px;
    letter-spacing: 0.52px;
    text-transform: capitalize;
    cursor: pointer;
}
/* Active label: color oscuro + bold (PROD: rgb(70,71,73) = #464749, weight 700) */
.rfp-checkbox-item--active .rfp-cb-label,
.rfp-checkbox-item:has(.rfp-cb:checked) .rfp-cb-label {
    color: #464749;
    font-weight: 700;
}

/* Botón Aplicar ------------------------------------------ */
.rfp-apply-wrap {
    display: flex;
    justify-content: center;
    padding: 18px 0 0;  /* PROD: 18px gap arriba del btn, sin padding abajo */
}
.rfp-apply-btn {
    width: 200px;
    height: 60px;
    line-height: 16px;
    padding: 6px 12px;
    background: transparent !important;  /* Kadence override */
    color: #66391c !important;
    font-size: 18px;
    font-weight: 400;
    font-family: sans-serif;
    border: 1px solid #66391c !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background 0.2s;
}
.rfp-apply-btn:hover { background: rgba(102,57,28,0.08) !important; }

/* Active filter bar: chip + Borrar (PROD: height 56px, dashed borders top+bottom) */
.rfp-active-bar {
    display: flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0;
    border-top: none;
    border-bottom: 1px dashed #c4c4c4;
    box-sizing: border-box;
}
/* Tag chip (PROD: bg #f1f5fa, padding 8px, borderRadius 10px, fontSize 12px, margin 0 20px 0 0) */
.rfp-active-tag {
    display: inline-flex;
    align-items: center;
    background: #f1f5fa;
    padding: 8px;
    margin: 0 20px 0 0;
    font-size: 12px;
    color: #8a8a8a;
    font-family: sans-serif;
    line-height: 1;
    gap: 6px;
    border-radius: 10px;
}
.rfp-tag-name { color: #8a8a8a; font-size: 13px; }  /* PROD: 13px */
.rfp-tag-remove {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 2px !important;
    cursor: pointer;
    color: #66391c;  /* PROD: same brown as filter (was #b94a3e red) */
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.rfp-tag-remove:hover { color: #66391c !important; background: none !important; }
/* Borrar button (plain text, PROD match) */
.rfp-clear-btn {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    font-size: 13px;
    color: #8a8a8a;
    font-family: sans-serif;
    text-decoration: none;
}
.rfp-clear-btn:hover { color: #464749 !important; background: none !important; }

/* Fila resultados + ordenar ------------------------------ */
.rfp-results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding: 0 10px 0 0;
    margin: 0 0 10px;
    box-sizing: border-box;
}
.rfp-count {
    font-size: 13px;
    color: #8a8a8a;
    font-family: sans-serif;
    padding-left: 10px;
}
.rfp-sort-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}
.rfp-sort-label {
    font-size: 13px;
    color: #8a8a8a;
    font-family: sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}
.rfp-sort-select {
    width: 193px;
    height: 45px;
    font-size: 13px;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    color: #464749;
    font-family: sans-serif;
    padding: 10px 45px 10px 12px;  /* PROD: 45px right padding for dropdown arrow */
    background: transparent;
    appearance: auto;
}

/* Grid rfp (flex, PROD match) ---------------------------- */
.rfp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 24px;
    width: 100%;
    margin: 30px 0;  /* PROD: 30px top/bottom margin */
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
.rfp-card {
    width: 235px;
    max-width: 235px;
    margin-bottom: 16px;
    background: transparent;  /* PROD: transparent */
    list-style: none;
}
.rfp-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.rfp-card-img-wrap {
    display: block;
    min-height: 188px;          /* reserva espacio antes de que cargue la imagen */
    background: #f0ede8;        /* placeholder color mientras carga */
    overflow: hidden;
}
.rfp-card-img-wrap:hover { opacity: 0.6; }  /* PROD: opacity 0.6 instantáneo, sin transition */
.rfp-card-img,
.rfp-card .rfp-card-img-wrap img {
    width: 235px;
    height: 188px;
    object-fit: cover;          /* cover: crops non-standard ratio images instead of stretching */
    display: block;
}
.rfp-card-img-placeholder {
    width: 235px;
    height: 188px;
    background: #f0ede8;
    display: block;
}
.rfp-card-title {
    font-size: 18px;
    font-weight: 400;
    font-family: sans-serif;
    color: #66391c;
    line-height: 24px;
    margin: 10px 0 16px;
    padding: 0;
    text-align: center;
}
.rfp-card:hover .rfp-card-title { color: #66391c; }

/* Pagination — oculta por defecto; JS la muestra solo en fallback de red */
.rfp-pagination {
    display: none;
    width: 100%;
    padding: 30px 0 40px;
    margin-top: 10px;
}

/* Page-load loader — cucharita mientras cargan todas las imágenes del grid */
.rfp-page-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}
.rfp-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Infinite scroll loader */
.rfp-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0 24px;
    width: 100%;
}
.rfp-loader img { display: block; }

/* Responsive -------------------------------------------- */
@media (max-width: 1080px) {
    /* Viewport < 1080px: archive wrapper shrinks, 4×235+3×24=1012px won't fit */
    .rfp-card { width: calc(33.333% - 16px); max-width: none; }
    .rfp-card-img, .rfp-card .rfp-card-img-wrap img,
    .rfp-card-img-placeholder { width: 100%; height: auto; aspect-ratio: 235/188; }
    .rfp-checkbox-item { width: 33.333%; }
}
@media (max-width: 768px) {
    .rfp-card { width: calc(50% - 12px); max-width: none; }
    .rfp-checkbox-item { width: 50%; }
    /* Panel filtros: ancho completo del contenido con 15px breathing room c/lado (PROD=15px Bootstrap gutter) */
    .recipe-filter-panel { width: 100%; padding: 0 15px; box-sizing: border-box; }
    /* Barra de búsqueda: ancho completo del contenedor → 270px (PROD: 270px) */
    .rfp-search-wrap { width: 100%; box-sizing: border-box; }
    .rfp-search-form { width: 100%; }
    .rfp-input-group { width: 100%; }
    .rfp-search-input { border: none !important; }
    .rfp-results-row { flex-wrap: wrap; gap: 8px; }
    /* ── Mobile accordion: tabs colapsan en filas estilo PROD ── */
    /* display:block en rfp-tabs quita el flex del padre → height:62px del hijo funciona */
    /* border-top 3px marrón = separador PROD (.tab-content border-top) */
    .rfp-tabs { display: block !important; margin: 20px 0 0; border-top: 3px solid #66391c !important; }
    .rfp-tab {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        height: 62px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        color: #66391c !important;
        border: none !important;
        border-bottom: 1px solid #c4c4c4 !important;
        border-radius: 0 !important;
        font-size: 17.5px !important;
        padding: 0 16px !important;
        text-align: left;
    }
    /* Eliminar flecha del tab activo en desktop */
    .rfp-tab--active { position: static !important; }
    .rfp-tab--active::after {
        content: '+' !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        transform: none !important;
        font-size: 20px;
        color: #66391c;
        font-weight: 300;
    }
    .rfp-tab::after {
        content: '+' !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        transform: none !important;
        font-size: 20px;
        color: #66391c;
        font-weight: 300;
    }
    .rfp-tab.rfp-tab--open::after { content: '−' !important; }
    /* Tab content: sin fondo ni padding en mobile */
    .rfp-tab-content { background: transparent !important; padding: 0 !important; margin-top: 0 !important; }
    /* Paneles: colapsados por defecto (max-height=0); animación estilo Bootstrap */
    .rfp-tab-panel, .rfp-tab-panel--active {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        transition: max-height 0.35s ease !important;
    }
    .rfp-tab-panel.rfp-panel--open {
        max-height: 1000px !important;
        background: rgb(239,239,239);
        padding: 16px !important;
    }
    /* Botón Aplicar: barra marrón 3px arriba (PROD: .btn-wrapper borderTop) + 100×44px centrado */
    .rfp-apply-wrap { border-top: 3px solid #66391c !important; padding: 16px 0 0 !important; }
    .rfp-apply-btn { width: 100px !important; height: 44px !important; }
    /* Chips row: separador punteado abajo (PROD: .bottom-subcategory-inner borderBottom: 1px dashed) */
    .rfp-active-bar { border-bottom: 1px dashed #c4c4c4 !important; }
}
@media (max-width: 500px) {
    /* PROD: cards 235×188 centradas en container (justify-content:center → x≈63) */
    .rfp-card { width: 235px !important; max-width: none !important; }
    .rfp-card-img, .rfp-card .rfp-card-img-wrap img,
    .rfp-card-img-placeholder { width: 235px !important; height: 188px !important; }
    .rfp-checkbox-item { width: 100%; }
}

/* Grid recetas — gap: 16px row (PROD) × 24px col (PROD) */
.recipes-grid { display: grid; gap: 16px 24px; }
.recipes-grid-3col { grid-template-columns: repeat(3, 1fr); }
.recipes-grid-4col { grid-template-columns: repeat(4, 1fr); }

.recipe-grid-item {
    background: var(--az-white);
    overflow: hidden;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}
.recipe-grid-item:hover { opacity: 0.85; }

.grid-image-wrap {
    overflow: hidden;
    aspect-ratio: 5 / 4;
    position: relative;
    background: var(--az-bg-light);
}
.grid-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.grid-thumb-placeholder {
    background: var(--az-bg-light);
    width: 100%;
    height: 100%;
}

/* Card title — fondo blanco, texto marrón (igual que original Drupal) */
.grid-item-content {
    background: var(--az-white);
    padding: 0.625rem 1rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.grid-item-title {
    font-family: Helvetica, Arial, sans-serif; /* PROD: sans-serif weight 400, NOT Black */
    font-size: 18px;
    font-weight: 400;
    color: var(--az-recipe-accent);
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
}
.recipe-grid-item:hover .grid-item-title { color: var(--az-recipe-accent); }
.grid-category { display: none; }
.grid-item-meta, .grid-meta { display: none; }

/* ═══════════════════════════════════════════════════════
   CATEGORIES LANDING — /recetas (match PROD grid)
   ═══════════════════════════════════════════════════════ */

.categories-header {
    margin: 60px auto 0;
    padding: 70px 10px 15px;
}
.categories-title {
    font-family: sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 42px;
    color: var(--az-recipe-accent);
    text-align: center;
    margin: 0;
}

.categories-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 10px;
}

.category-card {
    width: 25%;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}
.category-card:hover {
    text-decoration: none;
    opacity: 0.85;
}

.category-image-wrap {
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: var(--az-bg-light);
}
.category-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.category-name {
    display: block;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--az-recipe-accent);
}

/* Categories responsive */
@media (max-width: 991px) {
    .category-card { width: 33.333%; }
}
@media (max-width: 575px) {
    .category-card { width: 50%; padding: 10px; }
    .categories-header { margin: 30px auto 0; padding: 30px 10px 10px; }
    .categories-title { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════
   SINGLE PRODUCTO — v5.12.5 PROD-matching layout
   ═══════════════════════════════════════════════════════ */

.domino-single-product {
    margin: 0 auto;
    padding: 0 var(--az-gap) 3rem;
}
.domino-single-product .product-card {
    max-width: 1080px;
    margin: 0 auto;
}

/* Title — PROD visible: 60px/400/sans-serif/#66391c (inner span) */
/* h1.class beats Kadence inline .class (higher specificity with !important) */
.domino-single-product h1.product-page-title {
    font-family: sans-serif !important;
    font-size: 60px !important; /* PROD inner span: 60px */
    font-weight: 400 !important;
    color: #66391c !important; /* PROD inner span: rgb(102,57,28) */
    text-align: center;
    letter-spacing: normal;
    line-height: 66px; /* PROD: 66px */
    margin: 1.5rem 0 2rem;
    padding: 0 15px; /* PROD inner span: margin 15px cada lado → 1050px efectivos → wrap 2 líneas */
}

/* Image section: carousel + badge side by side */
.product-visuals {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 2rem;
}
.product-carousel-col {
    flex: 0 0 490px;
    max-width: 490px;
}
.product-single-image {
    max-width: 490px;
}
.product-single-image img,
.product-featured-img {
    width: 100%;
    height: auto;
    display: block;
}
.product-badge-col {
    flex: 0 0 450px;
    max-width: 450px;
}
.product-badge-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product gallery carousel */
.product-gallery-carousel {
    position: relative;
    overflow: hidden;
    padding-bottom: 18px; /* space for dots below image */
}
.product-gallery-carousel .domino-carousel-track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
}
.product-gallery-carousel .domino-carousel-track::-webkit-scrollbar { display: none; }
.product-gallery-carousel .slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.product-gallery-carousel .slide img {
    width: 100%;
    height: 400px;
    object-fit: contain;
}
.product-gallery-carousel .domino-carousel-prev,
.product-gallery-carousel .domino-carousel-next {
    position: absolute;
    top: 200px; /* center of 400px image, avoids shift from padding-bottom */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #66391c;
    border: none;
    padding: 0; /* override Kadence default button padding */
    color: #fff;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}
.product-gallery-carousel .domino-carousel-prev:hover,
.product-gallery-carousel .domino-carousel-next:hover {
    background: #7a4422;
}
.product-gallery-carousel .domino-carousel-prev { left: 10px; }
.product-gallery-carousel .domino-carousel-next { right: 10px; }
.product-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.product-carousel-dots .domino-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2); /* inactive: faint, matching PROD */
    cursor: pointer;
    transition: background 0.3s;
    transform: none; /* cancel base scale(1.2) */
}
.product-carousel-dots .domino-carousel-dot.active {
    background: #66391c; /* brown, matching PROD */
    transform: none;
}

/* Sticky wrapper for buy banner (PROD: position sticky, top 0, z-index 99) */
.product-buy-sticky {
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}
/* Brown buy banner — full width (PROD: bg #66391c, h 97px) */
.product-buy-banner {
    background: #66391c;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 22px 25px; /* PROD: ~97px total (22+52+22≈96) */
    width: 100%;
}
.btn-buy {
    display: inline-block;
    background: #fff;
    color: #66391c;
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.btn-buy:hover {
    background: #f5e6d0;
    color: #66391c;
}

/* Tabs — Regalos / Presentaciones (PROD: 26px, max-width 1080px) */
.product-tabs-section {
    max-width: 1080px;
    margin: 2.5rem auto 2rem;
    padding: 0 10px 40px;
}
.product-tab-headers {
    display: flex;
    gap: 12px; /* PROD: margin-right 12px between tab LIs */
    margin-bottom: 0;
    background: transparent; /* PROD: <ul> is transparent — page white shows through */
}
.product-tab-btn {
    font-family: sans-serif;
    font-size: 26px;
    font-weight: 700; /* PROD: bold via <strong> tag */
    line-height: 24px;
    color: #a09f9f; /* PROD inactive: rgb(160,159,159) gray */
    background: #cccecf !important; /* PROD inactive: rgba(69,77,84,0.2) on <li>#eeeeee = rgb(204,206,207) */
    border: none;
    border-radius: 0 !important; /* PROD: no rounded corners */
    padding: 26px 30px;
    cursor: pointer;
    transition: color 0.3s;
}
.product-tab-btn.active {
    color: #66391c;
    background: rgba(69, 77, 84, 0.2) !important; /* same as content → seamless merge, no blank */
}
.product-tab-btn:hover {
    color: #66391c !important;
    box-shadow: none !important;
}
.product-tab-btn:not(.active):hover {
    background: #cccecf !important; /* mantiene bg inactivo, anula Kadence blue */
}
.product-tab-btn.active:hover {
    background: rgba(69, 77, 84, 0.2) !important; /* mantiene bg activo */
}
.product-tab-btn:focus,
.product-tab-btn:active {
    outline: none !important;
    box-shadow: none !important;
}
.product-tab-content {
    display: none;
}
.product-tab-content.active {
    display: block;
    background: rgba(69, 77, 84, 0.2);
    padding: 24px 30px; /* PROD outer panes: padding 24px 30px */
    margin-top: 0; /* Active btn same color as content → seamless, no overlap trick needed */
}
/* Inner scrollable pane — PROD: no padding, max-height 300px, scrollbar inside padding */
.product-tab-inner {
    max-height: 300px;
    overflow-y: scroll;
}
.product-tab-inner::-webkit-scrollbar { width: 10px; }
.product-tab-inner::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.08); }
.product-tab-inner::-webkit-scrollbar-thumb { background-color: #d3d3d3; border-radius: 10px; }
.product-tab-content,
.product-description {
    font-family: sans-serif;
    font-size: 22px; /* PROD: 22px (was 16px) */
    color: #000; /* PROD: rgb(0,0,0) (was #464749) */
    line-height: 24px; /* PROD: 24px */
}
.product-tab-content p,
.product-description p {
    font-size: 22px;
    color: #000;
    line-height: 24px;
    margin: 0 0 16px; /* PROD: margin-bottom 16px */
}
.product-tab-content strong,
.product-description strong {
    font-weight: 700;
}
.product-description h3 {
    font-family: sans-serif;
    font-size: 22px; /* PROD: 22px (was 18px) — matches <strong> in PROD */
    font-weight: 700;
    color: #000; /* PROD: #000 (was #333) */
    margin: 1.5rem 0 0.5rem;
}
.product-description ul {
    list-style: none; /* PROD: no bullet markers */
    margin: 0.5rem 0 1rem; /* bottom 16px matches PROD <p> marginBottom → regulation text stands out */
    padding-left: 0;
}
.product-description li {
    margin-bottom: 0.25rem;
    padding-left: 0;
}
.product-description li::before {
    content: "-"; /* PROD: dash prefix instead of bullet */
    margin-right: 2px;
}
.product-description small {
    font-size: 100%; /* PROD match */
}
.product-description li img {
    display: inline !important; /* kosher logo inline, not block */
    vertical-align: middle;
    margin-left: 4px;
}

/* Related recipes — circular images (PROD style) */
.product-related-recipes {
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
}
.product-related-recipes h2 {
    font-family: sans-serif; /* PROD: sans-serif (was CenturyGothicStd) */
    font-size: 38px;
    font-weight: 400;
    color: #66391c;
    letter-spacing: normal;
    line-height: 58px; /* PROD: 58px */
    margin-bottom: 1.5rem; /* visual gap before recipe circles */
}
.product-recipes-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.product-recipe-item {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 220px;
}
.product-recipe-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
}
.product-recipe-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-recipe-item h3 {
    font-family: sans-serif;
    font-size: 18px; /* PROD: 18px (was 16px) */
    font-weight: 700; /* PROD: 700 (was 400) */
    color: #848383; /* PROD: rgb(132,131,131) (was #0079C0) */
    line-height: 1.3;
    margin: 0.5rem 0 0;
}
.product-recipe-item:hover h3 {
    color: #66391c;
}

/* Product related recipes — mobile carousel (PROD: 1 recipe at a time, arrows) */
.product-related-btn { display: none; }
@media (max-width: 768px) {
    .product-related-wrap {
        position: relative;
        padding: 0 50px;
    }
    .product-recipes-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        gap: 0;
    }
    .product-recipe-item {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 15px;
    }
    .product-recipe-circle { width: 220px; height: 220px; }
    .product-related-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #66391c !important;
        border: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        position: absolute;
        top: 110px; /* center of 220px circle */
        transform: translateY(-50%);
        z-index: 2;
    }
    .product-related-btn:hover { background: #7a4422 !important; }
    .product-related-prev { left: 0; }
    .product-related-next { right: 0; }
}

/* Legacy buttons (kept for other pages) */
.btn-primary-az,
.btn-contact {
    display: inline-block;
    margin-top: 1.5rem;
    background: #0032a0;
    color: var(--az-white);
    padding: 10px 28px;
    border-radius: 0;
    border: 1px solid #0032a0;
    text-decoration: none;
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    min-width: 240px;
    min-height: 40px;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-primary-az:hover,
.btn-contact:hover {
    background: var(--az-brown);
    color: var(--az-beige);
    border-color: var(--az-brown);
}

.btn-secondary-az {
    display: inline-block;
    background: transparent;
    color: var(--az-blue-title);
    padding: 10px 28px;
    border-radius: 0;
    border: 2px solid var(--az-blue-title);
    text-decoration: none;
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    min-width: 240px;
    min-height: 40px;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.btn-secondary-az:hover {
    background: var(--az-blue-title);
    color: var(--az-white);
}

/* ═══════════════════════════════════════════════════════
   ARCHIVE PRODUCTOS — match PROD (circular images, centered)
   ═══════════════════════════════════════════════════════ */

/* Landing page header */
.products-header {
    margin: 60px auto 0;
    padding: 70px 10px 15px;
}
.products-title {
    font-family: sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 42px;
    color: var(--az-recipe-accent);
    text-align: center;
    margin: 0;
}

/* Wrapper — gestiona margen/max-width en desktop, carousel en mobile */
.products-grid-carousel-wrapper {
    max-width: 560px;
    margin: 30px auto 0;
}

/* Botones carousel — solo visibles en mobile */
.products-grid-btn { display: none; }

/* Circle grid — centered, flex wrap */
.products-circle-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 10px;
    margin: 0;
}

.product-circle-item {
    width: 50%;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}
.product-circle-item:hover { text-decoration: none; }

/* Hover — overlay azul (PROD match: rgba(4,85,159,0.7), transition 1s) */
.product-circle-image {
    width: 220px;
    height: 220px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
    background: #f9f9f9;
    position: relative;
}
.product-circle-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 85, 159, 0.7);
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}
.product-circle-item:hover .product-circle-image::after { opacity: 1; }
.product-circle-item:hover .product-circle-name { opacity: 0.8; }

.product-circle-image .circle-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.circle-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.product-circle-name {
    display: block;
    margin-top: 15px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    color: #848383;
    text-align: center;
    transition: opacity 0.3s;
}

/* Products responsive — mobile carousel */
@media (max-width: 575px) {
    .products-grid-carousel-wrapper {
        max-width: 100%;
        margin: 20px 0 0;
        position: relative; /* para flechas absolutas */
    }
    .products-circle-grid {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important; /* evita overflow centrado negativo */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        margin: 0;
    }
    .products-circle-grid::-webkit-scrollbar { display: none; }
    .product-circle-item {
        width: 100% !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .product-circle-image { width: 220px; height: 220px; }
    /* Flechas carousel mobile — PROD: 50x50 café, fuera del círculo */
    .products-grid-btn {
        display: flex;
        position: absolute;
        top: 130px; /* 20px item-padding + 220px/2 = centro del círculo */
        transform: translateY(-50%);
        width: 50px; height: 50px;
        border-radius: 50%;
        background: #66391c !important; /* !important: Kadence override */
        color: white;
        border: none;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        z-index: 2;
    }
    .products-grid-btn:hover { background: #66391c !important; }
    .products-grid-prev { left: -20px; }
    .products-grid-next { right: -20px; }
    .products-header { margin: 30px auto 0; padding: 30px 10px 10px; }
    .products-title { font-size: 28px; }
}

.products-carousel-section { margin: 2rem 0; }
.products-carousel-section h2 {
    font-family: "FFDINWebProBlack", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    color: var(--az-blue-title);
    margin-bottom: 1rem;
}
.products-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.products-carousel-track::-webkit-scrollbar { display: none; }
.products-carousel-track .product-grid-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════
   RELATED / PAGINATION / ZOOM
   ═══════════════════════════════════════════════════════ */

.related-recipes {
    margin-top: 3rem;
    padding-top: 2rem;
}
.related-products {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--az-gray-border);
}
.related-recipes h2,
.related-products h2 {
    font-family: sans-serif;
    font-size: 38px;
    font-weight: 400;
    color: var(--az-recipe-accent);
    margin-bottom: 1.5rem;
    text-align: center;
}
.related-recipes .recipes-grid,
.related-products .products-grid {
    grid-template-columns: repeat(4, 1fr);
}
/* Circular related recipes (single-receta) */
.related-recipes-wrapper {
    position: relative;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 80px;
}
.related-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--az-recipe-accent) !important;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.related-arrow:hover,
.related-arrow:focus,
.related-arrow:active {
    background: #7a4523 !important;
    outline: none;
}
.related-arrow-prev { left: 0; }
.related-arrow-next { right: 0; }
.related-recipes-viewport {
    overflow: hidden;
}
.related-recipes-circular {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
}
.related-recipe-circle-item {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 208px;
    flex-shrink: 0;
}
.related-recipe-circle {
    width: 208px;
    height: 208px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
}
.related-recipe-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-recipe-circle-item h3 {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #848383;
    line-height: 1.3;
    margin: 0;
}
.related-recipe-circle-item:hover h3 {
    color: #66391c;
}
@media (max-width: 768px) {
    .related-arrow { display: none; }
    .related-recipes-viewport { overflow: visible; }
    .related-recipes-circular {
        gap: 20px;
        flex-wrap: wrap;
        transform: none !important;
        justify-content: center;
    }
    .related-recipe-circle-item {
        width: 45%;
        flex-shrink: 1;
    }
    .related-recipe-circle {
        width: 160px;
        height: 160px;
    }
}
@media (max-width: 500px) {
    .related-recipe-circle-item {
        width: 100%;
    }
    .related-recipe-circle {
        width: 220px;
        height: 220px;
    }
}

.domino-pagination { text-align: center; margin-top: 2.5rem; }
.domino-pagination .nav-links { display: flex; justify-content: center; gap: 0.25rem; }
.domino-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; height: 40px;
    border-radius: 0;
    background: var(--az-white);
    border: 1px solid var(--az-gray-border);
    text-decoration: none;
    color: var(--az-body-text);
    font-size: 0.9rem;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    transition: background 0.3s ease, color 0.3s ease;
}
.domino-pagination .page-numbers:hover,
.domino-pagination .page-numbers.current {
    background: var(--az-blue-title);
    color: var(--az-white);
    border-color: var(--az-blue-title);
}

.btn-view-more {
    display: inline-block;
    margin-top: 2rem;
    border: 2px solid var(--az-blue-title);
    color: var(--az-blue-title);
    background: transparent;
    padding: 10px 28px;
    border-radius: 0;
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
    min-width: 240px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    cursor: pointer;
}
.btn-view-more:hover { background: var(--az-blue-title); color: var(--az-white); }

/* Zoom — removed v5.80.65 (single-image recipes don't need zoom control) */

/* ═══════════════════════════════════════════════════════
   CUSTOM FOOTER
   ═══════════════════════════════════════════════════════ */

.site-footer, #colophon {
    background-color: #f9f9f9 !important;
    color: var(--az-body-text);
}
.site-footer .site-footer-wrap,
.site-footer .site-footer-inner-wrap,
.site-footer .site-info {
    background-color: transparent !important;
}
.footer-widget-area {
    background-color: #f9f9f9 !important;
    padding: 2rem 0;
}
.site-footer a, #colophon a {
    color: var(--az-body-text) !important;
    font-family: "FFDINWebProBold", Arial, sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.08rem;
    text-decoration: none;
}
.site-footer a:hover, #colophon a:hover { color: var(--az-recipe-accent) !important; }

/* Back to top button (PROD: position:absolute top:-60px right:0 inside .domino-footer) */
.back-to-top {
    display: block;
    position: absolute;
    top: -60px;
    right: 0;
    width: 60px;
    height: 60px;
    background: #efefef;
    color: #c4c4c4;
    text-decoration: none;
    text-align: center;
    line-height: 60px;
}
.back-to-top:hover {
    background: #e0e0e0;
    color: #999;
}
.back-to-top svg {
    vertical-align: middle;
}

/* Custom footer template */
.domino-footer {
    position: relative;
    background: #f9f9f9;
    padding: 30px 0;
    color: var(--az-body-text);
}
.domino-footer-inner {
    max-width: 1320px; /* PROD Bootstrap xxl; stepped down via @media below */
    margin: 0 auto;
    padding: 0 12px; /* PROD Bootstrap container padding */
}
.footer-nav-row {
    display: flex;
    justify-content: flex-start; /* PROD: logo + nav close together, not space-between */
    align-items: center;
    flex-wrap: wrap;
    gap: 62px; /* PROD: 62px between logo img right edge and first menu link left edge */
    padding: 0 0 0 32px; /* PROD: logo starts 32px from container inner left; top space from footer padding:30px; no bottom padding (PROD row has none) */
}
.footer-logo img { width: 126px; height: auto; }
.footer-nav-links { display: flex; gap: 28px; flex-wrap: wrap; }
/* v5.12.3: PROD footer links are sans-serif 13px/400 #66391c, letter-spacing 2px */
/* PROD: each <a> has padding 20px left+right (Drupal li.mr=28px gap between items) */
.footer-nav-links a {
    color: var(--az-recipe-accent);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 2px;
    padding: 20px; /* PROD: 20px all sides (link h=53px) */
    line-height: 13px; /* PROD: 13px */
}
.footer-nav-links a:hover { color: var(--az-recipe-accent); }
/* PROD: social icons on separate row, right-aligned. Gap above=40px, below=24px (PROD match) */
.footer-social { display: flex; justify-content: flex-end; gap: 5px; padding: 57px 5px 0 0; /* PROD: social.y=178, navRow.bottom=121, gap=57px */ }
.footer-social a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--az-recipe-accent);
    border-radius: 50%;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}
.footer-social a img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
    display: block !important;
}
.footer-social a:hover { opacity: 0.7; }
/* PROD: links and copyright stacked vertically, both left-aligned */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 24px; /* PROD: row mt-4 = 1.5rem = 24px */
    padding-bottom: 48px; /* PROD: 78px from copyright bottom to footer edge (78 - 30px footer padding = 48px) */
}
.footer-bottom-links { display: flex; gap: 0; /* PROD: links abut, spacing via padding */ }
/* v5.12.3: PROD bottom links are sans-serif 12px/400 #000 */
.footer-bottom-links a {
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-decoration: none;
    line-height: 14.4px; /* PROD: 14.4px (1.2 × 12px) */
    padding: 8px 0 8px 16px; /* PROD: 8px 0px 8px 16px */
}
.footer-bottom-links a:hover { color: var(--az-recipe-accent) !important; }
/* v5.12.3: PROD copyright is sans-serif 12px/400 #000 */
.footer-copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #000;
    line-height: 14.4px; /* PROD: 14.4px (1.2 × 12px) */
    padding: 8px 16px; /* PROD: 8px 16px */
}

/* PROD Bootstrap stepped containers — footer (must come AFTER base .domino-footer-inner) */
@media (max-width: 1399px) { .domino-footer-inner { max-width: 1140px; } }
@media (max-width: 1199px) { .domino-footer-inner { max-width: 960px; } }
@media (max-width: 991px)  { .domino-footer-inner { max-width: 720px; } }
@media (max-width: 767px)  { .domino-footer-inner { max-width: none; } }

/* ═══════════════════════════════════════════════════════
   UTIL / ANIMATIONS / NO RESULTS
   ═══════════════════════════════════════════════════════ */

@keyframes dominoFadeIn { from { opacity: 0; } to { opacity: 1; } }
img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease-in; }
img[loading="lazy"].is-loaded, img.is-loaded { opacity: 1; }
img[loading="lazy"]:not(.is-loaded) { animation: dominoFadeIn 0.4s ease-in 0.5s forwards; }

.no-data-msg { color: var(--az-gray); font-style: italic; margin: 0.5rem 0; }
.no-results { text-align: center; padding: 3rem 1rem; }
.no-results p { color: var(--az-gray); font-size: 1.1rem; }
.no-results h2 {
    font-family: "FFDINWebProBlack", Helvetica, Arial, sans-serif;
    font-size: 2.875rem;
    color: var(--az-blue-title);
}
/* Back button — subtle brown text link (PROD has no back button, keep subtle for UX) */
.btn-back {
    display: inline-block;
    margin-top: 1rem;
    padding: 8px 0;
    background: transparent;
    color: var(--az-recipe-accent); /* brown #66391c — harmonía con el tema */
    border: none;
    border-radius: 0;
    text-decoration: none;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}
.btn-back:hover { color: var(--az-brown-dark); text-decoration: underline; }

/* Kadence overrides */
.entry-content-wrap { padding: 0 !important; margin: 0 !important; }
.entry-hero-container-inner, .entry-header { background: transparent !important; }
.wp-block-button__link, .kb-button {
    border-radius: 0 !important;
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
}
.site .entry-content h1,
.site .entry-content h2,
.site .entry-content h3,
.site .entry-content h4 {
    color: var(--az-blue-title);
    font-family: "FFDINWebProBlack", Helvetica, Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    /* v5.82.08: header mobile at ≤1199px (PROD Bootstrap XL) */
    .site-header,
    #masthead {
        min-height: 84px !important;
    }
    .site-header .custom-logo,
    .site-header img {
        max-width: 100px !important;
        max-height: 60px !important;
    }
}
@media (max-width: 991px) {
    .recipe-title-block h1 { font-size: 3rem; } /* proportional: 48px at ≤991px */
    .recipe-prep-block { flex-direction: column; }
    .recipe-prep-info, .recipe-image-col { width: 100%; }
    .recipe-detail-section { flex-direction: column; }
    .recipe-detail-section { margin-left: 0; width: 100%; } /* reset full-width bleed */
    .recipe-detail-left, .recipe-detail-right { width: 100%; }
    .recipe-ingredients-sticky { position: static; } /* no sticky on mobile */
    .recipe-fieldset-wrapper { padding: 0 1rem 1rem; }
    .recipe-detail-right { padding: 2rem 0; }
    /* Product page responsive */
    .product-visuals { flex-direction: column; }
    .product-carousel-col { flex: 0 0 auto; max-width: 100%; }
    .product-badge-col { display: none; } /* hide lifestyle photo — PROD mobile */
    .domino-single-product h1.product-page-title { font-size: 32px !important; line-height: 38px; }
    .product-tab-btn { font-size: 20px; padding: 8px 20px 10px; }
    .product-tab-content, .product-description { font-size: 16px; }
    .product-tab-content p, .product-description p { font-size: 16px; }
    .product-related-recipes h2 { font-size: 26px; }
    .product-recipe-circle { width: 140px; height: 140px; }
    .product-recipe-item { width: 160px; }
    .product-buy-banner { padding: 15px 20px; gap: 15px; }
    .btn-buy { font-size: 16px; padding: 10px 30px; }

    .recipes-grid-4col { grid-template-columns: repeat(3, 1fr); } /* 4→3 cols ≤991px (PROD: medium-block-column-3) */
    .recipes-grid-3col { grid-template-columns: repeat(2, 1fr); }
    .related-recipes .recipes-grid,
    .related-products .products-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-nav-row { flex-direction: column; align-items: center; text-align: center; padding-left: 0; gap: 2rem; }
    .footer-nav-links { justify-content: center; }
    .footer-social { justify-content: center; } /* center social on mobile */
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; gap: 0.75rem; }
    .footer-bottom-links a { padding: 0; }
    .footer-copyright { padding: 0; }
}

@media (max-width: 768px) {
    .recipe-title-block h1 { font-size: 2.25rem; } /* 36px at ≤768px */
    .recipes-grid-4col { grid-template-columns: repeat(2, 1fr); } /* 4→2 cols ≤768px */
    .recipes-grid-3col { grid-template-columns: repeat(2, 1fr); }
    .recipe-filters { flex-direction: column; align-items: stretch; }
    .filter-tag { text-align: center; justify-content: center; }
}

@media (max-width: 500px) {
    .recipe-title-block h1 { font-size: 1.875rem; } /* 30px at ≤500px */
    .recipes-grid-3col, .recipes-grid-4col { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .related-recipes .recipes-grid,
    .related-products .products-grid { grid-template-columns: 1fr; }
    .domino-carousel-btn { width: 30px; height: 30px; }
    .domino-carousel-prev { left: 8px !important; } /* back inside on mobile */
    .domino-carousel-next { right: 8px !important; }
    .recipe-ingredient-tabs { height: auto; }
    .recipe-ingredient-tabs .fieldset-legend { padding: 12px 1rem; white-space: normal; }
    .recipe-fieldset-wrapper { padding: 0 1rem 12px; }
    .recipe-fieldset-wrapper .servings-info { padding: 20px 0 16px; }
    .recipe-detail-right { padding: 1rem 0; }
    .footer-nav-links { flex-direction: column; gap: 0.75rem; }
    .footer-bottom-links { flex-direction: column; gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════
   PRINT STYLES — display:none por sección, sin páginas en blanco
   (visibility:hidden preserva espacio en layout → crea páginas en blanco)
   ═══════════════════════════════════════════════════════ */
@media print {
    /* Ocultar TODO excepto el print section */
    #wpadminbar,
    .site-header, #masthead,
    .site-footer, #colophon,
    .domino-footer,
    footer[role="contentinfo"],
    nav[aria-label], .entry-breadcrumbs, .kadence-breadcrumbs,
    .recipe-title-block,
    .recipe-categories-bar,
    .recipe-description,
    .recipe-banner-wrap,
    .recipe-prep-block,
    .recipe-detail-section,
    .recipe-quick-tip,
    .recipe-video-hero,
    .recipe-youtube-wrap,
    .related-recipes,
    .domino-share { display: none !important; }

    /* Mostrar print section */
    #domino-print-section {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #fff !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── Card container (matching PROD .divMain dashed border) ── */
    .prs-card {
        border: 1px dashed #ddd !important;
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }
    .prs-card-inner {
        padding: 15px !important;
    }
    /* Page 2 starts on new page */
    .prs-card-page2 {
        page-break-before: always !important;
    }

    /* ── Header: title + logo (matching PROD .divHeading1) ── */
    .prs-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px !important;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    .prs-title {
        color: #000066 !important;
        font-size: 24px !important;
        font-weight: 100 !important;
        font-family: 'CenturyGothicStd', Arial, Helvetica, sans-serif !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    .prs-logo {
        width: 75px !important;
        height: 43px !important;
        flex-shrink: 0 !important;
        margin-left: 16px !important;
    }

    /* ── Meta line (matching PROD .spanMain italic) ── */
    .prs-meta {
        color: #000066 !important;
        font-size: 14px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        margin-bottom: 10px !important;
        padding: 5px 8px !important;
        border-bottom: none !important;
        font-family: sans-serif !important;
    }
    .prs-meta .prs-meta-sep {
        padding: 0 10px !important;
        font-style: normal !important;
    }

    /* ── Section titles (matching PROD italic navy headings) ── */
    .prs-section { margin-top: 0 !important; }
    .prs-section-title {
        color: #000066 !important;
        font-size: 18px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        padding: 5px 8px 20px !important;
        margin: 0 !important;
        border-bottom: none !important;
        font-family: sans-serif !important;
        display: block !important;
        width: 100% !important;
    }

    /* ── Ingredient group titles (matching PROD .field--name-field-ingredients-sub-header) ── */
    .prs-group-title {
        color: #000066 !important;
        font-size: 11pt !important;
        font-style: italic !important;
        font-weight: 400 !important;
        margin: 10px 0 4px !important;
        font-family: sans-serif !important;
    }

    /* ── Ingredients 2-column ── */
    .prs-ing-cols {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        column-gap: 20px !important;
        padding: 0 15px !important;
    }
    .prs-ing-cols ul {
        list-style: disc !important;
        margin: 0 0 6px !important;
        padding-left: 20px !important;
        break-inside: avoid !important;
    }
    .prs-ing-cols li {
        font-size: 10pt !important;
        margin-bottom: 3px !important;
        padding: 3px 0 !important;
        break-inside: avoid !important;
        font-family: sans-serif !important;
        color: #1f1f1f !important;
    }

    /* ── Instructions (matching PROD 2-column layout) ── */
    .prs-instructions {
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        column-gap: 20px !important;
    }
    .prs-instructions ol {
        padding-left: 18px !important;
        margin: 0 0 10px !important;
        color: #1f1f1f !important;
    }
    .prs-instructions li {
        font-size: 11pt !important;
        margin-bottom: 6px !important;
        font-family: sans-serif !important;
        color: #1f1f1f !important;
        break-inside: avoid !important;
    }
    .prs-instructions li p {
        margin: 2px 0 !important;
        display: inline !important;
        font-size: 11pt !important;
        font-family: sans-serif !important;
    }
    .prs-instructions h3 {
        color: #000066 !important;
        font-size: 12pt !important;
        font-style: italic !important;
        font-weight: 400 !important;
        margin: 12px 0 5px !important;
        font-family: sans-serif !important;
        break-after: avoid !important;
    }

    /* ── Presentación & Tip del chef ── */
    .prs-presentation, .prs-tip {
        break-inside: avoid !important;
    }
    .prs-presentation p, .prs-tip p {
        font-size: 10pt !important;
        margin-bottom: 6px !important;
        font-family: sans-serif !important;
        color: #1f1f1f !important;
    }

    /* ── Page break control ── */
    .prs-section { page-break-inside: avoid; }

    /* ── Color accuracy ── */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE — Tarjetas Promocionales
   ═══════════════════════════════════════════════════════ */

.home-promo-cards {
    max-width: var(--az-container);
    margin: 3rem auto;
    padding: 0 var(--az-gap);
}
.promo-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.promo-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.promo-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.promo-card-content {
    padding: 1.25rem;
    background: #fff;
}
.promo-card-content h3 {
    font-family: "FFDINWebProBlack", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    color: var(--az-recipe-accent);
    margin: 0 0 0.5rem;
}
.promo-card-content p {
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--az-body-text);
    margin: 0;
}
.promo-card-cta {
    background: var(--az-recipe-accent);
}
.promo-card-cta a {
    text-decoration: none;
    display: block;
    height: 100%;
}
.promo-card-cta .promo-card-content {
    background: var(--az-recipe-accent);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 250px;
}
.promo-card-cta h3 {
    color: var(--az-white);
    font-size: 1.5rem;
}
.promo-card-cta p {
    color: var(--az-white);
    font-size: 1rem;
}

@media (max-width: 991px) {
    .promo-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .promo-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE — Producto Principal
   ═══════════════════════════════════════════════════════ */

.home-featured-product {
    background: #f9f9f9;
    padding: 4rem 0;
    margin-top: 3rem;
}
.featured-product-content {
    max-width: var(--az-container);
    margin: 0 auto;
    padding: 0 var(--az-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.featured-product-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.featured-product-text h2 {
    font-family: "FFDINWebProBlack", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    color: var(--az-recipe-accent);
    margin: 0 0 1rem;
}
.featured-product-text p {
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--az-body-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.featured-product-text .btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--az-recipe-accent);
    color: var(--az-white);
    text-decoration: none;
    border-radius: 4px;
    font-family: "FFDINWebProBold", Helvetica, Arial, sans-serif;
    transition: background 0.3s ease;
}
.featured-product-text .btn:hover {
    background: #4d2915;
}

@media (max-width: 768px) {
    .featured-product-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE v5.1 — PIXEL PERFECT (azucardominomex.com)
   ═══════════════════════════════════════════════════════ */

/* ──── HERO CAROUSEL ──── */
.home-hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent; /* v5.11.0 fix: was navy-dark blue, now transparent per PROD */
}
.hero-carousel-slider {
    position: relative;
    aspect-ratio: 16 / 9;
    /* v5.12.1: NO max-height cap — PROD scales with viewport (1071@1920, 1431@2560) */
    overflow: hidden; /* v5.12.0: hide slides that are off-screen during horizontal slide */
    width: 100%; /* v5.12.1: ensure full-width like PROD */
}
.hero-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* v5.12.0: Horizontal slide - no opacity, all slides visible, positioned via transform */
    opacity: 1;
    transition: transform 0.6s ease-in-out;
}
/* CSS-first: show first slide immediately (before JS loads) */
.hero-slide:first-child {
    transform: translateX(0);
}
.hero-slide:not(:first-child) {
    transform: translateX(100%);
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slick Carousel Arrows - v5.12.0: Brown bg + white arrow like PROD */
.home-hero-carousel .slick-prev,
.home-hero-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--az-recipe-accent); /* Brown like PROD */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    color: #fff; /* White arrow like PROD */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    line-height: 1;
}
.home-hero-carousel .slick-prev:hover,
.home-hero-carousel .slick-next:hover {
    background: rgba(102, 57, 28, 0.9); /* Slightly lighter brown on hover */
    transform: translateY(-50%) scale(1.1);
}
.home-hero-carousel .slick-prev {
    left: 20px;
}
.home-hero-carousel .slick-next {
    right: 20px;
}

/* Slick Carousel Dots — ocultos (PROD no los muestra) */
.home-hero-carousel .slick-dots {
    display: none;
}

@media (max-width: 991px) {
    .hero-carousel-slider { max-height: 300px; }
}

/* ──── SECCIÓN "DESCUBRE EL REGALO" CON CÍRCULOS ──── */
.home-gift-section {
    padding: 76px 0 0; /* PROD: 0 padding-bottom — gift section ends flush at circle bottom */
    background: #fff;
}
.gift-intro {
    text-align: center;
    margin-bottom: 45px;
}
.home-gift-section .gift-intro p {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 2.375rem;
    color: var(--az-recipe-accent);
    margin: 0 0 16px; /* PROD: 16px margin-bottom below title */
    font-weight: normal;
    line-height: 42px;
}
.gift-circles-grid {
    display: grid;
    grid-template-columns: repeat(4, 263px); /* PROD: 4×263px = 1052px, 0 gap (slick) */
    column-gap: 0;
    width: 1052px;
    margin: 0 auto;
    padding: 0;
}
.gift-circle {
    margin: 0;
    padding-top: 15px; /* PROD: slick inline rendering creates ~15px natural space above each circle */
    text-align: center;
}
.gift-circle .circle-link {
    text-decoration: none;
    display: block;
    color: #848383; /* Override link blue — PROD captions are gray */
}
.gift-circle .circle-image {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto; /* PROD: 0 margin-bottom — caption starts flush against circle */
    transition: transform 0.3s ease;
}
.gift-circle:hover .circle-image {
    transform: scale(1.05);
}
.gift-circle figcaption {
    font-family: Helvetica, Arial, sans-serif !important; /* PROD: sans-serif system font */
    font-size: 18px; /* PROD: figcaption inherits 18px/700 */
    font-weight: 700;
    line-height: 23px; /* PROD: 23px */
    padding: 15px 10px 0; /* PROD: 15px top, 10px left/right — reduces text width to 243px, matches line-wrapping */
}
/* v5.12.3: PROD circle captions are gray #848383, not brown */
/* v5.13.21: fontWeight 700, fontSize 18px — match PROD exactly */
.gift-circle .circle-title {
    display: block;
    font-size: 18px; /* PROD: 18px exactly */
    font-weight: 700;
    color: #848383 !important; /* PROD: gray, not link blue */
    line-height: 23px; /* PROD: 23px (was browser default ~27px) */
    margin-bottom: 0.25rem;
}
.gift-circle .circle-subtitle {
    display: block;
    font-size: 18px; /* PROD: same as circle-title */
    font-weight: 700;
    color: #848383 !important; /* Override link blue */
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
}
/* EUA disclaimer above Regalo verdadero circle */
.circle-eua-note {
    display: block;
    font-size: 0.6875rem; /* 11px */
    color: #666;
    text-align: center;
    margin-bottom: 6px;
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    font-style: italic;
    line-height: 1.3;
}
/* v5.12.3: Hide circle nav on desktop — MUST be before mobile media query for specificity */
.gift-circles-nav {
    display: none;
}

/* v5.13.17: PROD circles = desktop grid at 1024px, carousel at ≤991px.
   Shows 2 circles at 601-991px, 1 circle at ≤600px (PROD at 375px shows 1) */
@media (max-width: 991px) {
    .gift-circles-grid {
        display: flex !important;
        overflow: hidden;
        position: relative;
        grid-template-columns: none;
        gap: 0;
        width: 100% !important; /* FIX v5.80.33: desktop width:1052px overflowed wrap */
        padding: 0 15px; /* PROD: slick-list x=15 → 15px each side */
    }
    .gift-circles-grid .gift-circle {
        flex: 0 0 50%;
        min-width: 50%;
        transition: transform 0.4s ease-in-out;
    }
    .gift-circle .circle-image {
        width: 200px;
        height: 200px;
    }
    /* v5.12.4: Circle nav buttons on SIDES (absolute), like PROD Slick arrows */
    .home-gift-section .wrap {
        position: relative;
    }
    .gift-circles-nav {
        display: block;
        position: static;
        margin: 0;
        padding: 0;
    }
    .gift-circles-nav button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        background: var(--az-recipe-accent);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 55%;
        transform: translateY(-50%);
        z-index: 9;
        transition: background 0.3s ease;
    }
    .gift-circles-prev {
        left: 10px; /* PROD: prev.x=10 */
    }
    .gift-circles-next {
        right: 10px; /* PROD: next.right=10 → x=300 in 360px container */
    }
    .gift-circles-nav button:hover {
        background: var(--az-brown-dark);
    }
    /* Hide dots on mobile — PROD only has prev/next arrows */
    .gift-circles-dots {
        display: none !important;
    }
}

/* v5.80.36: At ≤600px — mobile pixel-perfect
   PROD: section.pt=62px, descubreP.mb=45px (→circles), hero arrows top=132.5px (50% of slick 265px), circles 220px, nav arrow 57% */
@media (max-width: 600px) {
    /* v5.80.36: Hero arrows: PROD slick.h=265px → center at 265/2=132.5px from hero top. DEV was top:50% of 203px=101.5px (30px too high) */
    .home-hero-carousel .slick-prev,
    .home-hero-carousel .slick-next {
        top: 132.5px !important;
    }
    .gift-circles-grid .gift-circle {
        flex: 0 0 100%;
        min-width: 100%;
    }
    .home-gift-section {
        padding-top: 62px !important; /* PROD: slickImg.bottom=287, descubreP.y=349 → gap=62px */
    }
    .gift-intro {
        margin-bottom: 0 !important;
    }
    .home-gift-section .gift-intro p {
        font-size: 28px !important;
        line-height: 30.8px !important;
        margin-bottom: 45px !important; /* v5.80.36: was 16px; PROD: descubreP.bottom(410)→slickList.y(455)=45px gap */
    }
    .gift-circle .circle-image {
        width: 220px !important; /* PROD: 220×220px */
        height: 220px !important;
    }
    .gift-circles-nav button {
        top: 57% !important; /* v5.80.36: was 54%; with mb=45 wrap.h=407, circle center at 232/407=57% */
    }
    /* PROD: gap gift-section→brown-bar = 60px (desktop CSS has 140px → too much on mobile) */
    .home-recipes-special {
        padding-top: 60px !important;
    }
    /* PROD: brown bar h2 lh=39.76px → 2 lines × 40px = 80px (Kadence overrides our 30px with 'normal') */
    .home-recipes-special h2 {
        line-height: 40px !important;
    }
}

/* ──── BARRA SEPARADORA MARRÓN ──── */
/* v5.13.14: .section-divider hidden — the h2 inside .home-recipes-special now acts
   as the brown bar (brown text on brown bg, matching PROD exactly) */
.section-divider {
    display: none;
}

/* ──── MOSAICO DE RECETAS (réplica exacta Drupal) ──── */
.home-recipes-special {
    padding: 140px 0 0; /* PROD: 140px gap from circles bottom to brown H2 bar; gift section now has 0 pb → 140px needed */
    background: transparent; /* v5.11.0 fix: removed brown background per PROD */
}
/* v5.13.14: PROD h2 = brown text on brown bg (invisible text, acts as brown bar separator)
   Desktop: 21px/600 → ~30px bar.  Mobile: 28px/600 → ~80px bar (text wraps). */
.home-recipes-special h2 {
    font-size: 21px;
    font-weight: 600;
    color: #66391c;
    background: #66391c;
    padding: 0 15px;
    margin: 0 0 20px;
    line-height: 30px;
    text-align: left;
}

/* Mosaic grid — PROD: max-width 1200px centered, items ~396px with 4px gaps */
.mosaic-grid {
    max-width: 1200px;
    margin: 0 auto;
}
.mosaic-item {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* v5.80.38: Desktop: bg=rgba(0,0,0,0.42)×opacity:0.8 = 33.6% effective (PROD desktop). Mobile override adds bg:#000 (see ≤991px block).
   PROD desktop: ctatitle-wrapper { bg:rgba(0,0,0,0.42); opacity:0→0.8 on hover } */
.mosaic-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.42); /* PROD desktop: 0.42×opacity:0.8=33.6% effective. Mobile overrides to #000×0.7=70% */
    opacity: 0;
    transition: opacity 0.6s ease; /* PROD: 0.6s transition */
    z-index: 1;
    pointer-events: none;
}
.mosaic-item:hover::before {
    opacity: 0.8;
}
.mosaic-item:hover { text-decoration: none; }

/* Title overlay — hidden by default, full-width, centered (PROD: h1 x=0, w=360=100% tile) */
.mosaic-item-title {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%; /* PROD: h1 x=0, w=360 = full tile width. Was 90%/left:50% */
    padding: 15px;
    color: #fff;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    background: none;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease; /* PROD: 0.6s */
}
.mosaic-item:hover .mosaic-item-title {
    opacity: 0.8; /* v5.80.38: PROD H1 at opacity:1 inside ctatitle-wrapper at opacity:0.8 → effective 0.8 (semi-transparent) */
}
.mosaic-title-sm {
    font-size: 20px;
    padding: 15px;
}

/* Row 1: [2 stacked] [product tall] [2 stacked] — 606px */
.mosaic-row-top {
    display: flex;
    height: 606px;
    gap: 4px;
}
.mosaic-col {
    flex: 0 0 33.333%;
}
.mosaic-col-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mosaic-col-stack .mosaic-item {
    height: 50%;
}
.mosaic-col-product .mosaic-item {
    height: 100%;
}

/* Row 2: large left (33%) + 2×2 right grid (67%) — 300px */
.mosaic-row-bottom {
    display: flex;
    height: 300px;
    gap: 4px;
    margin-top: 4px;
}
.mosaic-item-large {
    flex: 0 0 33.333%;
    height: 100%;
}
.mosaic-bottom-right {
    flex: 0 0 66.667%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mosaic-item-small {
    flex: 0 0 calc(29.5% - 2px); /* PROD: 244px of 828px = 29.5% */
    height: calc(50% - 2px);
}
.mosaic-item-wide {
    flex: 0 0 calc(70.5% - 2px); /* PROD: 584px of 828px = 70.5% */
    height: calc(50% - 2px);
}

/* v5.80.38: PROD mosaic ≤991px — always visible, no hover transitions, bg:#000 (mobile PROD uses solid black, not rgba(0,0,0,0.42)).
   opacity:0.7 on overlay + text → text is semi-transparent (0.7). Hover locked at 0.7 (no flash on tap). */
@media (max-width: 991px) {
    .mosaic-item::before { background: #000; opacity: 0.7; transition: none; } /* mobile: #000×0.7=70% solid */
    .mosaic-item:hover::before { opacity: 0.7; }
    .mosaic-item-title { opacity: 0.7; transition: none; }
    .mosaic-item:hover .mosaic-item-title { opacity: 0.7; }
    .mosaic-title-sm { opacity: 0.7; transition: none; }
}
/* v5.80.37: PROD stacks at ≤540px. All tiles 30px (PROD uniform at mobile — was 20px on small/wide). */
@media (max-width: 540px) {
    .home-recipes-special h2 { font-size: 28px; line-height: normal; }
    .mosaic-row-top { flex-wrap: wrap; height: auto; gap: 12px; } /* v5.80.39: PROD gap=12px (was 4px) */
    .mosaic-col-stack { gap: 12px; } /* v5.80.39: gap between 2 stacked tiles within a col (was 4px) */
    .mosaic-col { flex: 0 0 100%; }
    .mosaic-col .mosaic-item { height: auto; } /* v5.80.40: PROD height:auto → ~285px (was 273px hardcoded) */
    .mosaic-col .mosaic-item img { height: auto; } /* v5.80.40: override global height:100% so image sets natural height */
    .mosaic-col-product { flex: 0 0 100%; }
    .mosaic-col-product .mosaic-item { height: 400px; }
    .mosaic-row-bottom { flex-wrap: wrap; height: auto; gap: 12px; margin-top: 12px; } /* v5.80.39: gap+margin 12px (was 4px) */
    .mosaic-item-large { flex: 0 0 100%; height: auto; } /* v5.80.40: PROD height:auto (was 273px) */
    .mosaic-item-large img { height: auto; } /* v5.80.40: natural image height */
    .mosaic-bottom-right { flex: 0 0 100%; gap: 12px; } /* v5.80.39: gap 12px (was 4px) */
    .mosaic-item-small, .mosaic-item-wide { flex: 0 0 100%; height: 300px; }
    .mosaic-title-sm { font-size: 30px; } /* PROD: all tiles uniform 30px at mobile */
}

/* ──── BANNER PRODUCTO (imagen full-width con overlay) ──── */
.home-product-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.product-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.product-banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.64);
    padding: 30px;
    text-align: center;
    width: 442px;
    max-width: 90%;
}
/* v5.12.4: PROD h2 is sans-serif 38px/500, lineHeight 48px, margin 0 0 8px */
.product-banner-overlay h2 {
    font-family: sans-serif;
    font-size: 38px;
    color: var(--az-recipe-accent);
    margin: 0 0 8px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: normal; /* PROD: normal (override Kadence -0.57px) */
}
/* v5.12.3: PROD body text is brown #66391c, not --az-body-text gray */
.product-banner-overlay p {
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--az-recipe-accent);
    line-height: 1.5;
    margin: 0 0 1.25rem;
    font-weight: 400;
}
/* v5.12.2: Button matches PROD exactly — rounded, white border, 1s transition */
.product-banner-overlay .btn-compra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 62px;
    line-height: 60px; /* PROD: 60px */
    padding: 0;
    background: var(--az-recipe-accent);
    color: var(--az-white);
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: all 1s ease;
    letter-spacing: normal;
}
.product-banner-overlay .btn-compra:hover {
    background: var(--az-white);
    color: var(--az-recipe-accent);
    border-color: var(--az-recipe-accent);
    text-decoration: none;
}

/* v5.13.17: PROD banner switches at ≤991px */
@media (max-width: 991px) {
    .product-banner-overlay {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════
   SUSTENTABILIDAD — Landing + Sub-pages
   v5.13.8
   ═══════════════════════════════════════════════════════ */

.sust-page {
    font-family: "FFDINWebPro", Helvetica, Arial, sans-serif;
    color: var(--az-body-text, #464749);
    line-height: 1.6;
}

/* ── Banner ── */
.sust-banner {
    position: relative;
    width: 100%;
    overflow: visible;
}
.sust-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
}
.sust-banner-overlay {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    background: transparent;
    padding: 30px 30px 30px 110px;
}
.sust-banner-overlay h1 {
    color: #fff;
    font-family: sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: normal;
    margin: 0 0 8px;
    text-align: left;
    max-width: 740px;
}

/* ── Section shared ── */
.sust-section-inner {
    max-width: 1050px; /* PROD main sust page container = 1050px */
    margin: 0 auto;
    padding: 0;
}
/* On child pages, .sust-subpage-content constrains to 1320px — inner fills it fully */
.sust-subpage-content .sust-section-inner {
    max-width: none;
}

/* ── Intro ── */
.sust-intro {
    max-width: 735px;
    margin: 60px auto 0;
    text-align: left !important;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    color: #666;
}
.sust-intro p,
.sust-page .sust-intro p {
    margin: 0 !important;
    line-height: 24px !important;
    text-align: justify !important;
    font-family: sans-serif !important; /* PROD: sans-serif, not FFDINWebPro (audit verified) */
}

/* ── Leaves ── */
.sust-leaves {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin: 60px auto 0;
    max-width: 1050px;
    padding: 0;
}
.sust-leaves img {
    width: min(307px, calc((100% - 80px) / 3)); /* auto-fit 3 per row at any viewport width */
    height: auto;
    aspect-ratio: 1;
    object-fit: fill;
}

/* ── Two-column layout (enfoque, plan) ── */
.sust-enfoque {
    padding: 0;
    margin-top: 40px;
}
.sust-plan {
    padding: 0;
    margin-top: 80px;
}
/* PROD enfoque: text LEFT, image RIGHT (image-right layout) */
.sust-enfoque .sust-two-col {
    flex-direction: row-reverse;
}
.sust-two-col {
    display: flex;
    gap: 0;
    align-items: flex-start;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;
}
.sust-col-img {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
}
.sust-col-img img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.sust-col-text {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
}
/* Separate higher-specificity rule to clear the implicit content-box max from width:50%+border-box */
.sust-two-col .sust-col-text {
    max-width: none !important;
}
/* PROD enfoque text column: 12px horizontal padding + 20px top gap vs img top */
.sust-enfoque .sust-col-text {
    padding: 20px 12px 0;
}
/* PROD plan columns have 30px horizontal padding */
.sust-plan .sust-col-img,
.sust-plan .sust-col-text {
    padding: 0 30px;
}
/* PROD plan image has brown corner shadow */
.sust-plan .sust-col-img img {
    box-shadow: #66391c 20px 20px 0px 0px;
}
.sust-col-text h2 {
    color: var(--az-recipe-accent, #66391c);
    font-family: sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 26.4px;
    margin: 20px 0;
}
.sust-col-text p,
.sust-page .sust-col-text p {
    margin: 0 0 24px 0 !important;
    font-size: 16px;
    line-height: 24px;
    color: #666;
    font-family: sans-serif; /* PROD: sans-serif */
}
.sust-col-text blockquote {
    border-left: none;
    padding-left: 0;
    margin: 0;
    font-style: normal;
}
.sust-col-text blockquote p {
    color: #666;
    font-size: 16px;
    line-height: 24px;
}
.sust-col-text blockquote strong {
    color: #666;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* ── Principios Rectores ── */
.sust-principios {
    padding: 70px 0 0;
    margin-top: 60px;
    background: #fff;
}
.sust-principios .sust-section-inner {
    padding-left: 10px;
}
.sust-principios h2 {
    color: var(--az-recipe-accent, #66391c);
    font-family: sans-serif;
    font-size: 38px;
    font-weight: 400;
    text-align: left;
    line-height: 41.8px;
    letter-spacing: normal;
    margin: 0 0 35px;
}
.sust-principios-intro,
.sust-page .sust-principios-intro {
    text-align: left;
    max-width: none;
    margin: 0 !important;
    font-size: 16px;
    line-height: 24px;
    color: #666;
}
.sust-principios-hover-hint {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #444;
    margin: 20px 0 0;
    padding: 5px 25px 5px 5px;
    cursor: pointer;
    border: 1px solid var(--az-recipe-accent, #66391c);
    box-shadow: rgba(0,0,0,0.2) 0px 0px 5px -1px;
    background-image: url('../images/sustentabilidad/arrow_icon_40x40px.png');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px 20px;
}
.sust-principios-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    max-width: 1050px;
    margin: 45px auto 0;
}
.sust-principio-item {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 20px 20px 30px;
    width: calc(100% / 3);
    box-sizing: border-box;
    transition: transform 0.3s ease;
    color: var(--az-recipe-accent);
    font-weight: 600;
}
.sust-principio-item:hover {
    transform: scale(1.05);
}
.sust-principio-item img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0;
}
.sust-principio-item span {
    display: none; /* PROD: labels are inside the circle images, not separate text */
}

/* ── ¿Sabías que? ── */
.sust-sabias {
    padding: 40px 0;
    margin-top: 70px;
    margin-bottom: 70px;
}
.sust-sabias .sust-section-inner {
    position: relative;
}
.sust-sabias h2 {
    color: var(--az-recipe-accent, #66391c);
    font-family: sans-serif;
    font-size: 50px;
    font-weight: 700;
    text-align: left;
    line-height: 70px;
    letter-spacing: normal;
    margin: 0;
    position: absolute;
    top: 20px;
    left: 0;
    max-width: 350px;
}
.sust-sabias-grid {
    display: block;
    max-width: 1050px;
    margin: 0 auto;
}
/* PROD zigzag: odd cards (1st,3rd) right-aligned, even card (2nd) left-aligned */
.sust-sabias-card {
    display: block;
    position: relative;
    border: 1px solid #b0b0b0;
    background-color: #fff;
    padding: 20px 10px 5px;
    margin-bottom: 0;
    width: 515px; /* PROD: .animation-box w=515px at 1280px */
    margin-left: auto;
}
.sust-sabias-card:nth-child(even) {
    margin-left: 0;
    margin-right: auto;
}
/* PROD: .time right-edge stays ~15px left of card left edge regardless of text width */
.sust-sabias-title {
    position: absolute;
    right: calc(100% + 15px); /* right-edge = card_left - 15px; grows leftward with content */
    left: auto;
    top: 24%;
    width: auto;
    white-space: normal; /* word-wrap: "Plant\nBased" → ~115px, "Fotosín-\ntesis" → ~157px */
    hyphens: manual;
    color: var(--az-recipe-accent, #66391c);
    font-family: sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-align: right;
    line-height: 52px;
    background-color: #fff;
    z-index: -1;
}
/* CO₂ card (even/left-aligned): title goes on the RIGHT side */
.sust-sabias-card:nth-child(even) .sust-sabias-title {
    left: calc(100% + 15px); /* left-edge = card_right + 15px; grows rightward */
    right: auto;
    text-align: left;
}
.sust-sabias-media {
    margin-bottom: 5px;
}
.sust-sabias-media img {
    width: 100%;
    height: auto;
    display: block;
}
.sust-sabias-subtitle {
    font-family: sans-serif; /* PROD: sans-serif (not Helvetica) */
    font-weight: 400;
    font-size: 24px;
    line-height: 28.8px;
    margin-bottom: 0;
    color: var(--az-recipe-accent, #66391c);
}
.sust-sabias-card p {
    font-family: sans-serif !important; /* PROD: sans-serif, override FFDINWebPro body */
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.14px;
    color: #000;
    margin: 0;
}

/* ── AOS replica — scroll-triggered animations (PROD uses AOS library) ── */
.sust-sabias-card.sust-aos[data-sust-aos="fade-left"] {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}
.sust-sabias-card.sust-aos[data-sust-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}
.sust-sabias-card.sust-aos.sust-aos-animate {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ── Hero banner grow animation (PROD: 7s scale 1→1.7) ── */
@keyframes heroGrow {
    from { transform: scale(1); }
    to   { transform: scale(1.7); }
}
.hero-slide img.hero-grow-active {
    animation: heroGrow 7s linear forwards;
}

/* ── Sub-page content ── */
.sust-subpage-content {
    padding: 20px 0 3rem;
    max-width: 1320px; /* PROD: Bootstrap 1320px container */
    margin: 0 auto;
}

/* Two-column grid: text left + image right (PROD: Bootstrap .row > .col-sm-6 x2, 30px gutter) */
.sust-subpage-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px; /* PROD Bootstrap gutter: 2 × 15px = 30px */
    margin-bottom: 30px;
}
.sust-subpage-col.sust-subpage-text-box {
    flex: 1 1 0;
    min-width: 0;
}
.sust-subpage-col.sust-subpage-img-box {
    flex: 0 0 50%; /* PROD: col-sm-6 = 50% */
    max-width: 50%;
}
.sust-subpage-col.sust-subpage-img-box img {
    width: 100%;
    height: auto;
    margin: 0 0 16px;                               /* PROD: 16px bottom margin below section images */
    object-fit: cover;                              /* PROD: cover (not fill) */
    box-shadow: 20px 20px 0px 0px rgb(102, 57, 28); /* PROD: brown offset shadow bottom-right */
}
@media (max-width: 768px) {
    /* PROD mobile: imagen ARRIBA, texto ABAJO — column-reverse invierte el orden */
    .sust-subpage-grid {
        flex-direction: column-reverse !important;
        margin-bottom: 80px !important;
    }
    .sust-subpage-col.sust-subpage-img-box {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* PROD Bootstrap container+col = 30px padding total each side → content w:300 @ x:30 */
    .sust-subpage-conservacion .sust-section-inner,
    .sust-subpage-agricultura .sust-section-inner,
    .sust-subpage-cadena .sust-section-inner {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    /* Agricultura mobile: strip col + basic-block side padding
       (section-inner already provides the 30px indent → avoid double 60px) */
    .sust-subpage-agricultura .sust-subpage-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sust-subpage-agricultura .sust-basic-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Text-box: 60px top padding → gap img_bottom→estamos = 16px(img margin) + 60px = 76px (PROD match) */
    .sust-subpage-agricultura .sust-subpage-col.sust-subpage-text-box {
        padding-top: 60px !important;
    }
    /* Section images (728×416): full-width on mobile (PROD 375px≈300px, 768px≈693px — fill container) */
    .sust-subpage-conservacion .sust-subpage-img-box img,
    .sust-subpage-agricultura .sust-subpage-img-box img,
    .sust-subpage-cadena .sust-subpage-img-box img {
        max-width: 100% !important; /* fills container at any mobile width */
        display: block;
        margin: 0 0 16px; /* PROD: left-aligned (marginLeft=0) + 16px bottom */
    }
    /* "Agua" standalone h2: 16px/600, PROD lineHeight 22.72px, marginTop 90px, marginBottom 30px
       NOTE: padding-left here is OVERRIDDEN by the global desktop rule (30px) that comes later in file.
       Actual mobile padding-left = 15px is set in the conservacion-specific @media block below. */
    .sust-subpage-conservacion .sust-basic-block h2 {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 22.72px !important;
        margin-top: 90px !important;
        margin-bottom: 30px !important;
    }
    /* Agua p: PROD x:30 w:300, lineHeight 24px — matches section-inner 30px padding above ✓ */
    /* Content area: 80px top padding after banner (PROD Bootstrap padding match) */
    .sust-subpage-content {
        padding-top: 80px !important;
    }
}
.sust-subpage-content h2 {
    color: var(--az-recipe-accent, #66391c) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 29.82px !important;
    letter-spacing: -0.015em !important;            /* PROD: -0.015em (e.g. Agua h2 = -0.24px @ 16px) */
    margin: 10px 0 20px !important;
    max-width: 660px; /* PROD col-sm-6 at 1320px = 660px per col; h2 lives in text-col */
}
/* Grid section H2s (Uso de Agua, Reducir, etc.): PROD 0.5px letter-spacing, 30px bottom margin */
.sust-subpage-grid h2 {
    letter-spacing: 0.5px !important;
    margin-bottom: 30px !important;
}
/* Agua standalone H2 — desktop: PROD font-weight 600, margins 90/30px, padding-left 30px (text at x=218) */
.sust-subpage-conservacion .sust-basic-block h2 {
    font-weight: 600 !important;
    margin-top: 90px !important;
    margin-bottom: 30px !important;
    padding-left: 30px !important;
}
.sust-subpage-content .sust-section-inner > h2:first-child {
    display: none; /* Duplicate of banner title - PROD doesn't show it */
}
.sust-subpage-content p {
    font-size: 16px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    line-height: 24px !important;
    color: #666 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}
/* Compromiso paragraphs: PROD Drupal theme applies letter-spacing:-0.01em globally */
/* NOTE: descarbonizacion PROD paragraphs have letter-spacing:normal — scope this per-page */
.sust-subpage-compromiso .sust-subpage-content p {
    letter-spacing: -0.01em !important;
}
.sust-subpage-content p:empty {
    display: none !important;
}
.sust-subpage-content ul {
    margin: 0 0 20px 10px !important;
    padding: 0;
}
.sust-subpage-content li {
    font-size: 16px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    line-height: 24px !important;
    color: #666 !important;
    margin: 0 0 15px 20px;
    list-style-type: disc;
}
.sust-subpage-content img {
    max-width: 100%;
    height: auto;
    display: block;   /* enables margin: auto centering */
    margin: 0 auto;   /* PROD: centered, no bottom margin */
}

/* ── Per-page overrides (slug class added by PHP template) ── */

/* Cadena — container width + top gap match PROD Bootstrap .container (1050px, gap=80px) */
.sust-subpage-cadena .sust-subpage-content {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 80px !important; /* PROD: banner_bottom→row = 80px (DEV default was 20px) */
}
/* Cadena — Bootstrap gutter columns: gap:0 + 30px L/R padding each col (PROD col-lg-6 match) */
.sust-subpage-cadena .sust-subpage-grid {
    gap: 0 !important;
}
.sust-subpage-cadena .sust-subpage-col {
    padding: 0 30px;
    box-sizing: border-box;
}

/* Compromiso + Cadena — h2 section headings: 22px/600/0.5ls (PROD: h2.Black Drupal class, not migrated) */
.sust-subpage-compromiso .sust-subpage-content h2,
.sust-subpage-cadena .sust-subpage-content h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 26.4px !important;
    letter-spacing: 0.5px !important;
    margin: 20px 0 20px !important;
    max-width: none !important; /* PROD: no max-width; global .sust-subpage-content h2 sets 660px */
}

/* Gobernanza — container: 1050px centered, 15px side padding (PROD Bootstrap .container match) */
.sust-subpage-gobernanza .sust-subpage-content {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
/* Gobernanza — desktop H2: 21px/600/29.82lh/-0.015ls, mt=90px, mb=30px (PROD match)
   pl/pr=15px → H2 text at x=218 (content.x=188 + H2.pl=15 matches PROD H2 text position)
   PROD H2: x=188 pl=30px → text=218; DEV: content.pl=15 → sust-section-inner.x=203, H2.pl=15 → text=218 ✓ */
.sust-subpage-gobernanza .sust-subpage-content h2 {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 29.82px !important;
    letter-spacing: -0.015em !important;
    margin-top: 90px !important;
    margin-bottom: 30px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: none !important;
}
/* Gobernanza — desktop P: mt=0, mb=20px, mr=15px (PROD P.width = 1020-16(ml)-15(mr)=989px)
   P.ml=16px (Kadence default) → P.x=219 → P text=219 (PROD match, no extra padding needed)
   Mobile: mt/mb/mr overridden in @media below */
.sust-subpage-gobernanza .sust-subpage-content p {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    margin-right: 15px !important;
}
/* Gobernanza — mobile: H2 16px/22.72lh/-0.015ls; content pt=0; 15px side padding
   PROD mobile: content pt=0 → H2.mt(90px) collapses → gap from banner=90px
   H2 text x=30 (content.pl 15 + H2.pl 15); P x=31, w=299px */
@media (max-width: 768px) {
    /* Content: pt=0 (H2.mt collapses → 90px gap from banner), max-width none (full-width) */
    .sust-subpage-gobernanza .sust-subpage-content {
        padding-top: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: none !important;
    }
    /* H2: 16px/22.72lh/-0.24ls, pl=15 → content.pl(15)+h2.pl(15)=30px text x (PROD match) */
    .sust-subpage-gobernanza .sust-subpage-content h2 {
        font-size: 16px !important;
        line-height: 22.72px !important;
        letter-spacing: -0.015em !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: none !important;
    }
    /* P: mt=20px, mb=20px, mr=15px → x=31, w=299px (PROD mobile match) */
    .sust-subpage-gobernanza .sust-subpage-content p {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        margin-right: 15px !important;
    }
}

/* Compromiso — container width + top gap (PROD Bootstrap .container = 1050px, pt = 50px) */
.sust-subpage-compromiso .sust-subpage-content {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 50px !important; /* PROD: image y=785 = banner_bottom(735) + pt(50) */
}
/* Compromiso — no gap, image 394px, text col 12px padding (PROD Bootstrap col-lg-6 values) */
.sust-subpage-compromiso .sust-subpage-grid {
    gap: 0 !important;
}
/* Compromiso — gap between sections: PROD = 100px (grid1_bottom=1179, grid2_top=1279) */
.sust-subpage-compromiso .sust-subpage-grid:not(:last-child) {
    margin-bottom: 100px !important;
}
/* Compromiso section 1 — text-box right col: PROD H2 y=859, image y=785 → gap=74=54+20(marginTop) */
.sust-subpage-compromiso .sust-section-inner .sust-subpage-grid:first-child .sust-subpage-text-box {
    padding-top: 54px !important;
}
.sust-subpage-compromiso .sust-subpage-img-box img {
    max-width: 394px !important; /* PROD: 394px natural size (Kadence forces block+width:100%, need explicit cap) */
    height: auto !important;
    margin-bottom: 0 !important; /* PROD: no mb — prevents grid being 16px taller → section 2 displaced */
    box-shadow: none !important; /* no brown shadow bleed from .sust-plan rule */
}
.sust-subpage-compromiso .sust-subpage-col.sust-subpage-text-box {
    padding-left: 12px !important;  /* PROD faq-right pl/pr = 12px */
    padding-right: 12px !important;
}
/* Compromiso — paragraphs: PROD = 14px/21lh/10mt/10mb (not global 16px) */
.sust-subpage-compromiso .sust-subpage-text-box p {
    font-size: 14px !important;
    line-height: 21px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
/* Compromiso — PROD section 1 has image LEFT, text RIGHT (Drupal faq-left/faq-right) */
.sust-subpage-compromiso .sust-section-inner .sust-subpage-grid:first-child {
    flex-direction: row-reverse;
}
/* Compromiso — mobile overrides (MUST come AFTER desktop rules above due to !important cascade) */
@media (max-width: 768px) {
    /* Desktop: text-box gets padding-top:54px offset (to align H2 with img top).
       Mobile: column-reverse stacks img TOP + text BOTTOM — no offset needed. */
    .sust-subpage-compromiso .sust-section-inner .sust-subpage-grid:first-child .sust-subpage-text-box {
        padding-top: 0 !important;
    }
    /* Desktop: section 1 row-reverse = img LEFT, text RIGHT.
       Mobile: global rule already does column-reverse (img TOP, text BOTTOM) for all grids.
       Reset row-reverse → let the global column-reverse take over. */
    .sust-subpage-compromiso .sust-section-inner .sust-subpage-grid:first-child {
        flex-direction: column-reverse !important;
    }
    /* Images: desktop max-width 394px, mobile full-width (PROD: max-width:none, fills column) */
    /* Restore 16px margin-bottom (zeroed on desktop to avoid section-2 displacement) */
    .sust-subpage-compromiso .sust-subpage-img-box img {
        max-width: 100% !important;
        margin-bottom: 16px !important;
    }
}

/* Descarbonización — text-only page: container = 1050px (PROD .container), not 1320px */
/* PROD Bootstrap gutter = 15px each side → H2 width = 1050-30 = 1020px
   padding-top: 0 → gap from banner = only P.marginTop (20px) = PROD match
   General .sust-subpage-content has padding: 20px 0 3rem, which adds 20px extra
   PROD gap banner→first_P = 20px (no content top padding, just P marginTop=20px) */
.sust-subpage-descarbonizacion .sust-subpage-content {
    max-width: 1050px;
    padding-top: 0 !important;
    padding-left: 15px;
    padding-right: 15px;
}
/* Descarbonización — H2s: cap to 1050px col width (global sets 660px) */
.sust-subpage-descarbonizacion .sust-subpage-content h2 {
    max-width: 1050px !important; /* PROD: H2s don't exceed content col (1050px) */
}
/* Descarbonización — paragraphs get extra 15px Bootstrap col indent (PROD: P inside .row>.col-12)
   PROD: H2 x=203 (container+gutter), P x=218 (container+gutter+col-padding), P w=990 */
.sust-subpage-descarbonizacion .sust-section-inner p {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
/* Descarbonización — section sub-H2s: 700 weight (PROD: bold section headers) */
.sust-subpage-descarbonizacion .sust-subpage-content h2 + h2,
.sust-subpage-descarbonizacion .sust-subpage-content h2 ~ h2 {
    font-weight: 700 !important;
}
/* Descarbonización — mobile: H2s shrink to 16px (PROD letterSpacing -0.24px = -0.015em×16px vs DEV -0.315px = ×21px) */
@media (max-width: 768px) {
    .sust-subpage-descarbonizacion .sust-subpage-content h2 {
        font-size: 16px !important;
    }
}
/* Descarbonización — UL: margin-left 10px (PROD: ul is 5px LEFT of P text start = 10px from section-inner)
   PROD: ul_x=213 (H2=203+10px), P_text_x=218 (H2+15), li_x=233 (ul+20px browser indent)
   li vs H2 = 30px. Using inherited 10px (not 15px) is the PROD match */
.sust-subpage-descarbonizacion .sust-subpage-content ul {
    margin-bottom: 0 !important;
}

/* Conservación — Agua section (grid 2, h2 direct child of grid, PROD: 21px/600/90px top) */
.sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:nth-child(2) h2 {
    font-size: 21px !important;
    font-weight: 600 !important;
    margin-top: 90px !important;
    margin-bottom: 30px !important;
}
/* Conservación — Uso + Reducir sections (grids 3+ of .sust-section-inner children):
   PROD desktop: 20px top / 20px bottom (audit v11 measured) */
.sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:nth-child(n+3) h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 26.4px !important;
    margin: 20px 0 20px !important; /* PROD: 20px/20px — NOT 90px/30px */
}
@media (max-width: 768px) {
    .sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:nth-child(n+3) h2 {
        margin: 20px 0 20px !important; /* mobile: PROD 20/20px */
    }
    /* Agua grid (nth-child 2): also 20px top/bottom at mobile */
    .sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:nth-child(2) h2 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}
/* Conservación — Agua image: PROD 800×300px centered (not full-width); natural=800px → max-width 800px */
.sust-subpage-conservacion .sust-basic-block img {
    width: auto !important;
    max-width: 800px !important;
    display: block;
    margin: 0 auto;
}
/* Conservación — grid paragraphs: PROD mt=0 mb=0 (Bootstrap reset) */
.sust-subpage-conservacion .sust-subpage-grid p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Conservación — Agua standalone (basic-block) paragraph: PROD mt=20 mb=20; x=218–1188 (30px each side) */
.sust-subpage-conservacion .sust-basic-block p {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}
/* Conservación — Agua section gap after it: PROD anim-section top=1690 vs conser bottom=1610 = 80px gap */
.sust-subpage-conservacion .sust-basic-block {
    margin-bottom: 80px !important;
}
/* Conservación — container width + top gap (PROD Bootstrap .container = 1050px, pt = 80px) */
.sust-subpage-conservacion .sust-subpage-content {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 80px !important; /* PROD: banner_bottom→grid = 80px (DEV default was 20px) */
}
/* Conservación — Bootstrap gutter columns: gap:0 + 30px L/R padding each col (PROD col-lg-6 match)
   margin-bottom: 0 (PROD: Uso→Reducir gap=0px; intro→Agua gap=90px comes from h2 margin-top, not grid mb) */
.sust-subpage-conservacion .sust-subpage-grid {
    gap: 0 !important;
    margin-bottom: 0 !important;
}
/* Conservación — intro text col: PROD text starts 20px below section top (P.top=716 vs section.top=696) */
.sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:first-child .sust-subpage-text-box {
    padding-top: 20px !important;
}
.sust-subpage-conservacion .sust-subpage-col {
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box;
}
/* Conservación — all H2s: remove global 660px cap (PROD: no max-width in content area) */
.sust-subpage-conservacion .sust-subpage-content h2 {
    max-width: none !important;
}
/* Conservación mobile overrides */
@media (max-width: 768px) {
    /* Strip col padding (section-inner already provides 30px indentation on each side) */
    .sust-subpage-conservacion .sust-subpage-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* PROD: IMAGE TOP / TEXT BOTTOM at mobile — column-reverse (imgBox is 2nd in DOM → goes to top visually)
       margin-bottom: 0 (grids touch each other; gap intro→Agua=90px from H2 mt; Uso→Reducir=0px PROD match) */
    .sust-subpage-conservacion .sust-subpage-grid {
        flex-direction: column-reverse !important;
        margin-bottom: 0 !important;
    }
    /* TextBox: 40px top padding. Gap = 16px(img mb) + 40px(pt) + 20px(first-el mt) = 76px (PROD match) */
    .sust-subpage-conservacion .sust-subpage-col.sust-subpage-text-box {
        padding-top: 40px !important;
    }
    /* Override intro grid desktop padding-top: 20px (specificity 0-5-0) with mobile 40px */
    .sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:first-child .sust-subpage-text-box {
        padding-top: 40px !important;
    }
    /* Intro grid: restore 20px paragraph margin-top (zeroed by global .sust-subpage-grid p rule)
       margin-bottom: 0 (PROD=0px; keeping 0 avoids extra 20px at bottom of textBox) */
    .sust-subpage-conservacion .sust-section-inner > .sust-subpage-grid:first-child p {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }
    /* Agua basic-block: escape section-inner 30px padding; add 15px back (PROD content=345px @ 375px)
       margin-bottom: 96px (PROD: aguaImg.bottom=1762 → usoSection.top=1858 = 96px gap) */
    .sust-subpage-conservacion .sust-basic-block {
        margin-left: -30px !important;
        margin-right: -30px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 96px !important;
    }
    /* Agua image mobile: full-width (override desktop 800px max-width); mb=16px (PROD match) */
    .sust-subpage-conservacion .sust-basic-block img {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        margin-bottom: 16px !important;
    }
    /* Agua H2 mobile: override desktop 30px (which wins over first @media block due to CSS order).
       basicBlock.pl(15) + h2.pl(15) = 30px total → H2 text at x=30px (PROD match: x=30) */
    .sust-subpage-conservacion .sust-basic-block h2 {
        padding-left: 15px !important;
    }
    /* Agua P mobile: basicBlock.pl(15) + p.pl(15) = 30px → text at x=30px, w=300px (PROD match) */
    .sust-subpage-conservacion .sust-basic-block p {
        padding-left: 15px !important;
        padding-right: 0 !important;
    }
}
/* Agricultura — h2: 22px/600/26.4lh/0.5ls (PROD match) */
.sust-subpage-agricultura .sust-subpage-content h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 26.4px !important;
    letter-spacing: 0.5px !important;
    margin: 20px 0 !important;
}
/* Agricultura — content container: 1050px centered, 80px top gap (PROD Bootstrap .container) */
.sust-subpage-agricultura .sust-subpage-content {
    max-width: 1050px;
    margin: 0 auto;
    padding-top: 80px !important;    /* PROD: banner-bottom=616 → grid-top=696 = 80px gap (image col starts here) */
    padding-bottom: 20px !important; /* PROD: descar_bottom=1719 → footer=1739 = 20px gap */
    padding-left: 0;
    padding-right: 0;
}
/* Agricultura — PROD: TEXT LEFT / IMAGE RIGHT (default flex row; HTML order: text-box first)
   Bootstrap gutter via col padding (gap:0), each col = 50% of 1050px = 525px (PROD match)
   PROD: row_mb=0px, but row_bottom=1220 → descar_top=1240 = 20px natural gap */
.sust-subpage-agricultura .sust-subpage-grid {
    gap: 0 !important;
    margin-bottom: 20px !important; /* PROD: 20px gap grid→basic block (DEV default was 30px) */
}
.sust-subpage-agricultura .sust-subpage-col {
    padding: 0 30px; /* Bootstrap double-gutter: col at x=188 → para at x=218 (PROD match) */
    box-sizing: border-box;
}
/* Text col: PROD Bootstrap inner col has 20px top padding → text starts 20px below image top */
.sust-subpage-agricultura .sust-subpage-col.sust-subpage-text-box {
    padding-top: 20px;
}
/* Full-width text blocks: same 30px gutter (PROD: para x=219, w=988 ≈ 1050-2×30) */
.sust-subpage-agricultura .sust-basic-block {
    padding-left: 30px;
    padding-right: 30px;
}
/* Brown quote box: PROD bg=rgb(102,57,28) / white text (PROD match) */
.sust-subpage-agricultura .sust-subpage-content p.brown-rectangle {
    background-color: rgb(102, 57, 28) !important;
    color: #fff !important;
    padding: 5px !important;
    margin-top: 40px !important; /* PROD: gap Donde→brown = 40px (spec 0,3,1 beats zero-margin 0,2,1) */
}
/* Paragraphs: no extra margins (PROD match) */
.sust-subpage-agricultura .sust-subpage-content p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Back link ── */
.sust-back-link {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 20px;
}
.sust-back-link a {
    color: var(--az-recipe-accent, #66391c);
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}
.sust-back-link a:hover {
    text-decoration: underline;
}

/* ── Breadcrumbs for sust pages ── */
.sust-page .domino-breadcrumbs {
    max-width: 1100px;
    margin: 1rem auto;
    padding: 0 20px;
}

/* ── MOBILE: Sustentabilidad ── */
@media (max-width: 767px) {
    /* Banner: PROD shows title as separate brown heading below image on mobile */
    .sust-banner-overlay {
        position: static;
        padding: 30px 15px; /* PROD: gap_above=30px, x=15px */
        background: transparent;
    }
    .sust-banner-overlay h1 {
        font-size: 36px;
        color: #66391c;
        text-align: left;
    }
    /* Agricultura: content padding after banner → campo img at y≈440 (PROD match)
       Rule must be HERE (after global .sust-subpage-agricultura .sust-subpage-content at line 4207)
       because !important with same specificity: last rule wins */
    .sust-subpage-agricultura .sust-subpage-content {
        padding-top: 72px !important; /* PROD: img_top=440, banner_bottom=368 → 440-368=72px */
    }
    /* Intro: match PROD 16px justify */
    .sust-intro {
        text-align: justify;
        font-size: 16px;
    }
    /* Leaves: PROD 335x335, stacked vertically, 50px gap, centered */
    .sust-leaves {
        flex-direction: column;
        gap: 50px;
        align-items: center; /* PROD: centered in viewport — left=20 at 360px = (360-335)/2=12.5 */
    }
    .sust-leaves img {
        width: 335px; /* PROD: 335×335px (audit verified, was 320) */
        height: 335px;
    }
    .sust-two-col,
    .sust-enfoque .sust-two-col {
        flex-direction: column;
        gap: 0; /* gap handled via padding-top on col-text per section */
    }
    .sust-col-img {
        flex: none;
        max-width: 100%;
    }
    /* Col h2: match PROD 22px */
    .sust-col-text h2 {
        font-size: 22px;
    }
    /* Principios h2: match PROD 28px */
    .sust-principios h2 {
        font-size: 28px;
    }
    /* Principios grid: PROD mobile → 1 per row (220px > 375/2=187.5 → wraps to 1) */
    .sust-principios-grid {
        /* Keep flex-wrap: wrap + justify-content: center from desktop */
        gap: 20px;
    }
    .sust-principio-item {
        width: 100%; /* 1 per row — PROD: col collapses to 360px full-width below 576px */
        padding: 5px 5px 30px; /* PROD: paddingBottom=30px (audit verified) */
    }
    .sust-principio-item img {
        width: 220px; /* PROD: icon 220×220 at 375px */
        height: 220px;
        max-width: 100%;
        display: block; /* Kadence resets to block → text-align:center won't center it */
        margin: 0 auto; /* PROD: circles centered in full-width row */
    }
    .sust-sabias h2 {
        font-size: 30px;
        text-align: left;
        position: static;
        padding-left: 20px;
    }
    /* Sabias card: PROD mobile — all 3 cards at x=118 (no zigzag at 375px), gap=65px */
    /* PROD: animation-box(207) → box-inner(175,+16px L/R) → content(155,+10px L/R) = 26px total L/R */
    /* padding-top:36=card_pad(16)+boxInner_pad(20), bottom:21=boxInner_pad(5)+card_bottom(16) */
    .sust-sabias-card {
        padding: 36px 26px 21px;
        width: 207px;
        position: relative;
        margin-left: 118px; /* PROD: all cards at x=118 measured at 375px */
        margin-right: 0;
        margin-bottom: 65px !important; /* PROD: 65px gap between cards */
    }
    .sust-sabias-card:nth-child(even) {
        margin-left: 118px; /* PROD: even card also at x=118 — same as odd */
        margin-right: 0;
    }
    /* Title: absolute to the LEFT — card at x=118, right:247px → title right=78, left=28 (PROD x=28) */
    .sust-sabias-title {
        position: absolute;
        right: calc(100% + 40px); /* 40px gap: title_right=325-247=78, title_left=28 ✅ */
        left: auto;
        width: 50px; /* PROD: title w=50px, wraps "Plant\nBased" */
        top: 25%; /* PROD: title relY = ~25% card height (100/407 ≈ 155/618 ≈ 25%) */
        font-size: 16px; /* PROD: 16px */
        font-weight: 700;
        text-align: right;
        color: var(--az-recipe-accent, #66391c);
        margin-bottom: 0;
        white-space: normal;
        line-height: 22px;
    }
    /* Even card: cancel desktop left:calc(100%+15px) — all cards go LEFT on mobile */
    .sust-sabias-card:nth-child(even) .sust-sabias-title {
        right: calc(100% + 40px);
        left: auto;
        text-align: right;
    }
    .sust-sabias-subtitle {
        font-size: 18px;
        line-height: 21.6px !important; /* PROD: 21.6px (=1.2×18). DEV default=28.8px (=1.6×18) */
    }
    /* Hide hover hint on mobile */
    .sust-principios-hover-hint {
        display: none;
    }
    /* Principios title left on mobile too */
    .sust-principios h2 {
        text-align: left;
    }
    .sust-sabias-grid {
        max-width: 100%;
        margin-left: 0;
        overflow: visible;
    }
    /* Remove section spacing on mobile */
    .sust-enfoque {
        margin-top: 0;
    }
    .sust-principios {
        margin-top: 59px;
    }
    .sust-sabias {
        margin-top: 0;
    }
    .sust-leaves {
        margin-top: 45px;
    }
    .sust-plan {
        margin-top: 81px;
    }
    /* Plan: PROD mobile — img left=30 w=300, H2 77px below img bottom */
    .sust-plan .sust-col-img {
        padding: 0 30px; /* matches PROD: img x=30, w=300 in 360px viewport */
    }
    .sust-plan .sust-col-text {
        padding: 57px 30px 0; /* 57+20(H2 margin-top)=77px gap img→H2, 30px sides */
    }
    /* Enfoque: PROD mobile — text left=12 w=336, 20px gap below img bottom */
    .sust-enfoque .sust-col-text {
        padding: 20px 12px 0; /* 20px top gap + 12px sides (PROD: text x=12 w=336 in 360px) */
    }
    /* Images: scale to full column width on mobile (override HTML width attr) */
    .sust-enfoque .sust-col-img img,
    .sust-plan .sust-col-img img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
    /* Intro text: PROD mobile left=15 w=330 in 360px viewport */
    .sust-intro {
        padding: 0 15px;
    }
    .sust-banner-overlay {
        padding: 30px 15px; /* PROD: gap_above=30px, x=15px */
    }
    /* GIF images: 155x155px on mobile, scales down at very narrow screens */
    .sust-sabias-media img {
        width: min(155px, 100%) !important;
        height: auto !important;
        max-width: none !important;
    }
    /* AOS animations active on mobile — PROD also animates cards on mobile */
    .sust-subpage-content h2 {
        font-size: 20px;
    }
}

/* ── Principios: 2 per row at ≥576px (matches PROD Bootstrap col-sm-6 breakpoint) ── */
@media (min-width: 576px) and (max-width: 767px) {
    .sust-principio-item {
        width: calc(50% - 10px); /* 2/row: 2*(50%-10px)+20px gap = 100% */
        padding: 5px;
    }
}

/* ═══════════════════════════════════════════════════════
   ARTICLE PAGES — Replica PROD /article/{slug}
   PROD: extremely simple — H1 + text + optional image
   No metadata, no related posts, no comments
   ═══════════════════════════════════════════════════════ */
.domino-article {
    background: #fff;
}
.domino-article-content {
    width: 70%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
}
.domino-article-content h1 {
    font-family: sans-serif;
    font-size: 2.375rem;           /* 38px — PROD exact */
    font-weight: 600;
    color: #66391c;
    line-height: 1.2;
    letter-spacing: normal;        /* PROD: normal (not -0.57px) */
    margin: 5.625rem 0 0;          /* 90px top — PROD exact */
    text-align: left;
}
.domino-article-body p {
    font-family: sans-serif;
    font-size: 0.875rem;           /* 14px — PROD exact */
    font-weight: 700;
    color: #000;
    line-height: 24px !important;  /* PROD exact — Kadence overrides with 22.4px */
    padding: 0.625rem 0.625rem 0;  /* 10px 10px 0 — PROD exact */
    margin: 0 0 16px;
    width: 60%;                    /* PROD: 60% of 70% container */
}
.domino-article-body a {
    color: #66391c;
    font-size: 0.875rem;
}
.domino-article-body a:hover {
    text-decoration: none;
}
.domino-article-body ul,
.domino-article-body ol {
    width: 60%;
    padding: 0 0 0 32px;
    margin: 25px 0 16px;
}
.domino-article-body li {
    font-family: sans-serif;
    font-size: 1rem;               /* 16px — PROD exact */
    font-weight: 700;
    color: #000;
    line-height: 24px;
    list-style-type: disc;
}
.domino-article-body img {
    max-width: 100%;
    height: auto;
}
.domino-article-body h2 {
    font-family: sans-serif !important;
    font-size: 1.375rem !important;    /* 22px — PROD exact */
    font-weight: 500 !important;       /* PROD exact */
    color: #66391c !important;         /* PROD exact — marrón */
    margin: 1.75rem 0 !important;      /* 28px top/bottom — PROD exact */
    line-height: 1 !important;         /* 22px = 1:1 — PROD exact */
    text-align: justify !important;    /* PROD exact */
    letter-spacing: normal !important;
}
.domino-article-body h3 {
    font-family: sans-serif;
    font-size: 1.125rem;           /* 18px */
    color: #464749;
    padding: 0.9375rem 0;
    line-height: 1.33;
}
/* figure from WP block editor wraps images — PROD shows at natural size, not stretched */
/* padding-left matches .domino-article-body p padding so image aligns with text (PROD match: img x=224 = p text x=224) */
.domino-article-body figure {
    margin: 0 0 16px;
    padding: 0 0 0 0.625rem;
}
.domino-article-body figure img {
    max-width: 100%;
    height: auto;
}
.domino-article-body figcaption {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Mobile: article pages */
@media (max-width: 1024px) {
    .domino-article-content {
        width: 100%;
        padding: 0 1.875rem;       /* 30px L/R — PROD mobile */
    }
    .domino-article-content h1 {
        font-size: 1.75rem;        /* 28px — PROD mobile */
        font-weight: 400;
    }
    .domino-article-body p,
    .domino-article-body li,
    .domino-article-body strong {
        font-weight: normal;        /* PROD: normal weight on mobile */
    }
    .domino-article-body p,
    .domino-article-body ul,
    .domino-article-body ol,
    .domino-article-body figure {
        width: 100%;
    }
}

/* Single WP posts (la-naturaleza-nos-ensena-*) — 50px gap below image only when it's last element (before footer) */
body.single-post article figure:last-child {
    margin-bottom: 50px;
}
/* Single WP posts — override inline <style> injections (PROD match) */
body.single-post article ul {
    list-style-type: disc !important;
    padding-left: 32px !important;
}
body.single-post article ul li {
    list-style-type: disc !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}
body.single-post article p {
    font-family: Helvetica, Arial, sans-serif !important;
    line-height: 24px !important;
    text-align: left !important;
}

/* ═══════════════════════════════════════════════════════
   SEARCH PAGE — v5.15.12
   Matches PROD /search layout: filters, horizontal cards
   ═══════════════════════════════════════════════════════ */
.search-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px 48px;
}

/* PROD: full-width search wrapper with subtle shadow */
.search-form-wrapper {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(70, 71, 73, 0.2) 0px 0px 5px 0px;
    padding: 20px 0; /* PROD wrapper h=137: form-top(97) + wrapper.padding(40) = 137 */
    margin-bottom: 0;
}

/* Search bar — PROD: fieldset padding 40px 0 20px, centered 400px, h=137 wrapper */
.search-form-top {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
    padding: 30px 0;
}
.search-form-top-inner {
    display: flex;
    border: 1px solid #c4c4c4;
    box-shadow: rgba(70, 71, 73, 0.15) 0px 1px 3px 0px;
    flex: 0 1 400px;
}
input.search-form-input {
    flex: 1;
    height: 35px;
    padding: 8px 10px 6px !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: sans-serif;
    color: #343a40;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 16.9px;
}
input.search-form-input::placeholder {
    color: #8a8a8a !important;
    font-size: 16px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.64px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    opacity: 1;
}
input.search-form-input:focus {
    outline: none;
    border-color: #66391c !important;
}
.search-form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 35px;
    padding: 0;
    background: #66391c;
    color: #fff;
    border: 0;
    font-size: 16px;
    line-height: 35px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 0 !important;
}
.search-form-button:hover { background: transparent !important; } /* PROD: bg goes transparent on hover, shows white wrapper behind */
.search-form-button:hover svg { stroke: #e8d217; } /* PROD: icon turns yellow on hover */

/* Controls row — PROD: margin-top 20px, padding-bottom 30px, dashed border */
.search-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 35px; /* PROD: wrapper.bottom→select.top = 35px */
    padding-bottom: 30px;
    border-bottom: 1px dashed #c4c4c4;
}
.search-control-group { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.search-control-label {
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
    color: #8a8a8a;
    font-family: sans-serif;
    letter-spacing: 1px;
    width: auto;
    white-space: nowrap;
}
/* Native select with custom arrow via wrapper ::after */
.search-control-group {
    position: relative;
}
.search-control-select {
    width: 220px;
    height: 45px;
    padding: 10px 45px 10px 12px;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #464749;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: default;
    outline: none;
    transition: border-color 0.15s ease-in-out;
}
.search-control-select:hover { border-color: #999; }
/* Arrow zone: separator line + centered V chevron via ::after on the group */
.search-control-group::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 43px;
    border-left: 1px solid #c4c4c4;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    pointer-events: none;
}

/* Result count */
.search-result-count {
    font-size: 13px;
    color: #8a8a8a;
    line-height: 24px;
    margin: 30px 0 0;
    font-family: sans-serif;
}

/* Result cards — PROD: border all sides, bg white */
.search-results-list { margin-top: 30px; }

.search-result-card {
    margin-bottom: 20px;
    border: 1px solid #efefef;
    background: #fff;
}

.search-result-link {
    display: flex;
    text-decoration: none;
    color: inherit;
}
.search-result-link:hover { text-decoration: none; }
.search-result-link:hover .search-result-title { text-decoration: underline; }

.search-result-image-wrap {
    flex-shrink: 0;
    width: 265px;
    min-height: 212px;
    overflow: hidden;
    background: #f1f1f1;
}
.search-result-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search-result-image-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e5e5;
}

.search-result-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}
.search-result-type {
    font-size: 13px;
    color: #8a8a8a;
    text-transform: capitalize;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0.52px;
}
h2.search-result-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #66391c !important;
    margin: 10px 0 !important;
    font-family: "RoughCut Regular Rough", sans-serif;
    line-height: 1.11 !important;
    letter-spacing: normal !important;
}
.search-result-excerpt {
    font-size: 16px;
    color: #464749;
    line-height: 24px;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
}

/* No results */
.search-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #464749;
    font-family: Helvetica, Arial, sans-serif;
}
.search-no-results a { color: #0079C0; }

/* Pagination — hidden by JS when infinite scroll is available */

/* Mobile: PROD stacks labels above selects, cards vertical, selects full-width */
@media (max-width: 600px) {
    .search-result-link { flex-direction: column; }
    .search-result-image-wrap { width: 100%; height: 230px; }
    .search-result-text { padding: 20px; }
    .search-controls { flex-direction: column; gap: 1rem; padding-bottom: 20px; }
    .search-control-group { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
    .search-control-select { width: 100%; }
    .search-control-label { margin-bottom: 0; }
}
/* Chevron must align to select at mobile (label above adds height) */
@media (max-width: 600px) {
    .search-control-group::after { top: auto !important; bottom: 1px !important; transform: none !important; }
}

/* ==========================================================================
   CONTACT PAGE — /contactenos (matches PROD layout)
   ========================================================================== */
.contact-us-page {
    padding: 0;
}
.contact-us-container {
    display: flex;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    min-height: 600px;
}

/* Left column */
.contact-left {
    width: 50%;
    padding: 90px 70px 45px 47px; /* PROD: 32px section + 15px fieldset = 47px total */
}
.contact-left h1 {
    font-size: 50px;
    font-weight: 500;
    color: #66391c;
    letter-spacing: normal; /* PROD: normal (override global -0.015em) */
    line-height: 1.2; /* PROD: 60/50 = 1.2 */
    margin: 0 0 8px;
    font-family: sans-serif;           /* PROD: sans-serif — PROD exact */
}
.contact-left p {
    font-size: 16px;
    font-weight: 400;
    font-family: sans-serif;           /* PROD: sans-serif — PROD exact */
    color: #464749;
    line-height: 1.5;
    margin: 16px 0;
    max-width: 408px;
}

/* Right column */
.contact-right {
    width: 50%;
    padding: 90px 0 45px 32px;
}

/* WPForms styling to match PROD */
.contact-right .wpforms-container {
    max-width: 478px;
}
/* Hide required asterisks — PROD doesn't show them */
.contact-us-page .contact-right .wpforms-container .wpforms-required-label,
.contact-right .wpforms-field-label .wpforms-required-label {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
}
.contact-right .wpforms-field-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: sans-serif !important; /* PROD: sans-serif — PROD exact */
    color: #464749 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.28px !important;
    line-height: 16px !important; /* PROD: 15.96px */
    margin-bottom: 10px !important;
}
.contact-right .wpforms-field input[type="text"],
.contact-right .wpforms-field input[type="email"],
.contact-right .wpforms-field select,
.contact-right .wpforms-field textarea {
    width: 100% !important;
    max-width: 478px !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #464749 !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0 !important;
    padding: 11px 7px !important;
    box-sizing: border-box !important;
    font-family: sans-serif !important; /* PROD: sans-serif — PROD exact */
    line-height: 24px !important; /* PROD: 24px */
}
.contact-right .wpforms-field select {
    padding: 6px 36px 6px 12px !important;
    color: #343a40 !important;
}
.contact-right .wpforms-field textarea {
    height: auto !important;
    min-height: 144px !important;
    resize: vertical !important;
}
.contact-right .wpforms-field-checkbox .wpforms-field-label {
    display: none !important; /* hide empty label above checkbox */
}
.contact-right .wpforms-field-checkbox .wpforms-field-label-inline {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: sans-serif !important; /* PROD: sans-serif (wider) → 3 líneas — PROD exact */
    color: #464749 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.28px !important;
    line-height: 15.96px !important;    /* PROD: 15.96px → 3 líneas — PROD exact */
    max-width: 478px !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.contact-right .wpforms-field-checkbox input[type="checkbox"] {
    accent-color: #66391c;
    position: absolute;
    left: -24px; /* PROD: checkbox 24px left of label text */
}
.contact-right .wpforms-field-checkbox .choice-1 {
    position: relative;
}
/* Match PROD spacing between fields — PROD gap=40px per row (115px total) */
.contact-right .wpforms-field {
    padding: 0 0 40px !important;
    margin: 0 !important;
}
/* Attachment note inside form */
.contact-right .form-field-attachment-note {
    padding: 0 0 16px;
}
.contact-right .form-field-attachment-note p {
    font-size: 16px;
    font-family: sans-serif;           /* PROD: sans-serif — PROD exact */
    color: #464749;
    line-height: 1.5;
    margin: 0 0 8px;
    max-width: 478px;
}

.contact-right .wpforms-submit-container {
    margin-top: 40px !important;
    margin-left: -5px !important; /* PROD: button x=969, labels x=974 → 5px left */
}
.contact-right button[type="submit"].wpforms-submit,
.contact-right .wpforms-submit {
    width: 200px !important;
    height: 50px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #fff !important;
    background: #66391c !important;
    border: 1px solid #66391c !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-family: sans-serif !important; /* PROD: sans-serif — PROD exact */
    letter-spacing: normal !important; /* PROD: normal, was 0.5px */
    line-height: 21px !important; /* PROD: 21px */
    transition: background 0.2s !important;
    padding: 0 !important;
}
.contact-right .wpforms-submit:hover {
    background: #4e2b14 !important;
}

/* (attachment note styles above, inside WPForms section) */

/* Mobile: stack columns */
@media (max-width: 768px) {
    .contact-us-container {
        flex-direction: column;
    }
    .contact-left,
    .contact-right {
        width: 100%;
        padding: 30px 20px;
    }
    .contact-left {
        padding-bottom: 0;
    }
    .contact-left h1 {
        font-size: 36px;
    }
    .contact-left p,
    .contact-right .wpforms-field input[type="text"],
    .contact-right .wpforms-field input[type="email"],
    .contact-right .wpforms-field select,
    .contact-right .wpforms-field textarea,
    .contact-right .wpforms-container,
    .form-field-attachment-note p {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════
   PÁGINA GRACIAS (post-form submission)
   PROD: /gracias — pixel-perfect match
   H2: 21px/600/#66391c, msg: 16px/#666/center, heading: 38px/700/#66391c
   Icons: 50×60px render, text 16px #66391c, gap ~255px between each
   ═══════════════════════════════════════════════════════ */
.gracias-page {
    padding: 90px 0 40px;
}
.gracias-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 47px; /* same indent as contact-left */
}
.gracias-title {
    font-size: 21px !important;
    font-weight: 600 !important;
    font-family: sans-serif !important;
    color: #66391c !important;
    line-height: 29.82px !important;
    letter-spacing: -0.315px !important;
    margin: 0 0 30px !important;
}
.gracias-msg {
    font-size: 16px;
    font-family: sans-serif;
    color: #666;
    margin: 0 0 200px;
    text-align: center;
    line-height: 24px;
}
.gracias-social-heading {
    font-size: 38px;
    font-weight: 700;
    font-family: sans-serif;
    color: #66391c;
    text-align: center;
    margin: 0 auto 80px;
    line-height: 38px;
    max-width: 1006px;
}
.gracias-social-icons {
    display: flex;
    justify-content: center;
    gap: 195px; /* PROD: FB x=437, YT x=692 → 255px center-to-center, minus icon ~60px ≈ 195px */
    padding: 0 0 80px;
}
.gracias-social-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #66391c;
    font-family: sans-serif;
    font-size: 16px;
    gap: 15px;
}
.gracias-social-icons a:hover {
    text-decoration: none;
    color: #66391c;
}
.gracias-social-icons img {
    width: 50px;
    height: 60px;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════
   MAPA DE SITIO
   PROD: /mapa-de-sitio — 1 flat list, gray links, underline
   Uses .domino-article layout (inherit H1, container, p styles)
   Overrides: link color, underline, container width
   ═══════════════════════════════════════════════════════ */
.domino-sitemap {
    padding-bottom: 80px;              /* PROD: 80px gap before footer — PROD exact */
}
.domino-sitemap .domino-article-content {
    max-width: 1050px;
}
.domino-sitemap .domino-article-content h1 {
    margin-top: 3.75rem !important;   /* 60px — PROD exact */
    margin-bottom: 2.5rem !important; /* 40px — PROD exact */
    font-weight: 400 !important;      /* PROD: regular weight */
}
/* Links: gray (#464749) + underline — PROD match */
.domino-sitemap .domino-article-body a {
    color: #464749 !important;
    text-decoration: underline !important;
    font-size: 1rem;               /* 16px */
    font-family: sans-serif;
    font-weight: 400;
}
.domino-sitemap .domino-article-body a:hover {
    color: #66391c !important;
    text-decoration: underline !important;
}
/* UL list — disc bullets, PROD match */
.domino-sitemap .domino-article-body ul,
.domino-sitemap .domino-article-body ol {
    list-style-type: disc !important;
    padding-left: 2rem;
    width: 100%;
    margin: 0 0 1rem;
}
.domino-sitemap .domino-article-body li {
    font-size: 1rem !important;         /* 16px — PROD exact */
    font-family: sans-serif;
    font-weight: 400;
    color: #464749 !important;
    line-height: 24px;
    margin-bottom: 0;
    list-style-type: disc !important;  /* Override Kadence lower-latin */
}
/* H2 secciones (DEV tiene 4 secciones — si se mantienen, estilo PROD-neutral) */
.domino-sitemap .domino-article-body h2 {
    font-family: sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #66391c;
    margin: 1.5rem 0 0.5rem;
}

@media (max-width: 1024px) {
    .domino-sitemap .domino-article-content {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   DOMINO-ARTICLE HIGH-SPECIFICITY OVERRIDES
   Simple CSS / Kadence Customizer inyecta <style> inline
   después de domino.css con .domino-article-body h2 (0,2,1).
   Usamos article.domino-article (0,2,2) para ganar.
   ═══════════════════════════════════════════════════════ */
article.domino-article .domino-article-body h2 {
    font-family: sans-serif !important;
    font-size: 1.375rem !important;    /* 22px — PROD exact */
    font-weight: 500 !important;       /* PROD exact */
    color: #66391c !important;         /* PROD exact — marrón */
    text-align: justify !important;    /* PROD exact */
    letter-spacing: normal !important;
    line-height: 1 !important;         /* 22px — PROD exact */
    margin: 1.75rem 0 !important;      /* 28px top/bottom — PROD exact */
}
article.domino-article .domino-article-body p {
    line-height: 24px !important;      /* PROD: 24px — Simple CSS injects 1.6em=22.4px */
}
article.domino-article .domino-article-body p,
article.domino-article .domino-article-body li {
    font-family: sans-serif !important;
}
/* LI/UL spacing — Kadence inyecta margin-bottom:15px y padding-left:45px */
article.domino-article .domino-article-body li {
    margin-bottom: 0 !important;
    line-height: 24px !important;
}
article.domino-article .domino-article-body ul,
article.domino-article .domino-article-body ol {
    padding-left: 2rem !important;     /* 32px — PROD exact */
    margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER POPUP MODAL (PROD pixel-perfect replica)
   PROD: 800×855, Drupal ui-dialog webform. Audited element-by-element.
   ═══════════════════════════════════════════════════════════ */
.domino-nl-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
}
.domino-nl-dialog {
    background: #fff; width: 800px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto;
    position: relative;
    border: 1px solid #c5c5c5 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #333 !important;
}
/* Force Arial on ALL children — Kadence body overrides */
.domino-nl-dialog, .domino-nl-dialog *, .domino-nl-btn-bar, .domino-nl-btn-bar * {
    font-family: Arial, Helvetica, sans-serif !important;
}
.domino-nl-close {
    position: absolute; top: 15px; right: 20px; z-index: 2; /* PROD: top:15, right:20 */
    background: #f0f0f0; border: 2px outset #000;           /* PROD: bg #f0f0f0, border outset */
    width: 20px; height: 20px;                              /* PROD: 20×20 */
    font-size: 16px; color: #000; cursor: pointer;          /* PROD: 16px, black */
    line-height: 16px; padding: 1px; text-align: center;
    margin-top: -10px;                                      /* PROD: margin-top:-10px */
}
.domino-nl-close:hover { background: #ddd; }
.domino-nl-banner {
    width: 100%; height: 150px;                             /* PROD: 783×150 */
    background-size: cover; background-position: center;
    position: relative;
}
.domino-nl-logo {
    position: absolute; top: 8px; left: 12px;
    height: 28px; width: auto;                              /* Small watermark like PROD */
    filter: brightness(0) invert(1); opacity: 0.9;
}
.domino-nl-body {
    display: flex; padding: 0;
}
.domino-nl-left {
    flex: 0 0 49%;
    padding: 10px 70px 45px 32px;                           /* PROD exact */
    display: block;                                         /* PROD: block (not flex) */
}
.domino-nl-left h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;                                        /* PROD: 23px */
    font-weight: 600;                                       /* PROD: 600 */
    line-height: 27.6px;                                    /* PROD: 27.6px */
    letter-spacing: -0.3px;                                 /* PROD: -0.3px */
    color: #66391c;                                         /* PROD: rgb(102,57,28) */
    margin: 20px 0;                                         /* PROD: 20px top+bottom */
}
.domino-nl-right {
    flex: 0 0 51%;
    padding: 60px 0 45px 32px;                              /* PROD exact */
}
.domino-nl-form input[type="text"],
.domino-nl-form input[type="email"] {
    width: 330px; max-width: 100%;                          /* PROD: 330px */
    padding: 11px 7px;                                      /* PROD exact */
    margin-bottom: 10px;                                    /* PROD: 10px */
    border: 1px solid #ced4da; border-radius: 0;            /* PROD: 0 radius */
    font-size: 15px; font-weight: 600;                      /* PROD: 15px/600 */
    font-family: Arial, Helvetica, sans-serif;
    color: #464749; letter-spacing: 0.6px;                  /* PROD: 0.6px */
    line-height: 18.45px;                                   /* PROD exact — prevents tall inputs */
    box-sizing: border-box; display: block;                 /* PROD: block */
}
.domino-nl-form input::placeholder {
    color: #6c757d; font-weight: 400; text-transform: uppercase;
    font-size: 13px;
}
.domino-nl-form label {
    display: inline-block;                                  /* PROD: inline-block */
    font-size: 14px; font-weight: 400;                     /* PROD: 14px/400 */
    color: #464749; margin-bottom: 10px;                    /* PROD: 10px */
    text-transform: uppercase; letter-spacing: 0.28px;      /* PROD */
    font-family: sans-serif;
}
.domino-nl-form select {
    width: 330px; max-width: 100%;                          /* PROD: 330px */
    padding: 16px 7px 14px;                                 /* PROD exact */
    margin-bottom: 10px;
    border: 1px solid #ced4da; border-radius: 0;
    font-size: 15px; font-weight: 600;                      /* PROD: 15px/600 */
    font-family: Arial, Helvetica, sans-serif;
    color: #616870; letter-spacing: 0.6px;                  /* PROD */
    text-transform: uppercase; line-height: 18.45px;        /* PROD */
    box-sizing: border-box; display: block;
    background-color: #fff;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 16px 12px;                             /* PROD exact */
    background-position: calc(100% - 12px) 50%;             /* PROD exact */
}
.domino-nl-permisos-label {
    font-size: 14px; font-weight: 400; color: #464749;     /* PROD: 14px/400 */
    margin: 0 0 10px; text-transform: uppercase;
    letter-spacing: 0.28px; font-family: sans-serif;
    display: inline-block;                                  /* PROD */
}
.domino-nl-permisos-desc {
    font-size: 16px; color: #333; line-height: 24px;        /* PROD: 16px, line-height 24px */
    margin: 0 0 16px; width: 330px; max-width: 100%;        /* PROD: 330px width */
    font-family: Arial, Helvetica, sans-serif;
}
.domino-nl-check {
    display: inline-block;                                  /* PROD: inline-block */
    font-size: 14px; color: #464749;                        /* PROD: 14px */
    margin-bottom: 10px; font-weight: 400 !important;
    text-transform: uppercase; letter-spacing: 0.28px;
    font-family: sans-serif;
}
.domino-nl-check input[type="checkbox"] {
    width: 16px; height: 16px; vertical-align: middle; margin-right: 6px;
}
.domino-nl-auth {
    font-size: 13px; color: #666; line-height: 1.4; margin: 10px 0 0;
    width: 330px; max-width: 100%;
}
.domino-nl-auth a { color: #66391c; text-decoration: underline; }
.domino-nl-btn-bar {
    border-top: 1px solid #ddd;                             /* PROD: 1px solid #ddd */
    padding: 4.8px 16px 8px 6.4px;                          /* PROD exact */
    margin-top: 8px;                                        /* PROD: 8px */
    background: #fff;
    text-align: left;                                       /* PROD: left aligned */
}
.domino-nl-submit {
    background: #66391c; color: #fff; border: none;
    padding: 10px;                                          /* PROD: 10px all */
    font-size: 14px; font-weight: 400;                      /* PROD: 14px/400 */
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer; text-transform: uppercase;
    border-radius: 10px;                                    /* PROD: 10px */
    margin: 7px 5.6px;                                      /* PROD exact */
    letter-spacing: normal;                                 /* PROD: normal */
}
.domino-nl-submit:hover { background: #4a2714; }

@media (max-width: 768px) {
    .domino-nl-overlay { align-items: flex-start; padding: 10px 0; }
    .domino-nl-dialog { max-height: 95vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .domino-nl-body { flex-direction: column; }
    .domino-nl-left, .domino-nl-right { flex: none; width: 100%; }
    .domino-nl-left { padding: 15px 20px; }
    .domino-nl-left h2 { font-size: 18px; line-height: 24px; }
    .domino-nl-right { padding: 10px 20px 10px; }
    .domino-nl-banner { height: 120px; }
    .domino-nl-close { top: 4px; right: 8px; background: rgba(0,0,0,0.5);
        border: none; color: #fff; width: 28px; height: 28px;
        font-size: 18px; line-height: 24px; border-radius: 50%; }
    .domino-nl-form input[type="text"],
    .domino-nl-form input[type="email"],
    .domino-nl-form select { width: 100%; font-size: 13px; }
    .domino-nl-permisos-desc { width: 100%; font-size: 13px; }
    .domino-nl-submit { width: 100%; padding: 12px; }
    .domino-nl-btn-bar { text-align: center; padding: 10px 16px; }
}