/* =========================================================================
   Canil Gen Fratelli — paleta verde + negro, switch de idioma, cajones de
   foto y formulario de contacto/reserva.

   Este archivo es la fuente de verdad del estilo propio del sitio.
   setup-tema.ps1 lo publica en /wp-content/uploads/canil/custom.css y lo
   encola el mu-plugin canil-gen-fratelli.php. La paleta (bloque :root) se
   aplica además como «CSS adicional» del personalizador del tema.

   No toca el CSS de Shoptimizer: sólo lo pisa por especificidad.
   ========================================================================= */

:root {
    --canil-negro:        #0a0a0a;
    --canil-negro-suave:  #16201a;
    --canil-verde-oscuro: #0f2e1d;
    --canil-verde:        #1b5e36;
    --canil-verde-claro:  #2e8b57;
    --canil-verde-brote:  #57b77c;
    --canil-verde-palido: #e8f3ec;
    --canil-blanco:       #ffffff;
}

/* ---------------------------------------------------------------- base -- */

body,
body.woocommerce-page {
    background-color: var(--canil-blanco);
    color: var(--canil-negro);
}

body a {
    color: var(--canil-verde);
}

body a:hover,
body a:focus {
    color: var(--canil-verde-claro);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.entry-title,
.page-title {
    color: var(--canil-verde-oscuro);
}

/* -------------------------------------------------------------- header -- */

.site-header,
.site-header .main-header,
.col-full-nav,
.shoptimizer-primary-navigation,
.topbar-wrapper,
.top-bar {
    background-color: var(--canil-negro);
    color: var(--canil-blanco);
}

/* SW-1: el header debe ser contexto de posicionamiento para el switch de
   idioma (banderitas diminutas en la esquina superior derecha). */
.site-header {
    position: relative;
}

.site-header .site-title a,
.site-header .site-title a:hover {
    color: var(--canil-blanco);
}

/* Logo del header (WEB-006): el Owner lo pidió GRANDE. Pasó de 72 px a 164 px
   de alto máximo. El archivo que se sirve es el PNG con transparencia que
   genera setup-tema.ps1 (logo-header.png), así se funde con el fondo negro. */
.site-header .custom-logo-link img,
.site-header .custom-logo {
    max-height: 164px;
    width: auto;
    height: auto;
    background: transparent;
}

.site-header .custom-logo-link,
.site-header .site-branding,
.site-header .site-logo-anchor {
    display: inline-block;
    max-height: none;
    line-height: 1;
}

@media (max-width: 768px) {
    .site-header .custom-logo-link img,
    .site-header .custom-logo {
        max-height: 108px;
    }
}

.main-navigation ul.menu > li > a,
.main-navigation ul.menu > li > a span,
.secondary-navigation ul.menu > li > a {
    color: var(--canil-blanco);
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:hover span,
.main-navigation ul.menu > li.current-menu-item > a span {
    color: var(--canil-verde-brote);
}

.main-navigation ul.menu > li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 0 var(--canil-verde-claro);
}

/* -------------------------------------------------- switch de idioma --- */
/* HDR-2b1: PÍLDORA de 3 (ES / PT / EN) en esquina del header. ES y PT
   muestran banderitas diminutas (22x15px) con texto corto visible. EN
   queda reservado como span oculto con display:none !important hasta
   que existan páginas en inglés. */

.canil-switch-idioma {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 60;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 4px;
    background: #141d19;
    border: 1px solid rgba(74, 222, 128, 0.22);
    border-radius: 9999px;
}

.canil-switch-idioma__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 11px;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 1;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.canil-switch-idioma__enlace:hover,
.canil-switch-idioma__enlace:focus {
    color: #ffffff;
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.5);
    outline: none;
}

.canil-switch-idioma__enlace[aria-current="true"] {
    color: #ffffff;
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border-color: #4ade80;
    box-shadow: 0 0 0 1px #4ade80, 0 6px 16px -6px rgba(34, 197, 94, 0.6);
}

.canil-switch-idioma__texto-corto {
    display: inline-block;
}

/* Bandera: visible y diminuta (22x15px). */
.canil-bandera {
    display: inline-flex;
    width: 22px;
    height: 15px;
}

.canil-bandera__svg {
    display: block;
    width: 22px;
    height: 15px;
}

/* Enlace EN reservado: el mu-plugin lo emite con class .canil-idioma-en
   para cuando existan páginas en inglés. Mientras tanto, oculto. */
.canil-idioma-en {
    display: none !important;
}

/* Resguardo por seguridad: cualquier rastro viejo de texto del switch
   (clase heredada del hito SW-1) que pudiera quedar en cache. */
.canil-switch-idioma__texto {
    display: none !important;
}

/* ------------------------------- jerarquía visual del contenido (D) ---- */
/* Las pestañas que vienen de un .txt del Owner se arman con franja de
   banner, títulos h2/h3, negritas en los términos clave y cajones de foto.
   Lo emite el hito D (contenido) + el hito B (publicación). */

.canil-banner {
    display: block;
    margin: 0 0 28px;
    padding: 22px 26px;
    background: linear-gradient(90deg, var(--canil-negro) 0%, var(--canil-verde-oscuro) 55%, var(--canil-verde) 100%);
    border-left: 8px solid var(--canil-verde-brote);
    border-radius: 4px;
}

.canil-banner__texto {
    display: block;
    color: var(--canil-verde-palido);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-transform: none;
}

body .canil-titulo {
    clear: both;
    color: var(--canil-verde-oscuro);
    font-weight: 700;
}

