/*
Theme Name:   Despenssa
Theme URI:    https://despenssa.co/
Description:  Tema hijo de Astra para el sitio Despenssa de la red multisite Azzorti. Look and feel del Manual de Marca Despenssa: verde #22542E, naranja #F55D17, beige #D5BE96, tipografia Metropolis. Basado en el mockup https://afterprojects.co/azzorti/looknfeel-despenssa/v4/
Author:       David Neira
Author URI:   https://azzorti.com/
Template:     astra
Version:      1.0.0
Text Domain:  despenssa
Tags:         e-commerce, catalog, full-width-template, custom-colors
*/

/* Bootstrap: NO se incluye en este tema.
   Solo hace falta si alguna pagina de /dp usa clases .row o .col-N .
   En ese caso copia bootstrap.min.css desde astra-child/ a esta carpeta y
   descomenta la linea de abajo. El grid propio (.dp-grid) no lo necesita.

   @import "bootstrap.min.css";
*/

/* ==========================================================================
   1. TIPOGRAFÍA
   Metropolis es la tipografía del manual; no está en Google Fonts, se
   autohospeda en /fonts. Arial queda como sustituto de sistema (autorizado
   por el propio manual).
   ========================================================================== */
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
:root {
    /* Marca */
    --dp-green:        #22542E;   /* institucional */
    --dp-green-800:    #1A4023;   /* hover / oscuro */
    --dp-green-600:    #357443;
    --dp-green-100:    #E7EFE9;   /* fondo suave */
    --dp-orange:       #F55D17;   /* acción */
    --dp-orange-700:   #D24A0C;   /* hover */
    --dp-orange-100:   #FDEADF;
    --dp-beige:        #D5BE96;   /* calidez */
    --dp-beige-100:    #F5EFE3;

    /* Neutrales */
    --dp-ink:          #1C1C1C;
    --dp-ink-70:       #4B4B4B;
    --dp-ink-45:       #8A8A8A;
    --dp-line:         #E4E1DA;
    --dp-bg:           #FFFFFF;
    --dp-bg-soft:      #FAF8F4;

    /* Semánticos */
    --dp-ok:           #2E7D46;
    --dp-warn:         #C77700;
    --dp-err:          #C0392B;

    /* Acentos de categoría — SOLO como acento (chips, filetes, iconos).
       Ajustar a los hex exactos del manual antes de publicar. */
    --dp-cat-alimentos:  #C8562A;
    --dp-cat-personal:   #7A6AA8;
    --dp-cat-hogar-limp: #2E7FA8;
    --dp-cat-hogar:      #A88B3C;

    /* Tipografía */
    --dp-font: 'Metropolis', Arial, Helvetica, sans-serif;

    /* Radios, sombras, layout */
    --dp-r-xs: 4px;
    --dp-r-sm: 8px;
    --dp-r-md: 14px;
    --dp-r-lg: 22px;
    --dp-r-pill: 999px;
    --dp-sh-1: 0 1px 2px rgba(28, 28, 28, .06);
    --dp-sh-2: 0 4px 16px rgba(28, 28, 28, .08);
    --dp-sh-3: 0 12px 32px rgba(28, 28, 28, .12);
    --dp-max: 1140px;          /* ancho del contenedor interno */
    --dp-gutter: 24px;
    --dp-header-h: 78px;

    /* Compat: la hoja anterior usaba utilidades tipo Tailwind que nunca se
       definieron en :root. Se declaran aquí para que no rompan colores. */
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-border-opacity: 1;
}

/* ==========================================================================
   3. BASE — se corrige el layout heredado
   La hoja anterior hacía `html { width: 80%; margin: 0 auto }`, lo que impide
   los banners y el header/footer a sangre completa del mockup. Ahora el
   documento es 100% y el ancho lo controla el contenedor interno.
   ========================================================================== */
html {
    width: 100%;
    margin: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    background-color: var(--dp-bg);
    color: var(--dp-ink);
    font-family: var(--dp-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img, svg, video { max-width: 100%; height: auto; }

a {
    cursor: pointer;
    font-family: var(--dp-font);
    color: var(--dp-green);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--dp-orange); }

/* Foco visible (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--dp-orange);
    outline-offset: 2px;
    border-radius: var(--dp-r-xs);
}

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

/* ==========================================================================
   4. CONTENEDOR / GRID
   ========================================================================== */
.ast-container,
.dp-wrap {
    width: 100%;
    max-width: var(--dp-max);
    margin-inline: auto;
    padding-inline: var(--dp-gutter);
}

.site-content .ast-container {
    display: block;      /* antes: flex + margin-left 2rem */
    margin-top: 0;
}

#primary {
    margin-top: 0 !important;
    margin-bottom: 64px !important;
}

.dp-bleed {                /* sección a sangre con contenido centrado */
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

.dp-section        { padding-block: 56px; }
.dp-section--soft  { background: var(--dp-bg-soft); }
.dp-section--beige { background: var(--dp-beige-100); }
.dp-section--green { background: var(--dp-green); color: #fff; }
.dp-section--green a,
.dp-section--green h2,
.dp-section--green h3 { color: #fff; }

.dp-grid { display: grid; gap: 20px; }
.dp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dp-grid--5 { grid-template-columns: repeat(5, 1fr); }
.dp-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ==========================================================================
   5. ESCALA TIPOGRÁFICA
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--dp-font);
    color: var(--dp-green);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

h1, .entry-content h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; }
h2, .entry-content h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
h3, .entry-content h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); }
h4, .entry-content h4 { font-size: 1.125rem; font-weight: 600; }
h5, .entry-content h5 { font-size: 1rem;     font-weight: 600; }
h6, .entry-content h6 { font-size: .9375rem; font-weight: 600; }

p {
    font-family: var(--dp-font);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--dp-ink-70);
    margin: 0 0 1rem;
}

.dp-eyebrow {              /* etiqueta pequeña sobre el título */
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dp-orange);
    margin-bottom: .5rem;
}

.dp-lead { font-size: 1.0625rem; color: var(--dp-ink-70); max-width: 62ch; }
.dp-muted { color: var(--dp-ink-45); font-size: .875rem; }
.dp-price { font-size: 1.5rem; font-weight: 800; color: var(--dp-green); }
.dp-price-old { font-size: 1rem; color: var(--dp-ink-45); text-decoration: line-through; margin-left: .5rem; }

/* Filete de título — reemplaza la barra negra/amarilla anterior */
.main-title,
.dp-title {
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--dp-green);
    margin-bottom: 20px;
}
.main-title::after,
.dp-title::after,
.item-section-title::after {
    content: "";
    display: block;
    height: 6px;
    width: 96px;
    margin-top: 1rem;
    border-radius: var(--dp-r-pill);
    background-color: var(--dp-orange);
}
.main-title-no-line::after { content: normal; }
.main-title-sm { font-size: 1.5rem; line-height: 2rem; }

/* Encabezado de sección con enlace a la derecha (mockup: “Nuestras
   categorías … Explora todo el catálogo →”) */
.dp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.dp-section-head h2 { margin: 0; }
.dp-section-link {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--dp-orange);
    white-space: nowrap;
}
.dp-section-link:hover { color: var(--dp-orange-700); text-decoration: underline; }

/* ==========================================================================
   6. BOTONES
   ========================================================================== */
.dp-btn,
.axc-btn,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: var(--dp-r-pill);
    background-color: var(--dp-orange);
    color: #fff !important;
    font-family: var(--dp-font);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    margin: 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.dp-btn:hover,
.axc-btn:hover,
.elementor-button.elementor-size-sm:hover,
.wp-block-button__link:hover {
    background-color: var(--dp-orange-700);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Secundario: verde institucional */
.dp-btn--green {
    background-color: var(--dp-green);
    color: #fff !important;
}
.dp-btn--green:hover { background-color: var(--dp-green-800); }

/* Contorno — reemplaza .axc-btn-yellow-outline */
.dp-btn--outline,
.axc-btn-yellow-outline {
    background-color: transparent;
    border-color: var(--dp-green);
    color: var(--dp-green) !important;
}
.dp-btn--outline:hover,
.axc-btn-yellow-outline:hover {
    background-color: var(--dp-green);
    color: #fff !important;
}

.dp-btn--ghost {
    background: transparent;
    border-color: var(--dp-line);
    color: var(--dp-ink) !important;
}
.dp-btn--ghost:hover { border-color: var(--dp-green); color: var(--dp-green) !important; background: transparent; }

.dp-btn--sm    { min-height: 38px; padding: 0 16px; font-size: .8125rem; }
.dp-btn--block { width: 100%; }
.dp-btn[disabled], .dp-btn.is-disabled {
    background: var(--dp-line); color: var(--dp-ink-45) !important;
    cursor: not-allowed; transform: none;
}

/* Enlace CTA con flecha */
.dp-link-arrow { font-weight: 600; color: var(--dp-orange); }
.dp-link-arrow::after { content: " →"; }

/* ==========================================================================
   7. TOPBAR + HEADER
   Mockup: franja superior verde con “Envíos a todo el país / Envío gratis…”
   y enlaces de utilidad; luego header blanco con logo, buscador y
   “Soy asesora”.
   ========================================================================== */
.dp-topbar {
    background: var(--dp-green);
    color: #fff;
    font-size: .8125rem;
}
.dp-topbar .dp-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}
.dp-topbar a { color: #fff; opacity: .9; }
.dp-topbar a:hover { opacity: 1; color: var(--dp-beige); }
.dp-topbar-links { display: flex; gap: 20px; }
.dp-topbar strong { color: var(--dp-beige); font-weight: 700; }

.dp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--dp-bg);
    border-bottom: 1px solid var(--dp-line);
}
.dp-header .dp-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--dp-header-h);
}
.dp-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.dp-logo img { height: 58px; width: auto; }

/* Buscador */
.dp-search { flex: 1 1 auto; position: relative; max-width: 560px; }
.dp-search input[type="search"],
.dp-search input[type="text"] {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 18px;
    border: 1.5px solid var(--dp-line);
    border-radius: var(--dp-r-pill);
    background: var(--dp-bg-soft);
    font-family: var(--dp-font);
    font-size: .9375rem;
    color: var(--dp-ink);
}
.dp-search input::placeholder { color: var(--dp-ink-45); }
.dp-search input:focus {
    border-color: var(--dp-green);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px var(--dp-green-100);
}
.dp-search button {
    position: absolute;
    right: 4px; top: 4px;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--dp-green);
    color: #fff;
    cursor: pointer;
}
.dp-search button:hover { background: var(--dp-orange); }

.dp-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dp-icon-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dp-line);
    border-radius: 50%;
    background: #fff;
    color: var(--dp-green);
}
.dp-icon-btn:hover { border-color: var(--dp-green); background: var(--dp-green-100); }
.dp-icon-btn[data-count]::after {
    content: attr(data-count);
    position: absolute;
    transform: translate(14px, -14px);
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: var(--dp-r-pill);
    background: var(--dp-orange);
    color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 18px;
    text-align: center;
}

/* Botón “Soy asesora” — sustituye .btn-login/.login amarillos */
.btn-login,
.dp-btn-asesora {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--dp-green);
    border-radius: var(--dp-r-pill);
    background: #fff;
    color: var(--dp-green) !important;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 0;
}
.btn-login:hover,
.dp-btn-asesora:hover {
    background: var(--dp-green);
    color: #fff !important;
    text-decoration: none;
}
.login { color: var(--dp-green); font-size: .875rem; font-weight: 700; }
.div_login, .lgn_usua { width: auto; margin-left: 0; text-align: right; }

/* Barra de navegación de categorías (Ofertas / Todo sobre / …) */
.dp-nav {
    background: #fff;
    border-bottom: 1px solid var(--dp-line);
}
.dp-nav .dp-wrap { display: flex; align-items: center; gap: 4px; min-height: 52px; overflow-x: auto; }
.dp-nav a,
.menu-link,
.elementor-nav-menu .elementor-item {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--dp-r-sm);
    color: var(--dp-ink) !important;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
}
.dp-nav a:hover,
.menu-link:hover,
.elementor-nav-menu .elementor-item:hover {
    background: var(--dp-green-100);
    color: var(--dp-green) !important;
}
.dp-nav a.is-active,
.elementor-item.elementor-item-active.menu-link {
    background: var(--dp-green) !important;
    color: #fff !important;
    text-decoration: none;
}

/* Subrayado del puntero Elementor: de amarillo a naranja */
.e--pointer-double-line .elementor-item::after,
.e--pointer-double-line .elementor-item::before,
.e--pointer-overline .elementor-item::after,
.e--pointer-overline .elementor-item::before,
.e--pointer-underline .elementor-item::after,
.e--pointer-underline .elementor-item::before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after {
    background-color: var(--dp-orange);
    height: 3px;
}

/* Header de Astra: se oculta a favor del header propio del mockup.
   Si se usa el header nativo de Astra, comentar este bloque. */
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
    min-height: var(--dp-header-h);
    display: none;
}
.ast-single-post .entry-title, .page-title { display: none; }

/* ==========================================================================
   8. MIGAS
   ========================================================================== */
.dp-breadcrumb,
.breadcrumbs-anywhere {
    position: static;
    width: auto;
    margin: 20px 0 24px;
    font-size: .8125rem;
    color: var(--dp-ink-45);
}
.dp-breadcrumb a { color: var(--dp-ink-70); }
.dp-breadcrumb a:hover { color: var(--dp-orange); }
.dp-breadcrumb span + span::before { content: "›"; margin: 0 .5rem; color: var(--dp-ink-45); }

/* ==========================================================================
   9. HERO / BANNERS
   ========================================================================== */
.dp-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 420px;
    border-radius: var(--dp-r-lg);
    overflow: hidden;
    background: var(--dp-beige-100) center/cover no-repeat;
    margin-block: 28px;
}
.dp-hero__content {
    position: relative;
    z-index: 2;
    max-width: 540px;
    padding: 48px;
    color: #fff;
}
.dp-hero--light .dp-hero__content { color: var(--dp-ink); }
.dp-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(34,84,46,.82) 0%, rgba(34,84,46,.35) 55%, rgba(34,84,46,0) 100%);
    z-index: 1;
}
.dp-hero--light::after {
    background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 100%);
}
.dp-hero h1 { color: inherit; margin-bottom: .5rem; }
.dp-hero p  { color: inherit; opacity: .95; }

