/*
Theme Name: VetBox Custom
Author: Z-SEO
Description: Tema custom para VetBox.cl
Version: 1.0
Template: intentionally-blank

This is the child theme for Intentionally Blank theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

@layer fuentes {
  /* play-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Play";
    font-style: normal;
    font-weight: 400;
    src: url("/wp-content/uploads/fonts/play-v21-latin-regular.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* play-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Play";
    font-style: normal;
    font-weight: 700;
    src: url("/wp-content/uploads/fonts/play-v21-latin-700.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* open-sans-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-regular.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-italic.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-600.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-600italic.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-800.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* open-sans-800italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src: url("/wp-content/uploads/fonts/open-sans-v44-latin-800italic.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
}
@layer global {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    position: relative;
    color: var(--text-main);
  }

  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
  }

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

  h1,
  h2,
  h3 {
    margin: 0;
    line-height: 1.2;
    font-family: "Play", serif;
    text-wrap: pretty;

    color: var(--primary-color);
  }

  p {
    line-height: 1.3;
    text-wrap: pretty;
  }

  a {
    text-decoration: none;
    text-wrap: pretty;
  }

  .card-kit-ui-1 {
    padding: 3rem;
  }

  .kit-ui {
    background-color: var(--bg-body);
  }

  header ul {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
    }
  }
}
@layer layout {
  :root {
    --ancho-global: 1600px;
  }

  .wrapper {
    width: 90%;
    max-width: var(--ancho-global);
    margin-left: auto;
    margin-right: auto;
  }
  .section-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }
}
@layer colores {
  :root {
    /* --- COLORES DE MARCA (BRANDING) --- */
    --primary-color: #004e8a; /* Azul Vetbox */
    --primary-dark: #093b64; /* Azul profundo para hovers */
    --primary-light: #e0f2ff;
    --secondary-color: #00a6a6; /* Verde menta/clínico (Salud y Bienestar) */
    --accent-color: #ff5252; /* Rojo/Coral suave (Urgencias, Ofertas, Carrito) */

    /* --- COLORES DE INTERFAZ (UI) --- */
    --bg-body: #f4f7f9; /* Gris muy claro (Fondo limpio) */
    --bg-white: #ffffff;
    --bg-dark-1: #cecece; /* Blanco puro (Tarjetas y contenedores) */
    --bg-lime: #e1f1d4;
    --border-color: #e0e6ed; /* Gris suave para bordes de inputs y divisores */

    /* --- TIPOGRAFÍA Y TEXTO --- */
    --text-main: #2d3436; /* Gris casi negro (Lectura principal) */
    --text-muted: #636e72; /* Gris medio (Descripciones y metadatos) */
    --text-light: #b2bec3; /* Gris claro (Placeholders) */
    --text-white: #ffffff; /* Blanco para botones oscuros */

    /* --- ESTADOS Y ALERTAS --- */
    --success: #27ae60; /* Verde éxito (Pedido completado) */
    --warning: #f1c40f; /* Amarillo (Stock bajo) */
    --error: #d63031; /* Rojo error (Pago fallido) */

    /* --- ESTRUCTURA Y ESPACIADO (Opcional pero recomendado) --- */
    --radius-sm: 4px;
    --radius-md: 8px; /* Un toque moderno y amigable */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);

    /*--- GRADIENTES ---*/
    /* Un azul que se desvanece hacia una sombra más profunda */
    --gradient-primary: linear-gradient(135deg, #004e8a 0%, #003660 100%);
    /* Transición suave entre tus dos colores principales */
    --gradient-health: linear-gradient(135deg, #004e8a 0%, #00a6a6 100%);
  }

  /* --- BLOQUE OSCURO --- */
  .texto-dark {
    color: var(--text-main);
    margin-block-start: 1em;

    /* Estilo para los enlaces dentro de texto-dark */
    a {
      font-weight: 600;
      color: var(--primary-dark);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--secondary-color);
      transition: var(--transition-smooth);

      /* El truco del '&': esto significa 'a:hover' */
      &:hover {
        text-decoration: none;
      }
    }

    /* Estilo para los textos dentro de texto-dark */
    p,
    h2,
    h3,
    ul,
    ol {
      margin-block-start: 1em;
      margin-block-end: 0;
    }
  }

  /* --- BLOQUE BLANCO (Independiente, va afuera) --- */
  .texto-blanco {
    color: var(--text-white);

    a {
      font-weight: 600;
      color: var(--text-white);
      text-decoration: underline;
      transition: var(--transition-smooth);

      &:hover {
        text-decoration: none;
      }
    }
  }
  @layer efectos {
    :root {
      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
      --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
      --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
    }

    /* Micro-interacción: Flotar */
    .hover-float {
      transition: var(--transition-smooth);
      display: inline-block;
    }

    .hover-float:hover {
      transform: translateY(-5px);
      box-shadow: var(
        --shadow-hover
      ); /* Agregamos sombra al flotar para dar realismo */
    }

    /* Efecto de "Presión" (Click) */
    .click-press:active,
    .hover-float:active,
    .header-menu-icon-link:active,
    .header-hamburguesa:active {
      transform: translateY(-2px) scale(0.98); /* Se encoge un 2% al presionar */
      filter: brightness(0.9); /* Se oscurece sutilmente simulando presión */
    }

    /* Efecto de Brillo (Ideal para botones con gradientes) */
    .hover-shimmer:hover {
      filter: contrast(1.1) brightness(1.1);
    }
  }
  @layer botones {
    /*estructura base de botones*/
    .cta-1,
    .cta-2,
    .cta-outline,
    .cta-outline-2,
    .cta-fill,
    :disabled,
    .centro-de-ayuda,
    .product-card-1-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 2.5rem;
      cursor: pointer;
      text-decoration: none;
      border: solid 2px;

      /* Colores y Tipografía */
      font-family: inherit;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.5px;

      /* Forma y Sombras */
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-soft);

      /* Integración de Transición */
      transition: var(--transition-smooth);
    }

    .cta-1 {
      /* Colores y Tipografía */
      background: var(--gradient-health);
      color: var(--text-white);
      border-color: transparent;
    }

    .cta-1:hover,
    .cta-2:hover,
    .cta-outline:hover,
    .cta-outline-2:hover,
    .cta-fill:hover,
    .centro-de-ayuda:hover .product-card-1-cta:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      filter: contrast(1.1) brightness(1.1);
    }

    .cta-1:active,
    .cta-2:active,
    .cta-outline:active,
    .cta-outline-2,
    .cta-fill:active,
    .centro-de-ayuda:active,
    .product-card-1-cta:active {
      transform: translateY(-2px) scale(0.98);
      filter: brightness(0.9);
    }

    .cta-outline {
      /* Colores y Tipografía */
      background: transparent;
      color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .cta-outline:hover {
      background-color: var(--primary-color);
      color: var(--text-white);
    }

    .cta-fill {
      /* Colores y Tipografía */
      background: var(--primary-color);
      color: var(--text-white);
      border-color: var(--primary-color);
    }

    .cta-fill:hover {
      background-color: var(--primary-color);
      color: var(--text-white);
    }
    .cta-2 {
      background-color: var(--secondary-color);
      color: var(--text-white);
      border-color: var(--secondary-color);
    }
    .cta-outline-2 {
      background-color: transparent;
      color: var(--text-white);
      border-color: var(--text-white);
    }
  }
  @layer header {
    .top-header {
      background: var(--gradient-health);
      color: var(--text-white);
      font-size: 1.2rem;
    }

    :root {
      /* Definimos el ancho de cada bloque del carrusel */
      --velocidad: 20s;
    }

    .top-header-container {
      overflow: hidden; /* Importante para que no salga scroll horizontal */
      width: 100%;
      padding: 0.5rem 0;
    }

    .carrusel-top-header {
      display: flex;
      width: max-content; /* Permite que el contenido se extienda horizontalmente */
    }

    .carrusel-track {
      display: flex;
      flex-shrink: 0; /* Evita que los bloques se encojan */
      animation: loop var(--velocidad) linear infinite;
    }

    .carrusel-track span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%; /* Como tienes 2 span, cada uno ocupa la mitad de la variable */
      flex-shrink: 0;
      white-space: nowrap;
      padding: 0 20px;
    }

    /* La magia del movimiento */
    @keyframes loop {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    .header {
      background-color: var(--primary-color);
      color: var(--text-white);
      position: sticky;
      top: 0;
      z-index: 100;
      transition: top 0.3s;
    }

    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: auto;
      gap: 1rem;
    }

    .header-logo-container {
      width: 300px;
      grid-area: logo;
    }

    .header-menu-iconos-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      gap: 20px;
      position: relative;
      z-index: 9999;

      grid-area: iconos;
    }

    .header-menu-icon-link {
      transition: var(--transition-smooth);
      padding: 0.5rem;
      border-radius: 8px;
      fill: var(--text-white);
      position: relative;
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--text-white);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      span {
        white-space: nowrap;
        font-weight: 600;
      }
    }

    .header-menu-icon-link:hover {
      background-color: var(--primary-dark);
      color: var(--text-white);
      fill: var(--text-white);
    }

    /*burbuja para cantidad de woocomerce*/
    .cart-contents-count {
      position: absolute;
      top: 0;
      right: 0;
      background-color: var(--warning); /* Tu variable de color */
      color: var(--primary-color); /* Tu variable de color */
      font-size: 11px;
      font-weight: 700;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(30%, -30%); /* Ajuste fino de posición */
    }
    /*fin burbuja cantidad woocomerce*/

    .header-hamburguesa {
      display: block;
      border-radius: 8px;
      border: none;
      background-color: transparent;
      color: var(--text-white);
      cursor: pointer;
      margin-right: auto;

      grid-area: hamburguesa;
    }

    .header-hamburguesa:hover {
      color: var(--secondary-color);
    }
    .dgwt-wcas-search-wrapp {
      grid-area: busqueda;
    }

    @media (max-width: 768px) {
      .header-menu-icon-link span {
        display: none;
      }

      .top-header-container {
        padding: 10px 0 10px;
      }
      .header-menu {
        display: none;
      }
      .header-logo-container {
        width: 180px;
      }
      #icono-contacto {
        display: none;
      }
      .header-menu-iconos-container {
        gap: 2px;
      }
      .header-menu-iconos-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .header-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
          "logo hamburguesa iconos iconos"
          "busqueda busqueda busqueda busqueda";
        padding-top: 0.5rem;
        gap: 0;
      }

      .header-hamburguesa {
        margin-left: 1rem;
      }
    }
  }
  @layer menu-mobile-modal {
    /* ==========================================================================
   1. ESTRUCTURA Y ANIMACIÓN DEL MODAL (Lógica base)
   ========================================================================== */
    .c-modal {
      border: none;
      padding: 0;
      margin: 0;
      width: 400px;
      max-width: 90vw;
      height: 100vh;
      min-height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      background: var(--primary-color);
      box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
      border-color: #014d8b;

      /* Flexbox para que el header sea fijo y el body scrolleable */
      overflow: hidden;
      display: flex;
      flex-direction: column;

      /* Animación de salida (Cierre) */
      transform: translateX(-100%);
      transition:
        transform 0.4s ease-in-out,
        display 0.4s allow-discrete,
        overlay 0.4s allow-discrete;
    }

    .c-modal[open] {
      transform: translateX(0);
    }

    @starting-style {
      .c-modal[open] {
        transform: translateX(-100%);
      }
    }

    .c-modal::backdrop {
      background-color: rgba(0, 0, 0, 0);
      transition:
        display 0.4s allow-discrete,
        overlay 0.4s allow-discrete,
        background-color 0.4s ease-in-out;
    }

    .c-modal[open]::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* ==========================================================================
   2. CONTENIDO INTERNO (Layout)
   ========================================================================== */
    .c-modal__content {
      display: flex;
      flex-direction: column;
      height: 100%;
      border: solid 1px;
      background-color: var(--primary-color);
      color: var(--text-white);
      border-color: var(--text-white);
    }

    .c-modal__header {
      flex-shrink: 0; /* No se achica, se mantiene arriba */
    }

    .c-modal__body {
      flex-grow: 1; /* Ocupa el espacio restante */
      overflow-y: auto; /* Permite el scroll interno */
      padding: 0;
    }

    /* ==========================================================================
   3. TABS (BOTONERA SUPERIOR)
   ========================================================================== */
    .c-tabs-nav {
      display: flex;
      align-items: stretch;
    }

    .c-tabs-nav__list {
      display: flex;
      flex: 1;
    }

    .c-tabs-nav__btn,
    .c-modal__close {
      padding: 1rem;
      color: var(--text-white);
      background-color: transparent;
      cursor: pointer;
      font-size: 16px;
      border-top: none;
      border-right: none;
      border-width: 1px;
      border-color: var(--text-white);
    }

    .c-tabs-nav__btn:hover,
    .c-modal__close:hover {
      background-color: var(--primary-dark);
    }

    .c-tabs-nav__btn.is-active {
      background-color: var(--primary-dark);
    }

    .c-modal__close {
      width: 100%;
      font-size: 1.5rem;
    }

    /* ==========================================================================
   4. ACORDEONES Y MENÚS (WORDPRESS)
   ========================================================================== */
    .c-tab-panel[hidden] {
      display: none;
    }

    .c-accordion {
      border-bottom: none;
      border-width: 1px;
      border-color: white;
    }

    .c-accordion__title {
      cursor: pointer;
    }

    .c-accordion__title:hover {
      background-color: var(--primary-dark);
      color: white;
    }

    .c-accordion__title::-webkit-details-marker {
      display: none;
    }

    .c-title {
      font-size: 1.3rem;
      width: auto;
      padding: 1em;
      border-bottom: solid 1px;
      border-color: white;
    }

    .c-menu-list {
      list-style: none;
      margin: 0;
      padding: 0;
      border-bottom: solid 1px;
      border-color: white;
    }

    .c-menu-list li {
      display: flex;
    }

    .c-menu-list li:hover {
      background-color: var(--primary-dark);
    }

    .menu-item a {
      text-decoration: none;
      width: 100%;
      padding-left: 1em;
      padding-top: 0.3em;
      padding-bottom: 0.3em;
      color: white;
      font-size: 18px;
    }

    .menu-item a:hover {
      color: white;
    }

    /* Container que contiene el boton de marcas */
    .c-container-b {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-top: 1em;
    }

    .c-modal__static-links {
      display: flex;
      flex-direction: column;
    }
    .c-modal__static-links span {
      border-bottom: solid;
      border-width: 1px;
      border-color: white;
    }

    .c-container-b a {
      background-color: white;
      border: solid 2px white;
      padding: 1em 2em;
      border-radius: var(--radius-sm);
      color: var(--primary-color);
    }

    .c-container-b a:hover {
      background-color: var(--secondary-color);
      border-color: var(--secondary-color);
      color: white;
    }

    /*Estilos que pegué de oxygen*/
    /* ========================================================= */
    /* ESTILOS PARA MARCAS EN MENu: .display-marcas-shortcode   */
    /* ========================================================= */
    /* 1. Contenedor Grid (sin cambios) */
    .display-marcas-shortcode .brand-thumbnails {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }

    /* 2. Elemento de la lista (<li>) */
    .display-marcas-shortcode .brand-thumbnails li {
      list-style-type: none;
      display: flex;
    }

    /* 3. El ENLACE (<a>) - Estilos Base */
    .display-marcas-shortcode .brand-thumbnails li a {
      background-color: white;
      display: block;
      width: 100%;
      text-align: center;

      /* ***** CÓDIGO CLAVE MODIFICADO PARA LA RELACIÓN 2:1 ***** */
      /* El alto será el 50% del ancho, creando un rectángulo horizontal */
      padding-top: 50%;
      position: relative;
      /* ********************************************************* */

      border: 1px solid var(--text-white);
      border-radius: 10px;
      transition: border-color 0.3s ease;
    }

    /* 4. Estilos para el estado HOVER del enlace (<a>) */
    .display-marcas-shortcode .brand-thumbnails li a:hover {
      border-color: white;
    }

    .display-marcas-shortcode {
      padding: 1em;
    }
    /* 5. La IMAGEN (<img>) - Posicionamiento (sin cambios) */
    .display-marcas-shortcode .brand-thumbnails li img {
      width: 90%;
      height: 90%;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: contain;

      border: none;
      padding: 0;
    }

    /* ========================================================= */
    /* ESTILOS PARA PRODUCTOS EN MENu: .display-productos-menu   */
    /* ========================================================= */
    .display-productos-menu {
      padding: 1rem;
    }
    /* 1. Ajuste del Contenedor de Productos (<ul>) */
    .display-productos-menu .woocommerce ul.products {
      /* Fuerza el Grid Layout */
      display: grid !important;

      /* Configuración de 2 columnas y espaciado */
      grid-template-columns: 1fr 1fr;
      gap: 1em;

      /* Refuerza los márgenes y padding a cero */
      margin: 0 !important;
      padding: 1em;
    }

    /* 2. ELIMINACIÓN DE LA CARD VACÍA generada por el pseudo-elemento :before */
    .display-productos-menu .woocommerce ul.products:before {
      content: none !important;
      display: none !important;
    }

    .display-productos-menu a {
      height: 100% !important;
    }
    /* 3. Anulación del Ancho Fijo y estilos de la card (<li>) */
    .display-productos-menu .woocommerce-page.columns-2 ul.products li.product,
    .display-productos-menu .woocommerce.columns-2 ul.products li.product {
      /* Anula el width: 50% para que el Grid lo gestione */
      width: auto !important;

      /* Anula el padding interno de los productos a cero */
      padding: 0 !important;

      /* Fondo blanco para las cards */
      background-color: white;

      border-radius: 20px;
      margin: 0 !important;
    }

    /* 4. Ocultar Botones de Compra/Leer más */
    .display-productos-menu .products li a.button {
      display: none !important;
    }

    /* 5. Eliminación de Bordes de Imagenes */
    .display-productos-menu .woocommerce ul.products li.product a img,
    .display-productos-menu .woocommerce div.flex-viewport,
    .display-productos-menu .woocommerce-product-gallery__wrapper,
    .display-productos-menu
      .woocommerce
      div.product
      div.images
      .flex-control-thumbs
      li,
    .display-productos-menu .woocommerce-cart table.cart img {
      border: none !important;
      padding: 0 !important;
      margin: 0 auto;
      display: block;
    }

    /* 6. Ajustes de padding para el contenido interno */
    .display-productos-menu .products li.product .woocommerce-LoopProduct-link {
      /* Añade un padding interno al enlace principal que envuelve foto, título y precio */
      padding: 10px;
      display: flex !important;
      flex-direction: column !important;

      text-align: center;
    }
    .display-productos-menu .price {
      color: var(--primary-dark);
      font-weight: 800 !important;
      margin-top: auto !important;
    }
  }
  @layer adornos {
    /*Estilos para banderita chilena*/
    .flag-cl {
      width: 23px;
      height: 20px;
      margin-left: 1rem;
      background: linear-gradient(to bottom, #fff 50%, #ff0000 50%);
      position: relative;
      padding: auto;
    }
    .flag-cl::before {
      content: "★";
      position: absolute;
      top: 0;
      left: 0;
      height: 50%; /* Mantiene el alto a la mitad de la bandera */
      width: auto; /* Deja que el ancho se calcule solo */
      aspect-ratio: 1 / 1; /* FUERZA la relación cuadrada 1:1 */
      background: #0000ff;
      color: white;
      font-size: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0; /* Evita que el alto de línea mueva la estrella */
    }

    .seccion-hexagonos {
      background-color: #00a6a6;

      /* El gradiente va PRIMERO para que esté encima del SVG */
      background-image:
        linear-gradient(to left, rgba(0, 166, 166, 0) 0%, #00a6a6 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%235c7e97' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

      background-repeat:
        no-repeat, repeat; /* El gradiente no se repite, el SVG sí */
      background-size:
        100% 100%,
        28px 49px; /* El gradiente ocupa todo, el SVG su tamaño fijo */
    }

    .seccion-hexagonos-2 {
      background-color: var(--primary-color);

      /* El gradiente va PRIMERO para que esté encima del SVG */
      background-image:
        linear-gradient(to left, rgba(0, 166, 166, 0) 0%, #00a6a6 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%235c7e97' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

      background-repeat:
        no-repeat, repeat; /* El gradiente no se repite, el SVG sí */
      background-size:
        100% 100%,
        28px 49px; /* El gradiente ocupa todo, el SVG su tamaño fijo */
    }
  }
  @layer breadcrumb {
    .breadcrumbs {
      color: var(--bg-white);
      min-width: 100%;
      margin-top: 1rem;
    }

    .breadcrumbs a {
      color: var(--text-white);
      text-decoration: underline;
    }

    .breadcrumbs a:hover {
      text-decoration: none;
    }

    .breadcrumbs .sep {
      color: #ccc;
    }

    /*breadcrumb*/

    .bc-cat {
      position: relative;

      color: var(--text-white);
      border-radius: 100px;
      padding: 1rem 0 0 0;
    }

    .woocommerce-breadcrumb {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .woocommerce-breadcrumb li {
      display: inline;
    }

    .breadcrumb-separator {
      margin: 0 4px;
    }

    .woocommerce-breadcrumb a {
      color: var(--text-white);
      text-decoration: underline;
    }

    .woocommerce-breadcrumb a:hover {
      text-decoration: none;
    }
  }
  @layer footer {
    footer {
      background: var(--primary-color);
      color: var(--text-white);
      padding: 70px 0 70px;
    }

    .footer-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas: "ayuda masvetbox info main";
      gap: 1rem;
    }

    .footer-mas-de-vetbox {
      grid-area: masvetbox;
    }

    .footer-informacion {
      grid-area: info;
    }

    .footer-container > * {
      flex: 1;
    }

    .footer-main {
      grid-area: main;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-white);
      border-radius: var(--radius-md);
      color: var(--text-main);
      padding: 2rem;
    }

    .footer-links-title {
      color: var(--text-white);
      font-size: 1.3rem;
    }

    .footer-links-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 2rem;
    }

    .footer-links ul {
      list-style: none;
      padding-left: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .footer-link a {
      color: var(--text-white);
      text-decoration: underline;
      padding: 0;
    }

    .footer-link a:hover {
      text-decoration: none;
    }

    .footer-ayuda {
      grid-area: ayuda;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: left;
      border: solid var(--bg-white) 2px;
      border-radius: var(--radius-md);
      color: var(--text-white);
      padding: 2rem;
      gap: 1rem;

      h3 {
        color: var(--warning);
        font-size: 1.3rem;
      }

      span a {
        color: var(--text-white);
        text-decoration: underline;
        padding: 0;
      }

      span a:hover {
        text-decoration: none;
      }
    }

    .centro-de-ayuda {
      color: var(--text-white);
      padding: 1rem;
    }

    .centro-de-ayuda:hover {
      background-color: var(--primary-dark);
    }

    .footer-text {
      max-width: 40ch;
      text-align: center;
    }

    .footer-icons-container {
      display: flex;
      gap: 1rem;
      justify-content: center;
      padding-bottom: 2rem;
    }

    .footer-icon {
      padding: 0;
      transition: var(--hover-color);
      fill: var(--primary-color);
    }
    .footer-icon:hover svg {
      fill: var(--primary-dark);
    }

    @media (max-width: 768px) {
      .footer-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "ayuda ayuda"
          "main main"
          "masvetbox info";
      }

      .footer-links-container {
        flex-direction: column;
        padding: 0;
      }
      .footer-text {
        text-align: center;
      }
      .footer-main {
        align-items: center;
      }
    }

    .footer-bottom {
      background-color: white;
      padding: 1rem 0 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-bottom span {
      text-align: center;
    }
  }
  @layer hero-3 {
    .hero-3 {
      min-height: 200px;
      background-color: var(--primary-color);
      background-position: 0px -125px;
      background-size: cover;
    }

    .hero-3-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 1rem;

      border-radius: var(--radius-md);
      padding: 2rem 1rem;
    }

    .hero-3-titulo {
      color: var(--text-white);
      text-align: left;
      font-size: clamp(2rem, 1.5vw + 1.6rem, 3rem);
    }

    @media (max-width: 768px) {
      .hero-3 {
        min-height: 100px;
        background-position: 0px 0px;
        padding: 1rem 0 1rem;
      }
    }
  }

  @layer hero-5 {
    .hero-5 {
      min-height: 200px;
      background-color: var(--primary-color);
      background-position: 0px -125px;
      background-size: cover;
    }

    .hero-5-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 1rem;

      border-radius: var(--radius-md);
      padding: 2rem 1rem;
    }

    .hero-5-titulo {
      color: var(--text-white);
      text-align: left;
      font-size: clamp(2rem, 1.5vw + 1.6rem, 3rem);
    }

    @media (max-width: 768px) {
      .hero-5 {
        min-height: 100px;
        background-position: 0px 0px;
        padding: 1rem 0 1rem;
      }
    }
  }
  @layer huincha-hero {
    .huincha-hero {
      background-color: var(--bg-body);
    }
    .huincha-hero-container {
      display: flex;
      justify-content: center;
      padding: 10px 0;
    }
    .huincha-hero-container span {
      color: var(--text-main);
      font-size: 1rem;
      font-weight: 600;
      text-align: center;
      display: inline;
      background-color: #e1f1d4;
      border-radius: var(--radius-md);
      padding: 0.5rem 1rem;
      min-width: 100%;
    }

    .huincha-hero-container a {
      color: var(--ecot-texto);
      text-decoration: underline;
    }

    .huincha-hero-container a:hover {
      text-decoration: none;
    }
  }
  @layer euristica-1 {
    .euristica-1 {
      background-color: var(--bg-body);
    }

    .euristica-1-container {
      display: grid;
      /* Configuración para escritorio y pantallas grandes */
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      padding: 1rem 0;
    }

    .eurisitica-1-card {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    .euristica-1-card-container-imagen {
      width: 200px; /* Ajusta el tamaño que necesites */
      height: 230px; /* Para un hexágono regular, el alto debe ser ~1.15 veces el ancho */
      background: #e1f1d4;

      /* El recorte mágico */
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

      /* Centrado de contenido si lo hay */
      display: flex;
      align-items: center;
      justify-content: center;

      transition: transform 0.4s ease-in-out;
    }

    .eurisitica-1-card span {
      font-size: 1rem;
      font-weight: 600;
      text-align: center;
      color: var(--primary-color);
    }

    .eurisitica-1-card:hover span {
      text-decoration: underline;
    }

    .eurisitica-1-card:hover .euristica-1-card-container-imagen {
      transform: rotate(6deg);
    }

    @media (max-width: 768px) {
      .euristica-1-container {
        display: flex; /* Alinea las categorías en fila */
        overflow-x: auto; /* Activa el scroll lateral */
        scroll-snap-type: x mandatory; /* Ajuste magnético al deslizar */
        gap: 12px; /* Espaciado entre tarjetas */
        padding: 15px; /* Margen interno para que no peguen al borde del móvil */
        scrollbar-width: none; /* Oculta scrollbar en Firefox */
      }

      .euristica-1-container::-webkit-scrollbar {
        display: none; /* Oculta scrollbar en Chrome/Safari/Edge */
      }

      .eurisitica-1-card {
        flex: 0 0 45%; /* Muestra casi dos tarjetas por pantalla */
        scroll-snap-align: start; /* El ajuste se alinea al inicio de la tarjeta */
        text-decoration: none; /* Limpia el estilo de enlace si no lo tenías */
      }
    }
  }
  @layer hero-vetbox {
    .hero-vetbox {
      background-color: var(--bg-body);
      padding: 1rem 0;
    }

    .hero-vetbox-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
      align-items: center;
      gap: 2rem;
      background-color: var(--primary-color);
      border-radius: var(--radius-md);
      overflow: hidden;

      color: var(--text-white);
    }

    /* La zona de texto */
    .hero-vetbox-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-left: 5rem;
      padding: 2rem 0;
    }
    .hero-vetbox-cta {
      display: flex;
      gap: 2rem;
      padding-top: 3rem;
    }

    .hero-vetbox-info h1 {
      color: var(--text-white);
    }

    .hero-vetbox-titulo {
      font-size: clamp(
        1.5rem,
        5vw,
        2rem
      ); /* Texto fluido: escala según la pantalla */
      line-height: 1.1;
      margin: 0;
      color: var(--text-white);
      font-weight: 600;
    }

    /* El botón (estilo básico) */
    .hero-vetbox-cta a {
      display: inline-block;
      align-self: flex-start; /* Evita que el botón ocupe todo el ancho */
      padding: 1rem 2rem;
      background-color: #e1f1d4;
      color: var(--primary-color);
      text-decoration: none;
      border-radius: 50px;
      font-weight: bold;
      transition: transform 0.2s;
      text-align: center;
      margin: auto;
    }

    .hero-vetbox-info a:hover {
      transform: scale(1.05);
    }

    /* La imagen */
    .hero-vetbox-container figure {
      margin: 0;
      width: 100%;
      padding-top: 1rem;
      margin-top: auto;
      display: flex;
      height: 100%;
      position: relative;
    }

    .hero-vetbox-container img {
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: cover;
      border-radius: 60px 0 0 0;
    }

    @media (max-width: 768px) {
      .hero-vetbox-info {
        margin: 2rem;
      }
      .hero-vetbox-container {
        gap: 0;
      }
      .hero-vetbox-info {
        padding: 0;
      }
      .hero-vetbox-info nav {
        flex-direction: column;
      }

      .hero-vetbox-container figure {
        height: 250px;
      }
    }
  }
  @layer hero-4 {
    .hero-4 {
      height: 70vh;
      padding: 2rem 0;
      background-color: var(--bg-body);
    }

    .hero-4-container {
      height: 100%;

      display: grid;
      gap: 1rem;

      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "foto-grande foto-grande fotos-pequenias";
    }

    .hero-4-mini-heros {
      grid-area: fotos-pequenias;

      display: grid;
      gap: 1rem;

      grid-template-columns: 1fr;
    }

    .hero-4-panel-g {
      grid-area: foto-grande;
      font-size: 3rem;
    }
    .hero-4-panel-mini {
      font-size: 2rem;
    }

    .hero-4-panel-g,
    .hero-4-panel-mini {
      border-radius: var(--radius-md);
      border: solid 2px var(--bg-body);

      overflow: hidden;

      display: flex;
      justify-content: center;
      align-items: end;
      color: var(--text-white);
      font-weight: 800;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

      padding: 1rem 1rem 1rem 2rem;

      line-height: 1.1;
    }

    .hero-4-panel-g:hover,
    .hero-4-panel-mini:hover {
      border-color: var(--text-main);
    }

    @media (max-width: 768px) {
      .hero-4-container {
        grid-template-columns: 1fr;
        grid-template-areas:
          "foto-grande"
          "fotos-pequenias";
      }

      .hero-4-mini-heros {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
  @layer section-reviews {
    .reviews {
      background-color: #e1f1d4;
      padding: 2rem 0;
    }

    .reviews-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
    }

    .reviews-container h2 {
      font-size: 2rem;
    }

    .reviews-cards {
      display: grid;
      /* Crea 3 columnas del mismo tamaño */
      grid-template-columns: repeat(3, 1fr);

      /* Espacio entre las tarjetas */
      gap: 1rem;
      width: 100%;
    }

    .review-card {
      background-color: white;
      border-radius: 15px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;

      /* El Box Shadow sutil que pediste */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid #f0f0f0; /* Un borde casi invisible para definirla mejor */
    }

    /* Cabecera: Logo y Estrellas */
    .revie-card-cabecera {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .revie-card-cabecera img {
      height: 20px; /* Tamaño pequeño para el logo de Google */
      width: auto;
    }

    .revie-card-cabecera span {
      font-size: 0.9rem;
      letter-spacing: 2px;
    }

    /* El cuerpo del texto (la cita) */
    .review-card > span {
      color: #444;
      font-style: italic;
      line-height: 1.5;
      font-size: 0.95rem;
    }

    /* Footer: Foto y Nombre */
    .revie-card-footer {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto; /* Empuja el footer siempre al fondo */
      padding-top: 10px;
      border-top: 1px solid #f5f5f5;
    }

    .revie-card-footer img {
      width: 45px;
      height: 45px;
      border-radius: 50%; /* Foto circular */
      object-fit: cover;
    }

    .revie-card-footer span {
      font-weight: 700;
      font-size: 0.9rem;
      color: #222;
    }

    @media (max-width: 768px) {
      .reviews-cards {
        display: flex; /* Cambiamos a flex para alinearlas en fila */
        overflow-x: auto; /* Habilitamos el scroll horizontal */
        scroll-snap-type: x mandatory; /* Hace que las tarjetas se "ajusten" al centro al soltar */
        gap: 16px; /* Espacio entre tarjetas */
        padding: 20px; /* Evita que las tarjetas toquen los bordes */
        scrollbar-width: none; /* Oculta scrollbar en Firefox */
      }

      .reviews-cards::-webkit-scrollbar {
        display: none; /* Oculta scrollbar en Chrome/Safari */
      }

      .review-card {
        flex: 0 0 85%; /* Cada tarjeta ocupa el 85% del ancho para dejar ver un poco de la siguiente */
        scroll-snap-align: center; /* Alineación del ajuste de scroll */
      }
    }
  }
  @layer productosx4 {
    .productosx4 {
      background-color: var(--bg-body);
    }

    .productosx4-container {
      padding: 3rem 0;
      gap: 1rem;
    }

    .productosx4-container h2 {
      font-size: 2rem;
    }
  }
  @layer carrito-flotante {
    /***carrito flotante***/

    /* 1. Posicionamiento del padre (Ancla) */
    .cart-anchor {
      position: relative; /* Clave para alinear el desplegable */
      display: flex;
      align-items: center;
    }

    /* 2. Estilo de la div desplegable (Oculta por defecto) */
    .carrito-flotante {
      position: absolute;
      top: 100%; /* Justo debajo del icono */
      right: 0; /* Alineado a la derecha del icono */
      background-color: #ffffff;
      color: var(--primary-color);
      min-width: 260px; /* Un poco más ancho para el carrito */
      padding: 20px;
      margin: 0;
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
      border-radius: 8px;

      /* Efecto de aparición suave (Copiado de tu sub-menu) */
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
      z-index: 999;
    }

    /* 3. El Hover: Mostrar solo al pasar por .cart-anchor */
    .cart-anchor:hover .carrito-flotante {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    /* 4. El "Puente Invisible" para que no se cierre */
    .cart-anchor::after {
      content: "";
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      height: 20px; /* Rellena el hueco para que el mouse pueda bajar */
    }

    /* Estilos internos rápidos para la prueba */
    .carrito-flotante span {
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .mp-button {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 8px 15px;
      width: 100%;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }

    /* Contenedor de la lista */
    .mini-cart-items {
      max-height: 300px; /* Por si llevan muchos productos, que salga scroll */
      overflow-y: auto;
      margin-bottom: 15px;
    }

    /* Item individual */
    .mini-cart-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }

    .mini-cart-img {
      flex: 0 0 30%; /* No crece, no se encoge, ocupa exactamente el 30% */
      max-width: 30%;
    }

    .mini-cart-img img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 4px;
    }

    .mini-cart-name {
      display: block;
      font-size: 0.85rem;
      color: var(--text-main);
      text-decoration: none;
      line-height: 1.2;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .mini-cart-name:hover {
      color: var(--primary-color);
    }

    .mini-cart-quantity {
      font-size: 0.8rem;
      color: #777;
      display: flex; /* Alinea los hijos en línea */
      align-items: center; /* Centra verticalmente el texto con el precio */
      gap: 5px; /* Espacio pequeño entre el "3 x" y el precio */
      white-space: nowrap; /* Evita que el precio salte a la línea de abajo */
      font-size: 0.85rem;
    }

    /* Por si acaso el bdi o el span interno tienen márgenes raros */
    .mini-cart-quantity bdi,
    .mini-cart-quantity .amount {
      display: inline;
      margin: 0;
    }

    /* Total y Botones */
    .mini-cart-total {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      font-size: 1rem;
      border-top: 2px solid #eee;
    }

    .mini-cart-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .mp-button.secondary {
      background: #f4f4f4;
      color: var(--primary-color);
      border: 1px solid #ddd;
      text-align: center;
      text-decoration: none;
      font-size: 0.85rem;
      display: block;
    }

    .mini-cart-buttons .mp-button {
      text-align: center;
      text-decoration: none;
    }

    .cart-empty-msg {
      text-align: center;
      padding: 20px 0;
      color: #999;
      font-size: 0.9rem;
    }
  }
  @layer gutenberg-pages {
    .gutvet {
      background-color: var(--bg-body);
    }
    .wp-block-woocommerce-checkout-order-summary-block {
      background-color: var(--bg-white);
    }

    /*carrito*/
    .wc-block-cart-items__row {
      background-color: var(--bg-white);
      padding: 1rem;
      border: var(--radius-sm);

      a {
        color: var(--primary-color);
        text-decoration: underline;
      }
      a:hover {
        text-decoration: none;
      }
    }

    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button {
      background-color: var(--primary-color);
      color: var(--text-white);
      border-radius: var(--radius-sm);
      transition: var(--transition-smooth);
      font-size: 1.2rem;
      cursor: pointer;
    }

    .wc-block-cart__submit-button:hover,
    .wc-block-components-checkout-place-order-button:hover {
      background-color: var(--primary-dark);
    }
  }

  /*listos 👆️*/

  @layer productos-cat {
    .cat-productos {
      background-color: var(--bg-body);
    }

    .cat-productos-container {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    .categoria-info {
      background-color: var(--bg-body);
      padding: 2rem 0;
    }
    .grid-products {
      --min: 25ch;
      --gap: 1.2rem;

      display: grid;
      grid-gap: var(--gap);
      grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--min)), 1fr)
      );
    }
    /* Para pantallas de móviles (típico 480px o menos) */
    @media (max-width: 480px) {
      .grid-products {
        /* Forzamos las dos columnas */
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .product-card-1 {
      border-radius: 15px;
      background-color: var(--bg-white);
      overflow: hidden;
      padding: 1rem;

      display: flex;
      flex-direction: column;
      gap: 1rem;
      height: 100%;

      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .product-card-1:hover,
    .product-card-1:focus-within {
      box-shadow: var(--shadow-hover);
    }

    .product-card-1:hover .product-card-1-title a,
    .product-card-1:focus-within .product-card-1-title a {
      text-decoration: underline;
    }

    .product-card-1-img-container {
      position: relative;
      overflow: hidden;
      margin: 0;
    }

    .product-card-1-img-container a {
      display: flex;
      width: 100%;
      height: 100%;
      position: relative;
      justify-content: center;
    }

    .product-card-1-img-container img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }

    /* Contenedor de las etiquetas (arriba a la izquierda) */
    .product-labels {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
    }

    /* Estilo base de los labels */
    .product-labels span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

      display: flex;
      justify-content: center;
      gap: 5px;
    }

    /* Etiqueta de Oferta - Un color que llame la atención */
    .label-sale {
      background-color: var(--secondary-color);
      color: var(--text-white);

      svg {
        fill: var(--text-white);
      }
    }

    /* Etiqueta de Destacado - Usando tus azules */
    .label-featured {
      background-color: var(--accent-color);
      color: var(--text-white);
    }

    .product-card-1-title a {
      color: var(--primary-color);
      font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
      flex-grow: 1;
    }

    .product-card-1-info {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: auto;
    }

    .product-card-1-cta {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary-color);
      font-size: 1rem;
      font-weight: 700;
      padding: 1rem 0 1rem;
      border-radius: 5px;
      background: transparent;
    }

    .product-card-1:hover .product-card-1-cta {
      background-color: var(--primary-dark);
      color: var(--text-white);
    }

    .product-card-1-title a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1; /* Cubre toda la card */
    }

    .product-card-1-price {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* 1. ESTILO PARA EL PRECIO TACHADO (Antiguo) */
    .product-card-1-price del {
      color: #888;
      text-decoration: line-through;
      font-size: 0.9em;
      font-weight: 400;
    }

    /* 2. ESTILO PARA EL PRECIO ACTUAL (Oferta o Normal) */
    .product-card-1-price ins,
    .product-card-1-price > .woocommerce-Price-amount {
      color: #224070;
      text-decoration: none;
      font-weight: 700;
      font-size: 1em;
    }

    .screen-reader-text {
      border: 0;
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      word-wrap: normal !important;
    }

    .filtros-orden select {
      font-size: 1.2rem;
      border: none;
      padding: 0.5rem 1rem;
      background-color: white;
      box-shadow: var(--mp-shadow-soft);
      border-radius: 5px;
    }

    @media (max-width: 768px) {
      .product-card-1-cta {
        display: none;
      }
    }
  }

  @layer producto-single {
    .contenedor-producto {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1rem, 0.45rem + 2.73vw, 3rem);
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .contenedor-producto {
        grid-template-columns: 1fr 1fr;
      }
    }

    .producto-breadcrumb {
      padding: 2rem 0 1rem 0;
      a {
        color: var(--mp-azul-o);
        text-decoration: underline;
      }

      a:hover {
        text-decoration: none;
      }
    }

    /* ==========================================================================
   GALERÍA DE PRODUCTO (SOLUCIÓN LIGERA)
   ========================================================================== */

    /* 1. Contenedor Principal */
    .producto-imagenes {
      width: 100%;
      position: relative;
    }

    .producto-imagen-main {
      width: 100%;
      margin-bottom: 15px;
      box-shadow: var(--mp-shadow-soft);
    }

    .producto-imagen-main img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      border-radius: 15px;
    }

    /* 2. Grid de Miniaturas */
    .producto-thumbnails {
      display: grid;
      /* Usamos auto-fill y un tamaño fijo (80px) para que NO se estiren */
      grid-template-columns: repeat(auto-fill, 80px);
      gap: 10px;
      list-style: none;
      padding: 0;
      margin-top: 15px;
    }

    /* 3. Elementos de la lista (li) */
    .producto-thumbnails li {
      aspect-ratio: 1 / 1;
      cursor: pointer;
      overflow: hidden;
      border: 2px solid #ddd; /* Borde gris suave por defecto */
      transition: all 0.3s ease;
      background-color: #f9f9f9;
    }

    /* 4. Imágenes dentro de las miniaturas */
    .producto-thumbnails li img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* 5. Estado Activo (Marco Negro) */
    .producto-thumbnails li.thumb-active {
      border-color: #000; /* Marco negro intenso */
      opacity: 1;
    }

    .producto-thumbnails li:hover {
      border-color: #999;
    }

    /* Ajuste para móviles: si la pantalla es muy pequeña, que las minis bajen un poco de tamaño */
    @media (max-width: 480px) {
      .producto-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
      }
    }

    /*final estilo de fotos*/

    /*product labels para producto*/

    .product-labels-2 {
      position: relative;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: flex-start;
      gap: 1rem;
    }

    .product-labels-2 span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

      display: flex;
      justify-content: center;
      gap: 5px;
    }

    /*final product labels para producto*/

    .columna-info {
      display: flex;
      flex-direction: column;

      gap: 1rem;
      justify-content: flex-start;
    }

    .producto-acciones-h {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .producto-h1 {
      font-size: clamp(25px, 0.5vw + 28px, 30px);
      color: var(--mp-azul);
    }

    .producto-descargables {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 1rem 0 1rem;
      justify-content: space-around;
    }

    .producto-descargables a {
      color: var(--mp-azul-o);
      font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.125rem);
      border: solid 1px var(--mp-azul-o);
      border-radius: 8px;
      padding: 1rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      transition:
        background 0.3s,
        opacity 0.3s;
    }

    .producto-descargables a:hover {
      background-color: var(--mp-amarillo);
      border-color: var(--mp-amarillo);
    }

    .producto-descargables svg {
      height: 20px;
      width: auto; /* Para que mantenga la proporción */
      display: inline-block;
      vertical-align: middle; /* Para que alinee bien con el texto */
    }

    .producto-descargables svg path:not([fill="#fff"]):not([fill="red"]) {
      fill: currentColor;
    }

    /* Contenedor principal de los precios */
    .producto-precio {
      display: flex;
      align-items: center;
      gap: 10px; /* Espacio entre el precio tachado y el nuevo */
      font-size: clamp(1.5rem, 0.8rem + 0.5vw, 2rem);
      font-weight: 600;
    }

    /* Estilo para el precio original (Tachado) */
    .producto-precio del {
      color: #999;
      font-size: 0.7em;
      font-weight: 400;
      text-decoration: line-through;
    }

    /* Estilo para el precio de oferta (Destacado) */
    .producto-precio ins {
      color: var(--mp-azul);
      text-decoration: none;
      font-weight: 700;
    }

    /* Limpieza para los símbolos de moneda y montos dentro de bdi */
    .producto-precio bdi {
      color: inherit;
    }

    /*Formulario de agregar al carrito*/

    /* CONTENEDOR PRINCIPAL */
    .producto-agregar-carrito {
      font-family: inherit;
    }

    /* TABLA DE VARIACIONES (Limpieza) */
    .producto-agregar-carrito table.variations {
      width: 100%;
      border: none;
    }

    .producto-agregar-carrito table.variations th,
    .producto-agregar-carrito table.variations td {
      display: block; /* Apilamos etiqueta y selector */
      width: 100%;
      padding: 0;
      border: none;
      text-align: left;
      background: transparent;
    }

    .variations tbody {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .producto-agregar-carrito table.variations th.label {
      margin-bottom: 8px;
    }

    .producto-agregar-carrito table.variations th.label label {
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
      color: #333;
    }

    /* SELECTORES (Drop-downs) */
    .producto-agregar-carrito table.variations td.value select {
      width: 100%;
      height: 45px;
      padding: 0 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: var(--bg-white);
      font-size: 15px;
      outline: none;
      transition: border-color 0.3s;
    }

    .producto-agregar-carrito table.variations td.value select:focus {
      border-color: #000; /* O el color de tu marca */
    }

    /* BOTÓN DE LIMPIAR VARIACIONES */
    .reset_variations {
      font-size: 12px;
      color: red;
      text-decoration: underline;
      margin-top: -10px;
      display: inline-block;
    }

    .woocommerce-variation.single_variation {
      background: #fdfdfd;
      padding: 10px;
      border-left: 3px solid #000; /* Una línea elegante al lado */
      margin-bottom: 15px;
    }

    /* CONTENEDOR DE CANTIDAD Y BOTÓN */
    .woocommerce-variation-add-to-cart {
      display: flex;
      flex-direction: row;
      gap: 15px;
      align-items: center;
    }
    /*contenedor de añadir al carrito*/
    .producto-agregar-carrito .cart {
      display: flex;
      gap: 1rem;
      flex-direction: column;
    }

    /* INPUT DE CANTIDAD */
    .producto-agregar-carrito .quantity input.qty {
      width: 70px;
      height: 50px;
      border: 1px solid #ddd;
      border-radius: 4px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
    }

    /* BOTÓN AÑADIR AL CARRITO */
    .producto-agregar-carrito .single_add_to_cart_button {
      flex-grow: 1; /* Que ocupe el resto del ancho */
      background-color: var(--primary-color);
      color: var(--text-white);
      border: none;
      border-radius: 8px;
      padding: 1rem;
      font-size: 1.2rem;
      font-weight: 800;
      cursor: pointer;
      transition:
        background 0.3s,
        opacity 0.3s;
    }

    .producto-agregar-carrito .single_add_to_cart_button:hover {
      background-color: var(--primary-dark);
    }

    .producto-agregar-carrito .single_add_to_cart_button.disabled {
      background-color: #465772;
      cursor: not-allowed;
      opacity: 0.7;
      color: var(--text-muted);
    }

    /* MENSAJE DE VARIACIÓN (Precio que aparece dinámicamente) */
    .woocommerce-variation.single_variation {
      margin-bottom: 15px;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 4px;
      font-weight: 600;
    }

    .producto-agregar-carrito .screen-reader-text {
      display: none;
    }

    /* RESPONSIVE */
    @media (max-width: 480px) {
      .woocommerce-variation-add-to-cart {
        flex-direction: row;
        align-items: flex-start;
      }

      .producto-agregar-carrito .quantity input.qty,
      .producto-agregar-carrito .single_add_to_cart_button {
        width: 100%;
      }
    }

    /*sección comprar en wsp - dejé apagada en display none por mientras, debería ser display flex*/

    .compra-wsp {
      padding: 1rem;
      display: none;
      flex-direction: column;
      gap: 1rem;
      border-radius: 9px;
      background-color: var(--ecot-verde-o);
    }

    .compra-wsp span {
      font-size: 1rem;
      color: white;
    }

    .compra-wsp svg {
      fill: currentColor;
      width: 32px;
      height: 32px;
    }

    .wsp-cta-2 {
      background-color: #25d366;
      color: var(--ecot-verde-o);
      font-weight: 800;
      font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.2rem);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;
      border-radius: 100px;
      transition: var(--hover-color);
    }

    .wsp-cta-2:hover {
      background-color: #128c7e;
      color: white;
    }

    .producto-tarjetas {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 3rem;

      span {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        width: 100%;
        text-align: center;
        gap: 15px;
        font-weight: 600;
        color: #484848;
      }

      /* Línea antes del texto */
      span::before {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--mp-azul-o);
      }

      /* Línea después del texto */
      span::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--mp-azul-o);
      }
      img {
        max-width: 300px;
      }
    }

    /*caja de aviso wc*/
    .woocommerce-notices-wrapper {
      margin-bottom: 1rem;
    }
    .woocommerce-notices-wrapper .woocommerce-message {
      background-color: var(--mp-azul);
      padding: 1rem;
      color: white;
      border-radius: 8px;

      a {
        color: white;
        text-decoration: underline;
        font-weight: 600;
      }

      a:hover {
        text-decoration: none;
      }
    }

    /*Descripción de producto*/

    .descripcion-producto {
      margin-top: 2rem;
    }

    .descripcion-producto-container {
      background-color: white;
      border-radius: 30px;
      padding: clamp(1.5rem, 0.8rem + 0.5vw, 3rem);
      margin: 1rem 0 1rem;
    }

    .descripcion-producto-container h2,
    .descripcion-producto-container h3 {
      line-height: 1.2;
      margin-bottom: 1rem;
      color: var(--primary-color);
    }

    .descripcion-producto-container h2 {
      font-size: 1.7rem;
    }
    .descripcion-producto-container h3 {
      font-size: 1.5rem;
    }

    .descripcion-producto-container p,
    .descripcion-producto-container li {
      margin-bottom: 1rem;
      color: var(--text-main);
      line-height: 1.6;
      font-size: 1.1rem;
    }

    .descripcion-producto-container ul {
      padding-left: 20px;
    }
  }

  /*pendientes 👆️*/

  @layer brand1 {
    .brand-1 {
      background-image: var(--gradient-health);
      padding: 3rem 0;
    }

    .brand-1-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      gap: 1rem;
      height: 40vh;
    }

    .brand-1-container h2 {
      font-size: 2rem;
      color: var(--text-white);
    }

    .brand-1-foto {
      background-image: url("/wp-content/uploads/2025/09/gato-perro-stock.webp");
      background-repeat: no-repeat;
      background-size: cover;

      height: 140%;
      width: 450px;
      margin-top: -12%;

      display: flex;
      justify-content: flex-end;
      text-align: left;
      align-items: flex-end;

      padding: 1rem;
    }

    .brand-1-foto img {
      width: 200px;
    }

    .brand-1-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 768px) {
      .brand-1-foto {
        display: none;
      }
    }
  }

  @layer brand2 {
    .brand-2 {
      background-color: #e1f1d4;
      padding: 3rem 0;
    }

    .brand-2-icon-cards {
      display: grid;
      /* Se ajustan solas: mínimo 250px, máximo 1fr */
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .icon-card-1 {
      background-image: var(--gradient-primary);
      color: white;
      padding: clamp(1rem, 0.5rem + 1.5vw, 2rem);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* Estilo para el SVG (el camión) */
    .icon-card-1 svg {
      width: 80px;
      height: 80px;
      stroke: currentColor;
    }

    /* Estilo para el texto */
    .icon-card-1 span {
      font-size: 1.5rem;
      text-align: center;
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .brand-2-icon-cards {
        display: grid;
        /* Cambiamos 250px por un valor menor (p.ej. 150px) */
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
        gap: 1rem;
        margin-top: 1rem;
      }

      .icon-card-1 svg {
        width: 60px;
        height: 60px;
        stroke: currentColor;
      }

      /* Estilo para el texto */
      .icon-card-1 span {
        font-size: 1rem;
      }
    }
  }

  @layer hero-main {
    .hero-main {
      height: 70vh;
      background-image: url("wave-vetbox-hero.svg");
      background-position: center 70%;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .hero-main-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    }

    .hero-main-info h1 {
      color: var(--text-white);
      font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    }
    .hero-main-info span,
    .hero-main-info a {
      font-size: 1.6rem;
    }
    .hero-main-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: flex-start;
    }

    .titulo-main {
      font-size: 2rem;
    }

    .hero-main-foto {
      position: relative;
      z-index: 6;
    }

    @media (max-width: 768px) {
      .hero-main {
        height: 80vh;
      }
    }
  }
  @layer modulo-faq {
    .modulo-seo-faq {
      background-color: var(--bg-body);
      padding: 2rem 0;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .modulo-seo-faq-contenedor {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .modulo-seo-faq-preguntas {
      display: grid;
      gap: 2rem;

      grid-template-columns: 1fr 1fr;
    }
    .faq-card {
      background-color: var(--bg-white);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;

      p {
        margin: 0;
      }
    }
    @media (max-width: 768px) {
      .modulo-seo-faq-preguntas {
        grid-template-columns: 1fr;
      }
    }
  }

  @layer modulo-seo-2 {
    .modulo-seo-2 {
      background-color: var(--bg-body);
      padding: 2rem 0;
    }
    .modulo-seo-2-contenedor {
      background-color: var(--bg-lime);
      padding: 2rem;
      border-radius: var(--radius-md);
    }
  }

  @layer modulo-euristica-cat-2 {
    /* Contenedor: Flexbox para alinear y scroll en mobile */
    .euristica-cat-2 {
      background-color: var(--bg-body);
    }

    .euristica-cat-2-container {
      display: flex;
      gap: 0.5rem;
      padding: 10px 0;
      flex-wrap: wrap;
    }

    /* Estilos de los botones (links) */
    .euristica-cat-2-container a {
      display: inline-block;
      padding: 5px 12px;
      background-color: var(--primary-color);
      color: var(--text-white);
      text-decoration: none;
      border-radius: 15px;
      white-space: nowrap;
      font-size: 1rem;
      transition: background 0.3s;
    }

    /* Efecto hover */
    .euristica-cat-2 a:hover {
      background-color: var(--secondary-color);
    }

    /* --- ADAPTACIÓN PARA MOBILE CON SCROLL SNAP --- */
    @media (max-width: 768px) {
      .euristica-cat-2-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* El ajuste magnético */
        scrollbar-width: none; /* Oculta scrollbar en Firefox */
        padding: 10px; /* Padding extra para no pegar al borde */

        flex-wrap: nowrap;
      }

      .euristica-cat-2-container::-webkit-scrollbar {
        display: none; /* Oculta scrollbar en Chrome/Safari */
      }

      .euristica-cat-2-container a {
        scroll-snap-align: start; /* Cada botón se alinea al inicio */
        flex-shrink: 0; /* Evita que los botones se compriman */
      }
    }
  }
  /*Blog*/
  @layer blog-cards {
    .container-blog {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .blog-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    /*CARD BLOG 1*/

    .card-blog-1 {
      position: relative; /* CRUCIAL para que el :after se limite a la card */
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;

      height: 100%;
    }

    .card-blog-1:hover {
      transform: translateY(-5px);
    }

    /* 2. Imagen */
    .card-blog-1 img {
      width: 100%;
      height: 450px;
      object-fit: cover;
    }

    /* 3. Contenedor de información */
    .blog-card-1-info {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 4. LA MAGIA: El link expandido */
    .blog-card-1-info h3 a {
      color: #222;
      text-decoration: none;
      font-size: 1.2rem;
      line-height: 1.3;
    }

    .blog-card-1-info h3 a::after {
      content: "";
      position: absolute;
      /* Estira el área activa a los bordes del .card-blog-1 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1; /* Asegura que esté sobre la imagen y el texto */
    }

    /* 5. Ajustes para que el botón no quede "bloqueado" visualmente */
    .card-blog-1 button {
      width: fit-content;
      background: #007bff;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 5px;
      margin-top: 10px;
      /* El botón es visual, el clic real lo hará el link expandido */
    }

    /* 6. Tags y fecha */
    .blog-card-1-info span {
      font-size: 0.85rem;
      color: #666;
    }

    .blog-card-1-info-tags span {
      background-color: #f0f0f0;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: bold;
      color: #007bff;
    }

    @media (max-width: 768px) {
      .container-blog {
        grid-template-columns: 1fr;
      }
    }
  }
  @layer card-blog-2 {
    /*CARD BLOG 2*/
    .card-blog-2 {
      position: relative; /* CRUCIAL para que el :after se limite a la card */
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: row;
    }

    .card-blog-2:hover {
      transform: translateY(-5px);
    }

    /* 2. Imagen */
    .card-blog-2 img {
      height: auto;
      max-width: 200px;
      object-fit: cover;
    }

    /* 3. Contenedor de información */
    .blog-card-2-info {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .blog-card-2-info h3 a {
      color: #222;
      text-decoration: none;
      font-size: 1.2rem;
      line-height: 1.3;
    }

    .blog-card-2-info h3 a::after {
      content: "";
      position: absolute;
      /* Estira el área activa a los bordes del .card-blog-1 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1; /* Asegura que esté sobre la imagen y el texto */
    }

    /* 5. Ajustes para que el botón no quede "bloqueado" visualmente */
    .card-blog-2 button {
      width: fit-content;
      background: #007bff;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 5px;
      margin-top: 10px;
      /* El botón es visual, el clic real lo hará el link expandido */
    }

    /* 6. Tags y fecha */
    .blog-card-2-info span {
      font-size: 0.85rem;
      color: #666;
    }

    .blog-card-2-info-tags span {
      background-color: #f0f0f0;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: bold;
      color: #007bff;
    }
  }
  @layer blog-destacados {
    .blog-destacados {
      background-color: var(--bg-body);
      padding: 3rem 0;
    }

    .blog-destacados-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
  }
  @layer hero-blog {
    .blog-hero {
      background-color: var(--primary-color);
    }
    .blog-hero-container {
      display: grid;
      gap: 2rem;
      grid-template-columns: 1fr 2fr;
      color: var(--text-white);
      padding: 2rem 0;

      h1 {
        color: var(--text-white);
      }
    }
    .blog-hero-imagen-container {
      position: relative;
      aspect-ratio: 1/1;
    }

    .blog-hero-imagen-container img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .blog-hero-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
    }
    .blog-hero-descripcion {
      font-size: 1.2rem;
    }
    .blog-breadcrumb {
      a {
        color: var(--text-white);
      }
    }
    @media (max-width: 768px) {
      .blog-hero-container {
        grid-template-columns: 1fr;
      }
    }
  }
  .blog-contenido {
    background-color: var(--bg-body);
    position: relative;
  }
  .blog-content h2,
  .blog-content h3 {
    scroll-margin-top: 120px;
  }
  .blog-contenido-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }

  @media (max-width: 768px) {
    .blog-contenido-container {
      grid-template-columns: 1fr;
    }
  }
  .blog-content {
    background-color: var(--bg-white);
    padding: 2rem;
    font-size: 1.2rem;
    margin-top: 0;
    div {
      margin: 1rem 0;
    }
    p,
    li {
      line-height: 1.8;
    }
  }
  .blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .blog-sidebar-contenedor {
    position: relative;
    display: flex;
    align-items: flex-start;
  }

  @media (max-width: 768px) {
    .blog-sidebar-contenedor {
      order: -1;
    }
    .blog-content {
      padding: 1rem;
    }
  }
  .blog-sidebar {
    padding: 2rem;
    font-size: 1.2rem;
    position: sticky;
    background-color: var(--bg-white);

    top: 5rem;
    overflow: hidden;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .blog-toc a {
    color: var(--primary-color);
    font-size: 1rem;
  }
  .blog-disclaimer span {
    font-size: 1rem;
  }
  .blog-autores {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .blog-autor-card {
    background-color: var(--bg-lime);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    padding: 1rem;
  }
  .blog-autor-card-imagen-container {
    position: relative;
    border-radius: 100vw;
    overflow: hidden;
    aspect-ratio: 1/1;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .autor-card-info {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    a {
      font-size: 1rem;
    }
    span {
      font-size: 1rem;
    }
  }

  @layer blog-grid-layout {
    .blog-grid-seccion {
      background-color: var(--bg-body);
      padding: 3rem 0;
    }

    .blog-grid-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    /* Estructura Grid de 4 columnas */
    .container-grid-4 {
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* 1 columna en móviles */
      gap: 20px;
    }

    /* Media queries para tablets y escritorio */
    @media (min-width: 600px) {
      .container-grid-4 {
        grid-template-columns: repeat(
          2,
          1fr
        ); /* 2 columnas en pantallas medianas */
      }
    }

    @media (min-width: 1024px) {
      .container-grid-4 {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
      }
    }
  }

  @layer card-blog-grid-estilos {
    .card-blog-grid {
      position: relative; /* Clave para el truco del link expandido */
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      height: 100%; /* Hace que todas midan lo mismo si hay títulos largos */
    }

    .card-blog-grid:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .card-grid-imagen img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }

    .blog-card-grid-info {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-grow: 1; /* Empuja el contenido si falta espacio */
    }

    /* Mismos colores y estilos accesibles */
    .blog-card-grid-info h3 a {
      color: #222;
      text-decoration: none;
      font-size: 1.2rem;
      line-height: 1.3;
    }

    /* El truco mágico de accesibilidad: expande el clic a toda la tarjeta */
    .blog-card-grid-info h3 a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .blog-card-grid-info span {
      font-size: 0.85rem;
      color: #666;
    }

    .blog-card-grid-info-tags span {
      background-color: #f0f0f0;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: bold;
      color: #007bff; /* Mismo color de link/tag anterior */
      display: inline-block;
    }
  }

  @layer adornos-blog {
    /*Estilo para tablas generales en la página*/
    /* Definimos el estilo de la tabla */
    .tabla-1 {
      background-color: #ccffff;
      border: 1px solid #000;
      border-collapse: collapse; /* Para que los bordes no sean dobles */
      width: 100%;
      margin-bottom: 1em;
    }

    /* Estilo para todas las celdas (encabezado y cuerpo) */
    .tabla-1 th,
    .tabla-1 td {
      border: 1px solid #000;
      padding: 10px; /* Aquí controlas el espacio interno */
      text-align: center;
    }

    /* Estilo específico para la fila de encabezado */
    .tabla-1 thead tr {
      background-color: #aae0e0;
    }

    /*ESTILOS DE SEGUNDA TABLA, LA QUE TIENE SCROLL*/
    /* Estilos para la tabla VetBox */
    .contenedor-tabla-scroll {
      overflow-x: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .indicador-mobile {
      display: block;
      font-size: 13px;
      margin-bottom: 8px;
      font-style: italic;
    }

    .tabla-2 {
      background-color: #ccffff;
      border: 1px solid #000;
      border-collapse: collapse;
      width: 100%;
      min-width: 600px; /* Asegura el scroll en mobile */
    }

    .tabla-2 th,
    .tabla-2 td {
      border: 1px solid #000;
      padding: 12px;
      text-align: center;
    }

    .tabla-2 thead tr {
      background-color: #aae0e0;
      font-weight: bold;
    }

    .tabla-2 a {
      color: #0056b3;
      text-decoration: underline;
      font-weight: bold;
    }

    /* Esconder el indicador en pantallas mayores a 768px (Desktop) */
    @media screen and (min-width: 769px) {
      .indicador-mobile {
        display: none;
      }
    }

    /*Estilos para keypoints en blog*/

    .key-points-box {
      background-color: #f0f7f7; /* Un tono suave acorde a tu marca */
      border-left: 5px solid #aae0e0; /* El color de tu tabla */
      padding: 20px;
      margin: 20px 0;
      border-radius: 0 8px 8px 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .key-points-title {
      font-size: 1.1em;
      color: #333;
      margin-bottom: 10px;
      display: block;
    }

    .key-points-box ul {
      margin: 0;
      padding-left: 20px;
      list-style-type: none;
    }

    .key-points-box li {
      margin-bottom: 8px;
      position: relative;
    }

    /* Un pequeño check o punto de color */
    .key-points-box li::before {
      content: "•";
      color: #aae0e0;
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }

    /*estilos para cajas de advertencias en el blog*/
    /* Clase base para cajas de información */
    .vetbox-info-box {
      padding: 20px;
      margin: 20px 0;
      border-radius: 0 12px 12px 0; /* Mantiene la estética de borde izquierdo recto */
      line-height: 1.6;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
      border-left-width: 6px;
      border-left-style: solid;
    }

    /* Variante Azul (Informativa / Buena onda) */
    .vb-info-blue {
      background-color: #f0f7ff;
      border-left-color: #a2d2ff;
      color: #2c3e50;
    }

    /* Variante Amarilla (Atención / Veterinaria) */
    .vb-alert-yellow {
      background-color: #fffaf0;
      border-left-color: #ffcc00;
      color: #333;
    }

    /* Bloque de Interlinking estilos */
    /* Bloque de Interlinking Llamativo */
    .vetbox-interlinking {
      background-color: #f4fbf9; /* Verde muy suave */
      border-left: 5px solid #82c69d; /* Verde salud/bienestar */
      padding: 20px;
      margin: 25px 0;
      border-radius: 0 10px 10px 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
      position: relative;
    }

    .vetbox-interlinking p {
      margin: 0;
      color: #334443;
      font-size: 1.05em;
      line-height: 1.6;
    }

    /* Estilo para los enlaces dentro del bloque */
    .vetbox-interlinking a {
      color: #2a7a5a;
      text-decoration: none;
      font-weight: bold;
      border-bottom: 2px solid #82c69d;
      transition: all 0.3s ease;
    }

    .vetbox-interlinking a:hover {
      background-color: #e8f5ee;
      color: #1e5a42;
    }
    /* Adorno de ampolleta en la esquina superior izquierda */
    .vetbox-interlinking::before {
      content: "💡";
      position: absolute;
      top: 0px; /* Lo sube un poquito para que sobresalga del borde */
      right: 0px; /* Lo saca hacia la izquierda sobre el borde verde */
      font-size: 2em;
      z-index: 1;
    }

    /* Bloque de Atención Rojo */
    .vetbox-interlinking-red {
      background-color: #fff5f5; /* Rojo/rosado muy suave */
      border-left: 5px solid #e57373; /* Rojo alerta suave */
      padding: 20px;
      margin: 25px 0;
      border-radius: 0 10px 10px 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
      position: relative;
    }

    .vetbox-interlinking-red p {
      margin: 0;
      color: #443333; /* Texto oscuro con tinte rojizo */
      font-size: 1.05em;
      line-height: 1.6;
    }

    /* Enlaces dentro del bloque rojo */
    .vetbox-interlinking-red a {
      color: #c62828; /* Rojo fuerte para links */
      text-decoration: none;
      font-weight: bold;
      border-bottom: 2px solid #ef9a9a;
      transition: all 0.3s ease;
    }

    .vetbox-interlinking-red a:hover {
      background-color: #ffebee;
      color: #8e0000;
    }

    /* Adorno de advertencia en la esquina superior derecha */
    .vetbox-interlinking-red::before {
      content: "⚠️";
      position: absolute;
      top: 0px;
      right: 0px;
      font-size: 2em;
      z-index: 1;
    }
  }
}

@layer ventajas-negocio {
  .ventajas-negocio {
    background-color: var(--bg-body);
    padding: 1rem 0;
  }
  .ventajas-negocio-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 1rem 2rem;
    background-color: var(--primary-light);
    border-radius: var(--radius-md);
  }
  .ventajas-negocio-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
  }
  .ventajas-negocio-card-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .ventajas-negocio-card-titulo {
    font-weight: 600;
    color: var(--primary-color);
  }
  .ventajas-negocio-card-texto {
    font-size: 0.8rem;
  }
  .ventajas-negocio-card-icon {
    aspect-ratio: 1 / 1;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ventajas-negocio-card-icon .lucide {
    height: 50px;
    width: 50px;
    color: var(--secondary-color);
  }

  @media (max-width: 768px) {
    .ventajas-negocio {
      background-color: var(--primary-light);
    }
    .ventajas-negocio-container {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      padding: 0;
      gap: 1rem;
    }
    .ventajas-negocio-card {
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.5rem;
      border: solid 1px #aec9de;
      border-radius: var(--radius-sm);
    }
    .ventajas-negocio-card-info {
      text-align: center;
    }
    .ventajas-negocio-card-icon {
      width: 60px;
    }
    .ventajas-negocio-card-texto {
      display: none;
    }
    .ventajas-negocio-card-titulo {
      font-size: 0.8rem;
    }

    .ventajas-negocio-card-icon .lucide {
      height: 40px;
      width: 40px;
    }
  }
}
@layer tarjetas-de-contacto {
  /* --- SECCIÓN DE CONTACTO VETBOX --- */
  .contacto-vetbox {
    padding-block: 1rem;
    background-color: var(--bg-body);
  }

  .contacto-vetbox-container {
    display: grid;
    /* Configuración Grid Responsiva Inteligente */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  /* --- TARJETAS COMPONENTES --- */
  .contacto-vetbox-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    padding: 2.5rem;

    /* Flexbox vertical para asegurar que todo se estire igual si un texto es más largo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Cabecera de la Tarjeta */
  .contacto-vetbox-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 1.25rem;

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--primary-color);
      line-height: 1.4;
      margin: 0; /* Limpiamos márgenes */
    }
  }

  /* Contenedor del Icono SVG */
  .contacto-vetbox-icon {
    background-color: rgba(
      0,
      166,
      166,
      0.1
    ); /* 10% de tu color secundario menta */
    color: var(--secondary-color);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Evita que el SVG se deforme */
  }

  /* Cuerpo de la Tarjeta */
  .contacto-vetbox-body {
    display: flex;
    flex-direction: column;
    height: 100%; /* Estira el bloque interior */

    p {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-block-start: 0;
      margin-block-end: 2rem; /* Separa el párrafo de los botones */
    }
  }

  /* Contenedor de Botones y Links */
  .contacto-vetbox-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: auto; /* Empuja las acciones al fondo de la tarjeta */
    /* Ajustes estructurales pequeños para tus botones globales */
    .cta-outline {
      width: 100%;
      padding: 0.75rem 1.5rem; /* Ajuste sutil de padding interno para tarjetas */
      font-size: 0.95rem;
    }
  }

  @media (max-width: 1024px) {
    .contacto-vetbox-container {
      /* En tablets medianas cambia a dos columnas */
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* La tercera tarjeta se estira al 100% abajo para armonizar el espacio */
    .contacto-vetbox-card:nth-child(3) {
      grid-column: span 2;
    }
  }

  @media (max-width: 768px) {
    .contacto-vetbox {
      padding-block: 3rem;
    }

    .contacto-vetbox-container {
      /* En teléfonos colapsa completamente a una sola columna */
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .contacto-vetbox-card:nth-child(3) {
      grid-column: span 1;
    }

    .contacto-vetbox-card {
      padding: 1.75rem; /* Reducimos un pelo el padding para pantallas chicas */
    }
  }
}

@layer contacto {
  .contacto {
    background-color: var(--bg-body);
  }
  .contacto-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }
  .contacto-form {
    background-color: var(--bg-lime);
    padding: 2rem;
    border-radius: var(--radius-sm);
  }

  @media (max-width: 768px) {
    .contacto-container {
      grid-template-columns: 1fr;
    }
  }
}

@layer mi-cuenta {
  /* ==========================================
   MI CUENTA - ESTILOS UNIFICADOS (BENTO TABS)
   ========================================== */

  /* Contenedor General */
  .mi-cuenta {
    background-color: var(--bg-body);
  }
  .mi-cuenta-container {
    padding: 2rem 0;
  }

  /* 1. NAVEGACIÓN (Tabs Layout) */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    background: transparent; /* Importante para que luzcan como piezas separadas */
    border: none;
    box-shadow: none;
  }

  .woocommerce-MyAccount-navigation-link {
    flex: 1 1 auto;
    border: none !important; /* Limpieza de estilos de lista anteriores */
  }

  .woocommerce-MyAccount-navigation-link a {
    display: block;
    background: #ffffff;
    padding: 0.8rem 1.5rem !important;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    transition: all 0.3s ease;
  }

  /* Estado: Hover */
  .woocommerce-MyAccount-navigation-link:not(.is-active):hover a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
  }

  /* Estado: Activo (Pestaña resaltada) */
  .woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }

  /* Estilo especial para el link de Salir */
  .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #e74c3c;
  }

  /* 2. CONTENIDO (Caja Bento) */
  .woocommerce-MyAccount-content {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    color: var(--mp-texto);
    line-height: 1.6;
  }

  /* Enlaces dentro del contenido */
  .woocommerce-MyAccount-content a {
    color: var(--secondary-color);
    text-decoration: underline;
    font-weight: 600;
  }

  .woocommerce-MyAccount-content a:hover {
    color: var(--secondary-color);
    text-decoration: none;
  }

  /* Resaltado de nombres y botones internos */
  .woocommerce-MyAccount-content strong {
    color: var(--ecot-verde-o);
  }

  .woocommerce-MyAccount-content .button {
    background-color: var(--mp-amarillo);
    color: var(--mp-azul) !important;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    border: none;
  }

  .woocommerce-MyAccount-content .button:hover {
    background-color: var(--mp-azul);
    color: var(--mp-amarillo);
  }

  /* 3. RESPONSIVE (Scroll horizontal en móviles) */
  @media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 15px;
      margin: 0 -15px; /* Para que el scroll llegue al borde de la pantalla */
      padding-left: 15px;
      padding-right: 15px;
    }

    .woocommerce-MyAccount-navigation ul {
      flex-wrap: nowrap;
      width: max-content;
    }

    .woocommerce-MyAccount-content {
      padding: 1.5rem;
    }
  }
}
@layer modulo-texto-destacado {
  .texto-destacado {
    background-color: var(--bg-lime);
    padding: 1.7rem 0;
    color: var(--primary-color);
  }
  .texto-destacado-container {
    align-items: center;
    text-align: center;
  }
  .texto-destacado span {
    font-size: clamp(1.3rem, 1rem + 1.25vw, 1.8rem);
  }
  .texto-destacado p {
    font-size: 1.2rem;
  }
}
@layer hero-home-6 {
  .hero-home-6 {
    background-color: var(--primary-color);
    overflow: hidden;

    position: relative;
  }
  .hero-home-6-container {
    padding: 3rem 0;
    gap: 20rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .hero-home-6-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: start;
    z-index: 10;
  }

  .hero-home-6 img {
    max-width: 600px;
    position: absolute;
    bottom: -200px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-home-6-info h1 {
    font-size: 1rem;
    color: var(--bg-lime);
    font-family: "Open Sans";
    text-align: left;
  }
  .hero-home-6-info h2,
  .hero-home-6 span {
    color: var(--text-white);
    text-wrap: balance;
  }
  .hero-home-6 h2 {
    font-size: 2.5rem;
  }
  .hero-home-6-botones {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  .color-2 {
    color: var(--secondary-color) !important;
  }
  .hero-home-6-cards-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    z-index: 10;
  }
  .hero-home-6-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    border-radius: var(--radius-md);
    background-color: white;
    align-items: center;
    justify-self: center;
    width: 100%;
  }
  .hero-home-6-card span {
    color: var(--text-main);
    text-align: center;
  }

  .hero-home-6-card a {
    font-weight: 800;
    color: var(--primary-color);
  }

  .hero-home-6-card a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @media (max-width: 768px) {
    .hero-home-6-container {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 1rem 0;
    }
    .hero-home-6 img {
      max-width: 500px;
      position: absolute;
      top: 0;
      margin-right: -100px;
    }
    .hero-home-6 .cta-outline-2 {
      display: none;
    }
    .hero-home-6-info {
      max-width: 60%;
      gap: 1rem;
    }

    .hero-home-6 h2 {
      font-size: 1.5rem;
    }
    .hero-home-6-card {
      gap: 0;
      padding: 10px;
    }
    .hero-home-6-card span {
      display: none;
    }

    .hero-home-6-card a {
      font-size: 15px;
      font-weight: 400;
    }
    .hero-home-6-cards-container {
      gap: 10px;
      padding: 5px;
    }
  }
}
@layer publicidad-blog {
  .banner-publicidad-1-container {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: var(--secondary-color);
    color: white;
    padding: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
  }
  .banner-publicidad-1-container a {
    border: solid 1px var(--secondary-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 1rem;
  }

  .banner-publicidad-1-container a:hover {
    border-color: var(--text-white);
  }
  .banner-publicidad-1-container img {
    height: 250px;
  }
  .banner-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 1.2rem;
    user-select: none;
  }
  .banner-summary::-webkit-details-marker {
    display: none; /* Clon para Safari */
  }
  .banner-summary::before {
    content: "▼"; /* Puedes dejar solo la "▼" si prefieres */
    color: var(--text-white);
  }
  .banner-details[open] .banner-summary::before {
    content: "✕"; /* Cambia a la X cuando se despliega */
    color: var(--accent-color); /* Opcional: un color rojo para la X */
  }
  @media (max-width: 768px) {
    .banner-publicidad-1-container img {
      height: auto;
    }
  }
}