body .canil-titulo--h2 {
    margin: 42px 0 14px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--canil-verde-brote);
    font-size: 30px;
    line-height: 1.25;
}

body .canil-titulo--h3 {
    margin: 30px 0 10px;
    padding-left: 12px;
    border-left: 5px solid var(--canil-verde-claro);
    font-size: 23px;
    line-height: 1.3;
}

.entry-content p strong,
.canil-sub-enlace + p strong {
    color: var(--canil-verde-oscuro);
}

.canil-sub-enlace {
    margin: 14px 0;
}

.canil-sub-enlace__a {
    display: inline-block;
    padding: 12px 22px;
    background-color: var(--canil-verde);
    border: 2px solid var(--canil-verde-oscuro);
    border-radius: 999px;
    color: var(--canil-blanco);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.canil-sub-enlace__a:hover,
.canil-sub-enlace__a:focus {
    background-color: var(--canil-negro);
    border-color: var(--canil-verde-brote);
    color: var(--canil-verde-brote);
}

/* ---------------------------------------------------- cajones de foto -- */

.cajon-foto,
.canil-foto-cajon {
    display: block;
    max-width: 100%;
    margin: 24px 0;
    padding: 8px;
    background-color: var(--canil-verde-palido);
    border: 2px solid var(--canil-verde);
    border-radius: 6px;
}

.cajon-foto__img {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--canil-verde-oscuro);
    border-radius: 4px;
}

.cajon-foto__pie {
    margin-top: 8px;
    padding: 4px 2px;
    color: var(--canil-verde-oscuro);
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

/* ------------------------------------------------------- formulario --- */

.canil-formulario {
    max-width: 620px;
    margin: 28px 0;
    padding: 20px;
    background-color: var(--canil-verde-palido);
    border-left: 6px solid var(--canil-verde);
    border-radius: 4px;
}

.canil-formulario__campo {
    display: block;
    margin-bottom: 14px;
}

.canil-formulario__etiqueta {
    display: block;
    margin-bottom: 4px;
    color: var(--canil-verde-oscuro);
    font-weight: 600;
}

.canil-formulario input[type="text"],
.canil-formulario input[type="email"],
.canil-formulario input[type="tel"],
.canil-formulario select,
.canil-formulario textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--canil-blanco);
    border: 1px solid var(--canil-verde);
    border-radius: 4px;
    color: var(--canil-negro);
}

.canil-formulario__enviar {
    padding: 12px 26px;
    background-color: var(--canil-verde);
    border: 0;
    border-radius: 4px;
    color: var(--canil-blanco);
    font-weight: 700;
    cursor: pointer;
}

.canil-formulario__enviar:hover {
    background-color: var(--canil-negro);
}

.canil-formulario__aviso {
    margin-bottom: 16px;
    padding: 12px 14px;
    background-color: var(--canil-verde);
    border-radius: 4px;
    color: var(--canil-blanco);
    font-weight: 600;
}

.canil-formulario__aviso--error {
    background-color: var(--canil-negro);
}