/* Banner promocional intermedio (verde con CTA) */
.dp-promo {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
    gap: 24px;
    padding: 40px;
    border-radius: var(--dp-r-lg);
    background: var(--dp-green);
    color: #fff;
}
.dp-promo h2, .dp-promo h3 { color: #fff; margin-bottom: .35rem; }
.dp-promo p { color: rgba(255,255,255,.88); margin: 0; }
.dp-promo .dp-btn { justify-self: end; }

/* ==========================================================================
   10. TARJETAS
   ========================================================================== */
.dp-card {
    background: #fff;
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-r-md);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dp-card:hover {
    box-shadow: var(--dp-sh-2);
    border-color: transparent;
    transform: translateY(-2px);
}
.dp-card__body { padding: 18px; }

/* Categoría */
.dp-card-cat {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--dp-r-md);
    overflow: hidden;
    background: var(--dp-beige-100) center/cover no-repeat;
}
.dp-card-cat__label {
    position: absolute;
    left: 14px; bottom: 14px; right: 14px;
    padding: 10px 14px;
    border-radius: var(--dp-r-sm);
    background: rgba(255,255,255,.94);
    color: var(--dp-green);
    font-weight: 700;
    font-size: .9375rem;
}
.dp-card-cat:hover .dp-card-cat__label { background: var(--dp-orange); color: #fff; }

/* Producto */
.dp-card-prod { position: relative; display: flex; flex-direction: column; }
.dp-card-prod__media {
    aspect-ratio: 1 / 1;
    background: var(--dp-bg-soft) center/contain no-repeat;
    padding: 12px;
}
.dp-card-prod__brand { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-ink-45); }
.dp-card-prod__name  { font-size: .9375rem; font-weight: 600; color: var(--dp-ink); margin: 4px 0 8px; min-height: 2.6em; }
.dp-card-prod__foot  { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Chips y badges */
.dp-badge {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 10px;
    border-radius: var(--dp-r-pill);
    background: var(--dp-green-100);
    color: var(--dp-green);
    font-size: .75rem; font-weight: 700;
}
.dp-badge--oferta { position: absolute; top: 12px; left: 12px; background: var(--dp-orange); color: #fff; }
.dp-badge--nuevo  { background: var(--dp-beige); color: var(--dp-green-800); }
.dp-badge--ok     { background: #E6F2EA; color: var(--dp-ok); }
.dp-badge--warn   { background: #FDF2DF; color: var(--dp-warn); }

.dp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-r-pill);
    background: #fff;
    font-size: .8125rem; font-weight: 500; color: var(--dp-ink);
    cursor: pointer;
}
.dp-chip:hover { border-color: var(--dp-green); color: var(--dp-green); }
.dp-chip.is-on { background: var(--dp-green); border-color: var(--dp-green); color: #fff; }

/* Acentos de categoría (filete izquierdo) */
.dp-acc-alimentos  { border-left: 4px solid var(--dp-cat-alimentos); }
.dp-acc-personal   { border-left: 4px solid var(--dp-cat-personal); }
.dp-acc-hogar-limp { border-left: 4px solid var(--dp-cat-hogar-limp); }
.dp-acc-hogar      { border-left: 4px solid var(--dp-cat-hogar); }

/* ==========================================================================
   11. (retirado) Los componentes de panel de asesora — KPIs, accesos y linea
   de estado de pedido — se quitaron por indicacion: eran maqueta y no van.
   Si algun dia se construye el panel, vive en el stack Laravel, no aqui.
   ========================================================================== */

/* ==========================================================================
   12. TABS
   ========================================================================== */
.dp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dp-line); overflow-x: auto; }
.dp-tab {
    padding: 12px 18px;
    border: 0; background: transparent;
    font-family: var(--dp-font); font-size: .9375rem; font-weight: 600;
    color: var(--dp-ink-45); cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.dp-tab:hover { color: var(--dp-green); }
.dp-tab.is-on { color: var(--dp-green); border-bottom-color: var(--dp-orange); }

/* ==========================================================================
   13. TABLAS
   ========================================================================== */
.dp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dp-table thead th {
    padding: 12px 14px;
    background: var(--dp-green-100);
    color: var(--dp-green);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.dp-table td { padding: 14px; border-bottom: 1px solid var(--dp-line); color: var(--dp-ink-70); }
.dp-table tbody tr:hover td { background: var(--dp-bg-soft); }
.dp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dp-table tfoot td { font-weight: 700; color: var(--dp-ink); border-top: 2px solid var(--dp-green); }

/* ==========================================================================
   14. FORMULARIOS (Elementor Forms, CF7, WP)
   ========================================================================== */
.dp-field { margin-bottom: 18px; }
.dp-label,
.elementor-field-label {
    display: block;
    font-size: .8125rem; font-weight: 600;
    color: var(--dp-ink-70);
    margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
select, textarea,
.elementor-field-textual,
.elementor-field:not(.elementor-select-wrapper) {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--dp-line) !important;
    border-radius: var(--dp-r-sm) !important;
    background: #fff;
    font-family: var(--dp-font) !important;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--dp-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus,
.elementor-field-textual:focus {
    border-color: var(--dp-green) !important;
    box-shadow: 0 0 0 3px var(--dp-green-100);
    outline: none;
}
.dp-help { font-size: .75rem; color: var(--dp-ink-45); margin-top: 4px; }
.dp-error { font-size: .75rem; color: var(--dp-err); margin-top: 4px; font-weight: 600; }
input[aria-invalid="true"] { border-color: var(--dp-err) !important; }

/* Bloque de horario/nota (antes .text_horario, borde negro) */
.text_horario,
.dp-note {
    width: 100%;
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--dp-line);
    border-left: 5px solid var(--dp-orange);
    border-radius: var(--dp-r-sm);
    background: var(--dp-bg-soft);
    font-size: .9375rem;
}

/* Newsletter (banda beige del mockup) */
.dp-newsletter {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 28px;
    padding: 36px 40px;
    border-radius: var(--dp-r-lg);
    background: var(--dp-beige-100);
    border: 1px solid var(--dp-beige);
}
.dp-newsletter h4 { margin: 0 0 4px; font-size: 1.25rem; }
.dp-newsletter p  { margin: 0; }
.dp-newsletter form { display: flex; gap: 10px; }
.dp-newsletter input { background: #fff; }

/* ==========================================================================
   15. BARRA DE CONFIANZA (entrega / ofertas / marcas / pago seguro)
   ========================================================================== */
.dp-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 28px 0;
    border-top: 1px solid var(--dp-line);
    border-bottom: 1px solid var(--dp-line);
}
.dp-trust__item { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; color: var(--dp-green); }
.dp-trust__item svg, .dp-trust__item img { width: 34px; height: 34px; flex: 0 0 auto; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
#footer, #footer_center { width: 100%; }

.dp-footer {
    background: var(--dp-green);
    color: rgba(255,255,255,.85);
    padding-top: 56px;
    font-size: .9375rem;
}
.dp-footer h5 {
    color: #fff;
    font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 14px;
}
.dp-footer a { color: rgba(255,255,255,.85); display: inline-block; padding: 4px 0; }
.dp-footer a:hover { color: var(--dp-beige); text-decoration: underline; }
.dp-footer__cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    padding-bottom: 40px;
}
.dp-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .8125rem;
}
.dp-footer__legal { display: flex; gap: 14px; }

/* Iconos sociales — antes gris con hover negro */
.elementor-social-icon,
.dp-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    margin-right: 10px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.14);
    color: #fff;
}
.elementor-social-icon:hover,
.dp-social a:hover { background-color: var(--dp-orange); }
.elementor-social-icon i { color: #fff; }
.elementor-social-icon i:hover { color: #fff; }

/* ==========================================================================
   17. CATÁLOGOS (páginas /catalogos)
   ========================================================================== */
.dp-catalogo { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }
.dp-catalogo__item {
    position: relative;
    border-radius: var(--dp-r-md);
    overflow: hidden;
    background: var(--dp-bg-soft);
    box-shadow: var(--dp-sh-1);
}
.dp-catalogo__item img { width: 100%; display: block; }
.dp-catalogo__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px;
    background: #fff;
}
/* Se neutralizan los posicionamientos absolutos rígidos anteriores */
.link_catalogo, #btn_catalogo, #text_catalogo {
    position: static; width: auto; margin: 0; top: auto; left: auto;
}
#catalogo_act, #catalogo_pos { width: 100%; height: auto; }

/* ==========================================================================
   18. CHAT / FLOTANTES
   ========================================================================== */
#boto_chat { background-color: var(--dp-green) !important; color: #fff !important; }
#boto_chat:hover { background-color: var(--dp-orange) !important; }
.boto_opci { font-size: .875rem !important; }
#panel_chat { width: 22rem !important; max-width: 92vw; height: 34rem !important; bottom: 0 !important; right: 1.5rem !important; }
#img_serv { width: 128px !important; bottom: 1.5rem !important; }

/* ==========================================================================
   19. UTILIDADES
   ========================================================================== */
.dp-mt-0 { margin-top: 0 !important; }
.dp-mb-0 { margin-bottom: 0 !important; }
.dp-center { text-align: center; }
.dp-center .main-title::after,
.dp-center .dp-title::after { margin-inline: auto; }
.dp-justify { text-align: justify; }
.dp-stack { display: flex; flex-direction: column; gap: 12px; }
.dp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Contenido editorial (Quiénes somos, Términos, Preguntas frecuentes) */
#article, #article_middle, #article_somos, #article_terminos, #article_frecuentes,
#text_editor, #text_editor_fra, .dp-prose {
    width: 100%;
    max-width: 76ch;
    padding: 0;
    margin: 0 0 32px;
    height: auto;
    text-align: left;
}
.dp-prose h2 { margin-top: 2rem; }
.dp-prose ul, .dp-prose ol { padding-left: 1.25rem; color: var(--dp-ink-70); }
.dp-prose li { margin-bottom: .5rem; }

/* ==========================================================================
   20. NEUTRALIZACIÓN DE HACKS LEGACY
   La hoja anterior posicionaba con rem absolutos y con IDs de Elementor
   (.elementor-23 …) atados a una página concreta. Se anulan para que el
   layout responda al grid. Borrar este bloque cuando las páginas se hayan
   rearmado en Elementor.
   ========================================================================== */
#home_section,
.elementor-element-f78017a,
.elementor-element-73de1fa,
.elementor-element-d32ea4b,
.elementor-element-70cbf22,
.elementor-element-d9c4e5a,
.elementor-element-b7170de,
#content_center,
.section_middle,
.section_art_middle,
#text_register,
.imgpar_left,
.figure-video-link,
.figure-video-link-middle,
.politica_ases_miga,
#politica_ases_title,
#politica_text,
#pdf_image,
#btn_politica,
#contact, #btn_contact, #form_contact, #form_contact_mail,
#form-field-field_9cc5a8f-0,
#somos_conoce {
    position: static;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    left: auto; top: auto; bottom: auto; right: auto;
    padding-left: 0;
    padding-right: 0;
}

.elementor-column.elementor-col-33,
.elementor-column.elementor-col-66,
.elementor-column.elementor-col-80,
.elementor-column[data-col="33"],
.elementor-column[data-col="66"],
.elementor-column[data-col="80"] { width: 100%; margin-top: 0; }

.elementor-widget-heading .elementor-heading-title {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem) !important;
    font-weight: 800;
    line-height: 1.15;
    text-decoration-line: none;
    color: var(--dp-green);
    width: auto;
}
.elementor-widget:not(:last-child) { margin-bottom: 24px; }
.elementor-widget-spacer { height: auto !important; }
.elementor-widget-image { text-align: left; margin-top: 0; }
.n2-ss-slider .n2-ss-slider-wrapper-inside .n2-ss-slider-controls { width: 100% !important; margin-left: 0; }
.sub-arrow { display: none; }

/* CTA de Elementor: se quita el absolute y el borde amarillo */
.elementor-cta__button.elementor-button {
    position: static;
    margin: 12px 0 0;
    border-width: 0;
    background-color: var(--dp-orange) !important;
    color: #fff !important;
    font-size: .9375rem !important;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: var(--dp-r-pill);
}
.elementor-cta__button.elementor-button:hover {
    background-color: var(--dp-orange-700) !important;
    color: #fff !important;
}
.elementor-cta--skin-cover .elementor-cta__content { min-height: 260px; margin-left: 0; padding: 32px; }
.elementor-cta__title.elementor-cta__content-item.elementor-content-item {
    font-family: var(--dp-font);
    width: auto;
    color: inherit;
}
.elementor-cta__bg-overlay { mix-blend-mode: normal; }

/* Ítems de menú de banderas país que traían el amarillo Azzorti */
.menu-item-2089 .menu-link,
.menu-item-2186 .menu-link {
    background-color: var(--dp-green-100) !important;
    color: var(--dp-green) !important;
    font-size: .9375rem !important;
    font-family: var(--dp-font) !important;
}

/* ==========================================================================
   21. RESPONSIVE
   Se elimina el `@media (orientation: portrait)` anterior (detectaba mal el
   móvil y hacía body 120% / html 70%). Ahora breakpoints por ancho.
   ========================================================================== */
@media (max-width: 1200px) {
    :root { --dp-max: 1100px; }
    .dp-grid--6 { grid-template-columns: repeat(4, 1fr); }
    .dp-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    :root { --dp-gutter: 20px; }
    .dp-grid--4, .dp-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .dp-promo { grid-template-columns: 1fr; }
    .dp-promo .dp-btn { justify-self: start; }
    .dp-newsletter { grid-template-columns: 1fr; }
    .dp-trust { grid-template-columns: repeat(2, 1fr); }
    .dp-hero { min-height: 340px; }
    .dp-hero__content { padding: 32px; max-width: 100%; }
}

@media (max-width: 782px) {
    .dp-header .dp-wrap { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
    .dp-search { order: 3; flex-basis: 100%; max-width: 100%; }
    .dp-header-actions { margin-left: auto; }
    .dp-topbar .dp-wrap { justify-content: center; text-align: center; }
    .dp-topbar-links { display: none; }
    .dp-grid--3, .dp-grid--4, .dp-grid--5, .dp-grid--6 { grid-template-columns: repeat(2, 1fr); }
    .dp-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .dp-section { padding-block: 40px; }
    .dp-catalogo { grid-template-columns: 1fr; }
    .site-content .ast-container { margin-left: 0; }
}

@media (max-width: 560px) {
    :root { --dp-gutter: 16px; }
    body { font-size: .9375rem; }
    .dp-grid--2, .dp-grid--3, .dp-grid--4, .dp-grid--5, .dp-grid--6 { grid-template-columns: 1fr; }
    .dp-grid--prod { grid-template-columns: repeat(2, 1fr); }  /* productos siguen en 2 */
    .dp-footer__cols { grid-template-columns: 1fr; }
    .dp-trust { grid-template-columns: 1fr; }
    .dp-hero { min-height: 280px; border-radius: var(--dp-r-md); }
    .dp-newsletter { padding: 24px 20px; }
    .dp-newsletter form { flex-direction: column; }
    .dp-btn, .axc-btn { width: 100%; }
    .dp-footer__bottom { flex-direction: column; align-items: flex-start; }
    .dp-logo img { height: 36px; }
}

/* Impresión: pedidos y facturas de asesora */
@media print {
    .dp-topbar, .dp-header, .dp-nav, .dp-footer, #img_serv, #panel_chat, .dp-btn { display: none !important; }
    body { color: #000; }
    .dp-card { border: 1px solid #999; box-shadow: none; }
}

/* ==========================================================================
   22. (INACTIVA) Estilaba header.php / footer.php / front-page.php, hoy en .off.
   Solo siguen vivas las reglas de contenedor. No borrar sin revisar.
   ========================================================================== */

/* Menus de WordPress: wp_nav_menu imprime <li> y hay que quitarles la vineta
   y la sangria del tema padre. */
.dp-nav ul,
.dp-topbar ul,
.dp-topbar-links ul,
.dp-footer ul,
.dp-footer__legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dp-nav ul { display: flex; align-items: center; gap: 4px; }
.dp-nav li,
.dp-topbar li { display: inline-flex; }
.dp-topbar-links ul { display: flex; gap: 20px; }
.dp-footer li { display: block; }
.dp-footer__legal ul { display: flex; gap: 14px; }

/* El item activo del menu principal */
.dp-nav .current-menu-item > a,
.dp-nav .current_page_item > a {
    background: var(--dp-green) !important;
    color: #fff !important;
}

/* Logo en texto cuando no hay logo cargado */
.dp-logo-texto {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dp-green);
    letter-spacing: -.02em;
}

/* Astra envuelve el contenido en #content > .ast-container; aqui el
   contenedor ya trae su ancho y padding, asi que se anula el doble margen */
.dp-site #content > .ast-container { max-width: var(--dp-max); }
.dp-site #primary { width: 100%; float: none; padding: 0; }
.dp-site .site-content { padding-top: 0; }

/* Sin subrayado en la navegacion propia */
.dp-topbar a,
.dp-nav a,
.dp-footer a,
.dp-logo,
.dp-btn,
.dp-btn-asesora,
.dp-section-link,
.dp-card-cat,
.dp-card-prod a { text-decoration: none; }

/* ==========================================================================
   23. PORTADA (front-page.php)
   ========================================================================== */

/* Llamados a la accion */
.dp-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 36px 32px;
    border-radius: var(--dp-r-lg);
    min-height: 200px;
}
.dp-cta h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); }
.dp-cta p  { margin: 0; }
.dp-cta .dp-btn { align-self: flex-start; }

.dp-cta--verde        { background: var(--dp-green); }
.dp-cta--verde h3     { color: #fff; }
.dp-cta--verde p      { color: rgba(255,255,255,.88); }

.dp-cta--beige        { background: var(--dp-beige-100); border: 1px solid var(--dp-beige); }
.dp-cta--beige h3     { color: var(--dp-green); }

/* Seccion con fondo suave que sangra a los lados del contenedor */
.dp-bleed-soft {
    position: relative;
    padding-inline: var(--dp-gutter);
    border-radius: var(--dp-r-lg);
}

/* Catalogos en la portada: dos piezas grandes */
.dp-home .dp-catalogo { grid-template-columns: repeat(2, 1fr); }
.dp-home .dp-catalogo__item img { aspect-ratio: 1024 / 712; object-fit: cover; }

@media (max-width: 782px) {
    .dp-home .dp-catalogo { grid-template-columns: 1fr; }
    .dp-cta { padding: 28px 24px; min-height: 0; }
}


/* ==========================================================================
   ==========================================================================
   PARTE II — SITIO REAL
   Todo lo que sigue actúa sobre las páginas que ya existen, armadas en
   Elementor. Antes vivía en Personalizar > CSS adicional (parches 01, 02 y
   03) y quedó consolidado aquí.

   AL SUBIR ESTE ARCHIVO: vaciar Apariencia > Personalizar > CSS adicional.
   Si se deja el contenido allí, se duplica y estorba al depurar.

   Sobre los !important: el CSS de Elementor va con selectores muy
   específicos (.elementor-23 .elementor-element-xxx) y valores por widget.
   Sin !important no se le gana desde el tema. Se retiran cuando las
   secciones se rearmen en Elementor con las clases dp-.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   24. ANCHO Y LIMPIEZA GENERAL
   ========================================================================== */

/* Astra deja el contenedor en 1956px y el sitio se ve como una columna
   angosta. Conviene además fijarlo en 1140 en Personalizar > Diseño. */
body.dp-site #content > .ast-container,
body.dp-site .ast-container {
    max-width: 1140px !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 24px !important;
}
body.dp-site #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.dp-site .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}

/* Astra imprime una cabecera móvil vacía en escritorio que deja un hueco */
body.dp-site #ast-mobile-header .ast-primary-header-bar {
    min-height: 0;
    border-bottom: 0;
}

/* El título "Inicio" de Astra no aporta en la portada */
body.dp-site.page-id-23 .entry-header,
body.dp-site.page-id-23 .entry-title { display: none; }

/* Evita barra de desplazamiento horizontal por las franjas a sangre.
   OJO: si algo se desborda de verdad, esto lo esconde en lugar de
   arreglarlo. Al depurar un corte por el lado derecho, comentar primero. */
body.dp-site { overflow-x: hidden; }

/* Sin subrayado en navegación y botones; se conserva en texto corrido */
body.dp-site .elementor-item,
body.dp-site .menu-link,
body.dp-site .elementor-button,
body.dp-site .elementor-cta__button,
body.dp-site .btn-login,
body.dp-site .btn-login a,
body.dp-site .lgn_usua a {
    text-decoration: none !important;
}


/* ==========================================================================
   25. CABECERA EN TODAS LAS PÁGINAS

   Cada página tiene su PROPIA copia del header, con IDs de widget
   distintos. Por eso aquí se trabaja por clases y por posición de sección,
   nunca por ID: así aplica en las 17 páginas.

   DEPENDENCIA: la franja de utilidades debe ser la PRIMERA sección de la
   página y la cabecera la SEGUNDA. Si en alguna página el orden cambia,
   esa página se descuadra.

   ARREGLO DE FONDO: un solo Header en Elementor Pro > Theme Builder
   elimina la duplicación y permite volver a selectores simples.
   ========================================================================== */

/* --- Franja superior verde (primera sección) --- */
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child {
    background-color: #22542E !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 calc(50vw - 50% + 24px) !important;
}
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .elementor-item {
    color: #ffffff !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    padding: 12px !important;
    background: transparent !important;
}
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .elementor-item:hover {
    color: #D5BE96 !important;
    background: transparent !important;
}
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .elementor-sub-item {
    color: #1C1C1C !important;
}

/* --- Cabecera (segunda sección) --- */
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) {
    border-bottom: 1px solid #E4E1DA;
    padding-block: 10px;
}
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) > .elementor-container > .elementor-row {
    align-items: center;
}
body.dp-site .elementor-widget-image img[src*="logo-1"] {
    max-height: 40px;
    width: auto;
}

/* Elementor reparte 33% a cada columna y el menú de cinco ítems no cabe:
   por eso se partía en dos líneas. Se reparte 22 / 52 / 26. */
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:first-child { width: 22% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:nth-child(2) { width: 52% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:last-child  { width: 26% !important; }

/* --- Menú principal en pastillas (excluye la franja verde) --- */
body.dp-site .elementor-section-wrap > .elementor-top-section:not(:first-child) .elementor-nav-menu--main .elementor-item {
    color: #1C1C1C !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    padding: 9px 11px !important;
    border-radius: 8px !important;
    margin: 2px !important;
    white-space: nowrap;
}
body.dp-site .elementor-section-wrap > .elementor-top-section:not(:first-child) .elementor-nav-menu--main .elementor-item:hover {
    background: #E7EFE9 !important;
    color: #22542E !important;
}
body.dp-site .elementor-nav-menu--main .elementor-item-active,
body.dp-site .elementor-nav-menu--main .current-menu-item > .elementor-item {
    background: #22542E !important;
    color: #ffffff !important;
}
body.dp-site .elementor-nav-menu--main .elementor-item-active::before,
body.dp-site .elementor-nav-menu--main .elementor-item-active::after { display: none !important; }
body.dp-site .elementor-widget-nav-menu .elementor-nav-menu { flex-wrap: nowrap !important; }

/* Submenús */
body.dp-site .elementor-nav-menu--dropdown {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(28,28,28,.14);
}
body.dp-site .elementor-sub-item {
    color: #1C1C1C !important;
    font-size: .8125rem !important;
    padding: 10px 16px !important;
}
body.dp-site .elementor-sub-item:hover {
    background: #E7EFE9 !important;
    color: #22542E !important;
}

/* Puntero del menú: naranja en lugar de ámbar */
body.dp-site .e--pointer-underline .elementor-item::after,
body.dp-site .e--pointer-underline .elementor-item::before,
body.dp-site .e--pointer-double-line .elementor-item::after,
body.dp-site .e--pointer-double-line .elementor-item::before,
body.dp-site .e--pointer-overline .elementor-item::after,
body.dp-site .e--pointer-overline .elementor-item::before {
    background-color: #F55D17 !important;
    height: 3px !important;
}

/* --- Bloque SOY ASESORA / INGRESAR --- */
body.dp-site .lgn_usua {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
body.dp-site .lgn_usua > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
body.dp-site .lgn_usua img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50%;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
body.dp-site .login {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    font-size: .625rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    line-height: 1.15 !important;
    color: #22542E !important;
    text-align: left;
}
body.dp-site .btn-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border: 2px solid #22542E !important;
    border-radius: 999px !important;
    background: #fff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    flex: 0 0 auto;
}
body.dp-site .btn-login a {
    color: #22542E !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
}
body.dp-site .btn-login:hover { background: #22542E !important; }
body.dp-site .btn-login:hover a { color: #fff !important; }


/* ==========================================================================
   26. SLIDER Y BANNER

   El banner es 1902x827 (2.3:1) y el widget Slides tiene alto fijo con
   background-size: cover, así que recortaba los lados y se perdían
   "Ahorra hoy", el 30% OFF y "Tu café favorito".

   Lo correcto es subir la versión de 1600x800 (2.0:1) y poner el alto del
   slider en Elementor. Estas reglas son el respaldo por si el widget no
   coopera.
   ========================================================================== */
body.dp-site .elementor-widget-slides .elementor-main-swiper {
    border-radius: 20px;
    overflow: hidden;
}
body.dp-site .elementor-widget-slides .swiper-slide-bg {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.dp-site .elementor-widget-slides .swiper-pagination-bullet {
    background: #fff;
    opacity: .55;
    width: 10px;
    height: 10px;
}
body.dp-site .elementor-widget-slides .swiper-pagination-bullet-active {
    background: #F55D17;
    opacity: 1;
}
body.dp-site .elementor-widget-slides .elementor-swiper-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(34,84,46,.55);
    color: #fff;
}
body.dp-site .elementor-widget-slides .elementor-swiper-button:hover { background: #F55D17; }
/* Las flechas tapaban el texto del banner */
body.dp-site .elementor-widget-slides .elementor-swiper-button-prev { left: 8px !important; }
body.dp-site .elementor-widget-slides .elementor-swiper-button-next { right: 8px !important; }


/* ==========================================================================
   27. PORTADA — WIDGETS DE LA PÁGINA 23

   ÚNICO bloque que depende de IDs de widget de Elementor. Si alguien
   reconstruye una de estas secciones, su ID cambia y hay que actualizarlo
   aquí. Los IDs se leen en el editor o en el HTML (data-id).
   ========================================================================== */

/* --- Catálogos: imágenes dcd95fb y 3f82231, botón 4492bf6 --- */
body.dp-site .elementor-element-371bcde { margin-top: 32px !important; }
body.dp-site .elementor-element-dcd95fb .elementor-image,
body.dp-site .elementor-element-3f82231 .elementor-image {
    border-radius: 14px;
    overflow: hidden;
    background: #FAF8F4;
    box-shadow: 0 1px 2px rgba(28,28,28,.06);
    transition: box-shadow .25s ease, transform .25s ease;
}
body.dp-site .elementor-element-dcd95fb .elementor-image:hover,
body.dp-site .elementor-element-3f82231 .elementor-image:hover {
    box-shadow: 0 12px 32px rgba(28,28,28,.12);
    transform: translateY(-3px);
}
body.dp-site .elementor-element-dcd95fb img,
body.dp-site .elementor-element-3f82231 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
body.dp-site .elementor-element-4492bf6 .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background-color: #F55D17 !important;
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
}
body.dp-site .elementor-element-4492bf6 .elementor-button:hover {
    background-color: #D24A0C !important;
    transform: translateY(-1px);
}

/* --- "Todo Sobre": sección 13affb60, título f4d0d90 --- */
body.dp-site .elementor-element-13affb60 {
    background: #FAF8F4;
    border-radius: 22px;
    padding: 36px 28px !important;
    margin-top: 48px;
}
body.dp-site .elementor-element-f4d0d90 .elementor-heading-title {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem) !important;
    font-weight: 800;
    line-height: 1.15;
    color: #22542E !important;
    text-decoration: none !important;
    width: auto;
    margin-bottom: 0;
}
body.dp-site .elementor-element-f4d0d90 .elementor-heading-title::after {
    content: "";
    display: block;
    height: 6px;
    width: 88px;
    margin-top: 14px;
    border-radius: 999px;
    background: #F55D17;
}

/* --- Cuatro tarjetas de categoría ---
   171027a Ropa · 199acb10 Joyería · 4bd61631 Fragancias · 47a45e40 Hogar
   Salían con barra negra: el widget fija el color del botón y el velo se
   duplicaba con el mix-blend-mode heredado. */
body.dp-site .elementor-element-171027a .elementor-cta,
body.dp-site .elementor-element-199acb10 .elementor-cta,
body.dp-site .elementor-element-4bd61631 .elementor-cta,
body.dp-site .elementor-element-47a45e40 .elementor-cta {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28,28,28,.06);
    transition: box-shadow .25s ease, transform .25s ease;
}
body.dp-site .elementor-element-171027a .elementor-cta:hover,
body.dp-site .elementor-element-199acb10 .elementor-cta:hover,
body.dp-site .elementor-element-4bd61631 .elementor-cta:hover,
body.dp-site .elementor-element-47a45e40 .elementor-cta:hover {
    box-shadow: 0 12px 32px rgba(28,28,28,.14);
    transform: translateY(-3px);
}
body.dp-site .elementor-element-171027a .elementor-cta__bg-overlay,
body.dp-site .elementor-element-199acb10 .elementor-cta__bg-overlay,
body.dp-site .elementor-element-4bd61631 .elementor-cta__bg-overlay,
body.dp-site .elementor-element-47a45e40 .elementor-cta__bg-overlay {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background-image: linear-gradient(to bottom,
        rgba(34,84,46,0) 40%,
        rgba(34,84,46,.45) 75%,
        rgba(34,84,46,.75) 100%) !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__bg,
body.dp-site .elementor-element-199acb10 .elementor-cta__bg,
body.dp-site .elementor-element-4bd61631 .elementor-cta__bg,
body.dp-site .elementor-element-47a45e40 .elementor-cta__bg {
    background-size: cover !important;
    background-position: center !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__content,
body.dp-site .elementor-element-199acb10 .elementor-cta__content,
body.dp-site .elementor-element-4bd61631 .elementor-cta__content,
body.dp-site .elementor-element-47a45e40 .elementor-cta__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 260px !important;
    padding: 18px !important;
    margin: 0 !important;
    background: transparent !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__button-wrapper,
body.dp-site .elementor-element-199acb10 .elementor-cta__button-wrapper,
body.dp-site .elementor-element-4bd61631 .elementor-cta__button-wrapper,
body.dp-site .elementor-element-47a45e40 .elementor-cta__button-wrapper {
    width: 100%;
    margin: 0;
}
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-199acb10 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-4bd61631 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-47a45e40 .elementor-cta__button.elementor-button {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #22542E !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
    mix-blend-mode: normal !important;
}
body.dp-site .elementor-element-171027a .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-199acb10 .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-4bd61631 .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-47a45e40 .elementor-cta:hover .elementor-cta__button.elementor-button {
    background: #F55D17 !important;
    background-color: #F55D17 !important;
    color: #ffffff !important;
}

/* --- CTA "¿Aún no conoces una Asesora?" (8f08d9f) --- */
body.dp-site .elementor-element-8f08d9f .elementor-cta {
    border-radius: 22px !important;
    overflow: hidden !important;
}
body.dp-site .elementor-element-8f08d9f .elementor-cta__bg-overlay {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background-image: linear-gradient(to right,
        rgba(34,84,46,.92) 0%,
        rgba(34,84,46,.70) 45%,
        rgba(34,84,46,.15) 100%) !important;
}
body.dp-site .elementor-element-8f08d9f .elementor-cta__content {
    min-height: 22rem !important;
    padding: 8% 10% 8% 7% !important;
}
body.dp-site .elementor-element-8f08d9f .elementor-cta__title {
    width: auto !important;
    max-width: 20ch;
    color: #ffffff !important;
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
}

/* --- CTA "¿Quieres ser líder?" (0a17aa0), layout image-left --- */
body.dp-site .elementor-element-0a17aa0 .elementor-cta {
    background: #F5EFE3 !important;
    border: 1px solid #D5BE96 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}
body.dp-site .elementor-element-0a17aa0 .elementor-cta__content {
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
}
body.dp-site .elementor-element-0a17aa0 .elementor-cta__title {
    color: #22542E !important;
    font-size: clamp(1.25rem, 1.1rem + .9vw, 1.75rem) !important;
    font-weight: 800 !important;
    margin: 0 !important;
}
body.dp-site .elementor-element-0a17aa0 .elementor-cta__bg {
    background-size: cover !important;
    background-position: center !important;
}

/* Botón naranja de ambos CTA */
body.dp-site .elementor-element-8f08d9f .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-0a17aa0 .elementor-cta__button.elementor-button {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F55D17 !important;
    background-color: #F55D17 !important;
    color: #ffffff !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
body.dp-site .elementor-element-8f08d9f .elementor-cta__button.elementor-button:hover,
body.dp-site .elementor-element-0a17aa0 .elementor-cta__button.elementor-button:hover {
    background: #D24A0C !important;
    background-color: #D24A0C !important;
    color: #ffffff !important;
}

/* --- Pie: logo 43275ea, columnas 3d81a1f, copyright e46d969 ---
   Bloque opcional. Si el pie se prefiere blanco, borrar hasta el cierre
   de la sección 27. */
body.dp-site .elementor-element-00fe962,
body.dp-site .elementor-element-3d81a1f,
body.dp-site .elementor-element-e46d969 {
    background-color: #22542E !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50% + 24px) !important;
    padding-right: calc(50vw - 50% + 24px) !important;
}
body.dp-site .elementor-element-00fe962 { padding-top: 44px !important; }
body.dp-site .elementor-element-e46d969 { padding-bottom: 28px !important; }

/* El logo del pie: si es PNG transparente, quitar background y padding */
body.dp-site .elementor-element-43275ea img {
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    max-height: 48px;
    width: auto;
}

body.dp-site .elementor-element-3d81a1f p,
body.dp-site .elementor-element-3d81a1f span,
body.dp-site .elementor-element-e46d969 p {
    color: rgba(255,255,255,.85) !important;
    font-size: .875rem;
}
body.dp-site .elementor-element-3d81a1f a,
body.dp-site .elementor-element-e46d969 a {
    color: rgba(255,255,255,.85) !important;
}
body.dp-site .elementor-element-3d81a1f a:hover,
body.dp-site .elementor-element-e46d969 a:hover {
    color: #D5BE96 !important;
    text-decoration: underline !important;
}
body.dp-site .elementor-element-3d81a1f a span {
    color: rgba(255,255,255,.85) !important;
    background-color: transparent !important;
}
body.dp-site .elementor-element-d9874b4 .elementor-social-icon {
    width: 38px;
    height: 38px;
    margin-right: 10px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.14);
}
body.dp-site .elementor-element-d9874b4 .elementor-social-icon:hover { background-color: #F55D17; }
body.dp-site .elementor-element-d9874b4 .elementor-social-icon i { color: #fff; }
body.dp-site .elementor-element-d58f865 > .elementor-widget-container {
    border-top: 1px solid rgba(255,255,255,.18);
    border-width: 1px 0 0 0;
    padding-top: 16px;
    color: rgba(255,255,255,.75);
}


/* ==========================================================================
   28. PÁGINAS INTERNAS
   ========================================================================== */
body.dp-site .breadcrumbs-anywhere,
body.dp-site .ast-breadcrumbs-wrapper {
    position: static !important;
    width: auto !important;
    margin: 20px 0 8px !important;
    font-size: .8125rem;
    color: #8A8A8A;
}
body.dp-site .breadcrumbs-anywhere a { color: #4B4B4B !important; }
body.dp-site .breadcrumbs-anywhere a:hover { color: #F55D17 !important; }

body.dp-site .elementor-widget-heading .elementor-heading-title {
    color: #22542E !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    width: auto !important;
    line-height: 1.15 !important;
}

body.dp-site .elementor-widget-button .elementor-button {
    background-color: #F55D17 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 26px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}
body.dp-site .elementor-widget-button .elementor-button:hover {
    background-color: #D24A0C !important;
    color: #ffffff !important;
}
body.dp-site .elementor-widget-button .elementor-button span,
body.dp-site .elementor-widget-button .elementor-button-text {
    text-decoration: none !important;
}

/* Pestañas internas (Ropa / Joyería / Fragancias / Hogar) */
body.dp-site .menu_interno a {
    border-radius: 8px !important;
    border: 1px solid #E4E1DA !important;
    min-width: 0 !important;
    height: 40px !important;
    margin-right: 8px !important;
    padding: 0 16px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: #1C1C1C !important;
}
body.dp-site .menu_interno a:hover {
    background: #E7EFE9 !important;
    border-color: #22542E !important;
    color: #22542E !important;
}


/* ==========================================================================
   29. SECCIONES NUEVAS (widgets HTML de Elementor)
   Marcas · Productos destacados · Inspírate cada día.
   Prefijo dp-x- para no chocar con las clases dp- de la Parte I.
   El HTML de cada sección está en secciones-nuevas-dp.md
   ========================================================================== */
.dp-x-section {
    background: #FAF8F4;
    border-radius: 22px;
    padding: 36px 28px;
    margin-block: 32px;
}
.dp-x-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.dp-x-head h2 {
    margin: 0;
    color: #22542E;
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    font-weight: 800;
    line-height: 1.15;
}
.dp-x-link {
    color: #F55D17 !important;
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
}
.dp-x-link:hover { color: #D24A0C !important; text-decoration: underline !important; }
.dp-x-center { text-align: center; }

.dp-x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #F55D17;
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.dp-x-btn:hover { background: #D24A0C; color: #fff !important; }

.dp-x-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1.5px solid #22542E;
    border-radius: 8px;
    background: #fff;
    color: #22542E !important;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
}
.dp-x-btn-outline:hover { background: #22542E; color: #fff !important; }

/* Marcas */
.dp-x-marcas {
    background: #fff;
    border: 1px solid #E4E1DA;
    border-radius: 16px;
    padding: 30px 24px;
}
.dp-x-marcas-titulo {
    text-align: center;
    color: #22542E;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 24px;
}
.dp-x-marcas-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    justify-items: center;
    margin-bottom: 24px;
}
.dp-x-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    padding: 14px;
    border-radius: 50%;
    background: #22542E;
    transition: transform .2s ease, background-color .2s ease;
}
.dp-x-marca:hover { transform: translateY(-3px); background: #1A4023; }
.dp-x-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Productos */
.dp-x-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dp-x-prod {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E4E1DA;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.dp-x-prod:hover { box-shadow: 0 12px 32px rgba(28,28,28,.12); transform: translateY(-3px); }
.dp-x-prod-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F5EFE3 center/cover no-repeat;
}
.dp-x-badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 11px;
    border-radius: 6px;
    background: #F55D17;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.dp-x-ico {
    position: absolute;
    bottom: -16px; left: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(28,28,28,.16);
}
.dp-x-ico::after { content: ""; position: absolute; inset: 9px; border-radius: 3px; }
.dp-x-ico--alimentos::after { background: #C8562A; }
.dp-x-ico--limpieza::after  { background: #2E7FA8; }
.dp-x-ico--personal::after  { background: #7A6AA8; }
.dp-x-ico--hogar::after     { background: #F55D17; }

.dp-x-prod-body { display: flex; flex-direction: column; flex: 1; padding: 24px 16px 16px; }
.dp-x-prod-body h3 {
    margin: 0 0 6px;
    color: #1C1C1C;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.dp-x-meta { margin: 0 0 16px; color: #8A8A8A; font-size: .8125rem; }
.dp-x-prod-body .dp-x-btn { margin-top: auto; }

/* Inspiración */
.dp-x-insp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dp-x-card {
    background: #fff;
    border: 1px solid #E4E1DA;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.dp-x-card:hover { box-shadow: 0 12px 32px rgba(28,28,28,.12); transform: translateY(-3px); }
.dp-x-card-media { aspect-ratio: 16 / 9; background: #F5EFE3 center/cover no-repeat; }
.dp-x-card-body { padding: 18px 20px 22px; }
.dp-x-card-body h3 { margin: 0 0 6px; color: #22542E; font-size: 1.0625rem; font-weight: 700; }
.dp-x-card-body p { margin: 0 0 12px; color: #4B4B4B; font-size: .875rem; line-height: 1.5; }


/* ==========================================================================
   30. RESPONSIVE DE LA PARTE II
   ========================================================================== */
@media (max-width: 1024px) {
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:first-child,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:nth-child(2),
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:last-child {
        width: 100% !important;
    }
    body.dp-site .lgn_usua { justify-content: flex-start !important; }
    body.dp-site .elementor-widget-nav-menu .elementor-nav-menu { flex-wrap: wrap !important; }

    body.dp-site .elementor-element-171027a .elementor-cta__content,
    body.dp-site .elementor-element-199acb10 .elementor-cta__content,
    body.dp-site .elementor-element-4bd61631 .elementor-cta__content,
    body.dp-site .elementor-element-47a45e40 .elementor-cta__content { min-height: 190px !important; }
    body.dp-site .elementor-element-8f08d9f .elementor-cta__content {
        min-height: 16rem !important;
        padding: 28px 24px !important;
    }
    body.dp-site .elementor-element-13affb60 { padding: 24px 16px !important; }

    .dp-x-prods { grid-template-columns: repeat(2, 1fr); }
    .dp-x-insp  { grid-template-columns: repeat(2, 1fr); }
    .dp-x-marcas-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .dp-x-section { padding: 24px 16px; border-radius: 16px; }
    .dp-x-insp { grid-template-columns: 1fr; }
    .dp-x-marcas-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-x-marca { width: 66px; height: 66px; }
}


/* ==========================================================================
   31. VELO NEGRO EN TARJETAS CON FOTO

   Los widgets CTA de Elementor traen un Background Overlay en negro con
   opacidad que apaga las fotos. La sección 27 lo anula solo en cuatro IDs
   de la página 23; las tarjetas nuevas tienen otros IDs y les quedaba el
   velo. Aquí se corrige de forma genérica.

   Se reemplaza por un degradado verde suave y solo en la parte baja: la
   foto se ve limpia arriba y el texto blanco sigue legible abajo.

   Nota de cascada: los CTA de la sección 27 (8f08d9f, 0a17aa0) tienen
   selectores más específicos, así que conservan su propio degradado aunque
   esta regla venga después.
   ========================================================================== */
body.dp-site .elementor-cta__bg-overlay {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background-image: linear-gradient(to bottom,
        rgba(20,50,28,.10) 0%,
        rgba(20,50,28,.45) 45%,
        rgba(20,50,28,.72) 72%,
        rgba(20,50,28,.90) 100%) !important;
}

/* Cuando el velo viene de la sección o la columna, no del widget */
body.dp-site .elementor-background-overlay {
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Por si alguien dejó un filtro de brillo sobre la foto */
body.dp-site .elementor-cta__bg,
body.dp-site .dp-card-cat {
    filter: none !important;
}

/* Sin velo fuerte, el texto sobre foto necesita sombra para leerse */
body.dp-site .elementor-cta__title,
body.dp-site .elementor-cta__description {
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* El CTA de líder va sobre fondo beige, ahí la sombra estorba */
body.dp-site .elementor-element-0a17aa0 .elementor-cta__title {
    text-shadow: none !important;
}


/* ==========================================================================
   32. TARJETAS DE CATEGORÍA — TRATAMIENTO DEL MOCKUP

   En el mockup el título va en blanco SOBRE la foto, alineado a la
   izquierda, con una flecha naranja en círculo debajo. La pastilla blanca
   de la sección 27 se reemplaza por eso.

   Sustituye lo que la sección 27 hacía con el botón de estas cuatro
   tarjetas. Si se prefiere volver a la pastilla blanca, borrar esta sección.
   ========================================================================== */

/* Velo: transparente arriba, verde firme abajo para que el blanco se lea */
body.dp-site .elementor-element-171027a .elementor-cta__bg-overlay,
body.dp-site .elementor-element-199acb10 .elementor-cta__bg-overlay,
body.dp-site .elementor-element-4bd61631 .elementor-cta__bg-overlay,
body.dp-site .elementor-element-47a45e40 .elementor-cta__bg-overlay {
    background-image: linear-gradient(to top,
        rgba(16,42,23,.94) 0%,
        rgba(16,42,23,.78) 30%,
        rgba(16,42,23,.52) 58%,
        rgba(16,42,23,.28) 82%,
        rgba(16,42,23,.14) 100%) !important;

    /* Para aclararlo, sustituir por esta escala:
       rgba(16,42,23,.86) 0%, rgba(16,42,23,.60) 32%,
       rgba(16,42,23,.30) 62%, rgba(16,42,23,.06) 88%,
       rgba(16,42,23,0) 100%
       Para oscurecerlo aun mas, subir todos los valores 0.06. */
}

/* El rótulo: texto blanco sobre la foto, sin caja */
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-199acb10 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-4bd61631 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-47a45e40 .elementor-cta__button.elementor-button {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 46px 0 !important;   /* hueco para la flecha */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem) !important;
    font-weight: 800 !important;
    text-align: left !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
    position: relative !important;
}

/* La flecha naranja en círculo, debajo del título */
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-199acb10 .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-4bd61631 .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-47a45e40 .elementor-cta__button.elementor-button::after {
    content: "→";
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F55D17;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: none;
    transition: background-color .2s ease, transform .2s ease;
}
body.dp-site .elementor-element-171027a .elementor-cta:hover .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-199acb10 .elementor-cta:hover .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-4bd61631 .elementor-cta:hover .elementor-cta__button.elementor-button::after,
body.dp-site .elementor-element-47a45e40 .elementor-cta:hover .elementor-cta__button.elementor-button::after {
    background: #D24A0C;
    transform: translateX(4px);
}

/* Sin cambio de fondo al pasar el mouse: ahora no hay caja que pintar */
body.dp-site .elementor-element-171027a .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-199acb10 .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-4bd61631 .elementor-cta:hover .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-47a45e40 .elementor-cta:hover .elementor-cta__button.elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Alto y alineación del contenido */
body.dp-site .elementor-element-171027a .elementor-cta__content,
body.dp-site .elementor-element-199acb10 .elementor-cta__content,
body.dp-site .elementor-element-4bd61631 .elementor-cta__content,
body.dp-site .elementor-element-47a45e40 .elementor-cta__content {
    align-items: flex-start !important;
    padding: 24px !important;
    min-height: 280px !important;
}


/* ==========================================================================
   33. CATÁLOGOS — CAJA ESTABLE

   Si una imagen falta (404), la fila se colapsaba a una barra delgada con
   el ícono de imagen rota. Con una proporción reservada el hueco conserva
   su tamaño y el problema se ve como lo que es: una imagen que falta.
   Esto NO recupera el archivo; hay que revisarlo en Medios.
   ========================================================================== */
body.dp-site .elementor-element-dcd95fb .elementor-image,
body.dp-site .elementor-element-3f82231 .elementor-image {
    aspect-ratio: 1024 / 712;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dp-site .elementor-element-dcd95fb .elementor-image img,
body.dp-site .elementor-element-3f82231 .elementor-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
body.dp-site .elementor-element-dcd95fb .elementor-image a,
body.dp-site .elementor-element-3f82231 .elementor-image a {
    display: block;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   34. ESCALA GENERAL Y AJUSTES FINOS

   El ancho de marca bajó de 1280 a 1140 px (secciones 4 y 24) y aquí se
   reducen proporcionalmente los altos y espacios para que el conjunto no
   quede desbalanceado.

   Para volver al tamaño anterior: cambiar 1140 por 1280 en --dp-max
   (sección 2) y en la sección 24, y comentar este bloque.
   ========================================================================== */

/* Tipografía un punto más contenida */
body.dp-site {
    font-size: .9375rem;
}
body.dp-site .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem) !important;
}

/* Menos aire vertical entre secciones */
body.dp-site .elementor-element-371bcde { margin-top: 24px !important; }
body.dp-site .elementor-element-13affb60 {
    padding: 28px 22px !important;
    margin-top: 36px;
}

/* Tarjetas de categoría algo más bajas */
body.dp-site .elementor-element-171027a .elementor-cta__content,
body.dp-site .elementor-element-199acb10 .elementor-cta__content,
body.dp-site .elementor-element-4bd61631 .elementor-cta__content,
body.dp-site .elementor-element-47a45e40 .elementor-cta__content {
    min-height: 225px !important;
    padding: 20px !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-199acb10 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-4bd61631 .elementor-cta__button.elementor-button,
body.dp-site .elementor-element-47a45e40 .elementor-cta__button.elementor-button {
    font-size: clamp(1rem, .95rem + .5vw, 1.3125rem) !important;
    padding-bottom: 42px !important;
}

/* CTA de asesora más contenido */
body.dp-site .elementor-element-8f08d9f .elementor-cta__content {
    min-height: 18rem !important;
}

/* Botones un punto menores */
body.dp-site .elementor-widget-button .elementor-button {
    padding: 12px 24px !important;
    font-size: .875rem !important;
}
body.dp-site .elementor-element-4492bf6 .elementor-button {
    min-height: 44px;
    padding: 0 26px;
    font-size: .875rem;
}


/* ==========================================================================
   35. CATÁLOGOS Y DESTACADOS — piezas nuevas

   fca89f2 "Catálogos" y 7e3f533 "Destacados": son PNG de 586x308, y al
   quedar a su tamaño natural se veían chicos dentro de la columna. Se
   estiran al ancho disponible conservando proporción.
   ========================================================================== */
body.dp-site .elementor-element-54b29f3 { margin-top: 28px; }

body.dp-site .elementor-element-fca89f2 .elementor-image,
body.dp-site .elementor-element-7e3f533 .elementor-image {
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
body.dp-site .elementor-element-fca89f2 .elementor-image:hover,
body.dp-site .elementor-element-7e3f533 .elementor-image:hover {
    box-shadow: 0 12px 32px rgba(28,28,28,.14);
    transform: translateY(-3px);
}
body.dp-site .elementor-element-fca89f2 img,
body.dp-site .elementor-element-7e3f533 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}


/* ==========================================================================
   36. CORRECCIÓN: "Catálogos" aplastada

   La pieza fca89f2 tomaba el ancho completo pero la altura se colapsaba,
   mientras Destacados (7e3f533) salía bien. Se impone la proporción real de
   los archivos (586x308 ≈ 1.9:1) y se anula cualquier alto heredado del
   widget o del contenedor.

   Si en Elementor el widget tiene un tamaño de imagen personalizado con
   altura fija, conviene además ponerlo en "Completo" para no depender de
   esta corrección.
   ========================================================================== */
body.dp-site .elementor-element-54b29f3 .elementor-widget-image,
body.dp-site .elementor-element-54b29f3 .elementor-widget-container,
body.dp-site .elementor-element-54b29f3 .elementor-image,
body.dp-site .elementor-element-54b29f3 figure,
body.dp-site .elementor-element-54b29f3 a {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    line-height: 0 !important;
}

body.dp-site .elementor-element-54b29f3 .elementor-image {
    aspect-ratio: 586 / 308;
    border-radius: 14px;
    overflow: hidden;
}

body.dp-site .elementor-element-54b29f3 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Las dos columnas alineadas arriba y con el mismo alto */
body.dp-site .elementor-element-54b29f3 > .elementor-container > .elementor-row {
    align-items: stretch !important;
}
body.dp-site .elementor-element-54b29f3 .elementor-column-wrap {
    padding: 0 !important;
}
body.dp-site .elementor-element-54b29f3 .elementor-widget-wrap {
    align-content: flex-start !important;
}


/* ==========================================================================
   37. CATÁLOGOS / DESTACADOS — separación y marco naranja

   Contra el mockup faltaban dos cosas: las piezas iban muy separadas y
   Destacados lleva marco naranja. El hueco venía del padding de columna que
   Elementor pone a cada lado; se reduce a un canal de 20 px.
   ========================================================================== */

/* Separación: un solo canal de 20px entre las dos piezas */
body.dp-site .elementor-element-54b29f3 > .elementor-container {
    display: flex !important;
}
body.dp-site .elementor-element-54b29f3 > .elementor-container > .elementor-row {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
}
body.dp-site .elementor-element-54b29f3 .elementor-column {
    padding: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
}

/* Marco naranja en Destacados (7e3f533). Para quitarlo, borrar este bloque;
   para ponerlo también en Catálogos, agregar fca89f2 al selector. */
body.dp-site .elementor-element-7e3f533 .elementor-image {
    border: 3px solid #F55D17;
    border-radius: 16px;
    overflow: hidden;
}

/* Catálogos sin marco, pero con el mismo radio para que casen */
body.dp-site .elementor-element-fca89f2 .elementor-image {
    border: 3px solid transparent;
    border-radius: 16px;
}

@media (max-width: 900px) {
    body.dp-site .elementor-element-54b29f3 > .elementor-container > .elementor-row {
        flex-direction: column !important;
    }
}


/* ==========================================================================
   38. "NUESTRAS CATEGORÍAS" — CAJA Y TARJETA DE ALIMENTOS

   Contra el mockup: allí las seis piezas (4 categorías + Catálogos +
   Destacados) leen como un solo grupo sobre el fondo de página. Aquí las
   cuatro primeras iban dentro de una caja beige y las dos últimas fuera,
   así que se veían como dos bloques distintos. Se quita la caja.

   Y la tarjeta de Alimentos (171027a) es un arte claro que ya trae su
   propio título y botón dibujados: el velo verde la ensuciaba y el rótulo
   blanco duplicaba el texto del arte.
   ========================================================================== */

/* --- Fuera la caja beige: las seis piezas sobre el mismo fondo --- */
body.dp-site .elementor-element-13affb60 {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 28px !important;
}
/* La fila de Catálogos se acerca para cerrar el grupo */
body.dp-site .elementor-element-54b29f3 { margin-top: 20px !important; }

/* Canal uniforme de 20px entre las cuatro categorías */
body.dp-site .elementor-element-49242514 > .elementor-container > .elementor-row,
body.dp-site .elementor-element-4e4cba9c > .elementor-container > .elementor-row {
    display: flex !important;
    gap: 20px !important;
    margin: 0 !important;
    width: 100% !important;
}
body.dp-site .elementor-element-49242514 .elementor-column,
body.dp-site .elementor-element-4e4cba9c .elementor-column {
    padding: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
}
body.dp-site .elementor-element-4e4cba9c { margin-top: 20px !important; }

/* --- Alimentos: sin velo y sin rótulo duplicado --- */
body.dp-site .elementor-element-171027a .elementor-cta__bg-overlay {
    background-image: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
}
/* El rótulo se vuelve un área de clic invisible sobre toda la tarjeta:
   el arte ya dice "Alimentos" y trae su botón "Explorar alimentos".
   Si se prefiere el rótulo visible, borrar este bloque y el arte tendrá
   texto duplicado. */
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button::after {
    display: none !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__content {
    position: relative !important;
    padding: 0 !important;
}
body.dp-site .elementor-element-171027a .elementor-cta:hover .elementor-cta__button.elementor-button {
    background: transparent !important;
}


/* ==========================================================================
   39. TÍTULO "NUESTRAS CATEGORÍAS" — FILETE Y ENLACE

   Al quitar la caja beige (sección 38) el título perdió el filete naranja,
   y el enlace "Explora todo el catálogo" quedaba muy tenue. Se reinstauran
   los dos y se ponen en la misma línea, como en el mockup.

   El enlace se ataca por posición dentro de la sección, no por ID, porque
   se agregó después. Si no toma el estilo, hace falta su data-id.
   ========================================================================== */

/* Cabecera de la sección: título a la izquierda, enlace a la derecha */
body.dp-site .elementor-element-13affb60 > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
    position: relative;
}

/* Filete naranja bajo el título */
body.dp-site .elementor-element-f4d0d90 .elementor-heading-title {
    display: inline-block !important;
    position: relative !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
}
body.dp-site .elementor-element-f4d0d90 .elementor-heading-title::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 5px !important;
    width: 74px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #F55D17 !important;
}

/* Enlace "Explora todo el catálogo": legible y en naranja */
body.dp-site .elementor-element-13affb60 .elementor-widget-text-editor a,
body.dp-site .elementor-element-13affb60 .elementor-widget-heading + .elementor-widget-text-editor a,
body.dp-site .elementor-element-13affb60 > .elementor-container .elementor-widget-button .elementor-button {
    color: #F55D17 !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.dp-site .elementor-element-13affb60 .elementor-widget-text-editor a:hover,
body.dp-site .elementor-element-13affb60 > .elementor-container .elementor-widget-button .elementor-button:hover {
    color: #D24A0C !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* El widget del enlace se alinea a la derecha, a la altura del título */
body.dp-site .elementor-element-13affb60 .elementor-widget-text-editor {
    text-align: right;
    margin-top: -52px;
    margin-bottom: 18px;
}
@media (max-width: 782px) {
    body.dp-site .elementor-element-13affb60 .elementor-widget-text-editor {
        text-align: left;
        margin-top: 0;
    }
}


/* ==========================================================================
   40. BARRA DE CONFIANZA Y MARCADORES DE IMAGEN

   Barra de cuatro promesas (entrega, ofertas, marcas, pago seguro) que va
   al cierre de la home, y los marcadores para los huecos de imagen que
   todavía no tienen archivo.
   ========================================================================== */

/* --- Barra de confianza --- */
.dp-x-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 22px 0 4px;
}
.dp-x-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #22542E;
}
.dp-x-trust__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #E7EFE9;
    color: #22542E;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .dp-x-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .dp-x-trust { grid-template-columns: 1fr; }
}

/* --- Marcador de imagen pendiente ---
   Se pone la clase dp-x-ph en el hueco y el texto en data-ph. Al cargar la
   imagen real, se quita la clase. Así los huecos vacíos se ven y no pasan
   por alto en la revisión. */
.dp-x-ph {
    position: relative;
    background-color: #F1EBDD !important;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(34,84,46,.07) 0 10px,
            rgba(34,84,46,0) 10px 20px) !important;
}
.dp-x-ph::after {
    content: attr(data-ph);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #22542E;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    opacity: .65;
}
.dp-x-marca.dp-x-ph { background-color: #22542E !important; background-image: none !important; }
.dp-x-marca.dp-x-ph::after { color: #fff; font-size: .625rem; }


/* ==========================================================================
   41. FRANJA NARANJA BAJO EL BANNER Y ESPACIADO GENERAL

   La franja es un filete naranja a sangre completa que cierra el slider.
   No estaba: la sección 26 solo daba radio y flechas al widget.
   ========================================================================== */
body.dp-site .elementor-element-86111b7 {
    position: relative;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body.dp-site .elementor-element-86111b7::after {
    content: "";
    display: block;
    position: relative;
    height: 5px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 14px;
    background: #F55D17;
}

/* --- Espaciado general más compacto ---
   Las secciones quedaban muy separadas por el margen que Elementor pone a
   cada widget más el de cada sección. Se unifica.
   Para más aire, subir estos valores; están todos juntos a propósito. */
body.dp-site .elementor-section.elementor-top-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.dp-site .elementor-widget:not(:last-child) {
    margin-bottom: 14px !important;
}
body.dp-site .elementor-element-371bcde { margin-top: 18px !important; }
body.dp-site .elementor-element-5ce147c { margin-top: 4px !important; }
body.dp-site .elementor-element-13affb60 { margin-top: 22px !important; }
body.dp-site .elementor-element-54b29f3  { margin-top: 16px !important; }
body.dp-site .elementor-element-31d0afc  { margin-top: 22px !important; }
body.dp-site .elementor-element-4e4cba9c { margin-top: 16px !important; }
body.dp-site .elementor-element-6e21729,
body.dp-site .elementor-element-bad606a { display: none !important; }  /* espaciador vacío */

/* Las secciones nuevas (dp-x) también más juntas */
.dp-x-section { margin-block: 22px; padding: 26px 22px; }


/* ==========================================================================
   42. FICHA DE PRODUCTO (single-dp_producto.php)
   ========================================================================== */

.dp-ficha { padding-block: 24px 48px; }

.dp-x-breadcrumb {
    margin-bottom: 20px;
    font-size: .8125rem;
    color: #8A8A8A;
}
.dp-x-breadcrumb a { color: #4B4B4B; text-decoration: none; }
.dp-x-breadcrumb a:hover { color: #F55D17; }
.dp-x-breadcrumb span { margin: 0 6px; }

/* --- Cabecera: galería + datos --- */
.dp-ficha__top {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
    align-items: start;
}
.dp-ficha__galeria {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
}
.dp-ficha__miniaturas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dp-ficha__mini {
    width: 74px;
    height: 74px;
    padding: 0;
    border: 2px solid #E4E1DA;
    border-radius: 10px;
    background: #F5EFE3 center/cover no-repeat;
    cursor: pointer;
    transition: border-color .2s ease;
}
.dp-ficha__mini:hover { border-color: #22542E; }
.dp-ficha__mini.is-on { border-color: #F55D17; }

.dp-ficha__principal {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: #F5EFE3 center/cover no-repeat;
}

.dp-ficha__datos h1 {
    margin: 0 0 8px;
    color: #22542E;
    font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
    font-weight: 800;
    line-height: 1.15;
}
.dp-ficha__valoracion {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: .8125rem;
    color: #8A8A8A;
}
.dp-ficha__estrellas { color: #E8A93B; letter-spacing: 1px; }
.dp-ficha__valoracion strong { color: #1C1C1C; }
.dp-ficha__resumen {
    margin: 0 0 20px;
    color: #4B4B4B;
    font-size: .9375rem;
    line-height: 1.55;
}

.dp-ficha__campos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.dp-ficha__campo {
    padding: 12px 14px;
    border: 1px solid #E4E1DA;
    border-radius: 10px;
    background: #FAF8F4;
}
.dp-ficha__campo-et {
    display: block;
    color: #8A8A8A;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 3px;
}
.dp-ficha__campo-va {
    display: block;
    color: #1C1C1C;
    font-size: .875rem;
    font-weight: 600;
}
.dp-ficha__cta { width: auto !important; margin-top: 20px; padding: 0 26px; }

/* --- Beneficios --- */
.dp-ficha__benef { margin-top: 34px; }
.dp-ficha__benef h2 {
    margin: 0 0 14px;
    color: #22542E;
    font-size: 1.0625rem;
    font-weight: 700;
}
.dp-ficha__benef-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dp-ficha__benef-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: #4B4B4B;
}

/* --- Pestañas --- */
.dp-ficha__tabs { margin-top: 34px; }
.dp-ficha__tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #E4E1DA;
    overflow-x: auto;
}
.dp-ficha__tab {
    padding: 11px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #8A8A8A;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.dp-ficha__tab:hover { color: #22542E; }
.dp-ficha__tab.is-on { color: #22542E; border-bottom-color: #F55D17; }

.dp-ficha__panel { display: none; padding-top: 18px; }
.dp-ficha__panel.is-on { display: block; }
.dp-ficha__panel p {
    max-width: 76ch;
    color: #4B4B4B;
    font-size: .875rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .dp-ficha__top { grid-template-columns: 1fr; gap: 24px; }
    .dp-ficha__benef-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .dp-ficha__galeria { grid-template-columns: 1fr; }
    .dp-ficha__miniaturas { flex-direction: row; overflow-x: auto; }
    .dp-ficha__campos,
    .dp-ficha__benef-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   43. CORRECCIÓN: FRANJA Y ESPACIOS

   1. El hueco blanco bajo el banner no era margen: la diapositiva tiene
      altura fija y la imagen entra con "contain", así que sobraba una banda
      vacía donde caía el bullet. Se le da a la diapositiva la proporción
      del banner (1600x800 = 2:1) y desaparece.
   2. Espacios entre secciones al mínimo razonable.

   El color de la franja se corrigió en la §41; aquí solo se pega al banner.
   ========================================================================== */

/* --- 1. La franja se pega al banner (el color ya es naranja en §41) --- */
body.dp-site .elementor-element-86111b7::after {
    margin-top: 0 !important;
}

/* --- 2. La diapositiva a la proporción del banner --- */
body.dp-site .elementor-widget-slides .elementor-slides,
body.dp-site .elementor-widget-slides .swiper-slide,
body.dp-site .elementor-widget-slides .swiper-slide-inner {
    height: auto !important;
    min-height: 0 !important;
}
body.dp-site .elementor-widget-slides .swiper-slide {
    aspect-ratio: 2 / 1;
}
body.dp-site .elementor-widget-slides .swiper-slide-bg {
    background-size: cover !important;   /* ya no recorta: la caja calza */
}
body.dp-site .elementor-widget-slides .swiper-pagination {
    bottom: 10px !important;
}
body.dp-site .elementor-element-afb9368 { margin-bottom: 0 !important; }
body.dp-site .elementor-element-86111b7 > .elementor-container,
body.dp-site .elementor-element-86111b7 .elementor-column-wrap,
body.dp-site .elementor-element-86111b7 .elementor-widget-wrap {
    padding: 0 !important;
}

/* --- 3. Espacios --- */
body.dp-site .elementor-element-13affb60 { margin-top: 14px !important; }
body.dp-site .elementor-element-f4d0d90 { margin-bottom: 0 !important; }
body.dp-site .elementor-element-f4d0d90 .elementor-heading-title {
    margin-bottom: 10px !important;
}
body.dp-site .elementor-element-49242514 { margin-top: 0 !important; }
body.dp-site .elementor-element-4e4cba9c { margin-top: 16px !important; }
body.dp-site .elementor-element-54b29f3  { margin-top: 16px !important; }
body.dp-site .elementor-element-371bcde  { margin-top: 14px !important; }
body.dp-site .elementor-element-31d0afc  { margin-top: 18px !important; }

/* Columnas y contenedores sin padding vertical sobrante */
body.dp-site .elementor-element-13affb60 .elementor-column-wrap,
body.dp-site .elementor-element-13affb60 .elementor-widget-wrap,
body.dp-site .elementor-element-49242514 .elementor-column-wrap,
body.dp-site .elementor-element-4e4cba9c .elementor-column-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.dp-site .elementor-element-13affb60 .elementor-widget:not(:last-child),
body.dp-site .elementor-element-49242514 .elementor-widget,
body.dp-site .elementor-element-4e4cba9c .elementor-widget {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   44. MARCO DE LAS FICHAS DE PRODUCTO

   Las fichas usan la cabecera y el pie propios de inc/marco.php, con las
   clases dp-topbar / dp-header / dp-nav / dp-footer de la Parte I. Aquí solo
   los ajustes de encaje: el contenedor de Astra y el ancho.
   ========================================================================== */
body.single-dp_producto .dp-wrap,
body.post-type-archive-dp_producto .dp-wrap {
    max-width: 1140px;
    padding-inline: 24px;
}
body.single-dp_producto #content > .ast-container,
body.post-type-archive-dp_producto #content > .ast-container {
    max-width: 1140px !important;
}
/* Astra no debe imprimir su cabecera vacía sobre el marco propio */
body.single-dp_producto #masthead,
body.post-type-archive-dp_producto #masthead {
    display: none;
}
/* Ni su título ni su pie vacío */
body.single-dp_producto .entry-header,
body.single-dp_producto .site-footer,
body.post-type-archive-dp_producto .site-footer {
    display: none;
}
body.single-dp_producto .dp-footer { margin-top: 40px; }


/* ==========================================================================
   45. LOGO Y CORRECCIONES DEL MARCO

   El logo viaja en assets/ del tema, así que no depende de la Identidad del
   sitio ni de la biblioteca de medios:
     assets/logo-verde.png  relleno verde, para la cabecera clara
     assets/logo.png        relleno blanco, para el pie verde
   Se pueden reemplazar por URL desde Personalizar → Despenssa: textos.
   ========================================================================== */

.dp-logo-img {
    display: block;
    height: 64px;
    width: auto;
    max-width: 220px;
}
.dp-footer__logo {
    display: inline-block;
    margin-bottom: 26px;
}
.dp-footer__logo img {
    display: block;
    height: 64px;
    width: auto;
}

/* --- Buscador: el botón salía como óvalo por los estilos de botón de Astra --- */
.dp-search button,
.dp-search button[type="submit"] {
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #22542E !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}
.dp-search button:hover { background: #F55D17 !important; }
.dp-search input[type="search"] { height: 46px; }

/* --- Pie: contraste de los enlaces ---
   Astra imponía su color de enlace sobre el verde y quedaban ilegibles. */
.dp-footer,
.dp-footer p,
.dp-footer span,
.dp-footer li {
    color: rgba(255,255,255,.86) !important;
}
.dp-footer a,
.dp-footer li a,
.dp-footer .dp-footer__legal a {
    color: rgba(255,255,255,.86) !important;
    text-decoration: none !important;
}
.dp-footer a:hover,
.dp-footer li a:hover {
    color: #D5BE96 !important;
    text-decoration: underline !important;
}
.dp-footer h5 {
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Franja superior: contraste --- */
.dp-topbar,
.dp-topbar span,
.dp-topbar li {
    color: #fff !important;
}
.dp-topbar a,
.dp-topbar li a {
    color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
}
.dp-topbar a:hover { color: #D5BE96 !important; }

/* --- Menú del marco en pastillas --- */
.dp-nav a {
    color: #1C1C1C !important;
    text-decoration: none !important;
}
.dp-nav a:hover {
    background: #E7EFE9;
    color: #22542E !important;
}
.dp-nav .current-menu-item > a,
.dp-nav .current_page_item > a {
    background: #22542E !important;
    color: #fff !important;
}


/* ==========================================================================
   46. LOGO DESPENSSA EN LAS PÁGINAS DE ELEMENTOR

   La home y las 17 páginas traen el logo AZZORTI como widget de imagen. Se
   sustituye visualmente por el logo del tema sin tocar Elementor: la imagen
   original se deja transparente y el logo va como fondo del enlace.

   Es un truco, no la solución: lo correcto es cambiar la imagen en el widget
   (y su enlace, que apunta a /ec/). Esto sirve mientras eso se hace en las
   17 páginas, o hasta que el header se unifique en Theme Builder.
   ========================================================================== */

/* --- Cabecera: logo verde sobre fondo claro --- */
body.dp-site .elementor-element-0bfe70f .elementor-image,
body.dp-site .elementor-element-0bfe70f .elementor-image a {
    display: block !important;
    height: 34px !important;
    background-image: url('assets/logo-verde.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
body.dp-site .elementor-element-0bfe70f img {
    opacity: 0 !important;
    height: 34px !important;
    width: auto !important;
    max-width: 220px !important;
}

/* --- Pie: logo blanco sobre el verde --- */
body.dp-site .elementor-element-43275ea .elementor-image,
body.dp-site .elementor-element-43275ea .elementor-image a {
    display: block !important;
    height: 32px !important;
    background-image: url('assets/logo.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
body.dp-site .elementor-element-43275ea img {
    opacity: 0 !important;
    height: 32px !important;
    width: auto !important;
    max-width: 200px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}


/* ==========================================================================
   47. MENÚ LATERAL PÚBLICO (inc/lateral.php)

   Panel deslizante con navegación abierta. NO trae Mi Perfil, Mis Pedidos,
   Puntos ni Plan de incentivos: eso requiere login y datos del SID.

   Se abre desde cualquier elemento con la clase dp-menu-toggle. En Elementor,
   añadir esa clase a un widget de icono (Avanzado → Clases CSS).
   ========================================================================== */

/* --- Botón hamburguesa --- */
.dp-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid #E4E1DA;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.dp-menu-toggle:hover { border-color: #22542E; background: #E7EFE9; }
.dp-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #22542E;
}

/* --- Fondo --- */
.dp-panel-fondo {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(16,42,23,.5);
    opacity: 0;
    transition: opacity .25s ease;
}
.dp-panel-fondo.is-on { opacity: 1; }

/* --- Panel --- */
.dp-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 86vw;
    background: #fff;
    box-shadow: 0 0 40px rgba(16,42,23,.28);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.25,.46,.45,.94);
    overflow-y: auto;
}
.dp-panel.is-on { transform: translateX(0); }

.dp-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 16px;
    background: #22542E;
}
.dp-panel__logo img {
    display: block;
    height: 26px;
    width: auto;
}
.dp-panel__cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.dp-panel__cerrar:hover { background: #F55D17; }

/* --- Navegación --- */
.dp-panel__nav { padding: 10px 8px; flex: 1; }
.dp-panel__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dp-panel__nav li { margin: 0; }
.dp-panel__nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    color: #1C1C1C !important;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none !important;
}
.dp-panel__nav a:hover {
    background: #E7EFE9;
    color: #22542E !important;
}
.dp-panel__nav .current-menu-item > a,
.dp-panel__nav .current_page_item > a {
    background: #22542E;
    color: #fff !important;
    font-weight: 600;
}
/* Submenús: sangrados y más discretos */
.dp-panel__nav .sub-menu {
    margin: 0 0 6px 10px;
    padding-left: 10px;
    border-left: 2px solid #E4E1DA;
}
.dp-panel__nav .sub-menu a {
    padding: 9px 12px;
    font-size: .875rem;
    color: #4B4B4B !important;
}

/* --- Pie del panel --- */
.dp-panel__pie {
    padding: 16px 18px 22px;
    border-top: 1px solid #E4E1DA;
}
.dp-panel__pie .dp-btn-asesora {
    width: 100%;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .dp-panel, .dp-panel-fondo { transition: none; }
}


/* ==========================================================================
   48. APARIENCIA CLARO / OSCURO

   El selector vive en el panel lateral. Guarda la elección en el navegador
   (localStorage) y aplica data-tema="claro|oscuro" en <html>. "Sistema"
   sigue la preferencia del equipo.

   ALCANCE HONESTO: el modo oscuro cubre fondos, textos, tarjetas, tablas y
   la ficha de producto. NO puede invertir las imágenes (los banners y las
   piezas de catálogo son claros por diseño) ni los colores que estén fijados
   widget por widget dentro de Elementor. Donde se note un bloque claro
   suelto, ese color está puesto a mano en el widget.
   ========================================================================== */

/* --- Selector en el panel --- */
.dp-panel__apariencia {
    padding: 14px 18px 4px;
    border-top: 1px solid #E4E1DA;
}
.dp-panel__apariencia-tit {
    display: block;
    margin-bottom: 10px;
    color: #8A8A8A;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dp-panel__temas { display: flex; gap: 8px; }
.dp-tema {
    flex: 1;
    padding: 8px 6px;
    border: 1px solid #E4E1DA;
    border-radius: 8px;
    background: #fff;
    color: #1C1C1C;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
.dp-tema:hover { border-color: #22542E; color: #22542E; }
.dp-tema.is-on {
    background: #22542E;
    border-color: #22542E;
    color: #fff;
}
.dp-panel__aviso {
    margin: 12px 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FDEADF;
    color: #4B4B4B;
    font-size: .75rem;
    line-height: 1.45;
}
.dp-menu-toggle--auto { margin-right: 12px; }

/* ==========================  MODO OSCURO  ============================== */
html[data-tema="oscuro"] {
    --dp-bg:      #12160F;
    --dp-bg-soft: #1A1F16;
    --dp-ink:     #ECEAE3;
    --dp-ink-70:  #C3C0B6;
    --dp-ink-45:  #8E8B82;
    --dp-line:    #2C332A;
}

html[data-tema="oscuro"] body,
html[data-tema="oscuro"] body.dp-site {
    background-color: #12160F !important;
    color: #ECEAE3 !important;
}

/* Superficies de Elementor y de Astra */
html[data-tema="oscuro"] .ast-plain-container,
html[data-tema="oscuro"] .ast-page-builder-template,
html[data-tema="oscuro"] .site-content,
html[data-tema="oscuro"] #page {
    background-color: #12160F !important;
}

/* Cabecera clara → oscura */
html[data-tema="oscuro"] .dp-header,
html[data-tema="oscuro"] .dp-nav,
html[data-tema="oscuro"] body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) {
    background-color: #171C13 !important;
    border-bottom-color: #2C332A !important;
}
html[data-tema="oscuro"] .dp-nav a,
html[data-tema="oscuro"] body.dp-site .elementor-nav-menu--main .elementor-item {
    color: #ECEAE3 !important;
}
html[data-tema="oscuro"] .dp-nav a:hover,
html[data-tema="oscuro"] body.dp-site .elementor-nav-menu--main .elementor-item:hover {
    background: #23301F !important;
    color: #A7D9B4 !important;
}

/* Buscador */
html[data-tema="oscuro"] .dp-search input[type="search"] {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
    color: #ECEAE3 !important;
}
html[data-tema="oscuro"] .dp-search input::placeholder { color: #8E8B82 !important; }

/* Títulos y texto */
html[data-tema="oscuro"] h1,
html[data-tema="oscuro"] h2,
html[data-tema="oscuro"] h3,
html[data-tema="oscuro"] h4,
html[data-tema="oscuro"] h5,
html[data-tema="oscuro"] .elementor-heading-title,
html[data-tema="oscuro"] .dp-x-head h2,
html[data-tema="oscuro"] .dp-ficha__datos h1 {
    color: #A7D9B4 !important;
}
html[data-tema="oscuro"] p,
html[data-tema="oscuro"] li,
html[data-tema="oscuro"] .dp-x-card-body p,
html[data-tema="oscuro"] .dp-ficha__resumen {
    color: #C3C0B6 !important;
}

/* Tarjetas y secciones */
html[data-tema="oscuro"] .dp-x-section,
html[data-tema="oscuro"] body.dp-site .elementor-element-13affb60 {
    background: #171C13 !important;
}
html[data-tema="oscuro"] .dp-x-prod,
html[data-tema="oscuro"] .dp-x-card,
html[data-tema="oscuro"] .dp-x-marcas,
html[data-tema="oscuro"] .dp-card,
html[data-tema="oscuro"] .dp-ficha__campo {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
}
html[data-tema="oscuro"] .dp-ficha__campo-va { color: #ECEAE3 !important; }
html[data-tema="oscuro"] .dp-x-meta,
html[data-tema="oscuro"] .dp-ficha__campo-et,
html[data-tema="oscuro"] .dp-x-breadcrumb { color: #8E8B82 !important; }
html[data-tema="oscuro"] .dp-x-breadcrumb a { color: #C3C0B6 !important; }

/* Fondos de imagen a la espera */
html[data-tema="oscuro"] .dp-x-prod-media,
html[data-tema="oscuro"] .dp-x-card-media,
html[data-tema="oscuro"] .dp-ficha__principal,
html[data-tema="oscuro"] .dp-ficha__mini { background-color: #23301F; }

/* Botón de contorno y pastillas */
html[data-tema="oscuro"] .dp-x-btn-outline,
html[data-tema="oscuro"] .dp-btn-asesora,
html[data-tema="oscuro"] .btn-login {
    background: transparent !important;
    border-color: #A7D9B4 !important;
    color: #A7D9B4 !important;
}
html[data-tema="oscuro"] .dp-x-btn-outline:hover,
html[data-tema="oscuro"] .dp-btn-asesora:hover {
    background: #A7D9B4 !important;
    color: #12160F !important;
}

/* Tablas y pestañas */
html[data-tema="oscuro"] .dp-table thead th {
    background: #23301F !important;
    color: #A7D9B4 !important;
}
html[data-tema="oscuro"] .dp-table td {
    border-bottom-color: #2C332A !important;
    color: #C3C0B6 !important;
}
html[data-tema="oscuro"] .dp-ficha__tabs-nav { border-bottom-color: #2C332A !important; }
html[data-tema="oscuro"] .dp-ficha__tab { color: #8E8B82 !important; }
html[data-tema="oscuro"] .dp-ficha__tab.is-on { color: #A7D9B4 !important; }

/* Panel lateral */
html[data-tema="oscuro"] .dp-panel { background: #171C13 !important; }
html[data-tema="oscuro"] .dp-panel__nav a { color: #ECEAE3 !important; }
html[data-tema="oscuro"] .dp-panel__nav a:hover { background: #23301F !important; color: #A7D9B4 !important; }
html[data-tema="oscuro"] .dp-panel__apariencia,
html[data-tema="oscuro"] .dp-panel__pie { border-top-color: #2C332A !important; }
html[data-tema="oscuro"] .dp-tema {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
    color: #ECEAE3 !important;
}
html[data-tema="oscuro"] .dp-tema.is-on {
    background: #A7D9B4 !important;
    border-color: #A7D9B4 !important;
    color: #12160F !important;
}
html[data-tema="oscuro"] .dp-menu-toggle {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
}
html[data-tema="oscuro"] .dp-menu-toggle span { background: #A7D9B4 !important; }

/* El naranja y el verde de marca no se tocan: son la identidad */


/* ==========================================================================
   49. BANDA DE CONFIANZA — ajuste al mockup

   En el mockup la barra va sobre una banda beige a lo ancho, con iconos de
   línea en cuadro redondeado. Complementa la §40.
   ========================================================================== */
.dp-x-banda {
    background: #F5EFE3;
    border-radius: 16px;
    padding: 18px 24px;
    margin-block: 22px;
}
.dp-x-banda .dp-x-trust { padding: 0; }

.dp-x-trust__ico svg {
    width: 18px;
    height: 18px;
    stroke: #22542E;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-tema="oscuro"] .dp-x-banda { background: #1A1F16 !important; }
html[data-tema="oscuro"] .dp-x-trust__item { color: #C3C0B6 !important; }
html[data-tema="oscuro"] .dp-x-trust__ico { background: #23301F !important; }
html[data-tema="oscuro"] .dp-x-trust__ico svg { stroke: #A7D9B4; }


/* ==========================================================================
   50. CABECERA DE ELEMENTOR: BOTÓN "MENÚ" Y BUSCADOR

   Las páginas de Elementor no traen ni botón de menú ni buscador. El JS de
   inc/lateral.php los inserta en la columna del logo; aquí se acomodan en
   una fila, como en el prototipo.

   Cuando la cabecera se unifique en Theme Builder, esta sección y la
   inserción por JS se pueden borrar: bastará con poner los widgets una vez.
   ========================================================================== */

/* La columna del logo pasa a fila: [Menú] [logo] [buscador] */
body.dp-site .dp-header-fila {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}
body.dp-site .dp-header-fila > .elementor-element {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

/* Reparto de columnas con el buscador dentro */
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:first-child { width: 52% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:nth-child(2) { width: 26% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:last-child  { width: 22% !important; }

/* --- Botón "Menú" en pastilla verde --- */
.dp-menu-toggle--auto {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    width: auto;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #22542E;
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    margin-right: 0;
}
.dp-menu-toggle--auto:hover { background: #1A4023; }
.dp-menu-toggle__lineas {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
}
.dp-menu-toggle__lineas span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
}
.dp-menu-toggle__texto { line-height: 1; }

/* --- Buscador insertado --- */
.dp-search--auto {
    position: relative;
    flex: 1 1 auto !important;
    min-width: 180px;
    max-width: 420px;
}
.dp-search--auto input[type="search"] {
    width: 100%;
    height: 42px;
    padding: 0 46px 0 16px;
    border: 1.5px solid #E4E1DA;
    border-radius: 999px;
    background: #F5EFE3;
    font-family: inherit;
    font-size: .875rem;
    color: #1C1C1C;
}
.dp-search--auto input::placeholder { color: #8A8A8A; }
.dp-search--auto input:focus {
    outline: none;
    border-color: #22542E;
    background: #fff;
    box-shadow: 0 0 0 3px #E7EFE9;
}
.dp-search--auto button {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 36px !important;
    height: 36px !important;
}

@media (max-width: 1024px) {
    body.dp-site .dp-header-fila { flex-wrap: wrap !important; }
    .dp-search--auto { max-width: 100%; order: 3; flex-basis: 100% !important; }
    .dp-menu-toggle__texto { display: none; }
    .dp-menu-toggle--auto { padding: 0 12px; }
}

html[data-tema="oscuro"] .dp-search--auto input[type="search"] {
    background: #1A1F16;
    border-color: #2C332A;
    color: #ECEAE3;
}


/* ==========================================================================
   51. CORRECCIÓN DE LA FILA DE CABECERA

   Dos errores de la §50:
   1. El buscador tenía min-width 180 y nowrap, así que no cabía en su
      columna y se desbordaba encima del menú. Ahora puede encogerse.
   2. El logo salía comprimido: al ir en una fila flex sin ancho propio, su
      caja se estrechaba y el fondo con "contain" se achataba. Se le fija
      una caja con la proporción del archivo (1213x259 ≈ 4.7:1).
   ========================================================================== */

/* --- 1. Nada se desborda de la fila --- */
body.dp-site .dp-header-fila {
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow: visible;
}
body.dp-site .dp-header-fila > * { min-width: 0; }

.dp-search--auto {
    flex: 1 1 60px !important;
    min-width: 0 !important;
    max-width: 340px;
}
.dp-search--auto input[type="search"] {
    min-width: 0;
    padding-right: 44px;
}

/* --- 2. El logo con su proporción --- */
body.dp-site .elementor-element-0bfe70f {
    flex: 0 0 auto !important;
    width: 158px !important;
    max-width: 40% !important;
}
body.dp-site .elementor-element-0bfe70f .elementor-image,
body.dp-site .elementor-element-0bfe70f .elementor-image a {
    width: 158px !important;
    height: 34px !important;
}
body.dp-site .elementor-element-0bfe70f img {
    width: 158px !important;
    height: 34px !important;
    max-width: 158px !important;
    object-fit: contain;
}

/* El botón Menú no se encoge */
.dp-menu-toggle--auto { flex: 0 0 auto !important; }

/* --- 3. El menú central, más compacto para que quepa --- */
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:first-child { width: 46% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:nth-child(2) { width: 32% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:last-child  { width: 22% !important; }

body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-nav-menu--main .elementor-item {
    font-size: .75rem !important;
    padding: 8px 8px !important;
}

/* El bloque de asesora tampoco se desborda */
body.dp-site .lgn_usua { flex-wrap: nowrap !important; min-width: 0; }
body.dp-site .login { font-size: .5625rem !important; }
body.dp-site .btn-login { padding: 0 14px !important; }
body.dp-site .btn-login a { font-size: .6875rem !important; }

@media (max-width: 1200px) {
    .dp-search--auto { max-width: 240px; }
}
@media (max-width: 1024px) {
    .dp-search--auto {
        order: 3;
        flex: 1 1 100% !important;
        max-width: 100%;
    }
    body.dp-site .dp-header-fila { flex-wrap: wrap !important; }
}


/* ==========================================================================
   52. CABECERA: SIN BUSCADOR, HAMBURGUESA SIMPLE

   Revierte lo que las §50 y §51 hacían con el buscador y con la pastilla
   "Menú". Queda: [☰] [logo despenssa] [menú] [asesora].

   El buscador ya no se inyecta (se quitó también del JS de lateral.php); las
   reglas .dp-search--auto quedan sin uso pero inofensivas, y se ocultan aquí
   por si alguna caché sirve el JS anterior.
   ========================================================================== */

/* Nada de buscador inyectado */
.dp-search--auto { display: none !important; }

/* Hamburguesa: cuadro con tres líneas, como antes */
.dp-menu-toggle--auto {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 9px !important;
    border: 1px solid #E4E1DA !important;
    border-radius: 10px !important;
    background: #fff !important;
    margin-right: 4px !important;
}
.dp-menu-toggle--auto:hover {
    background: #E7EFE9 !important;
    border-color: #22542E !important;
}
.dp-menu-toggle--auto span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #22542E !important;
}
.dp-menu-toggle__texto { display: none !important; }

/* Fila: hamburguesa + logo, sin competir por el ancho */
body.dp-site .dp-header-fila {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

/* El logo recupera su tamaño */
body.dp-site .elementor-element-0bfe70f {
    width: 176px !important;
    max-width: 100% !important;
}
body.dp-site .elementor-element-0bfe70f .elementor-image,
body.dp-site .elementor-element-0bfe70f .elementor-image a {
    width: 176px !important;
    height: 38px !important;
}
body.dp-site .elementor-element-0bfe70f img {
    width: 176px !important;
    height: 38px !important;
    max-width: 176px !important;
}

/* Reparto de columnas sin buscador: el menú vuelve a tener espacio */
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:first-child { width: 24% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:nth-child(2) { width: 52% !important; }
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column.elementor-col-33:last-child  { width: 24% !important; }

body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-nav-menu--main .elementor-item {
    font-size: .8125rem !important;
    padding: 9px 10px !important;
}

/* Bloque de asesora con aire */
body.dp-site .login { font-size: .625rem !important; }
body.dp-site .btn-login { padding: 0 18px !important; }
body.dp-site .btn-login a { font-size: .75rem !important; }

@media (max-width: 1024px) {
    body.dp-site .dp-header-fila { flex-wrap: nowrap !important; }
}


/* ==========================================================================
   53. CORRECCIÓN: EL ENLACE DE LA TARJETA DE ALIMENTOS

   En la §38 el rótulo se volvió un área de clic invisible, pero anclada al
   contenido de la tarjeta y no a la tarjeta completa, así que buena parte
   del área quedaba sin enlace. Ahora cubre toda la pieza.
   ========================================================================== */
body.dp-site .elementor-element-171027a .elementor-cta {
    position: relative !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__button.elementor-button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    cursor: pointer;
}
/* El contenedor del botón no debe recortar el área de clic */
body.dp-site .elementor-element-171027a .elementor-cta__button-wrapper {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
}
body.dp-site .elementor-element-171027a .elementor-cta__content {
    position: static !important;
}


/* ==========================================================================
   54. CORRECCIÓN: LA IMAGEN PRINCIPAL DE LA FICHA

   La §42 daba a la galería una rejilla fija de dos columnas: 74px para el
   carril de miniaturas y el resto para la imagen. Cuando el producto no
   tiene galería el carril no se imprime, así que la imagen principal caía en
   la columna de 74px y salía del tamaño de una miniatura.

   Ahora la rejilla de dos columnas solo se aplica si hay carril, mediante la
   clase dp-ficha__galeria--rail que pone la plantilla.
   ========================================================================== */
.dp-ficha__galeria {
    display: block;          /* una sola pieza: la imagen manda */
    grid-template-columns: none;
}
.dp-ficha__galeria--rail {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: start;
}

/* La principal siempre grande, con o sin carril */
.dp-ficha__principal {
    width: 100%;
    min-height: 260px;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background-color: #F5EFE3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 560px) {
    .dp-ficha__galeria--rail { grid-template-columns: 1fr; }
    .dp-ficha__principal { min-height: 200px; }
}
html[data-tema="oscuro"] .dp-ficha__principal { background-color: #23301F; }


/* ==========================================================================
   55. CORRECCIÓN: EL BANNER SE RECORTABA

   La §43 le dio a la diapositiva proporción 2:1, que es la del banner
   recortado a 1600x800. El archivo que está en el slider es el original de
   1902x827 (2.3:1), así que "cover" cortaba los lados y se perdían el sello
   de 30% OFF y la tarjeta "Tu café favorito".

   Se usa la proporción del archivo original y "contain", que nunca recorta.
   Si algún día se sube la versión 1600x800, ajustar aspect-ratio a 2/1.
   ========================================================================== */
body.dp-site .elementor-widget-slides .swiper-slide {
    aspect-ratio: 1902 / 827 !important;
}
body.dp-site .elementor-widget-slides .swiper-slide-bg {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Las flechas quedaban sobre el texto del banner: se pegan al borde */
body.dp-site .elementor-widget-slides .elementor-swiper-button-prev { left: 4px !important; }
body.dp-site .elementor-widget-slides .elementor-swiper-button-next { right: 4px !important; }
body.dp-site .elementor-widget-slides .elementor-swiper-button {
    width: 34px !important;
    height: 34px !important;
    background: rgba(34,84,46,.42) !important;
}
body.dp-site .elementor-widget-slides .elementor-swiper-button:hover {
    background: #F55D17 !important;
}


/* ==========================================================================
   56. FONDO DE PÁGINA Y ANCHO DE LA FRANJA

   1. El fondo era blanco; en el prototipo todo va sobre crema y las tarjetas
      son las que quedan blancas, lo que les da relieve.
   2. La franja naranja iba a sangre completa (100vw). Se limita al ancho del
      contenido, como en el prototipo.
   ========================================================================== */

/* --- 1. Fondo crema --- */
:root { --dp-crema: #F7F2E8; }

body.dp-site,
body.dp-site.ast-plain-container,
body.dp-site.ast-page-builder-template,
body.dp-site #page,
body.dp-site .site-content,
body.single-dp_producto,
body.single-dp_producto #page,
body.single-dp_producto .site-content,
body.post-type-archive-dp_producto,
body.post-type-archive-dp_producto #page {
    background-color: var(--dp-crema) !important;
}

/* Las tarjetas y bloques blancos se mantienen blancos: es el contraste */
body.dp-site .dp-x-prod,
body.dp-site .dp-x-card,
body.dp-site .dp-x-marcas,
body.dp-site .dp-card,
body.dp-site .dp-header,
body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) {
    background-color: #fff !important;
}

/* Las secciones que ya eran crema pasan a blanco para que se distingan */
body.dp-site .dp-x-section {
    background: #fff !important;
    border: 1px solid #EFE7D8;
}
body.dp-site .dp-x-banda { background: #F1E9D8 !important; }

/* --- 2. La franja al ancho del contenido --- */
body.dp-site .elementor-element-86111b7::after {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 999px;
}

/* --- Modo oscuro: el crema no aplica --- */
html[data-tema="oscuro"] body.dp-site,
html[data-tema="oscuro"] body.dp-site #page,
html[data-tema="oscuro"] body.dp-site .site-content,
html[data-tema="oscuro"] body.single-dp_producto,
html[data-tema="oscuro"] body.single-dp_producto #page,
html[data-tema="oscuro"] body.single-dp_producto .site-content {
    background-color: #12160F !important;
}
html[data-tema="oscuro"] body.dp-site .dp-x-section,
html[data-tema="oscuro"] body.dp-site .dp-x-prod,
html[data-tema="oscuro"] body.dp-site .dp-x-card,
html[data-tema="oscuro"] body.dp-site .dp-x-marcas,
html[data-tema="oscuro"] body.dp-site .dp-card,
html[data-tema="oscuro"] body.dp-site .dp-header,
html[data-tema="oscuro"] body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) {
    background-color: #171C13 !important;
    border-color: #2C332A !important;
}


/* ==========================================================================
   57. ARTÍCULO DE INSPIRACIÓN (single-dp_inspira.php)
   ========================================================================== */

.dp-articulo { padding-block: 24px 48px; }

.dp-articulo__head {
    max-width: 640px;
    margin: 0 auto 26px;
    text-align: center;
}
.dp-articulo__antetitulo {
    display: block;
    margin-bottom: 8px;
    color: #F55D17;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.dp-articulo__head h1 {
    margin: 0 0 10px;
    color: #22542E;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
    font-weight: 800;
    line-height: 1.18;
}
.dp-articulo__lectura {
    margin: 0 0 14px;
    color: #8A8A8A;
    font-size: .8125rem;
}
.dp-articulo__intro {
    margin: 0;
    color: #4B4B4B;
    font-size: .9375rem;
    line-height: 1.6;
}

.dp-articulo__media {
    max-width: 720px;
    margin: 0 auto 28px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: #F1E9D8 center/cover no-repeat;
}

/* --- Lista numerada --- */
.dp-pasos {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.dp-paso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid #EFE7D8;
    border-radius: 12px;
    background: #fff;
}
.dp-paso__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #E7EFE9;
    color: #22542E;
    font-size: .8125rem;
    font-weight: 800;
}
.dp-paso__texto { display: block; }
.dp-paso__texto strong {
    display: block;
    margin-bottom: 3px;
    color: #1C1C1C;
    font-size: .9375rem;
    font-weight: 700;
}
.dp-paso__texto span {
    display: block;
    color: #4B4B4B;
    font-size: .875rem;
    line-height: 1.5;
}

.dp-articulo__cuerpo {
    max-width: 720px;
    margin: 28px auto 0;
}

@media (max-width: 560px) {
    .dp-paso { padding: 14px; gap: 11px; }
    .dp-paso__num { width: 28px; height: 28px; font-size: .75rem; }
}

html[data-tema="oscuro"] .dp-paso {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
}
html[data-tema="oscuro"] .dp-paso__num { background: #23301F !important; color: #A7D9B4 !important; }
html[data-tema="oscuro"] .dp-paso__texto strong { color: #ECEAE3 !important; }
html[data-tema="oscuro"] .dp-paso__texto span,
html[data-tema="oscuro"] .dp-articulo__intro { color: #C3C0B6 !important; }
html[data-tema="oscuro"] .dp-articulo__media { background-color: #23301F; }

/* El marco propio también en los artículos */
body.single-dp_inspira #masthead,
body.single-dp_inspira .entry-header,
body.single-dp_inspira .site-footer,
body.post-type-archive-dp_inspira .site-footer { display: none; }
body.single-dp_inspira,
body.single-dp_inspira #page,
body.single-dp_inspira .site-content { background-color: var(--dp-crema) !important; }
body.single-dp_inspira #content > .ast-container { max-width: 1140px !important; }
body.single-dp_inspira .dp-footer { margin-top: 40px; }
html[data-tema="oscuro"] body.single-dp_inspira,
html[data-tema="oscuro"] body.single-dp_inspira #page,
html[data-tema="oscuro"] body.single-dp_inspira .site-content { background-color: #12160F !important; }


/* ==========================================================================
   58. CORRECCIÓN: EL HUECO DE IMAGEN COLAPSABA

   Los huecos de imagen de las tarjetas pasaron de <div> a <a> para poder
   hacer clic en la foto. Un enlace es inline por defecto, así que no acepta
   aspect-ratio ni alto: la tarjeta salía sin imagen ni marcador.

   Se declara display:block en los huecos, sean div o enlace.
   ========================================================================== */
.dp-x-card-media,
.dp-x-prod-media,
a.dp-x-card-media,
a.dp-x-prod-media {
    display: block !important;
    width: 100%;
    text-decoration: none !important;
}
.dp-x-card-media { aspect-ratio: 16 / 9; min-height: 120px; }
.dp-x-prod-media { aspect-ratio: 1 / 1; min-height: 140px; }

/* El marcador de imagen pendiente también necesita caja */
a.dp-x-ph { display: block !important; }


/* ==========================================================================
   59. PÁGINAS INTERNAS — SIN IDs

   Las §46, §50 y §52 apuntaban a los IDs de widget de la home, así que las
   16 páginas internas quedaban con el logo AZZORTI, la fuente serif que
   traen algunos widgets y los botones subrayados.

   Aquí todo va por atributo o por clase, así que aplica en cualquier página.
   ========================================================================== */

/* --- 1. Logo: se reemplaza por el de Despenssa en cualquier página ---
   Se detecta por el nombre del archivo, no por el ID del widget. La
   propiedad content sustituye la imagen manteniendo el enlace. */
body.dp-site img[src*="logo-1"],
body.single-dp_producto img[src*="logo-1"],
body.single-dp_inspira img[src*="logo-1"] {
    content: url('assets/logo-verde.png') !important;
    width: 176px !important;
    height: 38px !important;
    max-width: 176px !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    opacity: 1 !important;
}

/* --- 2. Tipografía: la de marca en todo el contenido de Elementor ---
   Algunos widgets traen una familia serif fijada a mano. Se excluyen los
   iconos, que dependen de su propia familia. */
body.dp-site .elementor-widget:not(.elementor-widget-icon):not(.elementor-widget-social-icons),
body.dp-site .elementor-widget-container,
body.dp-site .elementor-heading-title,
body.dp-site .elementor-text-editor,
body.dp-site .elementor-text-editor *:not(i):not(svg):not(span[class*="fa"]),
body.dp-site .elementor-button-text,
body.dp-site .elementor-cta__title,
body.dp-site .elementor-cta__description,
body.dp-site .menu_interno a,
body.dp-site p,
body.dp-site li,
body.dp-site td,
body.dp-site th,
body.dp-site h1, body.dp-site h2, body.dp-site h3,
body.dp-site h4, body.dp-site h5, body.dp-site h6 {
    font-family: 'Metropolis', Arial, Helvetica, sans-serif !important;
}
/* Los iconos conservan su familia.
   OJO: aquí NO sirve font-family: inherit, porque heredaría Metropolis de la
   regla de arriba y los iconos saldrían como cuadritos. Hay que nombrar cada
   familia de iconos de forma explícita (ver §63). */

/* --- 3. Sin subrayados en botones y navegación ---
   Astra subraya los enlaces del contenido y el subrayado se colaba en los
   botones. Se conserva solo en el texto corrido. */
body.dp-site .elementor-button,
body.dp-site .elementor-button *,
body.dp-site .elementor-cta__button,
body.dp-site .elementor-item,
body.dp-site .menu-link,
body.dp-site .menu_interno a,
body.dp-site .dp-x-btn,
body.dp-site .dp-x-btn-outline,
body.dp-site .btn-login,
body.dp-site .btn-login a,
body.dp-site .elementor-widget-image a,
body.dp-site .elementor-social-icon,
body.single-dp_producto .elementor-button,
body.single-dp_inspira .elementor-button {
    text-decoration: none !important;
}
/* Astra: quitar el subrayado global del contenido de página */
body.dp-site.ast-single-post .entry-content a,
body.dp-site .entry-content a {
    text-decoration: none;
}
body.dp-site .entry-content p > a:not(.elementor-button):not([class*="dp-"]) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 4. Cabecera de las páginas internas ---
   Mismo tratamiento que la home, por posición y no por ID: primera sección
   la franja verde, segunda la cabecera. Ya está en la §25; aquí solo el
   tamaño del logo y el color de los títulos, que algunos widgets fijan. */
body.dp-site .elementor-widget-image img[src*="logo-1"] {
    max-height: 38px;
    width: auto;
}
body.dp-site .elementor-widget-heading .elementor-heading-title {
    color: #22542E !important;
}

/* --- 5. Pestañas internas (Ropa / Joyería / Fragancias / Hogar) --- */
body.dp-site .menu_interno a {
    display: inline-flex !important;
    align-items: center;
    height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid #EFE7D8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1C1C1C !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
}
body.dp-site .menu_interno a:hover {
    background: #E7EFE9 !important;
    border-color: #22542E !important;
    color: #22542E !important;
}
body.dp-site .menu_interno a.activo,
body.dp-site .menu_interno a.active,
body.dp-site .menu_interno a[class*="activ"] {
    background: #22542E !important;
    border-color: #22542E !important;
    color: #fff !important;
}


/* ==========================================================================
   60. CATÁLOGO DE CATEGORÍA (taxonomy-dp_categoria.php)

   Banner, chips de marca, panel de filtros a la izquierda, barra de orden y
   grilla de productos. Los filtros van por URL, así que son enlazables.
   ========================================================================== */

.dp-catalogo { padding-block: 20px 48px; }

/* --- Banner y cabecera --- */
.dp-cat-banner {
    aspect-ratio: 3 / 1;
    min-height: 180px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: #F1E9D8 center/cover no-repeat;
}
.dp-cat-head { margin-bottom: 18px; }
.dp-cat-head h1 {
    margin: 0 0 6px;
    color: #22542E;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
    font-weight: 800;
}
.dp-cat-head p { margin: 0; color: #4B4B4B; font-size: .9375rem; }

/* --- Chips de marca --- */
.dp-chips {
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid #EFE7D8;
    border-radius: 14px;
    background: #fff;
}
.dp-chips__tit {
    display: block;
    margin-bottom: 10px;
    color: #22542E;
    font-size: .8125rem;
    font-weight: 700;
}
.dp-chips__lista { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-chips .dp-chip {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #EFE7D8;
    border-radius: 999px;
    background: #fff;
    color: #1C1C1C !important;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}
.dp-chips .dp-chip:hover { border-color: #22542E; color: #22542E !important; }
.dp-chips .dp-chip.is-on {
    background: #22542E;
    border-color: #22542E;
    color: #fff !important;
}

/* --- Rejilla general: filtros + lista --- */
.dp-catalogo-grid {
    display: grid;
    grid-template-columns: 216px 1fr;
    gap: 20px;
    align-items: start;
}

/* --- Panel de filtros --- */
.dp-filtros {
    padding: 18px;
    border: 1px solid #EFE7D8;
    border-radius: 14px;
    background: #fff;
    position: sticky;
    top: 16px;
}
.dp-filtros__grupo + .dp-filtros__grupo {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F1E9D8;
}
.dp-filtros h3 {
    margin: 0 0 10px;
    color: #22542E;
    font-size: .8125rem;
    font-weight: 700;
}
.dp-filtros ul { list-style: none; margin: 0; padding: 0; }
.dp-filtros li { margin: 0 0 7px; }

.dp-filtro {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4B4B4B !important;
    font-size: .8125rem;
    text-decoration: none !important;
}
.dp-filtro__caja {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 1.5px solid #D8D2C4;
    border-radius: 4px;
    background: #fff;
    position: relative;
}
.dp-filtro:hover { color: #22542E !important; }
.dp-filtro:hover .dp-filtro__caja { border-color: #22542E; }
.dp-filtro.is-on { color: #22542E !important; font-weight: 600; }
.dp-filtro.is-on .dp-filtro__caja {
    background: #22542E;
    border-color: #22542E;
}
.dp-filtro.is-on .dp-filtro__caja::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- Interruptores de promoción --- */
.dp-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    color: #4B4B4B !important;
    font-size: .8125rem;
    text-decoration: none !important;
}
.dp-switch__pista {
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #E4E1DA;
    position: relative;
    transition: background-color .2s ease;
}
.dp-switch__pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}
.dp-switch.is-on { color: #22542E !important; font-weight: 600; }
.dp-switch.is-on .dp-switch__pista { background: #22542E; }
.dp-switch.is-on .dp-switch__pista::after { transform: translateX(16px); }

.dp-filtros__limpiar {
    width: 100%;
    margin-top: 16px;
    justify-content: center;
}

/* --- Barra de resultados y orden --- */
.dp-catalogo-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dp-orden {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: #8A8A8A;
}
.dp-orden__op {
    padding: 5px 11px;
    border: 1px solid #EFE7D8;
    border-radius: 999px;
    background: #fff;
    color: #4B4B4B !important;
    font-weight: 600;
    text-decoration: none !important;
}
.dp-orden__op:hover { border-color: #22542E; color: #22542E !important; }
.dp-orden__op.is-on {
    background: #22542E;
    border-color: #22542E;
    color: #fff !important;
}

/* --- Grilla de productos del catálogo --- */
.dp-x-prods--catalogo { grid-template-columns: repeat(4, 1fr); }
.dp-x-prod-body h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

.dp-catalogo-vacio {
    padding: 30px 20px;
    border: 1px dashed #D8D2C4;
    border-radius: 14px;
    background: #fff;
    color: #4B4B4B;
    text-align: center;
    font-size: .9375rem;
}
.dp-catalogo-vacio a { color: #F55D17; font-weight: 600; }

/* --- Paginación --- */
.dp-paginacion {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 26px;
}
.dp-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #EFE7D8;
    border-radius: 8px;
    background: #fff;
    color: #4B4B4B !important;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none !important;
}
.dp-paginacion .page-numbers:hover { border-color: #22542E; color: #22542E !important; }
.dp-paginacion .page-numbers.current {
    background: #22542E;
    border-color: #22542E;
    color: #fff !important;
}

/* --- Marco y fondo --- */
body.tax-dp_categoria #masthead,
body.post-type-archive-dp_producto #masthead,
body.tax-dp_categoria .entry-header,
body.tax-dp_categoria .site-footer,
body.post-type-archive-dp_producto .site-footer { display: none; }
body.tax-dp_categoria,
body.tax-dp_categoria #page,
body.tax-dp_categoria .site-content,
body.post-type-archive-dp_producto,
body.post-type-archive-dp_producto #page,
body.post-type-archive-dp_producto .site-content {
    background-color: var(--dp-crema) !important;
}
body.tax-dp_categoria #content > .ast-container,
body.post-type-archive-dp_producto #content > .ast-container { max-width: 1140px !important; }
body.tax-dp_categoria .dp-footer,
body.post-type-archive-dp_producto .dp-footer { margin-top: 40px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .dp-catalogo-grid { grid-template-columns: 1fr; }
    .dp-filtros { position: static; }
    .dp-filtros__grupo { display: inline-block; vertical-align: top; width: 32%; }
    .dp-filtros__grupo + .dp-filtros__grupo { border-top: 0; margin-top: 0; padding-top: 0; }
    .dp-x-prods--catalogo { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .dp-filtros__grupo { width: 100%; }
    .dp-filtros__grupo + .dp-filtros__grupo {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid #F1E9D8;
    }
    .dp-x-prods--catalogo { grid-template-columns: repeat(2, 1fr); }
    .dp-cat-banner { aspect-ratio: 16 / 9; }
}

/* --- Modo oscuro --- */
html[data-tema="oscuro"] body.tax-dp_categoria,
html[data-tema="oscuro"] body.tax-dp_categoria #page,
html[data-tema="oscuro"] body.tax-dp_categoria .site-content,
html[data-tema="oscuro"] body.post-type-archive-dp_producto,
html[data-tema="oscuro"] body.post-type-archive-dp_producto #page,
html[data-tema="oscuro"] body.post-type-archive-dp_producto .site-content {
    background-color: #12160F !important;
}
html[data-tema="oscuro"] .dp-filtros,
html[data-tema="oscuro"] .dp-chips,
html[data-tema="oscuro"] .dp-chips .dp-chip,
html[data-tema="oscuro"] .dp-orden__op,
html[data-tema="oscuro"] .dp-paginacion .page-numbers,
html[data-tema="oscuro"] .dp-catalogo-vacio {
    background: #1A1F16 !important;
    border-color: #2C332A !important;
    color: #C3C0B6 !important;
}
html[data-tema="oscuro"] .dp-filtros h3,
html[data-tema="oscuro"] .dp-chips__tit { color: #A7D9B4 !important; }
html[data-tema="oscuro"] .dp-filtro { color: #C3C0B6 !important; }
html[data-tema="oscuro"] .dp-filtro__caja { background: #23301F; border-color: #3A4536; }
html[data-tema="oscuro"] .dp-cat-banner { background-color: #23301F; }


/* ==========================================================================
   61. PORTADAS DE CATÁLOGO A TAMAÑO COMPLETO

   Las portadas salían del tamaño de un sello: el selector del logo de la §25
   y la §59 usaba img[src*="logo"], que también casa con "catalogos"
   (cata-LOGO-s). Corregido en el origen a "logo-1"; aquí se les devuelve el
   tamaño y se les da la tarjeta, en la página de catálogos y en cualquier
   otra donde aparezcan.
   ========================================================================== */
body.dp-site .elementor-widget-image img[src*="catalogo"],
body.dp-site .elementor-widget-image img[src*="catálogo"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 12px;
}
body.dp-site .elementor-widget-image:has( img[src*="catalogo"] ) .elementor-image {
    background: #fff;
    border: 1px solid #EFE7D8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28,28,28,.05);
    transition: box-shadow .25s ease, transform .25s ease;
}
body.dp-site .elementor-widget-image:has( img[src*="catalogo"] ) .elementor-image:hover {
    box-shadow: 0 12px 32px rgba(28,28,28,.12);
    transform: translateY(-3px);
}

/* Títulos de campaña y botón, más ordenados */
body.dp-site .elementor-widget-heading + .elementor-widget-image { margin-top: 10px; }


/* ==========================================================================
   62. IMÁGENES DE CONTENIDO Y MENÚ ACTIVO

   1. Las portadas de catálogo seguían pequeñas. La §61 las buscaba por el
      nombre del archivo ("catalogo"), y no todas lo llevan. Aquí se ataca por
      posición: cualquier imagen de contenido ocupa el ancho de su columna,
      excepto el logo.
   2. El ítem activo del menú salía con texto oscuro sobre el verde. Se cubre
      también el texto hijo, que es donde algunos widgets fijan el color.
   ========================================================================== */

/* --- 1. Imágenes de contenido a su tamaño natural de columna --- */
body.dp-site .site-main .elementor-widget-image img:not([src*="logo-1"]),
body.dp-site .entry-content .elementor-widget-image img:not([src*="logo-1"]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
}

/* Se excluyen los iconos y las imágenes pequeñas por definición */
body.dp-site .elementor-widget-image img[width][height][src*="icon"],
body.dp-site .elementor-widget-image img[src*="whatsapp"],
body.dp-site .elementor-widget-image img[src*="isotipo"],
body.dp-site .elementor-widget-image img[src*="ISOTIPO"] {
    width: auto !important;
    max-width: 100% !important;
}

/* Tarjeta para las portadas, sin depender de :has() */
body.dp-site .site-main .elementor-widget-image .elementor-image {
    border-radius: 12px;
    overflow: hidden;
}

/* --- 2. Menú activo con texto blanco --- */
body.dp-site .elementor-nav-menu--main .elementor-item-active,
body.dp-site .elementor-nav-menu--main .elementor-item-active *,
body.dp-site .elementor-nav-menu--main .current-menu-item > .elementor-item,
body.dp-site .elementor-nav-menu--main .current-menu-item > .elementor-item *,
body.dp-site .elementor-nav-menu--main .current_page_item > .elementor-item,
body.dp-site .elementor-nav-menu--main .current-menu-ancestor > .elementor-item,
body.dp-site .dp-nav .current-menu-item > a,
body.dp-site .dp-nav .current-menu-item > a * {
    color: #ffffff !important;
    background-color: #22542E !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.dp-site .elementor-nav-menu--main .elementor-item-active:hover,
body.dp-site .elementor-nav-menu--main .current-menu-item > .elementor-item:hover {
    background-color: #1A4023 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* El submenú desplegable no debe heredar el verde del padre activo */
body.dp-site .elementor-nav-menu--dropdown .elementor-sub-item,
body.dp-site .elementor-nav-menu--dropdown .elementor-sub-item * {
    background-color: transparent !important;
    color: #1C1C1C !important;
    -webkit-text-fill-color: #1C1C1C !important;
}
body.dp-site .elementor-nav-menu--dropdown .elementor-sub-item:hover {
    background-color: #E7EFE9 !important;
    color: #22542E !important;
    -webkit-text-fill-color: #22542E !important;
}


/* ==========================================================================
   63. FUENTES DE ICONOS

   La §59 forzó Metropolis en todo el contenido de Elementor para quitar la
   serif de algunos widgets. Eso alcanzó a las fuentes de iconos, y las
   flechas del slider, los iconos sociales y los de Elementor salieron como
   cuadritos.

   No basta con "font-family: inherit" en los iconos: heredarían Metropolis.
   Hay que nombrar cada familia explícitamente.
   ========================================================================== */

/* --- Iconos propios de Elementor (flechas del slider, menú, etc.) --- */
body.dp-site i[class^="eicon"],
body.dp-site i[class*=" eicon"],
body.dp-site span[class^="eicon"],
body.dp-site span[class*=" eicon"],
body.dp-site .elementor-swiper-button i,
body.dp-site .elementor-menu-toggle i,
body.single-dp_producto i[class*="eicon"],
body.single-dp_inspira i[class*="eicon"] {
    font-family: eicons !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
}

/* --- Font Awesome: marcas (Facebook, Instagram, YouTube) --- */
body.dp-site i.fab,
body.dp-site .fab,
body.dp-site .elementor-social-icon i {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* --- Font Awesome: sólidos y regulares --- */
body.dp-site i.fas,
body.dp-site .fas {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}
body.dp-site i.far,
body.dp-site .far,
body.dp-site i.fa,
body.dp-site .elementor-icon i:not([class*="eicon"]):not(.fab) {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* --- Dashicons, por si algún plugin las usa en el frontal --- */
body.dp-site [class^="dashicons"],
body.dp-site [class*=" dashicons"] {
    font-family: dashicons !important;
}

/* --- Flechas del slider: tamaño y contraste --- */
body.dp-site .elementor-widget-slides .elementor-swiper-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: rgba(34,84,46,.5) !important;
    color: #fff !important;
    font-size: 18px !important;
}
body.dp-site .elementor-widget-slides .elementor-swiper-button:hover {
    background: #F55D17 !important;
}
body.dp-site .elementor-widget-slides .elementor-swiper-button i {
    font-size: 18px !important;
    color: #fff !important;
}


/* ==========================================================================
   64. CORRECCIÓN DEL ANCHO EN EL CATÁLOGO

   Las tarjetas salían como tiras de 50 px y el texto se partía letra a letra:
   la rejilla repartía 4 columnas de 1fr sobre un contenedor que no estaba
   tomando el ancho completo (Astra pone el contenedor de contenido en flex,
   y el <main> se ajustaba al contenido).

   Se resuelve de dos formas a la vez, para que no dependa de eso:
   - el main y sus contenedores toman el 100 % y admiten encogerse (min-width:0)
   - las columnas se definen con minmax, así una tarjeta nunca baja de 190 px
   ========================================================================== */

/* --- El main del catálogo ocupa todo el ancho --- */
body.tax-dp_categoria #primary,
body.post-type-archive-dp_producto #primary,
body.single-dp_producto #primary,
body.single-dp_inspira #primary,
.dp-catalogo,
.dp-ficha,
.dp-articulo {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
}
body.tax-dp_categoria .site-content .ast-container,
body.post-type-archive-dp_producto .site-content .ast-container {
    display: block !important;
}

.dp-catalogo-grid { width: 100%; }
.dp-catalogo-lista,
.dp-filtros { min-width: 0; }

/* --- Las tarjetas nunca se comprimen --- */
.dp-x-prods,
.dp-x-prods--catalogo {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.dp-x-insp {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.dp-x-prod,
.dp-x-card { min-width: 0; }
.dp-x-prod-body h3 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* --- Cabecera de la categoría alineada a la izquierda --- */
.dp-cat-head,
.dp-cat-head h1,
.dp-cat-head p { text-align: left !important; }

/* --- Barra de orden: las pastillas no se parten --- */
.dp-orden { flex-wrap: wrap; }
.dp-orden__op,
.dp-orden > span { white-space: nowrap; }

@media (max-width: 700px) {
    .dp-x-prods,
    .dp-x-prods--catalogo {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}


/* ==========================================================================
   65. FUERA LA BARRA LATERAL DE ASTRA EN LAS VISTAS PROPIAS

   Astra imprimía su barra lateral (vacía) en los archivos y fichas, y se
   quedaba con parte del ancho: el catálogo caía a una tarjeta por fila.
   Ya se desactiva por PHP en inc/catalogo.php; esto es el respaldo por CSS,
   por si algún ajuste del Personalizador la vuelve a imprimir.
   ========================================================================== */
html body.tax-dp_categoria #secondary,
html body.tax-dp_marca #secondary,
html body.tax-dp_tipo #secondary,
html body.tax-dp_subcat #secondary,
html body.post-type-archive-dp_producto #secondary,
html body.post-type-archive-dp_inspira #secondary,
html body.single-dp_producto #secondary,
html body.single-dp_inspira #secondary {
    display: none !important;
}

html body.tax-dp_categoria #content .ast-container,
html body.post-type-archive-dp_producto #content .ast-container,
html body.single-dp_producto #content .ast-container,
html body.single-dp_inspira #content .ast-container {
    display: block !important;
    width: 100% !important;
    max-width: 1140px !important;
}

html body.tax-dp_categoria #primary,
html body.post-type-archive-dp_producto #primary,
html body.single-dp_producto #primary,
html body.single-dp_inspira #primary {
    width: 100% !important;
    max-width: none !important;
    /* OJO: aquí NO va flex:none. Si el contenedor sigue en flex, flex:none
       hace que el main se ajuste al contenido y el catálogo se estrecha.
       Ver §66. */
    flex: 1 1 auto !important;
    float: none !important;
    padding: 0 !important;
    border: 0 !important;
}

/* La rejilla del catálogo con columnas explícitas y sin desbordes */
.dp-catalogo-grid {
    grid-template-columns: 216px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
}
@media (max-width: 1024px) {
    .dp-catalogo-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   66. ANCHO DEL CATÁLOGO — POR EL HIJO, NO POR EL PADRE

   Dos intentos (§64 y §65) atacaron el ancho desde los contenedores padres y
   no bastó: el <main> seguía dimensionándose al contenido, así que la columna
   de la lista quedaba en ~220 px y solo cabía una tarjeta por fila.

   Aquí se invierte el enfoque: se le da ancho EXPLÍCITO a los bloques hijos.
   Un padre que se ajusta al contenido crece para acomodar a un hijo con
   ancho declarado, así que el resultado no depende de flex, float ni de la
   barra lateral.

   min(1092px, 100vw - 48px) = el ancho de marca menos el margen del
   contenedor, o el de la ventana en pantallas menores.
   ========================================================================== */
.dp-catalogo > .dp-x-breadcrumb,
.dp-catalogo > .dp-cat-banner,
.dp-catalogo > .dp-cat-head,
.dp-catalogo > .dp-chips,
.dp-catalogo > .dp-catalogo-grid {
    width: min(1092px, calc(100vw - 48px));
    max-width: 100%;
    box-sizing: border-box;
}

/* Igual para la ficha de producto y el artículo, por el mismo motivo */
.dp-ficha > .dp-x-breadcrumb,
.dp-ficha > .dp-ficha__top,
.dp-ficha > .dp-ficha__benef,
.dp-ficha > .dp-ficha__tabs,
.dp-ficha > .dp-x-section,
.dp-articulo > .dp-x-breadcrumb,
.dp-articulo > .dp-articulo__head,
.dp-articulo > .dp-articulo__media,
.dp-articulo > .dp-pasos,
.dp-articulo > .dp-articulo__cuerpo,
.dp-articulo > .dp-x-section {
    width: min(1092px, calc(100vw - 48px));
    max-width: 100%;
    box-sizing: border-box;
}
/* El artículo mantiene su columna de lectura centrada */
.dp-articulo__head,
.dp-articulo__media,
.dp-pasos,
.dp-articulo__cuerpo { margin-inline: auto; }
.dp-articulo > .dp-articulo__head { width: min(640px, calc(100vw - 48px)); }
.dp-articulo > .dp-articulo__media,
.dp-articulo > .dp-pasos,
.dp-articulo > .dp-articulo__cuerpo { width: min(720px, calc(100vw - 48px)); }

/* La lista no puede encogerse por su contenido */
.dp-catalogo-lista { min-width: 0; width: 100%; }
.dp-x-prods,
.dp-x-prods--catalogo,
.dp-x-insp { width: 100%; }

@media (max-width: 1024px) {
    .dp-catalogo > .dp-catalogo-grid { width: min(1092px, calc(100vw - 40px)); }
}
/* ==========================================================================
   67. SUBMENÚS DE LA FRANJA SUPERIOR VISIBLES
   El texto blanco de la franja verde se colaba en el desplegable blanco.
   ========================================================================== */
body.dp-site .elementor-nav-menu--main .sub-menu,
body.dp-site .elementor-nav-menu--dropdown.sub-menu {
    background: #ffffff !important;
    z-index: 99990 !important;
}
body.dp-site .elementor-nav-menu--main .sub-menu a,
body.dp-site .elementor-nav-menu--main .sub-menu .elementor-sub-item,
body.dp-site .elementor-nav-menu--main .sub-menu .elementor-item,
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .sub-menu a,
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .sub-menu .elementor-item,
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .sub-menu .elementor-sub-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px 16px !important;
    background: transparent !important;
    color: #1C1C1C !important;
    -webkit-text-fill-color: #1C1C1C !important;
    font-size: .8125rem !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}
body.dp-site .elementor-nav-menu--main .sub-menu a:hover,
body.dp-site .elementor-section-wrap > .elementor-top-section:first-child .sub-menu a:hover {
    background: #E7EFE9 !important;
    color: #22542E !important;
    -webkit-text-fill-color: #22542E !important;
}
/* ==========================================================================
   71. MÓVIL: CABECERA SIN MONTARSE
   En ~360 px no cabían hamburguesa + logo + botón en una línea. El logo se
   ataca por posición (primera columna de la cabecera), no por nombre de
   archivo ni ID, porque el archivo cambió y cada página tiene otro ID.
   ========================================================================== */
@media (max-width: 767px) {

    /* Sin relleno de columna que robe ancho */
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column > .elementor-column-wrap,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-widget-wrap {
        padding: 0 !important;
    }
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) > .elementor-container {
        padding-inline: 10px !important;
    }

    /* Hamburguesa un poco menor */
    body.dp-site .dp-menu-toggle--auto {
        width: 36px !important;
        height: 36px !important;
        padding: 0 8px !important;
    }
    body.dp-site .dp-header-fila { gap: 8px !important; }

    /* Logo: cabe en lo que quede, máximo 104 px */
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child .elementor-widget-image,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child .elementor-image,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child .elementor-image a {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 104px !important;
        height: auto !important;
        min-width: 0 !important;
        background-image: none !important;
    }
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child img {
        display: block !important;
        width: 100% !important;
        max-width: 104px !important;
        height: auto !important;
        opacity: 1 !important;
        object-fit: contain !important;
    }

    /* Botón de asesora en dos líneas: SOY ASESORA / INGRESAR */
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .btn-login {
        min-height: 36px !important;
        max-width: 104px !important;
        padding: 4px 10px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .btn-login a {
        font-size: .625rem !important;
        letter-spacing: .02em;
    }
}

/* Pantallas muy angostas (≤360 px): logo un punto menor */
@media (max-width: 360px) {
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child img,
    body.dp-site .elementor-section-wrap > .elementor-top-section:nth-child(2) .elementor-column:first-child .elementor-image {
        max-width: 88px !important;
    }
}
/* Contacto: sección sobrante con imagen y botón duplicado */
body.page-id-1240 .elementor-element-6c23941 { display: none !important; }