.canil-trampa {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------ footer --- */

.site-footer,
.footer-widgets,
.site-info {
    background-color: var(--canil-negro);
    color: var(--canil-verde-palido);
}

.site-footer a,
.site-info a {
    color: var(--canil-verde-brote);
}

/* ------------------------------------------------------------ botones -- */

body .button,
body button.button,
body input[type="submit"],
body .wp-block-button__link {
    background-color: var(--canil-verde);
    color: var(--canil-blanco);
}

body .button:hover,
body button.button:hover,
body input[type="submit"]:hover,
body .wp-block-button__link:hover {
    background-color: var(--canil-verde-oscuro);
    color: var(--canil-blanco);
}

/* =========================================================================
   FORMATO CANÓNICO (GK-012)
   ========================================================================= */
/* GK-014 PIEZA 3c · el tope era min(1120px,100vw) y CORTABA en móvil: 100vw es
   el ancho COMPLETO del viewport y NO resta el padding del contenedor del tema,
   así que el contenido interno se maquetaba más ancho que la ventana (el
   overflow-x:clip ocultaba el scroll pero no el corte en x=390). 100% toma el
   ancho REAL disponible del padre; 100vw queda PROHIBIDO en esta regla. */
.canil-caracter{overflow-x:clip;max-width:min(1120px,100%);box-sizing:border-box;margin:0 auto;padding:24px 16px;color:#101418;font-family:inherit}
.canil-car-hero{position:relative;overflow:hidden;min-width:0;max-width:100%;border-radius:24px;border:1px solid #D9E3DB;background:linear-gradient(180deg,#E7F4EC 0%,#ffffff 55%,#E7F4EC 100%);padding:40px 24px;text-align:center;margin-bottom:40px}
.canil-car-badge{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:6px 14px;border-radius:999px;background:rgba(18,138,74,.12);border:1px solid rgba(18,138,74,.35);color:#0B5D2C;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.canil-car-hero h1{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:800;margin:18px 0 12px;color:#101418}
.canil-car-sub{font-size:clamp(1rem,2vw,1.25rem);font-weight:300;max-width:720px;margin:0 auto;color:#4A555E}
.canil-car-sec{margin-bottom:40px}
.canil-car-tag{display:block;text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#128A4A}
.canil-car-sec h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:800;color:#101418;text-align:center;margin:10px 0}
.canil-car-desc{color:#4A555E;max-width:760px;margin:0 auto 18px;line-height:1.65;text-align:left}
.canil-h3{font-size:1.15rem;font-weight:700;color:#101418;margin:18px auto 8px;max-width:760px}
.cajon-foto.canil-foto-cajon{max-width:760px;margin:18px auto;border:1px solid #D9E3DB;border-radius:14px;overflow:hidden}
.canil-boton{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;background:#0B5D2C;color:#ffffff;margin:4px}
.canil-pie{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;border-top:1px solid #D9E3DB;margin-top:40px;padding:24px 12px;color:#101418;font-weight:600}
.canil-pie a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid #0B5D2C;color:#0B5D2C;background:#ffffff}
.canil-pie a.wsp{background:#0B5D2C;color:#ffffff}
.canil-pie a.ig{border-color:#C0392B;color:#C0392B}
/* GK-012 PIEZA 3d · grids responsive safe-min: evita desborde en móvil cuando
   el viewport es <280px+padding. Override !important porque los <style> inline
   de las páginas (pagina-*.html) se cargan después de custom.css. */
.canil-ficha,
.canil-car-grid,
.canil-duo,
.canil-mini,
.canil-ficha-grid,
.canil-galeria{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)) !important}
@media (max-width:768px){.canil-caracter{padding:16px 10px}.canil-car-hero{padding:28px 14px}.canil-car-sec h2{font-size:clamp(1.5rem,5vw,2.2rem)}.canil-pie a{width:100%;justify-content:center}}

/* =========================================================================
   CABECERA Y MENÚ NUEVOS (GK-012)
   =========================================================================
   Restilizado completo de la cabecera Shoptimizer con el visual del código
   del Owner: fondo negro con degradado sutil, logo circular con halo verde,
   barra de navegación sticky debajo. Sin CDNs — se usan las fuentes del
   tema (Inter, ya cargada por Shoptimizer/Kirki).

   Selectores REALES detectados en el HTML servido (127.0.0.1:8080):
     header          → #masthead.site-header
     contenedor      → div.main-header.col-full
     branding        → div.site-branding (NO hay .site-title/.site-description)
     logo link       → a.custom-logo-link
     logo img        → img.custom-logo
     top bar         → div.col-full.topbar-wrapper > div.top-bar
     nav outer       → div.col-full-nav
     nav inner       → div.shoptimizer-primary-navigation.col-full
     <nav>           → nav#site-navigation.main-navigation
     nav wrapper     → div.primary-navigation
     menu container  → div.menu-primary-menu-container
     menu <ul>       → ul.menu (id=menu-canil-es / menu-canil-pt)
     top-level link  → a.cg-menu-link.main-menu-link  >  span
     sub-menu wrap   → div.sub-menu-wrapper > div.container > ul.sub-menu
     sub-menu link   → a.cg-menu-link.sub-menu-link  >  span
     caret           → span.caret
     mobile toggle   → button.menu-toggle  (span.bar + span.bar-text)
     sticky state    → .col-full-nav.is_stuck
     overlays        → div.menu-overlay, div.mobile-overlay
   ========================================================================= */

/* --- 1. HEADER PRINCIPAL (.site-header / #masthead) ---------------------- */

.site-header,
#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 136px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #080c0a 0%, #101713 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.25);
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.45);
    padding: 0 2rem;
    max-width: 100%;
}

/* Contenedor interno del header (Shoptimizer usa .main-header.col-full) */
.site-header .main-header.col-full {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
}

/* --- 2. BRANDING / LOGO -------------------------------------------------- */

.site-header .site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Logo circular con halo verde */
.site-header .custom-logo-link,
#masthead .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.site-header .custom-logo-link img,
.site-header .custom-logo,
#masthead .custom-logo-link img {
    width: 108px;
    height: 108px;
    max-height: none;
    border-radius: 9999px;
    background: #ffffff;
    padding: 2px;
    object-fit: cover;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.65),
        0 0 0 2px rgba(74, 222, 128, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header .custom-logo-link img:hover,
.site-header .custom-logo:hover,
#masthead .custom-logo-link img:hover {
    transform: scale(1.06);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.65),
        0 0 0 3px #4ade80;
}

/* El HTML servido NO tiene .site-title ni .site-description; se dejan
   reglas de respaldo por si algún plugin o cache las inyecta. */
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description {
    color: #ffffff;
    margin: 0;
    font-family: inherit;
}

/* --- 3. TOP BAR (se oculta — el Owner quiere solo header+nav) ------------ */

.col-full.topbar-wrapper,
.top-bar {
    display: none;
}

/* --- 4. BARRA DE NAVEGACIÓN (.col-full-nav) ------------------------------ */

.col-full-nav {
    background: linear-gradient(180deg, #101713 0%, #0d120f 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.18);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.4);
}

/* GK-012 PIEZA 4w · el sticky de la barra de navegación SÓLO en escritorio.
   CAUSA: esta regla vivía fuera de cualquier media query, así que en móvil
   su position:sticky ganaba (misma especificidad, declarada después) al
   .col-full-nav{position:fixed;left:-300px;width:300px} que el tema sirve en
   @media (max-width:992px) para el drawer. Resultado: el drawer dejaba de ser
   un panel lateral deslizable. Acotada a ≥993 el tema recupera su fixed. */
@media (min-width: 993px) {
    .col-full-nav {
        position: sticky;
        top: 136px;
        z-index: 999;
    }
}

/* Estado sticky (Shoptimizer añade .is_stuck vía IntersectionObserver) */
.col-full-nav.is_stuck {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.55);
}

.shoptimizer-primary-navigation.col-full {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
}

/* --- 5. MENÚ PRINCIPAL --------------------------------------------------- */

.main-navigation,
#site-navigation.main-navigation {
    position: relative;
}

.primary-navigation {
    display: flex;
    justify-content: center;
}

.menu-primary-menu-container {
    width: 100%;
}

.menu-primary-menu-container > ul,
.menu-primary-menu-container > ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Ítems del menú de primer nivel */
.menu-primary-menu-container > ul > li {
    position: relative;
    list-style: none;
    margin: 0;
}

/* Enlaces de primer nivel */
.menu-primary-menu-container > ul > li > a,
.menu-primary-menu-container > ul > li > a.cg-menu-link.main-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #e2e8f0;
    line-height: 1.4;
    transition: color 0.18s ease, background-color 0.18s ease;
    border-bottom: 3px solid transparent;
}

.menu-primary-menu-container > ul > li > a span {
    color: inherit;
}

.menu-primary-menu-container > ul > li > a:hover,
.menu-primary-menu-container > ul > li > a:focus {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.06);
    border-bottom-color: rgba(74, 222, 128, 0.4);
}

/* Ítem activo */
.menu-primary-menu-container > ul > li.current-menu-item > a,
.menu-primary-menu-container > ul > li.current_page_item > a {
    color: #4ade80;
    border-bottom-color: #4ade80;
}

.menu-primary-menu-container > ul > li.current-menu-item > a span,
.menu-primary-menu-container > ul > li.current_page_item > a span {
    color: #4ade80;
}

/* Caret del dropdown.
   GK-012 PIEZA 4w · REGLA ZOMBI ACOTADA A ESCRITORIO (≥993).
   Esta regla dibujaba el caret como un triangulito CSS con width:0;height:0 y
   bordes. El tema 2.9.2 sirve el caret como span con ::after y mask-image, de
   modo que width:0/height:0 + border lo DEFORMABAN y, en el drawer móvil,
   dejaban una zona táctil minúscula en la esquina (30×35px medidos por el
   Owner). En ≤992 manda la regla del drawer (bloque @media 768px más abajo),
   que agranda el caret a 56×44px y centra el chevron. */
@media (min-width: 993px) {
    .menu-primary-menu-container > ul > li > a .caret,
    .menu-primary-menu-container > ul > li > span.caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.7;
    }
}

/* --- 6. SUBMENÚS (mega-menu de Shoptimizer) ------------------------------ */
/* GK-012 PIEZA 4y · DESPLEGABLE PC CON LETRAS NEGRAS (D-Owner-7)           */
/* Hallazgo del Owner (13:07): el dropdown de escritorio servía fondo       */
/* #0d120f con enlaces #cbd5e1 → letras gris claro casi invisibles. Ahora   */
/* el panel es BLANCO (#ffffff) y los enlaces NEGROS (#101418) con          */
/* font-weight:600, como la referencia. El drawer móvil                     */
/* (body.mobile-toggled) NO se toca: conserva #0a0a0a/#e2e8f0.              */

.sub-menu-wrapper {
    background: #ffffff;
    border-top: 1px solid rgba(21, 128, 61, 0.18);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.25);
}

.sub-menu-wrapper .container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 16px 0;
    background: #ffffff;
}

.sub-menu-wrapper ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-menu-wrapper ul.sub-menu li {
    list-style: none;
}

.sub-menu-wrapper ul.sub-menu li > a,
.sub-menu-wrapper ul.sub-menu li > a.cg-menu-link.sub-menu-link {
    display: block;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #101418;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sub-menu-wrapper ul.sub-menu li > a:hover,
.sub-menu-wrapper ul.sub-menu li > a:focus {
    color: #0B5D2C;
    background-color: rgba(21, 128, 61, 0.10);
    border-left-color: #128A4A;
}

/* Submenús anidados (p.ej. Plantel → Matrices → Morena):
   mismo contrato que el panel padre (fondo heredado claro, letras negras). */
.sub-menu-wrapper .sub-menu-wrapper {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    padding-left: 14px;
}

.sub-menu-wrapper .sub-menu-wrapper .container {
    background: transparent;
}

.sub-menu-wrapper .sub-menu-wrapper ul.sub-menu li > a,
.sub-menu-wrapper .sub-menu-wrapper ul.sub-menu li > a.cg-menu-link.sub-menu-link {
    color: #101418;
    font-weight: 600;
}

.sub-menu-wrapper .sub-menu-wrapper ul.sub-menu li > a:hover,
.sub-menu-wrapper .sub-menu-wrapper ul.sub-menu li > a:focus {
    color: #0B5D2C;
    background-color: rgba(21, 128, 61, 0.10);
    border-left-color: #128A4A;
}

/* Cabeceras de grupo del submenú (Matrices / Reproductores):
   verde oscuro sobre blanco para que lean con contraste alto. */
.sub-menu-wrapper .canil-menu-cabecera > a {
    pointer-events: none;
    cursor: default;
    text-transform: uppercase;
    font-weight: 700;
    color: #0B5D2C;
    font-size: 12px;
    letter-spacing: .08em;
    padding-top: 12px;
    border-left: 0;
}

.sub-menu-wrapper .canil-menu-cabecera > a:hover,
.sub-menu-wrapper .canil-menu-cabecera > a:focus {
    color: #0B5D2C;
    background: none;
    border-left: 0;
}

/* --- 7. MENÚ MÓVIL (toggle + drawer) ------------------------------------ */

.site-branding button.menu-toggle {
    background-color: transparent;
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 6px;
    padding: 6px 10px;
    color: #e2e8f0;
}

.site-branding button.menu-toggle .bar {
    background-color: #4ade80;
}

.site-branding button.menu-toggle .bar-text {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-overlay,
.mobile-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* --- 8. RESPONSIVE ------------------------------------------------------- */
/* GK-012 PIEZA 2i · MENÚ MÓVIL                                            */
/* En móvil: UN solo menú (la hamburguesa de Shoptimizer). Header flexible, */
/* botones ≥44px, switch sin desborde, drawer del tema con la paleta.      */
/*                                                                         */
/* GK-012 PIEZA 4x · EMERGENCIA (drawer móvil roto en producción):         */
/* en Shoptimizer el menú móvil es el MISMO nav de escritorio              */
/* (.col-full-nav > .shoptimizer-primary-navigation) que el tema despliega */
/* añadiendo body.mobile-toggled. Las reglas 2i/2j lo ocultaban con        */
/* display:none!important → el drawer se abría negro y SIN ítems. Ahora el */
/* nav está oculto por defecto (sin !important, para que el estado         */
/* desplegado pueda ganar) y se muestra con body.mobile-toggled.           */
/*                                                                         */
/* GK-012 PIEZA 4z · EMERGENCIA 2 (drawer seguía NEGRO y VACÍO):           */
/* diagnóstico sobre el ESTADO SERVIDO (main.min.js + main.min.css 2.9.2): */
/*   · JS del tema: click en .menu-toggle →                                */
/*     document.querySelector("body").classList.add("mobile-toggled").      */
/*     La clase de estado REAL es body.mobile-toggled (no .toggled en nav). */
/*   · CSS del tema @media (max-width:992px):                              */
/*       .col-full-nav{position:fixed;z-index:102;left:-300px;width:300px}  */
/*       .mobile-toggled .col-full-nav{left:0}                              */
/*       .mobile-overlay{position:fixed;z-index:101;width:100%;height:100%} */
/*       .mobile-toggled .mobile-overlay{visibility:visible;opacity:1}      */
/*     (.shoptimizer-primary-navigation{display:flex} SÓLO vive en          */
/*      @media (min-width:993px): en móvil el tema NO lo oculta.)           */
/*   · CAUSA EXACTA del 4x: nuestra regla                                   */
/*       body.mobile-toggled .col-full-nav{position:static}                 */
/*     anulaba el position:fixed del tema; z-index sólo aplica a elementos  */
/*     posicionados, así que el drawer perdía su z-index:102 y pasaba a     */
/*     pintarse como caja en flujo (paso 4 del orden de pintado), por       */
/*     DEBAJO de .mobile-overlay (posicionado, z-index:101 → paso 9), al    */
/*     que además habíamos vuelto OPACO con                                 */
/*       .mobile-overlay{background-color:#0a0a0a}.                         */
/*     Resultado: una capa negra a pantalla completa tapando los ítems      */
/*     (que sí estaban en el DOM y con color #e2e8f0). No era display:none  */
/*     ni contraste: era APILADO.                                           */
/*   · FIX 4z: el drawer conserva el position:fixed del tema con z-index    */
/*     POR ENCIMA del overlay, el overlay vuelve a ser translúcido, y los   */
/*     tres contenedores internos se fuerzan visibles con !important.       */

@media (max-width: 768px) {
    /* Nav oculto por defecto en móvil (solo se ve la hamburguesa).
       SIN !important: body.mobile-toggled debe poder revelarlo. */
    .shoptimizer-primary-navigation {
        display: none;
    }

    /* Drawer abierto: el tema añade body.mobile-toggled → mostrar el nav.
       PIEZA 4z: !important en los TRES contenedores internos de la cadena
       .col-full-nav > .shoptimizer-primary-navigation > nav.main-navigation
       > .primary-navigation > .menu-primary-menu-container > ul.menu */
    body.mobile-toggled .shoptimizer-primary-navigation {
        display: block !important;
    }

    body.mobile-toggled .main-navigation {
        display: block !important;
    }

    body.mobile-toggled .primary-navigation {
        display: block !important;
    }

    body.mobile-toggled .menu-primary-menu-container {
        display: block !important;
    }

    body.mobile-toggled .menu-primary-menu-container > ul.menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    /* PIEZA 4z · el contenedor externo MANTIENE el drawer fijo del tema y
       sube por encima de .mobile-overlay (z-index:101). NUNCA position:static:
       un elemento no posicionado ignora z-index y queda bajo el overlay. */
    body.mobile-toggled .col-full-nav {
        display: block !important;
        position: fixed;
        z-index: 103;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 320px);
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 56px 0 24px;
        background: #0a0a0a;
        box-shadow: none;
    }

    /* El botón de cierre del tema queda sobre el drawer */
    body.mobile-toggled .mobile-menu.close-drawer {
        z-index: 104;
        color: #e2e8f0;
    }

    /* PIEZA 4z · el velo NO puede ser opaco: taparía el drawer entero */
    .mobile-overlay {
        background-color: rgba(10, 10, 10, 0.72);
    }

    /* Menú desplegado en columna (apilado), no horizontal */
    .menu-primary-menu-container > ul,
    .menu-primary-menu-container > ul.menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .menu-primary-menu-container > ul > li,
    .menu-primary-menu-container > ul.menu > li {
        display: block;
        width: 100%;
        position: relative;
    }

    /* Submenús dentro del drawer: en flujo, sin mega-menu flotante */
    .sub-menu-wrapper {
        position: static;
        display: block;
        box-shadow: none;
    }

    /* PIEZA 4z · el acordeón del tema abre con .dropdown-open, pero su regla
       base (.main-navigation ul.menu li.menu-item-has-children
       .sub-menu-wrapper{position:fixed;left:-99999px;opacity:0}) es más
       específica que .sub-menu-wrapper: al abrir hay que devolverlo al flujo. */
    body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children.dropdown-open > .sub-menu-wrapper {
        position: static !important;
        left: auto !important;
        opacity: 1 !important;
        transform: none !important;
        display: block !important;
        background: #0a0a0a;
    }

    body.mobile-toggled .main-navigation ul.menu ul.sub-menu {
        display: block !important;
        background: #0a0a0a;
    }

    /* GK-012 PIEZA 4w · ACORDEÓN USABLE (1): el CARET es una COLUMNA táctil.
       Diagnóstico del estado servido: el caret del tema sí expande, pero mide
       30×35px pegado a la esquina superior derecha; el resto de la fila
       navega. Ahora el caret cubre TODO el alto de la fila (top:0;bottom:0) y
       56px de ancho a la derecha → 56×≥44px de superficie táctil, dentro de
       WCAG 2.5.5. border:0 y height:auto desarman lo que quedaba del
       triangulito de la regla zombi (ya acotada a ≥993).
       El chevron (::after con mask-image) se centra con flex. */
    body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children > span.caret {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        height: auto;
        min-height: 44px;
        width: 56px;
        border: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    /* El chevron centrado dentro del caret agrandado (el tema lo posiciona
       con top/right absolutos pensados para la cajita de 30×35). */
    body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children > span.caret::after {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin: 0;
        transform: none;
    }

    /* =====================================================================
       GK-014 PIEZA 7 · DOBLE ICONO en las cabeceras de grupo del drawer
       =====================================================================
       HALLAZGO del Owner: en el menú celular "Matrices" muestra un DOBLE
       icono (arriba/abajo) que confunde y dificulta la apertura, y
       "Reproductores" se ve distinto.

       DIAGNÓSTICO sobre el ESTADO SERVIDO (markup de /inicio/ +
       main.min.css / main.min.js 2.9.2 + CSS del personalizador):

       · El markup de los dos <li> es IDÉNTICO, carácter por carácter salvo
         id y etiqueta:
            <li id="nav-menu-item-2180"
                class="canil-menu-cabecera menu-item menu-item-type-custom
                       menu-item-object-custom menu-item-has-children"
                aria-haspopup="true" aria-expanded="false">
              <a href="#" class="cg-menu-link sub-menu-link"><span>…</span></a>
              <span class="caret"></span>
              <div class='sub-menu-wrapper'>…</div>
            </li>
         → la asimetría NO viene del HTML: viene del CSS.

       · INDICADOR 1 (del TEMA, ::after sobre el propio <a>):
            .main-navigation ul.menu > li:not(.full-width) ul
            li.menu-item-has-children > a:after
            {position:absolute;top:0;right:15px;width:13px;height:13px;
             content:"";background-color:#111;
             transform:translateX(50%) translateY(50%)}
            + mask-image de un chevron a la DERECHA (M9 5L16 12L9 19)
         "Plantel" no lleva .full-width, así que la regla alcanza a TODA
         cabecera anidada con hijos → Matrices y Reproductores reciben un
         chevron pegado ARRIBA a la derecha de su fila.

       · INDICADOR 2 (del TEMA + PIEZA 4w): el <span class="caret"> con su
            .main-navigation ul.menu li.menu-item-has-children span.caret:after
            {width:20px;height:20px;content:""} + mask-image de un chevron
            ABAJO (M19 9L12 16L5 9)
         que la PIEZA 4w agranda a la columna táctil de 56px por todo el
         alto de la fila con el chevron centrado (flex) → un segundo chevron
         al MEDIO de la fila.
         → cada cabecera queda con DOS indicadores, uno arriba y otro al
           centro: el "doble icono (arriba/abajo)" que vio el Owner.

       · POR QUÉ SE NOTA EN "Matrices" Y NO EN "Reproductores": la regla 4w
         del caret agrandado (top:0;bottom:0) aplica a TODOS los
         .menu-item-has-children, también al de PRIMER NIVEL ("Plantel").
         Con el acordeón abierto nosotros devolvemos .sub-menu-wrapper al
         flujo (position:static), así que el <li> de "Plantel" crece hasta
         contener TODO el panel: su caret se estira sobre el panel completo
         (top:0;bottom:0) y su chevron, centrado con align-items:center,
         cae en el MEDIO del panel — que es justo la fila de "Matrices"
         (3ª de 5 filas de 44px) — y además en el hueco derecho que deja
            .main-navigation ul.menu > li:not(.full-width) ul.sub-menu
            {width:200px;box-sizing:content-box}
         dentro del drawer de min(86vw,320px). "Reproductores" queda por
         DEBAJO de ese centro y no recibe el chevron huérfano del padre:
         de ahí que "se vea distinto".

       · Y POR QUÉ CUESTA ABRIRLA: la regla global (fuera de @media)
            .sub-menu-wrapper .canil-menu-cabecera > a{pointer-events:none}
         mata el click sobre el TEXTO de la cabecera, y con él los dos
         manejadores que abren el grupo (el delegado del mu-plugin en
         captura y el del tema, que intercepta los <a href="#"> con
         toggle('dropdown-open') + preventDefault). Sólo respondía la
         columna del caret, que en la cabecera no llega al borde del
         drawer (la ul mide 200px dentro de 320px).

       FIX · UNA sola regla por propiedad sobre la clase COMPARTIDA
       .canil-menu-cabecera: Matrices y Reproductores quedan tratadas
       EXACTAMENTE igual (no hay ninguna regla por id ni por posición):
         (a) se APAGA el ::after del tema sobre el <a> de las cabeceras. El
             indicador ÚNICO pasa a ser el span.caret, que además ES la
             columna táctil de 56×44 de la PIEZA 4w y el que el tema rota
             180° al abrir (.dropdown-open > span.caret). Hace falta
             !important: el selector del tema es (0,4,5) y éste (0,4,3).
         (b) el caret agrandado deja de estirarse más allá de la FILA
             cuando el ítem está ABIERTO (bottom:auto;height:44px) → ningún
             chevron huérfano flotando en el medio del panel abierto. Vale
             para el padre ("Plantel") y para la cabecera anidada.
             La regla base 4w (top:0;bottom:0;height:auto) NO se toca: con
             el acordeón cerrado el caret sigue cubriendo toda la fila.
         (c) la cabecera RECUPERA pointer-events dentro del drawer, así
             tocar el texto abre/cierra el grupo. En PC sigue intacta con
             pointer-events:none (la regla global queda fuera del @media).
    */

    /* (a) indicador ÚNICO: fuera el chevron que el tema pinta sobre el <a> */
    body.mobile-toggled .main-navigation ul.menu .canil-menu-cabecera > a::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* (b) el caret de un ítem ABIERTO no se estira sobre el panel entero */
    body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children.dropdown-open > span.caret {
        bottom: auto;
        height: 44px;
    }

    /* (c) la cabecera vuelve a ser tocable en el drawer: su <a href="#">
           tiene manejador (mu-plugin en captura + tema) y preventDefault,
           así que abre el grupo sin navegar. */
    body.mobile-toggled .main-navigation ul.menu .canil-menu-cabecera > a,
    body.mobile-toggled .main-navigation ul.menu .canil-menu-cabecera > a.cg-menu-link.sub-menu-link {
        pointer-events: auto;
        cursor: pointer;
    }

    /* GK-012 PIEZA 4w · ACORDEÓN USABLE (2): el enlace de la fila reserva el
       hueco del caret para que el texto no quede debajo de la columna táctil. */
    body.mobile-toggled .menu-primary-menu-container > ul > li > a,
    body.mobile-toggled .menu-primary-menu-container > ul > li > a.cg-menu-link.main-menu-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-right: 62px;
    }

    /* GK-012 PIEZA 4w · LIMPIEZA: el panel del dropdown de PC es BLANCO
       (PIEZA 4y). Dentro del drawer esas franjas blancas se colaban entre los
       ítems del acordeón. En ≤768 el wrapper y su .container vuelven al
       #0a0a0a de la paleta del drawer. */
    body.mobile-toggled .sub-menu-wrapper {
        background: #0a0a0a;
    }

    body.mobile-toggled .sub-menu-wrapper .container {
        max-width: 100%;
        padding: 0;
        background: #0a0a0a;
    }

    /* Enlaces de submenú del drawer: touch target 44px. */
    body.mobile-toggled .sub-menu-wrapper ul.sub-menu li > a,
    body.mobile-toggled .sub-menu-wrapper ul.sub-menu li > a.cg-menu-link.sub-menu-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 16px 8px 24px;
    }

    /* Header flexible: sin altura fija, padding simétrico.
       GK-012 PIEZA 3d · min-height ≥ alto del logo (72px) para que el logo
       no sobresalga del header. */
    .site-header,
    #masthead.site-header {
        height: auto;
        min-height: 76px;
        padding: 0 12px;
    }

    /* Contenedor interno: space-between para logo+hamb | switch */
    .site-header .main-header.col-full {
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    /* Botón hamburguesa: ≥44px para cumplir WCAG touch target */
    .site-branding button.menu-toggle {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
    }

    /* Texto "MENU": oculto para que no pise las barras del toggle */
    .site-branding button.menu-toggle .bar-text {
        display: none;
    }

    /* Logo: ≤72px en móvil para no desbordar (header min-height:76px ≥ 72px) */
    .site-header .custom-logo-link img,
    .site-header .custom-logo,
    #masthead .custom-logo-link img {
        width: 72px;
        height: 72px;
        max-width: 72px;
    }

    /* Switch de idioma: right definido + padding, sin desborde */
    .canil-switch-idioma {
        right: 8px;
        top: 10px;
        padding: 3px;
        gap: 4px;
        max-width: calc(100vw - 16px);
    }

    /* GK-012 PIEZA 3d · PÍLDORA: los enlaces del switch no se cortan contra
       el borde derecho en ≤768. */
    .canil-switch-idioma__enlace {
        min-width: 26px;
        padding: 0 4px;
    }

    /* Drawer móvil del tema Shoptimizer: paleta oscura del canil.
       PIEZA 4z · .mobile-overlay YA NO va en este grupo: dejarlo opaco
       (#0a0a0a, z-index:101) era lo que tapaba el drawer. */
    body.mobile-toggled .col-full-nav,
    body.mobile-toggled .shoptimizer-primary-navigation,
    body.mobile-toggled .main-navigation,
    body.mobile-toggled .primary-navigation,
    body.mobile-toggled .menu-primary-menu-container {
        background-color: #0a0a0a;
    }

    body.mobile-toggled .main-navigation ul.menu li a,
    body.mobile-toggled .main-navigation ul.menu li a span {
        color: #e2e8f0;
    }

    /* PIEZA 4z · el customizer del tema pinta el caret #222 en ≤992
       (invisible sobre #0a0a0a): se aclara dentro del drawer.
       Nota: el caret usa mask-image, su background-color ES la tinta; se usa
       #cbd5e1 (no #e2e8f0) para no mezclar la tinta con el color de texto. */
    body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children span.caret::after {
        background-color: #cbd5e1;
    }

    body.mobile-toggled .main-navigation ul.menu li a:hover,
    body.mobile-toggled .main-navigation ul.menu li a:hover span {
        color: #4ade80;
    }

    /* Enlaces de primer nivel del drawer: fila completa y touch target 44px */
    .menu-primary-menu-container > ul > li > a,
    .menu-primary-menu-container > ul > li > a.cg-menu-link.main-menu-link {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .site-header,
    #masthead.site-header {
        min-height: 60px;
        padding: 0 8px;
    }

    /* GK-012 PIEZA 3d · logo 56px en ≤480 (header min-height:60px ≥ 56px) */
    .site-header .custom-logo-link img,
    .site-header .custom-logo,
    #masthead .custom-logo-link img {
        width: 56px;
        height: 56px;
        max-width: 56px;
    }

    /* Switch: sólo banderitas 22x15, sin texto corto */
    .canil-switch-idioma__texto-corto {
        display: none;
    }

    .canil-switch-idioma__enlace {
        min-width: 28px;
        height: 26px;
        padding: 0 4px;
    }

    .canil-switch-idioma {
        right: 8px;
        padding: 3px;
    }
}

/* =========================================================================
   PIE GLOBAL (GK-012 · PIEZA 4a)
   =========================================================================
   Pie de página en TODAS las páginas: sólo 2 iconos interactivos (WhatsApp e
   Instagram). Sin número de teléfono visible ni ningún otro dato. */
.canil-pie-global{display:flex;gap:18px;justify-content:center;align-items:center;padding:20px 12px;background:var(--canil-negro);border-top:1px solid rgba(34,197,94,.18)}
.canil-pie-global img{width:40px;height:40px;border-radius:10px;transition:transform .2s ease}
.canil-pie-global a:hover img{transform:scale(1.08)}

/* =========================================================================
   ICONOS INTERACTIVOS EN EL CUERPO DE CONTACTO (GK-014 · PIEZA 5)
   =========================================================================
   Hallazgo 5 del Owner: en /contacto/ y /pt-contato/ el WhatsApp y el
   Instagram mostraban la URL cruda entre paréntesis. Ahora el enlace es un
   ICONO interactivo al lado del dato en letras. No son los 2 iconos del pie
   global (.canil-pie-global): estos viven dentro del párrafo del cuerpo.

   PIEZA 5-bis · hallazgo visual H-8: en /contacto/ MÓVIL el icono se apilaba
   en renglón propio (etiqueta / icono / dato en 3 renglones). El reclamo del
   Owner es que el icono quede JUNTO al dato en letras.
   EL ANCLA MISMA es el área táctil (no hace falta padding): inline-flex con
   min 44x44 y el icono centrado adentro, así se queda EN LÍNEA con el texto
   del párrafo en vez de empujar un renglón aparte. */
.canil-icono-contacto{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;vertical-align:middle}
.canil-icono-contacto img{width:28px;height:28px;display:inline-block;vertical-align:middle;border-radius:6px;margin:0}

/* El párrafo del dato no tiene que forzar saltos entre la etiqueta, el icono
   y el dato: como caja flex con wrap, los tres quedan en la misma fila y, si
   no entran, envuelven como unidades enteras (nunca el icono solo).
   MEJORA PROGRESIVA: `:has()` no existe en navegadores viejos; ahí el
   selector entero se descarta sin tocar nada más y queda el inline-flex del
   ancla, que ya mantiene el icono en línea. */
.canil-car-desc:has(.canil-icono-contacto){display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* =========================================================================
   CONTRASTE DEL CAJÓN DE BANNER (GK-014 — PIEZA 6)
   =========================================================================
   Hallazgo 6 del Owner: en /cuidados-y-salud/, /diagnostico-de-sordera/ y
   /examen-de-audicion/ el cajón verde oscuro no dejaba leer las letras.
   CAUSA: el banner del formato «canil-car» se sirve como
       <div class="canil-banner">TEXTO</div>
   es decir el texto es hijo DIRECTO del div y NO viaja dentro de
   <span class="canil-banner__texto">, así que la única regla que fijaba
   color claro (.canil-banner__texto) no llegaba a aplicarse nunca y el texto
   heredaba el color de .canil-caracter (#101418, casi negro) sobre el
   degradado oscuro del propio banner (#0a0a0a → #0f2e1d → #1b5e36).
   FIX: el color claro se fija en el CAJÓN mismo (y en todo lo que lleve
   dentro), de modo que el texto sea legible tanto si viene dentro del span
   del formato canónico como si es hijo directo del div. El `body` delante
   sube la especificidad por encima de cualquier regla de una sola clase del
   tema; va al final del archivo para ganar también por orden de cascada.
   PROHIBIDO devolver este color al rango de los fondos del banner
   (#0a0a0a, #0f2e1d, #1b5e36, #101418): volvería el texto ilegible. */
body .canil-banner,
body .canil-banner__texto,
body .canil-banner *{
    color: var(--canil-verde-palido);
}
/* Si algún día el cajón llevara un enlace: claro también, y subrayado para
   que se distinga sin bajar el contraste (el verde brote sólo llega a 3.1:1
   contra el tramo #1b5e36 del degradado). */
body .canil-banner a,
body .canil-banner a:visited,
body .canil-banner a:hover{
    color: var(--canil-verde-palido);
    text-decoration: underline;
}

/* =========================================================================
   FRANJA VENDIDOS (GK-014 — PIEZA FOTOS)
   =========================================================================
   Etiqueta roja sobre la foto de la camada en «Cachorros disponibles» /
   «Filhotes disponíveis» (orden del Owner 20:15). */
.canil-franja-vendidos{display:inline-block;background:#C0392B;color:#ffffff;font-weight:800;padding:8px 18px;border-radius:8px;letter-spacing:.1em;text-transform:uppercase}